* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background: #111111;
}

/* Reserves the scrollbar's gutter permanently, whether or not a
   scrollbar is actually showing, so toggling overflow:hidden (the site
   menu's scroll lock, below) never changes the viewport's usable width.
   Without this, locking scroll removes the scrollbar and widens that
   width — which visibly shifted right-anchored header content (the menu
   trigger) by the scrollbar's own width at the exact moment the menu
   opened, and did it inconsistently between the trigger (position:
   absolute, sized off that width) and the panel (position:fixed, sized
   off the true viewport instead), throwing their alignment off too. */
html {
    scrollbar-gutter: stable;
}

    /* Background-scroll lock while the site menu is open — Lenis (see
   smoothScroll.js) is stopped/started in JS alongside this class since it
   animates native scroll itself and wouldn't otherwise respect
   overflow:hidden here. */
    html.has-open-menu {
        overflow: hidden;
    }

/* ---------- Header / Hero section ---------- */

.header {
    position: relative;
    /* min-height (not a fixed height) so the box can grow taller than the
     viewport when content needs more room than that — on short/landscape
     viewports the arc + hero text can need more vertical space than
     max(100vh, 40rem) provides, and a fixed height + overflow:hidden
     would silently clip the bottom of the player controls instead of
     just letting the page scroll a little further to reveal them. */
    min-height: max(100vh, 40rem);
    width: 100%;
    background: #111111;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header__video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.header__video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    pointer-events: none;
}

/* ---------- Arc carousel ---------- */

/* No clipping — the full ring always renders, matching the Figma
   reference. Text stays legible over any card behind it purely via
   z-index (.header__hero is 3, this is 1), the same way the source file
   lets peripheral cards (vinyl, sheet music) tuck behind the paragraph. */
.header__arc-mask {
    position: absolute;
    inset: 0;
    overflow: visible;
    z-index: 1;
    pointer-events: none;
}

.header__arc {
    position: absolute;
    inset: 0;
}

.arc-card {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 1.375rem;
    overflow: hidden;
    background: #d9d9d9;
    will-change: transform, opacity;
    transition: transform 900ms cubic-bezier(0.65, 0, 0.35, 1), opacity 900ms ease;
}

    .arc-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* ---------- Nav / logo ---------- */

.header__nav {
    position: relative;
    /* Above every other header layer (.header__now-pill reaches z-index:500
     during its arc-carousel float) so the site-menu panel nested inside
     isn't trapped under a sibling with a higher local stacking value. */
    z-index: 600;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 5.125rem;
}

    .header__nav .site-menu-wrap {
        right: 5.125rem;
        /* matches this header's own side padding */
    }

.header__logo {
    height: 3.5rem;
    width: auto;
}

/* ---------- Now Playing pill (fixed, above the front card) ---------- */

.header__now-pill {
    /* top/left are set by ArcCarousel (js/arcCarousel.js) each update, computed
     from the same math as the front card, so the two never drift apart. */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 500;
    padding: 0.875rem 1.125rem;
    border-radius: 2.375rem;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(0.375rem);
    color: #fff;
    font-family: "Encode Sans Condensed", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    transition: transform 900ms cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Hero content ---------- */

.header__hero {
    position: relative;
    z-index: 3;
    flex: 1 0 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0 5.375rem 0;
}

.header__hero-inner {
    display: flex;
    width: 100%;
    max-width: 60%;
    flex-direction: column;
    justify-content: flex-end;
    align-items: start;
}

.header__hero-content-container {
    display: flex;
    min-width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    align-self: stretch;
}

.header__hero-content {
    width: 100%;
    max-width: 37.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    align-items: start;
}

.header__paragraph {
    width: 45%;
    max-width: 100%;
    text-align: justify;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 100;
    font-size: 1rem;
    line-height: 1.5;
    color: #ffffff;
}

.header__heading {
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    line-height: 0.86;
    text-transform: uppercase;
}

.header__heading-line {
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 400;
    font-size: clamp(3rem, 12vw, 6rem);
    color: #ffffff;
    text-align: left;
    width: 100%;
}

.header__heading-line--accent {
    font-weight: 900;
    color: #edb959;
    text-align: right;
}

/* ---------- Player controls ---------- */

.header__player {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem;
    border-radius: 0.5rem 0.5rem 1px 1px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(1.2px);
    flex-direction: row;
    width: auto;
    margin-top: 2.5rem;
}

.header__player-nav {
    display: flex;
    gap: 0.5625rem;
    height: 100%;
}

.header__player-btn {
    height: 3rem;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .header__player-btn img {
        width: 100%;
        height: 100%;
        transition: transform 150ms ease;
    }

    .header__player-btn:hover img {
        transform: scale(1.08);
    }

.header__now-playing {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.375rem;
    background: rgba(15, 15, 15, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.header__now-playing-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    color: #ffffff;
    white-space: nowrap;
    width: 100%;
}

.header__song-name {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 600;
    font-size: 0.8125rem;
}

.header__song-artist {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 100;
    font-size: 0.625rem;
}

.header__divider {
    width: 1px;
    align-self: stretch;
    background: rgba(255, 255, 255, 0.3);
}

.header__play-btn {
    width: 1.875rem;
    height: 1.875rem;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .header__play-btn img {
        width: 100%;
        height: 100%;
        transition: transform 150ms ease;
    }

    .header__play-btn:hover img {
        transform: scale(1.2);
    }

/* ---------- Mobile ----------
  48em == 768px at the default 16px root, but expressed in em so it
   also responds to the browser's text-zoom / user font-size setting, not
   just raw viewport width in device pixels. */

@media (max-width: 48em) {
    .header__nav {
        padding: 1rem 1.5rem;
    }

        .header__nav .site-menu-wrap {
            right: 1.5rem;
        }

    .header__logo {
        height: 2.5rem;
    }

    .header__now-pill {
        padding: 0.75rem 1.125rem;
        font-size: 0.75rem;
    }

    .header__hero {
        padding: 0 1.5rem 0;
    }

    .header__hero-inner {
        max-width: 100%;
        align-items: center;
    }

    .header__hero-content {
        max-width: 100%;
        align-items: start;
        margin-left: 0;
    }

    .header__paragraph {
        width: 50%;
        font-size: 0.75rem;
        text-align: left;
    }

    .header__heading-line {
        font-size: clamp(2.375rem, 20vw, 4rem);
    }

    .header__player {
        width: 100%;
        margin-top: 1rem;
        justify-content: center;
        align-items: center;
        flex-direction: row;
    }

    .header__now-playing {
        flex: 1 0 0;
    }

    .header__song-name {
        font-size: 0.75rem;
    }

    .header__song-artist {
        font-size: 0.5625rem;
    }
}

/* ---------- About section ----------
   Three distinct compositions from Figma (not a smooth interpolation like
   the header arc — the heading font-size and row layout jump between
   fixed values at each breakpoint): Desktop 1514w (base rules below),
   Tablet 744w (<=94.5625em / 1513px), Mobile 390w (<=47.9375em / 767px).
   The tablet cutoff sits right below the Desktop reference frame's own
   width (1514px) — the desktop row uses fixed (non-fluid) pixel widths
   for the image/text-grid that add up to ~1403px plus centered header
   content, so it needs the full 1514px+ to avoid overflowing; the tablet
   layout is fluid (flex: 1 image) and comfortably scales across the gap.
   The tablet rules apply through the mobile range too until the mobile
   block (declared after, same specificity) overrides them. */

.about {
    width: 100%;
    background: #dbdbdb;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5.125rem;
    /* 82px */
    padding-top: 5.125rem;
    /* 82px */
}

.about__header {
    width: 100%;
    max-width: 68.063rem;
    /* 1025px */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about__heading {
    margin: 0;
    width: 100%;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    text-transform: uppercase;
    font-style: normal;
}

.about__heading--narrow {
    display: none;
}

.about__heading-line {
    display: block;
    width: 100%;
    font-size: 6rem;
    /* 96px */
    line-height: 1.22;
    text-align: left;
}

.about__heading-line--center {
    text-align: center;
}

.about__heading-line--bold {
    font-weight: 900;
    color: #000000;
}

.about__heading-line--regular {
    font-weight: 400;
    color: #1e1e1e;
}

.about__heading-row {
    display: flex;
    align-items: center;
    gap: 2.1875rem;
    /* 35px */
    width: 100%;
    font-size: 6rem;
    line-height: 1.22;
}

.about__heading-cta-label {
    font-size: 6rem;
    white-space: nowrap;
}

.pill-cta {
    display: inline-flex;
    position: relative;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    /* 10px */
    padding: 1rem 1.875rem;
    /* 16px 30px */
    border: 1px solid #000000;
    border-radius: 2.5625rem;
    /* 41px */
    background: #edb959;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
}

    /* Hover fill: a circle grows from a small dot hidden below the pill into
   one big enough to fully cover the button at any width (30rem diameter,
   centered — comfortably bigger than the widest pill's diagonal), swapping
   the perceived background from gold to #2a2a2a without animating a color
   directly. Sized generously rather than to the Figma-exact 273px/-157.5px
   figures: at that size the circle's edge fell short of the desktop
   button's bottom corners since it isn't vertically centered on the pill,
   leaving slivers of gold visible on hover. */
    .pill-cta::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 3.84375rem;
        /* 61.5px */
        width: 3.375rem;
        /* 54px */
        height: 3.375rem;
        border-radius: 50%;
        background: #2A2A2A;
        transform: translate(-50%, 0%);
        transition: width 420ms cubic-bezier(0.65, 0, 0.35, 1), height 420ms cubic-bezier(0.65, 0, 0.35, 1), top 420ms cubic-bezier(0.65, 0, 0.35, 1), transform 420ms cubic-bezier(0.65, 0, 0.35, 1);
        pointer-events: none;
    }

    .pill-cta:hover::before,
    .pill-cta:focus-visible::before {
        top: 50%;
        width: 30rem;
        /* 480px */
        height: 30rem;
        transform: translate(-50%, -50%);
    }

.pill-cta__text {
    position: relative;
    z-index: 1;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 600;
    font-size: 1.625rem;
    /* 26px */
    line-height: 1.03;
    /* Figma's leading-[1.03] — without this the Tailwind
    CDN's global `html{line-height:1.5}` preflight inherits in instead,
    inflating the pill's height well past the design's ~62px. */
    color: #000000;
    white-space: nowrap;
    transition: color 420ms ease;
}

.pill-cta__icon {
    position: relative;
    z-index: 1;
    width: 1.414rem;
    /* 22.6px */
    height: 1.211rem;
    /* 19.4px */
    transform: rotate(-45deg);
    transition: filter 420ms ease;
}

.pill-cta:hover .pill-cta__text,
.pill-cta:focus-visible .pill-cta__text {
    color: #ffffff;
}

.pill-cta:hover .pill-cta__icon,
.pill-cta:focus-visible .pill-cta__icon {
    /* The icon is a baked-in #2a2a2a SVG, not currentColor — force it to
     pure white the same way the design swaps the arrow asset on hover. */
    filter: brightness(0) invert(1);
}

.about__row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6.25rem;
    /* 100px */
}

.about__image {
    flex-shrink: 0;
    width: 48.5625rem;
    /* 777px */
    height: 29.4375rem;
    /* 471px */
    border-top-right-radius: 0.625rem;
    /* 10px */
    overflow: hidden;
    background: #d9d9d9;
}

    .about__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.about__text-grid {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 16.4375rem 16.4375rem;
    /* 263px each */
}

.about__paragraph {
    margin: 0;
    align-self: end;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 100;
    font-size: 1rem;
    line-height: 1.5;
    text-align: justify;
    color: #000000;
}

.about__paragraph--1 {
    grid-column: 1;
    grid-row: 1;
    width: 16.4375rem;
    /* 263px */
}

.about__paragraph--2 {
    grid-column: 2;
    grid-row: 2;
    width: 14.6875rem;
    /* 235px */
}

/* ---------- About: Tablet (744w reference, applies <=1513px) ---------- */

@media (max-width: 94.5625em) {
    .about__header {
        max-width: none;
        padding: 0 2rem;
        /* 32px */
    }

    .about__heading-line,
    .about__heading-row,
    .about__heading-cta-label {
        font-size: 3rem;
        /* 48px */
        line-height: 1;
    }

    .about__heading-row {
        gap: 1rem;
        /* 16px */
    }

    .pill-cta {
        padding: 0.625rem 1.375rem;
        /* 10px 22px */
    }

    .pill-cta__text {
        font-size: 1rem;
        /* 16px */
    }

    .about__row {
        gap: 2.625rem;
        /* 42px */
        padding-right: 2rem;
        /* 32px */
    }

    .about__image {
        width: 50%;
        height: auto;
        /* clears the base rule's fixed 471px — align-self:stretch
      only fills the cross-axis when height is auto, it doesn't override
      an explicit height the way the old height:stretch value did */
        flex: 1 1 0;
        align-self: stretch;
        /* matches the text column's height — the CSS
      height:stretch keyword did the same thing here (Chromium supports
      it), but align-self:stretch is universally-supported flexbox
      instead of a sizing keyword Safari/Firefox handle inconsistently */
    }

    .about__text-grid {
        width: 50%;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        /* 16px */
    }

    .about__paragraph--1 {
        width: 50%;
        /* 263px */
        align-self: start;
    }

    .about__paragraph--2 {
        width: 50%;
        /* 263px */
        align-self: end;
    }
}

/* ---------- About: Desktop Small / Tablet Landscape (1024-1513px) ----------
   No Figma frame covers this range. The Tablet heading above jumps straight
   from 48px to the Desktop block's 96px right at the 1514px cutoff — fine
   at the 744px reference it was built for, but a jarring 2x jump for real
   laptop widths in between. Steps it up to 72px here; the row layout itself
   (fluid 50/50 image/text split) already scales cleanly and doesn't need
   changing, see the comment at the top of the About section. */
@media (min-width: 64em) and (max-width: 94.5625em) {

    .about__heading-line,
    .about__heading-row,
    .about__heading-cta-label {
        font-size: 4.5rem;
        /* 72px */
    }

    .about__heading-row {
        gap: 1.5rem;
        /* 24px */
    }

    .pill-cta {
        padding: 0.875rem 1.75rem;
        /* 14px 28px */
    }

    .pill-cta__text {
        font-size: 1.25rem;
        /* 20px */
    }
}

/* ---------- About: Mobile (390w reference, applies <=743px) ----------
   Cut off just below the Tablet reference frame's own width (744px) —
   unlike the header, which shares one 767px cutoff between its JS-driven
   arc/text sizing and its CSS structural switch, this section's Tablet
   composition (row layout, 3-line heading) is a real structural match for
   the Tablet frame, not just a scaled-down Mobile stack. So the boundary
   has to sit at the Tablet frame's own edge, not the header's 767px. */

@media (max-width: 46.4375em) {
    .about {
        gap: 2.25rem;
        /* 36px */
        padding: 2.125rem 1.5rem;
        /* 34px 24px */
    }

    .about__header {
        padding: 0;
        align-items: stretch;
    }

    .about__heading--wide {
        display: none;
    }

    .about__heading--narrow {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.625rem;
        /* 10px */
    }

    .about__heading-flow {
        margin: 0;
        width: 100%;
        font-family: "Fira Sans Extra Condensed", sans-serif;
        text-transform: uppercase;
        font-size: 2.25rem;
        /* 36px */
        line-height: 1.22;
    }

    .about__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2.3125rem;
        /* 37px */
        padding-right: 0;
    }

    .about__image {
        flex: none;
        width: 100%;
        height: 16.0625rem;
        /* 257px */
    }

    .about__text-grid {
        display: contents;
    }

    .about__paragraph--1,
    .about__paragraph--2 {
        width: 100%;
    }
}

/* ---------- Featured Artist section ----------
   Two entirely different compositions, not a scaled interpolation:
   - Base rules below = Tablet AND Mobile share this literally (identical
     181.637px card widths, gaps, and captions in Figma at both 744w and
     390w) — a horizontally-scrollable row under a centered heading, more
     or fewer cards visible depending on viewport width.
   - Desktop (>=94.625em / 1514px, the complementary threshold to the
     About section's <=94.5625em Tablet cutoff, so the two never overlap)
     replaces it with Figma's absolute-positioned staggered grid plus a
     sticky heading/CTA block that stays pinned near the top of the
     viewport while the section's extra-tall 1972px canvas scrolls past —
     built by making .featured itself the tall positioned container, and
     .featured__pin a position:sticky child within it. */


/* ---------- Core Layout Styles (All Devices) ---------- */
.featured {
    position: relative;
    width: 100%;
    background: #111111;
    padding: 6rem 1.5rem;
    box-sizing: border-box;
    /* FIX: Turns the parent container into a single-cell layout stack. 
     This lets both children overlay each other flawlessly without breaking the box constraints. */
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
}

/* Sticky Pin Container for Heading Elements */
.featured__pin {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 25vh;
    /* Standard viewport catch position */
    z-index: 10;
    width: 100%;
    max-width: 474px;
    margin: 0 auto;
    pointer-events: none;
    /* Allows scrolling interactions right through empty areas */
    /* FIX: Negative margins removed. The stacking grid handles overlapping now. */
}

.featured__heading-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    pointer-events: auto;
    /* Re-enables clicking for CTAs inside the block */
}

.featured__heading-line {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 400;
    font-size: clamp(3rem, 8vw, 6rem);
    /* Fully scalable typography sizes */
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.featured__heading-line--accent {
    font-weight: 700;
    color: #edb959;
}

.featured__artist-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: -0.5rem;
}

.featured__cta {
    transform: scale(0.9);
}

/* Fluid, Multi-Column Staggered Track Layout */
.featured__grid {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Shared 2-column configuration down to mobile viewports */
    gap: 2rem 1.5rem;
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
    /* FIX: Changed padding-top to give the header room at the beginning, 
     and balanced padding-bottom so the entire heading block fits safely when it rests at the base. */
    padding: 15vh 0;
}

/* Base Card Configurations */
.featured__card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    will-change: transform;
    /* Hinting hardware acceleration for scrolling layers */
}

.featured__card-img {
    width: 100%;
    aspect-ratio: 2 / 3;
    /* Fluid aspect matches layout templates elegantly */
    border-radius: 0.5rem;
    overflow: hidden;
    background: #d9d9d9;
}

    .featured__card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.featured__card-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.featured__card-label {
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 600;
    font-size: clamp(1.1rem, 2vw, 2.35rem);
    line-height: 1.2;
    color: #ffffff;
}

.featured__card-dot {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #5f5e5e;
}

/* ---------- Responsive Staggering Shifts (Parallax Engine) ---------- */

/* Track 1 adjustments (Left Column) */
.featured__card--1 {
    grid-column: 1;
    margin-top: 0;
}

/* Track 2 adjustments (Right Column) - Shifted downward */
.featured__card--2 {
    grid-column: 2;
    margin-top: 8rem;
}

/* Track 3 adjustments (Left Column) - Pushed down for overlap space */
.featured__card--3 {
    grid-column: 1;
    margin-top: 4rem;
}

/* Track 4 adjustments (Right Column) - Shifted down aggressively */
.featured__card--4 {
    grid-column: 2;
    margin-top: 12rem;
}

/* ---------- Large Viewport Visual Adjustments (Scales cleanly from 1024px+) ---------- */
@media (min-width: 64em) {
    .featured {
        padding: 8rem 2rem;
    }

    .featured__grid {
        gap: 4rem 3rem;
        padding: 30vh 0;
    }

    .featured__card--2 {
        margin-top: 15rem;
    }

    .featured__card--3 {
        margin-top: 8rem;
    }

    .featured__card--4 {
        margin-top: 22rem;
    }

    .featured__card-dot {
        width: 24px;
        height: 24px;
    }
}




/* Shared minimal-scrollbar + click-and-drag styling for every
   horizontally-overflowing card row (Featured Artist, Blog) — the drag
   itself is wired up in js/main.js (enableDragScroll), which toggles
   .is-dragging on pointerdown/up. */
.featured__grid,
.blog__grid,
.career-life__grid,
.aboutus-companies__grid-wrapper {
    cursor: grab;
    scrollbar-width: thin;
    /* Firefox */
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    /* Firefox */
}

    .featured__grid.is-dragging,
    .blog__grid.is-dragging,
    .career-life__grid.is-dragging,
    .aboutus-companies__grid-wrapper.is-dragging {
        cursor: grabbing;
        user-select: none;
        /* dragging shouldn't also select card text */
        scroll-snap-type: none;
        /* don't fight the manual scrollLeft mid-drag */
    }

    .featured__grid::-webkit-scrollbar,
    .blog__grid::-webkit-scrollbar,
    .career-life__grid::-webkit-scrollbar,
    .aboutus-companies__grid-wrapper::-webkit-scrollbar {
        height: 0.375rem;
        /* 6px */
    }

    .featured__grid::-webkit-scrollbar-track,
    .blog__grid::-webkit-scrollbar-track,
    .career-life__grid::-webkit-scrollbar-track,
    .aboutus-companies__grid-wrapper::-webkit-scrollbar-track {
        background: transparent;
    }

    .featured__grid::-webkit-scrollbar-thumb,
    .blog__grid::-webkit-scrollbar-thumb,
    .career-life__grid::-webkit-scrollbar-thumb,
    .aboutus-companies__grid-wrapper::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 999px;
    }

        .featured__grid::-webkit-scrollbar-thumb:hover,
        .blog__grid::-webkit-scrollbar-thumb:hover,
        .career-life__grid::-webkit-scrollbar-thumb:hover,
        .aboutus-companies__grid-wrapper::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.5);
        }

    .featured__grid img,
    .blog__grid img,
    .career-life__grid img,
    .aboutus-companies__grid-wrapper img {
        -webkit-user-drag: none;
        /* don't let the browser start its own native
    "drag this image out" gesture and fight our scroll-drag */
        user-drag: none;
    }


/* ---------- Our Ventures section ----------
   Base rules below = Mobile (390w reference): grid centered, 3-col x 2-row
   tile layout, heading above copy, paragraphs cleanly stacked (16px gap).
   Tablet (>=46.5em / 744px) keeps the same 3x2 tile grid and heading-above-
   copy order but right-aligns the grid and switches the copy to Figma's
   overlap trick (a negative margin pulling the second paragraph up under
   the first, rather than a plain gap) — reproduced with real margins
   instead of literally duplicating Figma's hidden-placeholder columns.
   Desktop (>=94.625em / 1514px, matching the established cutoff used by
   the About and Featured sections for their own 1514w references) is a
   different composition entirely: a side-by-side row, a 2-col x 3-row
   tile grid, and the heading BELOW the copy (reversed via
   flex-direction:column-reverse rather than duplicate markup). */

.ventures {
    position: relative;
    width: 100%;
    background: #ececec;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 2rem 1.5rem;
    /* 32px 24px */
}

.ventures__grid {
    flex-shrink: 0;
    margin-bottom: 2.625rem;
    /* 42px */
    display: grid;
    grid-template-columns: repeat(3, 7.15681rem);
    /* 114.509px */
    grid-template-rows: repeat(2, 7.54019rem);
    /* 120.643px */
}

.ventures__tile {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.26);
    border: 1px solid #c2c2c2;
}

.ventures__tile--barcode {
    grid-column: 1;
    grid-row: 1;
}

.ventures__tile--collab {
    grid-column: 3;
    grid-row: 1;
}

.ventures__tile--entertainment {
    grid-column: 2;
    grid-row: 2;
}

/* Each logo asset is exported oversized with the mark sitting somewhere
   inside a plain white canvas — Figma crops to just the mark by rendering
   the image at a fixed percentage size/offset inside an overflow:hidden
   box. Those percentages (below) are identical at every breakpoint; only
   the crop box's own size changes per breakpoint, further down. */
.ventures__tile-crop {
    position: relative;
    overflow: hidden;
}

    .ventures__tile-crop img {
        position: absolute;
        max-width: none;
    }

.ventures__tile--collab .ventures__tile-crop {
    width: 2.54731rem;
    /* 40.757px */
    height: 3.02876rem;
    /* 48.460px */
}

    .ventures__tile--collab .ventures__tile-crop img {
        width: 343.51%;
        height: 208.33%;
        left: -121.76%;
        top: -54.17%;
    }

.ventures__tile--entertainment .ventures__tile-crop {
    width: 3.60644rem;
    /* 57.703px */
    height: 2.84425rem;
    /* 45.508px */
}

    .ventures__tile--entertainment .ventures__tile-crop img {
        width: 266.27%;
        height: 244.36%;
        left: -83.14%;
        top: -72.18%;
    }

.ventures__tile--barcode .ventures__tile-crop {
    width: 3.85566rem;
    /* 61.689px */
    height: 1.13321rem;
    /* 18.131px */
}

    .ventures__tile--barcode .ventures__tile-crop img {
        width: 178.62%;
        height: 455%;
        left: -39.31%;
        top: -177.5%;
    }

.ventures__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    /* 32px — constant across every breakpoint */
}

.ventures__heading {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    /* constant ratio at every breakpoint's size */
    color: #1e1e1e;
}

.ventures__heading-line {
    display: block;
    font-size: 2rem;
    /* 32px */
    line-height: 1.0625;
    /* 34/32 */
}

.ventures__heading-line--accent {
    font-weight: 800;
    /* Figma: Fira Sans Extra Condensed ExtraBold — was
    approximated as 900 (Black) before this weight was loaded */
    color: #edb959;
}

.ventures__copy {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.ventures__para {
    margin: 0;
    width: 20.9375rem;
    /* 335px */
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 100;
    /* kept consistent with the site's other body-copy
    text (header/about paragraphs), rather than Figma's per-instance
    Thin/Light/Regular labels */
    font-size: 1rem;
    /* 16px */
    color: #1e1e1e;
}

    .ventures__para p {
        margin: 0 0 1.75rem 0;
        /* 28px, matches the 28px line-height gap Figma
    puts between the two paragraphs inside each block */
        line-height: 1.75;
        /* 28/16 */
        text-align: justify;
    }

        .ventures__para p:last-child {
            margin-bottom: 0;
        }

.ventures__para--1 {
    margin-bottom: 1rem;
    /* 16px clean gap on mobile, no overlap trick */
}

/* ---------- Ventures: Tablet-and-up (744w reference) ---------- */

@media (min-width: 46.5em) {
    .ventures {
        align-items: flex-end;
        padding: 2rem;
        /* 32px */
    }

    .ventures__grid {
        grid-template-columns: repeat(3, 9.92125rem);
        /* 158.74px */
        grid-template-rows: repeat(2, 10.4527rem);
        /* 167.243px */
        margin-bottom: -5.375rem;
        /* -86px overlap into the content block */
    }

    .ventures__tile--collab .ventures__tile-crop {
        width: 3.53125rem;
        /* 56.5px */
        height: 4.19869rem;
        /* 67.179px */
    }

    .ventures__tile--entertainment .ventures__tile-crop {
        width: 4.99944rem;
        /* 79.991px */
        height: 3.94294rem;
        /* 63.087px */
    }

    .ventures__tile--barcode .ventures__tile-crop {
        width: 5.34475rem;
        /* 85.516px */
        height: 1.57094rem;
        /* 25.135px */
    }

    .ventures__heading-line {
        font-size: 3rem;
        /* 48px */
        line-height: 1;
    }

    .ventures__para--1 {
        width: 19.4375rem;
        /* 311px */
        margin-left: auto;
        /* right-aligns within the 681px column */
        margin-bottom: -8.75rem;
        /* -140px — pulls para--2 up to overlap */
    }

    .ventures__para--2 {
        width: 20.375rem;
        /* 326px */
    }
}

/* ---------- Ventures: Desktop Small / Tablet Landscape (1024-1513px) ----------
   No Figma frame covers this range. The Tablet composition above (grid
   stacked above a full-width text block, sized for a 744px reference) was
   verified correct at 744px but left the tiles pinned top-right with a big
   disconnected gap before the copy started underneath when stretched to
   1024-1513px real laptop widths. Reuses the Desktop row layout instead,
   scaled to ~70% since there's no exact reference to match — same approach
   as the About Us page's own Tablet Landscape / Desktop Small tier. */
@media (min-width: 64em) and (max-width: 94.5625em) {
    .ventures {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 8.125rem;
        /* 130px */
        padding: 3rem;
    }

    .ventures__grid {
        margin-bottom: 0;
        grid-template-columns: repeat(2, 9.75rem);
        /* 156px */
        grid-template-rows: repeat(3, 10.25rem);
        /* 164px */
    }

    .ventures__tile--collab {
        grid-column: 1;
        grid-row: 1;
    }

    .ventures__tile--entertainment {
        grid-column: 2;
        grid-row: 2;
    }

    .ventures__tile--barcode {
        grid-column: 1;
        grid-row: 3;
    }

    .ventures__tile--collab .ventures__tile-crop {
        width: 3.4375rem;
        /* 55px */
        height: 4.125rem;
        /* 66px */
    }

    .ventures__tile--entertainment .ventures__tile-crop {
        width: 4.875rem;
        /* 78px */
        height: 3.875rem;
        /* 62px */
    }

    .ventures__tile--barcode .ventures__tile-crop {
        width: 5.25rem;
        /* 84px */
        height: 1.5rem;
        /* 24px */
    }

    .ventures__content {
        width: 30rem;
        /* 480px */
        flex-direction: column-reverse;
        align-items: center;
    }

    .ventures__heading {
        width: 20.5625rem;
        /* 329px */
    }

    .ventures__heading-line {
        font-size: 4rem;
        /* 64px */
        line-height: 1.05;
    }

    .ventures__copy {
        display: grid;
        grid-template-columns: repeat(2, 14.6875rem);
        /* 235px each */
        column-gap: 1.25rem;
        /* 20px */
    }

    .ventures__para--1 {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        width: auto;
        margin-bottom: 0;
    }

    .ventures__para--2 {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
        width: auto;
        margin-top: -4.875rem;
        /* -78px overlap */
    }
}

/* ---------- Ventures: Desktop (1514w reference) ---------- */

@media (min-width: 94.625em) {
    .ventures {
        flex-direction: row;
        align-items: center;
        /* Fixed gap instead of space-between: both children are fixed-width
       (grid 444px, content 698px), so space-between let the gap between
       them keep growing on screens wider than the 1514px reference instead
       of holding the two blocks together. 193px is that natural gap at
       1514px, kept constant rather than left to stretch further. */
        justify-content: center;
        gap: 12.0625rem;
        /* 193px */
        padding: 5.125rem;
        /* 82px */
    }

    .ventures__grid {
        margin-bottom: 0;
        grid-template-columns: repeat(2, 13.875rem);
        /* 222px */
        grid-template-rows: repeat(3, 14.625rem);
        /* 234px */
    }

    .ventures__tile--collab {
        grid-column: 1;
        grid-row: 1;
    }

    .ventures__tile--entertainment {
        grid-column: 2;
        grid-row: 2;
    }

    .ventures__tile--barcode {
        grid-column: 1;
        grid-row: 3;
    }

    .ventures__tile--collab .ventures__tile-crop {
        width: 4.9375rem;
        /* 79px */
        height: 5.875rem;
        /* 94px */
    }

    .ventures__tile--entertainment .ventures__tile-crop {
        width: 7rem;
        /* 112px */
        height: 5.5rem;
        /* 88px */
    }

    .ventures__tile--barcode .ventures__tile-crop {
        width: 7.5rem;
        /* 120px */
        height: 2.17394rem;
        /* 34.783px */
    }

    .ventures__content {
        width: 43.625rem;
        /* 698px */
        flex-direction: column-reverse;
        /* copy visually first, heading below —
      DOM order (heading, then copy) stays the same as tablet/mobile */
        align-items: center;
    }

    .ventures__heading {
        width: 29.375rem;
        /* 470px */
    }

    .ventures__heading-line {
        font-size: 6rem;
        /* 96px */
        line-height: 1.0208;
        /* 98/96 */
    }

    .ventures__copy {
        display: grid;
        grid-template-columns: repeat(2, 20.9375rem);
        /* 335px each */
        column-gap: 1.75rem;
        /* 28px */
    }

    .ventures__para--1 {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        width: auto;
        margin-bottom: 0;
    }

    .ventures__para--2 {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
        width: auto;
        margin-top: -6.9375rem;
        /* -111px overlap */
    }

    .ventures__para {
        font-size: 1.125rem;
        /* 18px on desktop only */
    }
}

/* ---------- Testimonial section ----------
   Base rules below = Mobile (390w reference): everything stacked in one
   column, image width fluid (flex:1, aspect-ratio locked), attribution
   reversed via column-reverse so the quote reads before the name/role row,
   and the name/role sit side-by-side rather than split top/bottom.
   Tablet (>=46.5em / 744px) keeps mobile's overall column stacking for the
   two main blocks, but the image goes back to a fixed 335x367 and the
   attribution switches to the row layout (name/role column + quote side by
   side) that desktop also uses — so tablet is a mix of both neighbors,
   not a clean scale between them.
   Desktop (>=94.625em / 1514px) turns both main blocks into rows
   (image+headline side by side, and heading+attribution side by side) and
   swaps in the hyphenated two-line "TESTIM-/ONIALS" heading instead of the
   single-line "Testimonials" (two markup variants toggled by display,
   same technique as the About section's heading). */

.testimonial {
    width: 100%;
    background: #242424;
    /* flat approximation of #111111 with the Figma
    overlay's rgba(255,255,255,0.08) film blended in */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    /* 48px */
    padding: 2rem;
    /* 32px */
}

.testimonial__top {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem;
    /* 48px */
}

.testimonial__media {
    width: 100%;
    display: flex;
    align-items: flex-start;
}

.testimonial__nav {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5625rem;
    /* 9px */
    padding: 0.58863rem;
    /* 9.418px */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem 0 0 0.5rem;
    /* 8px 8px 1px 0 */
}

.testimonial__nav-btn {
    width: 2.72244rem;
    /* 43.559px */
    height: 2.72244rem;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .testimonial__nav-btn img {
        width: 100%;
        height: 100%;
    }

.testimonial__photo {
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 335 / 367;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #d9d9d9;
}

    .testimonial__photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.testimonial__headline {
    margin: 0;
    width: 100%;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    /* 24px */
    line-height: 1.2;
    color: #ececec;
}

.testimonial__bottom {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem;
    /* 48px */
}

.testimonial__title {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 900;
    font-size: 2rem;
    /* 32px */
    line-height: 1;
    text-transform: uppercase;
    color: #edb959;
}

.testimonial__title--split {
    display: none;
}

    .testimonial__title--split span {
        display: block;
    }

.testimonial__attribution {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    gap: 3rem;
    /* 48px */
}

.testimonial__person {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
    /* 16px */
}

.testimonial__name {
    flex: 1 1 0;
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    /* 24px */
    line-height: 1;
    color: #edb959;
}

.testimonial__role {
    flex-shrink: 0;
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    /* 24px */
    line-height: 1;
    color: #ececec;
}

.testimonial__quote {
    width: 100%;
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 100;
    /* consistent body-copy weight, see .ventures__para */
    font-size: 1.25rem;
    /* 20px */
    line-height: 1.4;
    text-align: justify;
    color: rgba(255, 255, 255, 0.81);
}

/* Applied by js/main.js to the photo/headline/name/role/quote elements
   while switching testimonials — content is swapped underneath while
   faded out, then this class is removed to fade the new content in.
   #testimonial-photo is the <img> itself, not its .testimonial__photo
   wrapper, since that's the element the fade class actually lands on. */
#testimonial-photo,
.testimonial__headline,
.testimonial__name,
.testimonial__role,
.testimonial__quote {
    transition: opacity 350ms ease;
}

.testimonial__fade {
    opacity: 0;
}

/* ---------- Testimonial: Tablet-and-up (744w reference) ---------- */

@media (min-width: 46.5em) {
    .testimonial {
        padding: 4rem 2rem;
        /* 64px 32px */
        gap: 4rem;
        /* 64px */
    }

    .testimonial__top {
        padding: 0 3rem;
        /* 48px */
    }

    /* Root cause of the "huge empty gap + floating nav arrows" bug at
     744-1023px: .testimonial__media stays width:100% (its base/Mobile
     value, where the photo is fluid and fills that width) but the photo
     right below becomes a FIXED 335px from this breakpoint up — so media
     kept stretching to the full column width around a photo that no
     longer grew to fill it. auto lets media hug its own content (nav +
     335px photo) instead, at every width from here up, not just the
     1024px+ row-layout tier that already set this. */
    .testimonial__media {
        width: auto;
    }

    .testimonial__photo {
        flex: none;
        width: 20.9375rem;
        /* 335px */
        aspect-ratio: auto;
        height: 22.9375rem;
        /* 367px */
    }

    .testimonial__headline {
        font-size: 2.5rem;
        /* 40px */
    }

    .testimonial__bottom {
        padding: 0 3rem;
        /* 48px */
    }

    .testimonial__title {
        font-size: 3rem;
        /* 48px */
        white-space: nowrap;
    }

    .testimonial__attribution {
        flex-direction: row;
        align-items: flex-start;
        gap: 3.75rem;
        /* 60px */
    }

    .testimonial__person {
        flex-direction: column;
        justify-content: space-between;
        width: 3.5625rem;
        /* 57px */
        height: 10.625rem;
        /* 170px */
        gap: 0;
    }

    .testimonial__quote {
        width: 28.9375rem;
        /* 463px */
    }
}

/* ---------- Testimonial: Desktop Small / Tablet Landscape (1024-1513px) ----------
   No Figma frame covers this range. The Tablet composition above keeps
   .testimonial__top/.testimonial__bottom column-stacked with .testimonial__media
   at width:100% around a fixed 335px photo — sized for a 744px reference,
   this left a huge empty gap beside the photo and disconnected-looking nav
   arrows once stretched to 1024-1513px real laptop widths. Reuses the
   Desktop row layout instead, scaled to ~70% since there's no exact
   reference to match — same approach as the Ventures tier above. */
@media (min-width: 64em) and (max-width: 94.5625em) {
    .testimonial {
        padding: 3.5rem;
    }

    .testimonial__top {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 0 3rem;
        gap: 8.125rem;
        /* 130px */
    }

    .testimonial__media {
        width: auto;
    }

    .testimonial__headline {
        width: 29.8125rem;
        /* 477px */
        font-size: 3rem;
        /* 48px */
        line-height: 3.1875rem;
        /* 51px */
    }

    .testimonial__bottom {
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        padding: 0 3rem;
        gap: 15.0625rem;
        /* 241px */
    }

    .testimonial__title--full {
        display: none;
    }

    .testimonial__title--split {
        display: block;
    }

    .testimonial__title {
        font-size: 4.5rem;
        /* 72px */
        line-height: 4.6875rem;
        /* 75px */
        width: 14.375rem;
        /* 230px */
    }

    .testimonial__attribution {
        width: 27.1875rem;
        /* 435px */
    }

    .testimonial__person {
        height: 15.9375rem;
        /* 255px */
    }
}

/* ---------- Testimonial: Desktop (1514w reference) ---------- */

@media (min-width: 94.625em) {
    .testimonial {
        padding: 5.125rem;
        /* 82px */
    }

    .testimonial__top {
        flex-direction: row;
        align-items: center;
        /* Fixed gap instead of space-between — see .ventures above for why:
       both children are fixed/intrinsic width, so space-between let the
       gap grow unbounded past the 1514px reference. 174px is that gap at
       1514px, held constant instead. */
        justify-content: center;
        padding: 0 4rem;
        /* 64px */
        gap: 10.875rem;
        /* 174px */
    }

    .testimonial__media {
        width: auto;
    }

    .testimonial__headline {
        width: 39.75rem;
        /* 636px */
        font-size: 4rem;
        /* 64px */
        line-height: 4.25rem;
        /* 68px */
    }

    .testimonial__bottom {
        flex-direction: row;
        align-items: flex-start;
        /* Fixed gap instead of space-between — see .ventures above. 321px is
       the natural gap at 1514px, held constant instead of growing further. */
        justify-content: center;
        padding: 0 4rem;
        /* 64px */
        gap: 20.0625rem;
        /* 321px */
    }

    .testimonial__title--full {
        display: none;
    }

    .testimonial__title--split {
        display: block;
    }

    .testimonial__title {
        font-size: 6rem;
        /* 96px */
        line-height: 6.25rem;
        /* 100px */
        width: 19.125rem;
        /* 306px */
    }

    .testimonial__attribution {
        width: 36.25rem;
        /* 580px */
    }

    .testimonial__person {
        height: 21.25rem;
        /* 340px */
    }
}

/* ---------- Blog section ----------
   Base rules below = Mobile (390w reference): heading centered, "company
   update" stacked above the button (column), cards in a horizontally-
   scrollable row (same mechanism as the Featured Artist section) since
   even Desktop's 3 cards overflow their row and need the same scroll.
   Tablet (>=46.5em / 744px) keeps the centered heading but puts the
   button back inline next to "company update" (row).
   Desktop (>=94.625em / 1514px) is the outlier: the heading block becomes
   a fixed-width box that's right-aligned on its first line and
   left-aligned on its second, rather than centered like its neighbors. */

.blog {
    width: 100%;
    background: #111111;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.625rem;
    /* 42px */
    padding: 2.125rem 1.5rem;
    /* 34px 24px */
}

.blog__heading-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.blog__heading-line {
    margin: 0;
    width: 100%;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    text-transform: uppercase;
    font-size: 2rem;
    /* 32px */
    line-height: 1.0625;
    /* 34/32 */
    text-align: center;
}

.blog__heading-line--accent {
    font-weight: 700;
    /* Figma: Fira Sans Extra Condensed Bold — was
    approximated as 900 (Black) before this weight was loaded */
    color: #edb959;
}

.blog__heading-line--muted {
    font-weight: 400;
    color: rgba(236, 236, 236, 0.76);
}

.blog__heading-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    /* 12px */
}

.blog__grid {
    width: 100%;
    /* Caps the row at exactly its 3 cards' natural width (recalculated per
     breakpoint below) so margin:auto can center it once the viewport is
     wide enough that it no longer needs to scroll — without this, a
     width:100% row with non-growing children just stays glued to the
     left edge with unbounded empty space on the right on wide displays.
     On narrower viewports max-width is never reached, so width:100% and
     the existing scroll behavior are completely unaffected. */
    max-width: 56.36839rem;
    /* 3 cards + 2 gaps at mobile size */
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.4375rem;
    /* 23px */
    overflow-x: auto;
    scroll-snap-type: x proximity;
}

.blog__card {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.74169rem;
    /* 11.867px */
    width: 17.83113rem;
    /* 285.298px */
    scroll-snap-align: start;
}

.blog__card--reverse {
    flex-direction: column-reverse;
}

.blog__card-img {
    width: 100%;
    height: 17.05856rem;
    /* 272.937px */
    border-radius: 0.2473rem;
    /* 3.956px */
    overflow: hidden;
    background: #d9d9d9;
}

    .blog__card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.blog__card-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.67988rem;
    /* 10.878px */
    padding: 0.71075rem 1.1125rem;
    /* 11.372px 17.8px */
}

.blog__card-title {
    margin: 0;
    width: 100%;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 400;
    font-size: 0.98888rem;
    /* 15.822px */
    line-height: 1.11;
    letter-spacing: -0.01em;
    /* constant ratio at every breakpoint's size */
    text-transform: capitalize;
    color: #ffffff;
}

.blog__card-excerpt {
    margin: 0;
    width: 100%;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 100;
    /* consistent body-copy weight, see .ventures__para */
    font-size: 0.55625rem;
    /* 8.9px */
    line-height: 0.86531rem;
    /* 13.845px */
    text-align: justify;
    color: rgba(255, 255, 255, 0.74);
}

.blog__card-byline {
    display: flex;
    align-items: center;
    gap: 0.278125rem;
    /* 4.45px */
}

.blog__card-byline-rule {
    flex-shrink: 0;
    width: 1.2053rem;
    /* 19.284px */
    height: 1px;
    background: #edb959;
}

.blog__card-byline-text {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 100;
    /* consistent body-copy weight, see .ventures__para */
    font-size: 0.43263rem;
    /* 6.922px */
    line-height: 1.19;
    text-transform: uppercase;
    color: #ffffff;
    white-space: nowrap;
}

.blog__card-author {
    font-weight: 500;
    color: #edb959;
}

/* ---------- Blog: Tablet-and-up (744w reference) ---------- */

@media (min-width: 46.5em) {
    .blog {
        padding: 2rem;
        /* 32px */
        gap: 5.125rem;
        /* 82px, shared with desktop too — mobile is the only
      breakpoint with a smaller 42px gap here */
    }

    .blog__heading-line {
        font-size: 4rem;
        /* 64px */
        line-height: 1;
    }

    .blog__heading-row {
        flex-direction: row;
        justify-content: center;
        gap: 1rem;
        /* 16px */
    }

    .blog__grid {
        max-width: 73.25rem;
        /* 3 cards + 2 gaps at tablet size */
        gap: 2.875rem;
        /* 46px */
    }

    .blog__card {
        width: 22.5rem;
        /* 360px */
        gap: 1.5rem;
        /* 24px */
    }

    .blog__card-img {
        height: 21.5rem;
        /* 344px */
        border-radius: 0.5rem;
        /* 8px */
    }

    .blog__card-body {
        padding: 0.9375rem 1.25rem;
        /* 15px 20px */
        gap: 0.625rem;
        /* 10px */
    }

    .blog__card-title {
        font-size: 1.25rem;
        /* 20px */
    }

    .blog__card-excerpt {
        font-size: 0.875rem;
        /* 14px */
        line-height: 1.1875rem;
        /* 19px */
    }

    .blog__card-byline {
        gap: 0.5625rem;
        /* 9px */
    }

    .blog__card-byline-rule {
        width: 2.4375rem;
        /* 39px */
    }

    .blog__card-byline-text {
        font-size: 0.875rem;
        /* 14px */
    }
}

/* ---------- Blog: Desktop (1514w reference) ---------- */

@media (min-width: 94.625em) {
    .blog {
        padding: 5.125rem;
        /* 82px */
    }

    .blog__heading-block {
        width: 54.91863rem;
        /* 878.698px */
        margin: 0 auto;
        align-items: flex-start;
    }

    .blog__heading-line {
        font-size: 6rem;
        /* 96px */
        line-height: 1.0625;
        /* 102/96, back up from tablet's 1 */
    }

    .blog__heading-line--accent {
        text-align: right;
    }

    .blog__heading-line--muted {
        text-align: left;
        white-space: nowrap;
    }

    .blog__heading-row {
        justify-content: flex-start;
        gap: 2.5625rem;
        /* 41px */
    }

    .blog__grid {
        max-width: 118.1875rem;
        /* 3 cards + 2 gaps at desktop size */
        gap: 5rem;
        /* 80px */
    }

    .blog__card {
        width: 36.0625rem;
        /* 577px */
    }

    .blog__card-img {
        height: 34.5rem;
        /* 552px */
    }

    .blog__card-body {
        padding: 1.4375rem 2.25rem;
        /* 23px 36px */
        gap: 1.375rem;
        /* 22px */
    }

    .blog__card-title {
        font-size: 2rem;
        /* 32px */
    }

    .blog__card-excerpt {
        font-size: 1.125rem;
        /* 18px */
        line-height: 1.75rem;
        /* 28px */
    }
}

/* ---------- Footer (redesigned per Figma nodes 163:4420 Desktop,
   163:5267 Tablet, 162:2737 Mobile) ----------
   Three genuinely different compositions, not one layout scaled: Mobile
   stacks everything in a single column; Tablet splits into three rows
   (logo+newsletter / useful-link+companies-career / locate+contact);
   Desktop puts all five blocks (logo, useful link, companies+career,
   locate+contact, newsletter) in one row. Companies+Career and
   Locate+Contact are each grouped in one wrapper in the markup (matching
   Desktop, where both stay visually paired) — .footer__col-group-­-persistent
   only ungroups (display:contents) on Mobile, since Tablet already keeps
   Companies+Career paired; the plain .footer__col-group (Locate+Contact)
   ungroups on both Mobile and Tablet, only pairing up at Desktop.
   Typography (font sizes, tracking, line-heights) is identical across all
   three Figma frames, so it lives once in the base rules below — only
   layout (flex-direction, gaps, padding, logo size, column widths) changes
   per breakpoint. */

.footer {
    width: 100%;
    background: #111111;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem;
    /* 48px */
    padding: 0 2rem 3rem;
    /* 0 32px 48px — no top padding, the divider rule
    sits flush against the section's top edge */
}

.footer__rule {
    width: 100%;
    height: 1px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.15);
}

.footer__main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3.75rem;
    /* 60px */
}

.footer__top {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.125rem;
    /* 34px */
}

.footer__logo {
    height: 4.49644rem;
    /* 71.943px — Mobile's own logo is larger than
    Tablet/Desktop's, per Figma */
    width: auto;
}

.footer__newsletter {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.75rem;
    /* 28px */
}

.footer__newsletter-heading {
    margin: 0;
    width: 12.0625rem;
    /* 193px */
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 700;
    font-size: 2rem;
    /* 32px */
    line-height: 1.125;
    /* 36/32 */
    letter-spacing: -0.01em;
    text-transform: capitalize;
    color: #ffffff;
}

    .footer__newsletter-heading span {
        font-weight: 400;
        color: rgba(255, 255, 255, 0.6);
    }

.footer__newsletter-form {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2.125rem;
    /* 34px */
    padding: 0.5rem 0.5rem 0.5rem 1.5rem;
    /* 8px 8px 8px 24px */
}

.footer__newsletter-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 300;
    /* Figma: Libre Franklin Light */
    font-size: 1rem;
    /* 16px */
    line-height: 1.8;
    color: #ffffff;
}

    .footer__newsletter-input::placeholder {
        color: rgba(255, 255, 255, 0.53);
    }

    .footer__newsletter-input:focus {
        outline: none;
    }

.footer__newsletter-submit {
    flex-shrink: 0;
    border: none;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4.4375rem;
    /* 71px */
    padding: 0.8125rem 1.625rem;
    /* 13px 26px */
    width: 8.9375rem;
    /* 143px */
    font-family: "Unbounded", sans-serif;
    font-weight: 400;
    font-size: 1rem;
    /* 16px */
    letter-spacing: -0.06em;
    color: #ffffff;
    transition: background-color 200ms ease;
}

    .footer__newsletter-submit:hover {
        background: rgba(255, 255, 255, 0.18);
    }

.footer__links {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    /* 40px */
}

/* Companies+Career: paired from Tablet up, only ungrouped on Mobile (see
   the Tablet block below). */
.footer__col-group--persistent {
    display: contents;
}

/* Locate Us+Contact: paired only at Desktop, ungrouped on both Mobile and
   Tablet (see the Desktop block below). */
.footer__col-group {
    display: contents;
}

.footer__col {
    display: flex;
    flex-direction: column;
    gap: 1.3125rem;
    /* 21px */
}

.footer__col-heading {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    /* 24px */
    line-height: 1;
    letter-spacing: -0.06em;
    text-transform: uppercase;
    color: #ffffff;
}

.footer__col-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    /* 10px */
}

    /* Slide-in-and-back hover: an underline grows in from the left on hover,
   then retracts back out the same way it came (not a fade, not a shrink
   from center) — transform-origin stays fixed at "left" for both the
   in and out transitions, so scaleX(0)->scaleX(1) and back always reads
   as one continuous slide rather than two different motions. Shared by
   the column links, the bottom-bar legal links, and Back to Top — Figma
   dims the column links via a wrapper opacity (not a per-link color), but
   that would also dim the hover state with no way to brighten just the
   child back up, so this keeps the existing per-link color approach
   instead (same visual result, hover still reads as a clear brighten). */
    .footer__col-list a,
    .footer__legal-link,
    .footer__back-to-top {
        position: relative;
        display: inline-block;
        font-family: "Fira Sans Extra Condensed", sans-serif;
        font-weight: 400;
        font-size: 1.25rem;
        /* 20px, constant across every breakpoint */
        line-height: 1.2;
        color: #ffffff;
        text-decoration: none;
    }

    .footer__col-list a {
        color: rgba(255, 255, 255, 0.5);
    }

        .footer__col-list a::after,
        .footer__legal-link::after,
        .footer__back-to-top::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -0.1875rem;
            /* 3px */
            width: 100%;
            height: 1px;
            background: currentColor;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 320ms cubic-bezier(0.65, 0, 0.35, 1);
        }

        .footer__col-list a:hover,
        .footer__col-list a:focus-visible {
            color: #ffffff;
        }

            .footer__col-list a:hover::after,
            .footer__col-list a:focus-visible::after,
            .footer__legal-link:hover::after,
            .footer__legal-link:focus-visible::after,
            .footer__back-to-top:hover::after,
            .footer__back-to-top:focus-visible::after {
                transform: scaleX(1);
            }

.footer__col-text {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 400;
    font-size: 1.25rem;
    /* 20px */
    letter-spacing: -0.01em;
    line-height: 2rem;
    /* 32px */
    color: rgba(255, 255, 255, 0.6);
}

.footer__bottom {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    /* 32px */
}

.footer__bottom-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
    /* 10px */
}

.footer__copyright {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 400;
    font-size: 1.25rem;
    /* 20px */
    color: rgba(255, 255, 255, 0.5);
}

.footer__divider {
    width: 1px;
    height: 1.6425rem;
    /* 26.28px */
    background: #ffffff;
}

.footer__back-to-top {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: color 200ms ease;
}

/* ---------- Footer: Tablet (744w reference, node 163:5267) ---------- */

@media (min-width: 46.5em) {
    .footer {
        padding: 0 2rem 2rem;
        /* 0 32px 32px */
    }

    .footer__logo {
        height: 3.21175rem;
        /* 51.388px */
    }

    .footer__top {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }

    .footer__newsletter {
        width: 21.25rem;
        /* 340px */
    }

    .footer__col-group--persistent {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 1.3125rem;
        /* 21px */
    }

    /* Grid, not flex-wrap: a flex-basis trick for "2 per row" only holds at
     the exact width it's tuned for — once the viewport is wide enough for
     3 of these 256px-ish columns to fit (anywhere past ~900px), it stops
     wrapping where intended and Contact ends up alone on its own row.
     grid-template-columns: 1fr 1fr always gives exactly 2 columns
     regardless of width, so Useful Link+Companies/Career and Locate+Contact
     stay paired as rows all the way to the Desktop cutoff. */
    .footer__links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 3.625rem;
        /* 58px */
        row-gap: 2.5rem;
        /* 40px */
    }

    .footer__bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* ---------- Footer: Desktop (1514w reference, node 163:4420) ---------- */

@media (min-width: 94.625em) {
    .footer {
        padding: 0 5.125rem 3rem;
        /* 0 82px 48px */
    }

    .footer__main {
        flex-direction: row;
        align-items: flex-start;
        gap: 3.625rem;
        /* 58px */
    }

    /* Unwraps Logo and Newsletter into direct children of .footer__main so
     they sit in the same row as the link columns below — Newsletter's own
     order:1 (vs. everything else's default order:0) is enough to move it
     from 2nd in DOM to last visually, without needing to order every item. */
    .footer__top {
        display: contents;
    }

    .footer__newsletter {
        width: 21.25rem;
        /* 340px */
        order: 1;
    }

    /* Unwraps the column groups into direct children of .footer__main too. */
    .footer__links {
        display: contents;
    }

    .footer__col--useful-link {
        flex: 0 0 10rem;
        /* 160px */
    }

    .footer__col-group--persistent,
    .footer__col-group {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-self: stretch;
        gap: 1.3125rem;
        /* 21px */
        flex: 1 1 0;
        min-width: 0;
    }
}

/* ================================================================
   About Us page
   ================================================================ */

/* ---------- About Us: Header (logo only) ---------- */

.aboutus-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: #111111;
}

    .aboutus-header .site-menu-wrap {
        right: 1.5rem;
        /* matches this header's own side padding */
    }

.aboutus-header__logo-link {
    display: inline-flex;
}

.aboutus-header__logo {
    height: 2.875rem;
    /* 46px */
    width: auto;
}

/* ================================================================
   Site Menu — global nav flyout, shared by every header on the site
   (.header__nav on the homepage, .aboutus-header everywhere else).
   .site-menu-wrap positions the trigger (vertically centered across the
   header's full height); .site-menu (the flyout panel) is a separate
   position:fixed element scoped per-header below to the same `right`
   inset as the wrap, with a `top` matching Figma — which anchors it near
   the header's own top padding, overlapping the header, rather than
   dropping below its bottom edge.
   ================================================================ */

.site-menu-wrap {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    z-index: 5;
}

.site-menu-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* 8px */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.site-menu-trigger__label {
    display: none;
    /* Figma mobile shows the icon alone; the label
    reappears once there's room, at Tablet Landscape below */
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1rem;
    color: #ffffff;
}

.site-menu-trigger__icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 1.75rem;
    /* 28px */
    height: 0.625rem;
    /* 10px */
}

.site-menu-trigger__bar {
    display: block;
    width: 100%;
    height: 0.125rem;
    /* 2px */
    border-radius: 0.25rem;
    background: #ffffff;
}

/* position:fixed — NOT position:absolute. The homepage's .header has
   overflow:hidden (it clips the arc-carousel), and it's an ancestor of
   this element via .header__nav > .site-menu-wrap; position:absolute
   would get silently clipped by that the moment the panel extends past
   .header's own box, which a right-aligned flyout does by design. fixed
   escapes that (and every other overflow:hidden ancestor) since it
   doesn't participate in ancestor clipping.

   `top` is a static value matching Figma (panel starts near the
   header's own top padding — 49px against a header whose content
   starts at 24px — overlapping the header rather than clearing its
   bottom edge). `right` is deliberately NOT set here: getting the close
   button to align with the hamburger trigger needs their real rendered
   positions, not two independently-guessed CSS values that only line
   up by coincidence — see positionMenu() in main.js, which measures the
   trigger icon's actual rect and the panel's actual padding each time
   the menu opens, and sets `right` inline from that. scrollbar-gutter:
   stable (above) keeps that measurement valid for as long as the menu
   stays open, since locking scroll no longer changes the viewport's
   usable width out from under it. */
.site-menu {
    position: fixed;
    top: 1rem;
    z-index: 50;
    transform-origin: top right;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.75rem) scale(0.96);
    pointer-events: none;
    transition: opacity 260ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 260ms;
}

    .site-menu.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
        pointer-events: auto;
        transition: opacity 260ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
    }

.site-menu__panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* 24px */
    background: #ffffff;
    border-radius: 1rem;
    /* 16px, Figma mobile */
    padding: 1.5rem;
    /* 24px */
    width: min(22.125rem, calc(100vw - 2rem));
    /* ~354px, Figma mobile, capped to the viewport */
    /* caps to the room left below .site-menu's own `top` (1rem) with a
     matching 1rem margin at the bottom, so long content scrolls inside
     the panel instead of overflowing past the viewport on short screens */
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    box-shadow: 0 1.5rem 3rem -1rem rgba(0, 0, 0, 0.45);
}

.site-menu__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

.site-menu__columns {
    display: flex;
    flex-direction: column;
    gap: 3.625rem;
    /* 58px, Figma */
}

.site-menu__col-group {
    display: flex;
    flex-direction: column;
    gap: 3.625rem;
    /* 58px, Figma */
}

.site-menu__col {
    display: flex;
    flex-direction: column;
    gap: 1.3125rem;
    /* 21px, Figma */
}

.site-menu__heading {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.06em;
    color: #111111;
    font-size: 1.5rem;
    /* 24px, Figma */
    line-height: 1;
}

.site-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    /* 10px, Figma */
}

    .site-menu__list a {
        display: inline-block;
        font-family: "Fira Sans Extra Condensed", sans-serif;
        font-weight: 400;
        font-size: 1.125rem;
        color: #111111;
        opacity: 0.5;
        text-decoration: none;
        transition: opacity 200ms ease;
    }

        .site-menu__list a:hover,
        .site-menu__list a:focus-visible {
            opacity: 1;
        }

.site-menu__close {
    flex-shrink: 0;
    position: relative;
    width: 1.75rem;
    /* 28px */
    height: 1.75rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.site-menu__close-bar {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.75rem;
    height: 0.125rem;
    border-radius: 0.25rem;
    background: #111111;
}

    .site-menu__close-bar:first-child {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .site-menu__close-bar:last-child {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

.site-menu__rule {
    width: 100%;
    height: 1px;
    background: #ececec;
}

.site-menu__contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.site-menu__talk {
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 400;
    font-size: 1.125rem;
    color: #111111;
    opacity: 0.5;
    text-decoration: none;
    transition: opacity 200ms ease;
}

    .site-menu__talk:hover,
    .site-menu__talk:focus-visible {
        opacity: 1;
    }

/* ---------- Site Menu: Tablet Landscape + Desktop ---------- */

@media (min-width: 64em) {
    .site-menu-trigger__label {
        display: block;
    }

    .site-menu {
        top: 2rem;
        /* stepping toward Figma desktop's 49px */
    }

    .site-menu__panel {
        width: auto;
        max-height: calc(100vh - 4rem);
    }

    .site-menu__columns {
        flex-direction: row;
    }

    .site-menu__col {
        width: 15rem;
        /* stepping toward Figma's 240px-tall column */
    }
}

/* ---------- Site Menu: Desktop (1514w reference) ---------- */

@media (min-width: 94.625em) {
    .site-menu {
        top: 3rem;
        /* 48px, ~= Figma's 49px */
    }

    .site-menu__panel {
        max-height: calc(100vh - 6rem);
        padding: 2rem;
        /* Figma desktop is 34px; rounded to this site's scale */
    }
}

@media (min-width: 94.625em) {
    .aboutus-header {
        padding: 1.5rem 5.125rem;
        /* 24px 82px, matches .header__nav */
    }

        .aboutus-header .site-menu-wrap {
            right: 5.125rem;
        }

    .aboutus-header__logo {
        height: 3.5rem;
        /* 56px, matches .header__logo */
    }
}

/* ---------- About Us: Hero + intro (one combined section, per Figma) ---------- */

.aboutus-hero {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    /* 48px, gap to the About-Us intro block below (separate pass) */
    background: #111111;
    padding: 1.5rem 1.25rem 2.5rem;
    /* 24px 20px 40px — Figma mobile frame 59:567 */
}

.aboutus-hero__frame {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    /* 32px, Figma mobile frame 59:567 */
}

.aboutus-hero__heading--wide {
    display: none;
}

.aboutus-hero__heading--narrow {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    /* 16px, Figma 59:568 */
    text-align: left;
}

.aboutus-hero__heading-text {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 2.75rem;
    /* 44px, Figma 59:569 */
    line-height: 1.1;
    text-align: left;
}

.aboutus-hero__accent {
    color: #edb959;
}

.aboutus-hero__subhead {
    margin: 0;
    width: 100%;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 100;
    /* consistent site-wide body-copy weight, see .ventures__para */
    font-size: 0.875rem;
    /* 14px, Figma 59:570 */
    line-height: 1.5;
    color: rgba(236, 236, 236, 0.76);
}

.aboutus-hero__image {
    width: 100%;
    height: 13.75rem;
    /* 220px, Figma 59:575 */
    border-radius: 0.75rem;
    /* 12px */
    overflow: hidden;
    background: #d9d9d9;
}

    .aboutus-hero__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.aboutus-intro {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    /* 32px */
}

.aboutus-intro__eyebrow {
    margin: 0 0 0.75rem;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.875rem;
    /* 14px */
    color: #edb959;
}

.aboutus-intro__heading {
    margin: 0 0 1rem;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.75rem;
    /* 28px */
    line-height: 1.2;
    color: #ffffff;
}

.aboutus-intro__body {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 100;
    font-size: 1rem;
    line-height: 1.6;
    color: #ececec;
}

.aboutus-intro__divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
}

.aboutus-intro__cards {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.aboutus-intro__card-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
}

.aboutus-intro__card-label {
    margin: 0 0 0.5rem;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.875rem;
    /* 14px */
    color: #ffffff;
}

/* Figma's mobile frame gives the Mission card's label its own gold accent
   instead of matching Vision's white — Desktop keeps both white. See the
   max-width override below. */
.aboutus-intro__card-label--mission {
    color: #ffffff;
}

.aboutus-intro__card-heading {
    margin: 0 0 0.75rem;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.375rem;
    /* 22px */
    color: #ffffff;
}

.aboutus-intro__card-heading--accent {
    color: #edb959;
}

.aboutus-intro__card-body {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 100;
    font-size: 0.9375rem;
    /* 15px */
    line-height: 1.6;
    color: #b8b8b8;
}

@media (max-width: 46.4375em) {
    .aboutus-intro__card-label--mission {
        color: #edb959;
    }
}

/* Stays stacked (mobile's own column layout) through Tablet Portrait too —
   a 2-up row at 744px would squeeze the text column and both cards
   uncomfortably narrow. Switches to the row layout at Tablet Landscape
   (1024px) instead, same as the Hero and Ecosystem/Story sections below. */
@media (min-width: 64em) {
    .aboutus-intro {
        flex-direction: row;
        align-items: flex-start;
        gap: 3rem;
        /* Caps and centers the row instead of letting the text/cards columns
       (flex: 1 1 0 each) keep growing wider on screens past the 1514px
       reference — 1350px is that reference's own content width (1514px
       minus its 82px side padding), held fixed instead of stretching
       further so the heading keeps a comfortable, desktop-like reading
       width all the way up to Desktop Large. */
        max-width: 84.375rem;
        /* 1350px */
        margin: 0 auto;
    }

    .aboutus-intro__text {
        flex: 1 1 0;
    }

    .aboutus-intro__divider {
        width: 1px;
        height: auto;
        align-self: stretch;
    }

    .aboutus-intro__cards {
        flex: 1 1 0;
        flex-direction: row;
    }

    .aboutus-intro__card {
        flex: 1 1 0;
    }

    .aboutus-intro__card-divider {
        width: 1px;
        height: auto;
        align-self: stretch;
    }
}

/* ---------- About Us: Hero, Tablet Portrait (744-1023px) ----------
   No Figma frame covers this range. Keeps the Mobile frame's own structure
   (single flowing heading paragraph, stacked subhead/CTA/image — not the
   Desktop frame's multi-row layout) since a portrait tablet reads much
   closer to a scaled-up phone layout than a compressed desktop one; only
   the sizes step up from the 390px Mobile numbers. 744px is the same
   Tablet anchor width the arc carousel already scales from
   (js/arcCarousel.js). Text stays wrap-enabled (no white-space:nowrap)
   since there's no verified-fitting pixel width to lean on the way the
   1514px reference has. Bounded at 1023px — real tablets top out around
   768-834px in portrait, so 1024px+ is landscape orientation (below),
   which has enough width for the desktop-style row layout instead. */
@media (min-width: 46.5em) and (max-width: 63.9375em) {
    .aboutus-hero {
        padding: 2.5rem 2rem 3rem;
        /* 40px 32px 48px */
    }

    .aboutus-hero__frame {
        gap: 2rem;
        /* 32px, same as mobile */
    }

    .aboutus-hero__heading--wide {
        display: none;
    }

    .aboutus-hero__heading--narrow {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
        /* 20px */
        text-align: left;
    }

    .aboutus-hero__heading-text {
        font-size: 3rem;
        /* 48px, up from mobile's 44px */
        line-height: 1.1;
        text-align: left;
    }

    .aboutus-hero__subhead {
        width: 100%;
        max-width: 28rem;
        /* 448px cap for readability — mobile leaves it
      unconstrained only because the 390px viewport is already narrow */
        font-size: 1rem;
        /* 16px, up from mobile's 14px */
        line-height: 1.5;
    }

    .aboutus-hero__image {
        height: 20rem;
        /* 320px, up from mobile's 220px */
        border-radius: 0.75rem;
        /* 12px, matches mobile */
    }
}

/* ---------- About Us: Hero, Tablet Landscape + Desktop Small
   (1024-1513px) ----------
   No Figma frame covers this range either — unlike Tablet Portrait above,
   this width is close enough to the 1514px Desktop reference to reuse its
   multi-row layout directly, just scaled down (and everything here is
   wrap-safe, not nowrap, so it degrades gracefully at the narrower,
   landscape-tablet end of the range too). 1024px is a real landscape-
   tablet width (iPad, iPad Air, most 11" iPad Pro), matching the
   Desktop-Wide anchor width the arc carousel scales from
   (js/arcCarousel.js) closely enough to reuse as this tier's floor. */
@media (min-width: 64em) and (max-width: 94.5625em) {
    .aboutus-hero {
        padding: 4rem 3rem;
        /* 64px 48px */
    }

    .aboutus-hero__frame {
        gap: 3.5rem;
        /* 56px */
    }

    .aboutus-hero__heading--wide {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .aboutus-hero__heading--narrow {
        display: none;
    }

    .aboutus-hero__line1 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        /* flex-start, not center: the subhead wraps to ~5 lines against a
       single-line heading at this tier, so centering made it float above
       the heading's own top instead of reading as a companion line beside
       it — same fix as the Career page's Hero row1. */
        align-items: flex-start;
        gap: 1.5rem;
        /* 24px, matches desktop */
    }

    .aboutus-hero__line3 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
        /* 16px, matches desktop */
        width: 100%;
    }

    .aboutus-hero__heading-text {
        /* 72px was too big for this tier: at 1024px "cultural & commercial
       power." wrapped to 2 lines and the row1 subhead dropped below the
       heading instead of sitting beside it, throwing off both the CTA's
       vertical centering and the whole block's alignment. 56px keeps every
       line single and leaves row1's heading+subhead room to stay inline
       across the full 1024-1513px range. */
        font-size: 3.5rem;
        /* 56px */
        line-height: 1.1;
        text-align: left;
    }

    .aboutus-hero__subhead {
        width: 16rem;
        /* 256px, trimmed from 288px to match the smaller heading
      and leave row1 more room to stay inline at the narrow end */
        font-size: 1rem;
        /* 16px, matches desktop */
        line-height: 1.4;
    }

    .aboutus-hero__image {
        height: 28rem;
        /* 448px */
        border-radius: 1rem;
        /* 16px, matches desktop */
    }
}

@media (min-width: 94.625em) {

    /* Figma (36:319) centers this block with items-center, but Row 1's
     natural content width (nowrap 96px heading + gap + 320px subhead)
     comes out within a few px of the full content width at the 1514px
     reference — so "centered" and "flush left" render identically there.
     Implementing flush-left directly is the same visual result without
     depending on that pixel coincidence holding at every viewport. */
    .aboutus-hero {
        padding: 5.125rem;
        /* 82px all sides, Figma 31:301 */
    }

    .aboutus-hero__frame {
        align-items: flex-start;
        gap: 5.125rem;
        /* 82px, Figma 31:318 */
    }

    .aboutus-hero__heading--wide {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .aboutus-hero__heading--narrow {
        display: none;
    }

    .aboutus-hero__line1 {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
        /* 24px, Figma 36:320 */
    }

        .aboutus-hero__line1 .aboutus-hero__heading-text {
            white-space: nowrap;
        }

    .aboutus-hero__line3 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
        /* 16px, Figma 36:324 */
        width: 100%;
    }

        .aboutus-hero__line3 .aboutus-hero__heading-text {
            /* Figma gives this a fixed 952px width because its own text measurement
       fits "cultural & commercial power." on one line at that width — real
       browser font metrics don't match that exactly, so a fixed width here
       forces an unwanted second line (and throws off the CTA's vertical
       centering against the now much-taller row). nowrap, like line1's
       heading, keeps it truly single-line and lets the row's flex-wrap
       decide whether the CTA sits inline or drops below, based on the
       viewport's real available space instead of a borrowed pixel figure. */
            white-space: nowrap;
        }

    .aboutus-hero__heading-text {
        font-size: 6rem;
        /* 96px, Figma 36:321/323/325 */
        line-height: 1.05;
        text-align: left;
    }

    .aboutus-hero__subhead {
        width: 20rem;
        /* 320px, Figma 36:322 */
        font-size: 1rem;
        /* 16px */
        line-height: 1.4;
        /* Figma: leading-normal */
    }

    .aboutus-hero__image {
        width: 100%;
        height: 39rem;
        /* 624px, Figma 36:332 */
        border-radius: 1rem;
        /* 16px */
    }
}

/* ---------- About Us: Our Ecosystem ---------- */

.aboutus-ecosystem {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    /* 32px */
    padding: 3rem 1.5rem;
    /* 48px 24px */
    background: #ececec;
}

.aboutus-ecosystem__header {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.aboutus-ecosystem__heading {
    margin: 0 0 0.5rem;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.75rem;
    /* 28px */
    color: #1e1e1e;
}

.aboutus-ecosystem__subhead {
    margin: 0;
    max-width: 28rem;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 100;
    font-size: 1rem;
    line-height: 1.6;
    color: #1e1e1e;
}

.aboutus-ecosystem__cta {
    align-self: flex-start;
}

.aboutus-ecosystem__grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.aboutus-ecosystem__card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    /* 24px */
    border: 1px solid #c2c2c2;
    border-radius: 0.625rem;
    background: #ffffff;
}

.aboutus-ecosystem__card--active {
    border-color: #edb959;
}

.aboutus-ecosystem__card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.aboutus-ecosystem__card-heading {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.375rem;
    /* 22px */
    color: #1e1e1e;
}

.aboutus-ecosystem__card-dot {
    flex-shrink: 0;
    width: 1.5rem;
    /* 24px */
    height: 1.5rem;
    border-radius: 50%;
    background: #a3a3a3;
}

.aboutus-ecosystem__card-dot--gold {
    background: #edb959;
}

.aboutus-ecosystem__card-body {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 100;
    font-size: 0.9375rem;
    /* 15px */
    line-height: 1.6;
    color: #4a4a4a;
}

.aboutus-ecosystem__card-meta {
    padding-top: 1rem;
    border-top: 1px solid #e3e3e3;
}

.aboutus-ecosystem__card-meta-label {
    margin: 0 0 0.375rem;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
    /* 12px */
    color: #a3a3a3;
}

.aboutus-ecosystem__card-meta-value {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 600;
    font-size: 0.9375rem;
    /* 15px */
    color: #1e1e1e;
}

/* Tablet Portrait (744-1023px) keeps the mobile column layout — 3 cards in
   a row at 744px would squeeze each to ~210px, too narrow for their
   heading/body/meta content. Only the padding steps up a little for
   breathing room. Bounded at 1023px, same as the Hero section above. */
@media (min-width: 46.5em) and (max-width: 63.9375em) {
    .aboutus-ecosystem {
        padding: 3rem 2rem;
        /* 48px 32px */
    }
}

/* Tablet Landscape + Desktop Small (1024px+, a real landscape-tablet width
   also close to the arc carousel's Desktop-Wide anchor) switches to the
   row layout — 3 cards get ~300px+ each even at the narrow end, real room
   for their content. */
@media (min-width: 64em) {
    .aboutus-ecosystem {
        padding: 4rem 2rem;
    }

    .aboutus-ecosystem__header {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }

    .aboutus-ecosystem__grid {
        flex-direction: row;
    }

    .aboutus-ecosystem__card {
        flex: 1 1 0;
    }
}

@media (min-width: 94.625em) {
    .aboutus-ecosystem {
        padding: 5.125rem;
        gap: 3rem;
    }

    .aboutus-ecosystem__heading {
        font-size: 2.5rem;
        /* 40px */
    }
}

/* ---------- About Us: Our Story ---------- */

.aboutus-story {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding: 3rem 1.5rem;
    background: #0c0c0c;
}

.aboutus-story__heading-block {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.aboutus-story__heading--wide,
.aboutus-story__eyebrow--wide {
    display: none;
}

.aboutus-story__heading {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.75rem;
    /* 28px */
    color: #ffffff;
}

.aboutus-story__eyebrow {
    margin: 0;
    max-width: 28rem;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 100;
    font-size: 1rem;
    line-height: 1.6;
    color: #b8b8b8;
}

.aboutus-story__timeline {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.aboutus-story__item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-left: 1.25rem;
}

.aboutus-story__item--connected {
    border-left: 2px solid #edb959;
}

.aboutus-story__item-image {
    width: 100%;
    aspect-ratio: 343 / 220;
    border-radius: 0.625rem;
    overflow: hidden;
    background: #1e1e1e;
}

    .aboutus-story__item-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.aboutus-story__item-year-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.aboutus-story__item-year {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    /* 24px */
    color: #edb959;
}

.aboutus-story__item-line {
    flex: 1 1 0;
    height: 1px;
    background: #edb959;
    position: relative;
}

    .aboutus-story__item-line::after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        width: 0.375rem;
        height: 0.375rem;
        border-radius: 50%;
        background: #edb959;
        transform: translate(50%, -50%);
    }

.aboutus-story__item-title {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    /* 18px */
    color: #ffffff;
}

.aboutus-story__item-body {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 100;
    font-size: 0.9375rem;
    /* 15px */
    line-height: 1.6;
    color: #b8b8b8;
}

/* Tablet Portrait (744-1023px) keeps the mobile vertical timeline — 3
   items in a row at 744px would squeeze each to ~205px, too narrow for the
   image + text content. Only the padding steps up a little for breathing
   room. Bounded at 1023px, same as the Hero section above. */
@media (min-width: 46.5em) and (max-width: 63.9375em) {
    .aboutus-story {
        padding: 3rem 2rem;
        /* 48px 32px */
    }
}

/* Tablet Landscape + Desktop Small (1024px+, a real landscape-tablet width
   also close to the arc carousel's Desktop-Wide anchor) switches to the
   horizontal timeline — 3 items get real room even at the narrow end. */
@media (min-width: 64em) {
    .aboutus-story {
        padding: 4rem 2rem;
    }

    .aboutus-story__timeline {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .aboutus-story__item {
        flex: 1 1 25rem;
        padding-left: 0;
        border-left: none !important;
    }
}

@media (min-width: 94.625em) {
    .aboutus-story {
        padding: 5.125rem;
        gap: 3rem;
    }

    .aboutus-story__heading-block {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 2rem;
    }

    .aboutus-story__heading--wide {
        display: block;
        font-size: 2.5rem;
        /* 40px */
        order: 1;
    }

    .aboutus-story__heading--narrow {
        display: none;
    }

    .aboutus-story__eyebrow--wide {
        display: block;
        order: 2;
        text-align: right;
    }

    .aboutus-story__eyebrow--narrow {
        display: none;
    }
}

/* ---------- About Us: Companies & Teams (Figma node 31:402) ----------
   Corrected from an earlier side-by-side approximation: the real Desktop
   frame stacks the heading block ABOVE the tile grid (flex-column, not a
   row with the grid pushed to the far edge), the grid is a fixed-width
   6-column checkerboard (222px tiles, edge-to-edge, no column gap) rather
   than 3 wider columns, and the tiles are solid white with a plain corner
   arrow — not the dark/translucent tiles with a circular badge used
   before. Tablet and Mobile have no Figma frame for this section; the
   grid reduces to fewer columns per row at those tiers (this file's own
   responsive design, not a literal reference), keeping the same tile size
   and checkerboard-offset look rather than hiding the section entirely. */

/* =========================================================
   COMPANIES & TEAMS
   ========================================================= */

.aboutus-companies {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;
    padding: 3rem 1.5rem;
    background: #111111;
}


/* =========================================================
   HEADING
   ========================================================= */

.aboutus-companies__heading-block {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.aboutus-companies__heading {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 2.25rem;
    line-height: 1.05;
    color: #ffffff;
}

.aboutus-companies__body {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 100;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(236, 236, 236, 0.76);
}


/* =========================================================
   SCROLL WRAPPER
   ========================================================= */

.aboutus-companies__grid-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* 1. Firefox Support */
    /*    scrollbar-width: thin;*/
    /*scrollbar-color: #ffa500 transparent;*/ /* thumb (brass) | track (sand) */
}

/* 2. Chrome, Safari, and Edge Support */
/*    .aboutus-companies__grid-wrapper::-webkit-scrollbar {
        height: 6px;
    }

    .aboutus-companies__grid-wrapper::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 10px;
    }

    .aboutus-companies__grid-wrapper::-webkit-scrollbar-thumb {
        background: #ffa500;
        border-radius: 10px;
    }*/

/* Darken thumb smoothly on hover */
/*        .aboutus-companies__grid-wrapper::-webkit-scrollbar-thumb:hover {
            background: #78350f;
        }*/


/* =========================================================
   CHECKERBOARD GRID
   =========================================================

   IMPORTANT:

   The grid has ONLY ONE ROW.

   Every item gets its OWN column.

   Item 1 -> column 1
   Item 2 -> column 2
   Item 3 -> column 3
   Item 4 -> column 4
   Item 5 -> column 5
   Item 6 -> column 6

   Then we move even items down.

   Result:

   ┌────┬────┬────┬────┬────┬────┐
   │  1 │    │  3 │    │  5 │    │
   │    │  2 │    │  4 │    │  6 │
   └────┴────┴────┴────┴────┴────┘

   ========================================================= */

.aboutus-companies__grid {
    display: grid;
    /*
       ONE ROW.

       The height contains both the top and bottom
       checkerboard positions.
    */
    grid-template-rows: 100%;
    /*
       Each item gets its own column.
    */
    grid-auto-flow: column;
    /*
       Mobile:
       two columns are visible.
    */
    grid-auto-columns: 50%;
    /*
       No horizontal gap.
    */
    column-gap: 0;
    /*
       Grid must have enough height for the
       checkerboard's two levels.
    */
    height: calc(2 * 9.875rem + 0.125rem);
    /*
       Width grows as more columns are added.
    */
    width: max-content;
    /*
       At least fill the available width.
    */
    min-width: 100%;
}


/* =========================================================
   TILE
   ========================================================= */

.aboutus-companies__tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /*
       Tile height is HALF of the total checkerboard height.
    */
    height: 9.875rem;
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #c2c2c2;
}


    /* =========================================================
   MOVE EVEN ITEMS DOWN
   =========================================================

   1 -> normal
   2 -> down
   3 -> normal
   4 -> down
   5 -> normal
   6 -> down

   This creates the exact requested layout.
   ========================================================= */

    .aboutus-companies__tile:nth-child(even) {
        transform: translateY(calc(9.875rem + 0.125rem));
    }


/* =========================================================
   LOGO CROP
   ========================================================= */

.aboutus-companies__tile-crop {
    position: relative;
    overflow: hidden;
    width: 3.3375rem;
    height: 3.9625rem;
}

    .aboutus-companies__tile-crop img {
        position: absolute;
        max-width: none;
        width: 343.51%;
        height: 208.33%;
        left: -121.76%;
        top: -54.17%;
    }


/* =========================================================
   ARROW
   ========================================================= */

.aboutus-companies__tile-arrow {
    position: absolute;
    top: 0.75rem;
    right: 0.875rem;
    width: 1.0625rem;
    height: 1.0625rem;
    transform: rotate(-45deg);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 46.5em) {

    .aboutus-companies {
        padding: 4rem 2rem;
        gap: 3rem;
    }

    .aboutus-companies__heading {
        font-size: 3rem;
    }

    .aboutus-companies__body {
        max-width: 34rem;
    }


    /* ---------------------------------------------
       TABLET TILE SIZE
       --------------------------------------------- */

    .aboutus-companies__grid {
        /*
           3 columns visible.
        */
        grid-auto-columns: calc((100vw - 4rem) / 3);
        /*
           Two tile heights + 2px gap.
        */
        height: calc(2 * 11.4375rem + 0.125rem);
    }


    .aboutus-companies__tile {
        height: 11.4375rem;
    }


        /*
       Even items go to row 2.
    */
        .aboutus-companies__tile:nth-child(even) {
            transform: translateY( calc(11.4375rem + 0.125rem) );
        }


    .aboutus-companies__tile-crop {
        width: 3.875rem;
        height: 4.60625rem;
    }


    .aboutus-companies__tile-arrow {
        top: 1rem;
        right: 1.125rem;
    }
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 94.625em) {

    .aboutus-companies {
        gap: 4rem;
        padding: 5.125rem;
    }

    .aboutus-companies__heading {
        font-size: 4.5rem;
    }

    .aboutus-companies__body {
        max-width: 56.3125rem;
    }


    /* ---------------------------------------------
       DESKTOP

       6 columns visible.
       --------------------------------------------- */

    .aboutus-companies__grid {
        /*
           Available content width:

           100vw
           - 5.125rem left padding
           - 5.125rem right padding

           Then divide by 6.
        */
        grid-auto-columns: calc((100vw - 10.25rem) / 6);
        /*
           Two tile heights + 2px gap.
        */
        height: calc(2 * 14.625rem + 0.125rem);
    }


    .aboutus-companies__tile {
        height: 14.625rem;
    }


        /*
       EVEN ITEMS:

       2 -> column 2 / lower position
       4 -> column 4 / lower position
       6 -> column 6 / lower position
       8 -> column 8 / lower position
       etc.
    */
        .aboutus-companies__tile:nth-child(even) {
            transform: translateY( calc(14.625rem + 0.125rem) );
        }


    .aboutus-companies__tile-crop {
        width: 4.9375rem;
        height: 5.875rem;
    }


    .aboutus-companies__tile-arrow {
        top: 1.25rem;
        right: 1.4375rem;
    }
}

/* ================================================================
   Career page (Figma: Desktop node 45:306, Mobile node 59:710)
   ================================================================
   Same 4-tier convention as the About Us page: Mobile (<744px, exact
   Figma), Tablet Portrait (744-1023px) and Tablet Landscape + Desktop
   Small (1024-1513px) are this file's own responsive design (no Figma
   frame covers either), Desktop (>=1514px, exact Figma). Header and
   .pill-cta are shared components, already built for About Us — reused
   here unchanged. */

/* ---------- Career: Hero ---------- */

.career-hero {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* 24px, Figma 59:725 */
    background: #111111;
    padding: 1.5rem 1.25rem 2.5rem;
    /* 24px 20px 40px, Figma 59:725 */
}

.career-hero__heading--wide {
    display: none;
}

.career-hero__heading--narrow {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    /* 16px */
}

.career-hero__heading-text {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 2.75rem;
    /* 44px, Figma 59:726 */
    line-height: 1.1;
    text-align: left;
}

.career-hero__accent {
    color: #edb959;
}

.career-hero__subhead {
    margin: 0;
    width: 100%;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 100;
    /* consistent site-wide body-copy weight, see .ventures__para */
    font-size: 0.875rem;
    /* 14px, Figma 59:727 */
    line-height: 1.5;
    color: rgba(236, 236, 236, 0.76);
}

.career-hero__image {
    width: 100%;
    height: 11.25rem;
    /* 180px, Figma 59:732 */
    border-radius: 0.75rem;
    /* 12px */
    overflow: hidden;
    background: #d9d9d9;
}

    .career-hero__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* ---------- Career: Why Work With Us ---------- */

.career-why {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* 24px */
    padding: 1.25rem;
    /* 20px */
    background: #ececec;
}

.career-why__eyebrow {
    margin: 0 0 0.75rem;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.0625em;
    /* 1px/16px */
    font-size: 1rem;
    /* 16px */
    color: #edb959;
}

.career-why__heading {
    margin: 0 0 0.75rem;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 2rem;
    /* 32px */
    line-height: 1.15;
    color: #111111;
}

.career-why__subhead {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 100;
    font-size: 0.875rem;
    /* 14px */
    line-height: 1.6;
    color: #252525;
}

/* Mobile: cards flow as direct siblings sharing .career-why's own gap,
   matching Figma's flat mobile structure. Becomes a real grid at Tablet
   Landscape+, see below. */
.career-why__grid {
    display: contents;
}

.career-value-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* 12px */
    padding: 1.25rem;
    /* 20px */
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 1rem;
    /* 16px */
}

.career-value-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.career-value-card__title {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 1.25rem;
    /* 20px */
    color: #111111;
}

.career-value-card__dot {
    flex-shrink: 0;
    width: 1rem;
    /* 16px */
    height: 1rem;
    border-radius: 50%;
    background: #ececec;
}

.career-value-card__dot--gold {
    background: #edb959;
}

.career-value-card__body {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 100;
    font-size: 0.75rem;
    /* 12px */
    line-height: 1.5;
    color: rgba(37, 37, 37, 0.76);
}

/* ---------- Career: Open Positions ---------- */

.career-positions {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    /* 20px */
    padding: 1.25rem;
    /* 20px */
    background: #111111;
}

.career-positions__header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.career-positions__heading {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 2rem;
    /* 32px */
    line-height: 1.15;
    color: #ffffff;
}

.career-positions__subhead {
    margin: 0;
    display: none;
    /* Mobile Figma frame (59:748) has no subhead here */
    font-family: "Libre Franklin", sans-serif;
    font-weight: 100;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(236, 236, 236, 0.76);
}

.career-positions__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* 16px */
    width: 100%;
}

.career-job {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* 16px */
    padding: 1.25rem;
    /* 20px */
    background: #1c1c1c;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1rem;
    /* 16px */
}

.career-job__info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* 12px */
}

.career-job__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    /* 12px */
}

.career-job__tag {
    flex-shrink: 0;
    padding: 0.25rem 0.625rem;
    /* 4px 10px */
    border-radius: 0.25rem;
    /* 4px */
    background: #edb959;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    /* 12px */
    color: #111111;
}

.career-job__meta-text {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 300;
    /* Figma: Libre Franklin Light */
    font-size: 0.875rem;
    /* 14px */
    color: rgba(236, 236, 236, 0.76);
}

.career-job__title {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    /* 24px */
    color: #ffffff;
}

/* ---------- Career: Life at TM Ventures ---------- */

.career-life {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* 24px */
    padding: 1.25rem;
    /* 20px */
    background: #0c0c0c;
}

.career-life__header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.career-life__eyebrow {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.0625em;
    font-size: 1rem;
    /* 16px */
    color: #edb959;
}

.career-life__heading {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 2rem;
    /* 32px */
    line-height: 1.15;
    color: #ffffff;
}

.career-life__subhead {
    margin: 0;
    display: none;
    /* Mobile Figma frame (59:768) has no subhead here */
    font-family: "Libre Franklin", sans-serif;
    font-weight: 100;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(236, 236, 236, 0.76);
}

.career-life__grid {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    /* 24px */
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
}

.career-life__item {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* 24px */
    flex: 0 0 85%;
    min-width: 0;
    scroll-snap-align: start;
}

.career-life__photo {
    width: 100%;
    height: 12.5rem;
    /* 200px */
    border-radius: 0.75rem;
    /* 12px */
    overflow: hidden;
    background: #1e1e1e;
}

    .career-life__photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.career-life__item-title {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.375rem;
    /* 22px */
    color: #ffffff;
}

.career-life__item-body {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 100;
    font-size: 0.9375rem;
    /* 15px */
    line-height: 1.6;
    color: rgba(236, 236, 236, 0.76);
}

/* ---------- Career: Final CTA ---------- */

.career-cta {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    /* 20px */
    padding: 2rem;
    /* 32px, Figma 59:775 (this section keeps 32px on Mobile,
    unlike every other section here which uses 20px) */
    background: #1e1e1e;
}

.career-cta__text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* 16px */
    width: 100%;
}

.career-cta__heading {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 1.75rem;
    /* 28px */
    line-height: 1.1;
    color: #ffffff;
}

.career-cta__accent {
    color: #edb959;
}

.career-cta__subhead {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 100;
    font-size: 0.75rem;
    /* 12px */
    line-height: 1.6;
    color: rgba(236, 236, 236, 0.76);
}

/* ---------- Career: Tablet Portrait (744-1023px) ----------
   No Figma frame covers this range — keeps every section's Mobile
   structure (single column, stacked cards/jobs/photos), only sizes step
   up from the 390px Mobile numbers. Same reasoning as the About Us page's
   own Tablet Portrait tier. */
@media (min-width: 46.5em) and (max-width: 63.9375em) {
    .career-hero {
        padding: 2.5rem 2rem 3rem;
    }

    .career-hero__heading-text {
        font-size: 3rem;
        /* 48px */
    }

    .career-hero__subhead {
        max-width: 28rem;
        font-size: 1rem;
    }

    .career-hero__image {
        height: 15rem;
        /* 240px */
    }

    .career-why {
        padding: 2.5rem 2rem;
        gap: 2rem;
    }

    .career-why__heading {
        font-size: 2.75rem;
    }

    .career-why__subhead {
        max-width: 34rem;
        font-size: 1rem;
    }

    .career-value-card {
        padding: 1.75rem;
    }

    .career-value-card__title {
        font-size: 1.5rem;
    }

    .career-value-card__body {
        font-size: 0.9375rem;
    }

    .career-positions {
        padding: 2.5rem 2rem;
        gap: 2rem;
    }

    .career-positions__heading {
        font-size: 2.75rem;
    }

    .career-positions__subhead {
        display: block;
        max-width: 34rem;
        font-size: 1rem;
    }

    .career-job {
        padding: 1.75rem;
    }

    .career-job__title {
        font-size: 1.75rem;
    }

    .career-life {
        padding: 2.5rem 2rem;
        gap: 2rem;
    }

    .career-life__heading {
        font-size: 2.75rem;
    }

    .career-life__photo {
        height: 17.5rem;
        /* 280px */
    }

    .career-life__item {
        /*flex: 1 1 0;*/
        flex: 0 0 calc(50% - 12px);
        min-width: 0;
        scroll-snap-align: start;
    }

    .career-cta {
        padding: 3rem 2rem;
        gap: 1.5rem;
    }

    .career-cta__heading {
        font-size: 2.5rem;
    }

    .career-cta__subhead {
        max-width: 34rem;
        font-size: 1rem;
    }
}

/* ---------- Career: Tablet Landscape + Desktop Small (1024-1513px) ----------
   No Figma frame covers this range either — close enough to the 1514px
   Desktop reference to reuse its row/grid layouts directly, scaled down.
   Same 1024px anchor as the rest of the site (js/arcCarousel.js). */
@media (min-width: 64em) and (max-width: 94.5625em) {
    .career-hero {
        padding: 4rem 3rem;
        gap: 3.5rem;
        /* 56px */
    }

    .career-hero__heading--wide {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .career-hero__heading--narrow {
        display: none;
    }

    .career-hero__line1 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        /* flex-start, not center: at this tier the subhead wraps to ~5 lines
       against a single-line heading, so centering made it float above the
       heading's own top instead of reading as a companion line beside it. */
        align-items: flex-start;
        gap: 1.5rem;
        /* 24px */
    }

    .career-hero__line3 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
        /* 16px */
        width: 100%;
    }

    .career-hero__heading-text {
        font-size: 3.5rem;
        /* 56px, same reasoning as the About Us Hero — see
      that tier's comment for why not the full 96px here */
        line-height: 1.1;
        text-align: left;
    }

    .career-hero__subhead {
        width: 20rem;
        /* 320px — widened from 256px so it wraps to fewer,
      more evenly-balanced lines next to the heading */
        font-size: 1rem;
        line-height: 1.4;
    }

    .career-hero__image {
        height: 23.75rem;
        /* 380px */
    }

    .career-why {
        padding: 3rem;
        gap: 3rem;
    }

    .career-why__eyebrow {
        display: none;
        /* Desktop's own Figma frame has no eyebrow */
    }

    .career-why__heading {
        font-size: 3.5rem;
        /* stepping toward Desktop's 72px */
    }

    .career-why__subhead {
        max-width: 40rem;
        font-size: 1.125rem;
    }

    .career-why__grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .career-value-card {
        padding: 2rem;
    }

    .career-value-card__title {
        font-size: 1.75rem;
    }

    .career-value-card__dot {
        width: 1.25rem;
        height: 1.25rem;
    }

    .career-value-card__body {
        font-size: 0.9375rem;
    }

    .career-positions {
        padding: 3rem;
        gap: 3rem;
    }

    .career-positions__heading {
        font-size: 3.5rem;
    }

    .career-positions__subhead {
        display: block;
        max-width: 40rem;
        font-size: 1.125rem;
    }

    .career-job {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
        padding: 2rem;
    }

    .career-job__info {
        flex: 1 1 0;
        min-width: 0;
    }

    .career-job__title {
        font-size: 1.75rem;
    }

    .career-job__cta {
        flex-shrink: 0;
    }

    .career-life {
        padding: 3rem;
        gap: 3rem;
    }

    .career-life__eyebrow {
        display: none;
        /* Desktop's own Figma frame has no eyebrow */
    }

    .career-life__heading {
        font-size: 3.5rem;
    }

    .career-life__subhead {
        display: block;
        max-width: 40rem;
        font-size: 1.125rem;
    }

    .career-life__grid {
        flex-direction: row;
        gap: 1.5rem;
    }

    .career-life__item {
        /*flex: 1 1 0;*/
        flex: 0 0 calc(33.333% - 16px);
        min-width: 0;
        scroll-snap-align: start;
    }

    .career-life__photo {
        height: 15rem;
        /* stepping toward Desktop's 340px */
    }

    .career-cta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 3rem;
        padding: 3rem;
    }

    .career-cta__text {
        max-width: 34rem;
    }

    .career-cta__heading {
        font-size: 3.5rem;
    }

    .career-cta__subhead {
        font-size: 1.125rem;
    }

    .career-cta__button {
        flex-shrink: 0;
    }
}

/* ---------- Career: Desktop (1514w reference) ---------- */

@media (min-width: 94.625em) {
    .career-hero {
        padding: 5.125rem;
        /* 82px */
        gap: 4rem;
        /* 64px */
    }

    .career-hero__heading--wide {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .career-hero__heading--narrow {
        display: none;
    }

    .career-hero__line1 {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
        /* 24px */
    }

        .career-hero__line1 .career-hero__heading-text {
            white-space: nowrap;
        }

    .career-hero__line3 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
        /* 16px */
        width: 100%;
    }

        .career-hero__line3 .career-hero__heading-text {
            white-space: nowrap;
            /* see About Us Hero's Desktop tier for why not a
      fixed Figma pixel width */
        }

    .career-hero__heading-text {
        font-size: 6rem;
        /* 96px */
        line-height: 1.05;
    }

    .career-hero__subhead {
        width: 21.875rem;
        /* 350px */
        font-size: 1rem;
        line-height: 1.4;
    }

    .career-hero__image {
        height: 32.5rem;
        /* 520px */
        border-radius: 1rem;
        /* 16px */
    }

    .career-why {
        padding: 5.125rem;
        gap: 3.5rem;
        /* 56px */
    }

    .career-why__eyebrow {
        display: none;
        /* Desktop's own Figma frame has no eyebrow */
    }

    .career-why__heading {
        font-size: 4.5rem;
        /* 72px */
    }

    .career-why__subhead {
        max-width: 40rem;
        /* 640px */
        font-size: 1.125rem;
        /* 18px */
    }

    .career-why__grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        /* 24px */
    }

    .career-value-card {
        padding: 2.5rem;
        /* 40px */
        border-radius: 1.5rem;
        /* 24px */
    }

    .career-value-card__title {
        font-size: 2.5rem;
        /* 40px */
    }

    .career-value-card__dot {
        width: 1.5rem;
        /* 24px */
        height: 1.5rem;
    }

    .career-value-card__body {
        font-size: 0.9375rem;
        /* 15px */
    }

    .career-positions {
        padding: 5.125rem;
        gap: 4rem;
        /* 64px */
    }

    .career-positions__heading {
        font-size: 4.5rem;
        /* 72px */
    }

    .career-positions__subhead {
        display: block;
        max-width: 40rem;
        font-size: 1.125rem;
    }

    .career-job {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
        padding: 2rem;
    }

    .career-job__info {
        flex: 1 1 0;
        min-width: 0;
    }

    .career-job__title {
        font-size: 2rem;
        /* 32px */
    }

    .career-job__meta-text {
        font-size: 0.875rem;
    }

    .career-job__cta {
        flex-shrink: 0;
    }

    .career-life {
        padding: 5.125rem;
        gap: 4rem;
        /* 64px */
    }

    .career-life__eyebrow {
        display: none;
        /* Desktop's own Figma frame has no eyebrow */
    }

    .career-life__heading {
        font-size: 4.5rem;
        /* 72px */
    }

    .career-life__subhead {
        display: block;
        max-width: 40rem;
        font-size: 1.125rem;
    }

    .career-life__grid {
        flex-direction: row;
        gap: 1.5rem;
        /* 24px */
    }

    .career-life__item {
        flex: 0 0 calc(33.333% - 1rem);
        min-width: 0;
        scroll-snap-align: start;
    }

    .career-life__photo {
        height: 21.25rem;
        /* 340px */
    }

    .career-cta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 5.125rem;
    }

    .career-cta__text {
        max-width: 46.1875rem;
        /* 739px */
    }

    .career-cta__heading {
        font-size: 5rem;
        /* 80px */
    }

    .career-cta__subhead {
        font-size: 1.125rem;
    }

    .career-cta__button {
        flex-shrink: 0;
    }
}





/* ================================================================
   Blog page (Figma: Desktop node 178:3824, Mobile node 178:4878)
   ================================================================
   Same 4-tier convention as the rest of the site: Mobile (<744px, exact
   Figma), Tablet Portrait (744-1023px) and Tablet Landscape + Desktop
   Small (1024-1513px) are this file's own responsive design (no Figma
   frame covers either), Desktop (>=1514px, exact Figma). Header and
   footer are shared components, reused here unchanged. */

/* ---------- Blog: Hero ---------- */

.blog-hero {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* 24px */
    background: #111111;
    padding: 1.25rem;
    /* 20px, Figma mobile 178:4890 */
}

.blog-hero__heading--wide {
    display: none;
}

.blog-hero__heading--narrow {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* 16px */
}

.blog-hero__title {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 2.25rem;
    /* 36px, Figma mobile 178:4891 */
    line-height: 1.15;
}

.blog-hero__accent {
    color: #edb959;
}

.blog-hero__subhead {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 400;
    font-size: 0.875rem;
    /* 14px, Figma mobile 178:4892 */
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.53);
}

/* Hero's own compact email form — distinct from .footer__newsletter-form:
   Figma sizes this one smaller on mobile (16px left padding, 14px type)
   than the footer's newsletter form (24px/16px at every tier), so it
   can't reuse those classes without fighting an override at every tier. */
.blog-hero__form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    max-width: 26.25rem;
    /* 420px, Figma desktop 178:3843 */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2.125rem;
    /* 34px */
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    /* 8px 8px 8px 16px, Figma mobile */
}

.blog-hero__input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 300;
    font-size: 0.875rem;
    /* 14px, Figma mobile */
    color: #ffffff;
}

    .blog-hero__input::placeholder {
        color: rgba(255, 255, 255, 0.53);
    }

    .blog-hero__input:focus {
        outline: none;
    }

.blog-hero__submit {
    flex-shrink: 0;
    border: none;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4.4375rem;
    /* 71px */
    padding: 0.625rem 1.25rem;
    /* 10px 20px, Figma mobile */
    font-family: "Unbounded", sans-serif;
    font-weight: 400;
    font-size: 0.875rem;
    /* 14px */
    color: #ffffff;
    white-space: nowrap;
    transition: background-color 200ms ease;
}

    .blog-hero__submit:hover {
        background: rgba(255, 255, 255, 0.18);
    }

/* ---------- Blog: Archives ---------- */

.blog-archives {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* 24px, Figma mobile 178:4897 */
    padding: 1.25rem;
    /* 20px */
    background: #111111;
}

.blog-archives__header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.blog-archives__heading {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 1.5rem;
    /* 24px, Figma mobile 178:4898 */
    line-height: 1.2;
}

.blog-archives__view-all {
    display: none;
    /* Figma's mobile frame surfaces only the two most-recent
    archives and has no "View All" link at all */
    font-family: "Libre Franklin", sans-serif;
    font-weight: 400;
    font-size: 0.875rem;
    color: #edb959;
    text-decoration: none;
    white-space: nowrap;
}

    .blog-archives__view-all:hover {
        text-decoration: underline;
    }

/* Mobile: 2 cards, shorter Figma copy. Tablet+: swaps to the 4-card,
   full-copy grid below (see the breakpoints) — never both at once. */
.blog-archives__grid--mobile {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* 24px */
}

.blog-archives__grid--full {
    display: none;
}

.archive-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* 16px, Figma mobile 178:4899 */
    background: #1c1c1c;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1rem;
    /* 16px */
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    /* Same punchy easing as .pill-cta's hover fill, for a consistent
     "snap, don't drift" feel across the site's interactive elements. */
    transition: border-color 420ms cubic-bezier(0.65, 0, 0.35, 1), transform 420ms cubic-bezier(0.65, 0, 0.35, 1), box-shadow 420ms cubic-bezier(0.65, 0, 0.35, 1);
}

    .archive-card:hover,
    .archive-card:focus-visible {
        border-color: rgba(237, 185, 89, 0.6);
        transform: translateY(-0.5rem);
        /* 8px */
        box-shadow: 0 1.5rem 2.5rem -1rem rgba(0, 0, 0, 0.55);
    }

.archive-card__image {
    width: 100%;
    height: 10rem;
    /* 160px, Figma mobile 178:4900 */
    overflow: hidden;
}

    .archive-card__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 420ms cubic-bezier(0.65, 0, 0.35, 1);
    }

.archive-card:hover .archive-card__image img,
.archive-card:focus-visible .archive-card__image img {
    transform: scale(1.08);
}

.archive-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* 8px */
    padding: 1rem;
    /* 16px */
}

.archive-card__date {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    /* 12px */
    color: #edb959;
}

.archive-card__title {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 700;
    color: #ffffff;
    font-size: 1.25rem;
    /* 20px, Figma mobile 178:4903 */
    line-height: 1.15;
    transition: color 420ms cubic-bezier(0.65, 0, 0.35, 1);
}

.archive-card:hover .archive-card__title,
.archive-card:focus-visible .archive-card__title {
    color: #edb959;
}

.archive-card__excerpt {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 400;
    font-size: 0.8125rem;
    /* 13px, Figma mobile 178:4904 */
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.53);
}

/* ---------- Blog: Tablet Portrait (744-1023px) ----------
   No Figma frame covers this range — reuses Mobile's stacked structure
   (single-column cards, narrow heading block), scaled up, per the site's
   established "Tablet Portrait stays close to Mobile" convention. */
@media (min-width: 46.5em) and (max-width: 63.9375em) {
    .blog-hero {
        padding: 2.5rem 2rem;
        gap: 2rem;
    }

    .blog-hero__title {
        font-size: 2.75rem;
        /* 44px */
    }

    .blog-hero__subhead {
        max-width: 30rem;
        font-size: 1rem;
    }

    .blog-archives {
        padding: 2.5rem 2rem;
        gap: 2rem;
    }

    .blog-archives__header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .blog-archives__heading {
        font-size: 2rem;
        /* 32px */
    }

    .blog-archives__view-all {
        display: block;
    }

    .blog-archives__grid--mobile {
        display: none;
    }

    .blog-archives__grid--full {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .archive-card__image {
        height: 15rem;
        /* 240px */
    }

    .archive-card__body {
        padding: 1.5rem;
    }

    .archive-card__title {
        font-size: 1.5rem;
        /* 24px */
    }

    .archive-card__excerpt {
        font-size: 0.875rem;
        /* 14px */
    }
}

/* ---------- Blog: Tablet Landscape + Desktop Small (1024-1513px) ----------
   No Figma frame covers this range either — close enough to the 1514px
   Desktop reference to reuse its row/grid layouts directly, scaled down.
   Same 1024px anchor as the rest of the site (js/arcCarousel.js). */
@media (min-width: 64em) and (max-width: 94.5625em) {
    .blog-hero {
        padding: 4rem 3rem;
        gap: 3rem;
    }

    .blog-hero__heading--wide {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .blog-hero__heading--narrow {
        display: none;
    }

    .blog-hero__line2 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 1.125rem;
        /* 18px */
    }

    .blog-hero__title {
        font-size: 3.5rem;
        /* 56px, same reasoning as the About Us / Career
      Hero at this tier — see their comments for why not the full 82px */
        line-height: 1.1;
    }

    .blog-hero__title--nowrap {
        white-space: nowrap;
    }

    .blog-hero__subhead--wide {
        flex: 1 1 0;
        min-width: 18rem;
        font-size: 1rem;
    }

    .blog-hero__form {
        padding: 0.5rem 0.5rem 0.5rem 1.5rem;
        /* 8px 8px 8px 24px, Figma desktop */
    }

    .blog-hero__input {
        font-size: 1rem;
        /* 16px */
    }

    .blog-hero__submit {
        padding: 0.8125rem 1.625rem;
        /* 13px 26px */
        width: 8.9375rem;
        /* 143px */
        font-size: 1rem;
        /* 16px */
        letter-spacing: -0.06em;
    }

    .blog-archives {
        padding: 3rem;
        gap: 3rem;
    }

    .blog-archives__header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .blog-archives__heading {
        font-size: 2.5rem;
        /* 40px */
    }

    .blog-archives__view-all {
        display: block;
        font-size: 0.875rem;
        /* 14px */
    }

    .blog-archives__grid--mobile {
        display: none;
    }

    .blog-archives__grid--full {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        /* 32px */
    }

    .archive-card__image {
        height: 13.75rem;
        /* 220px */
    }

    .archive-card__body {
        padding: 1.5rem;
        gap: 0.75rem;
    }

    .archive-card__title {
        font-size: 1.5rem;
        /* 24px */
    }

    .archive-card__excerpt {
        font-size: 0.875rem;
        /* 14px */
    }
}

/* ---------- Blog: Desktop (1514w reference) ---------- */

@media (min-width: 94.625em) {
    .blog-hero {
        padding: 5.125rem;
        /* 82px */
        gap: 2.5rem;
        /* 40px */
    }

    .blog-hero__heading--wide {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        /* 4px */
    }

    .blog-hero__heading--narrow {
        display: none;
    }

    .blog-hero__line2 {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1.125rem;
        /* 18px */
    }

    .blog-hero__title {
        font-size: 5.125rem;
        /* 82px */
        line-height: 1.05;
    }

    .blog-hero__title--nowrap {
        white-space: nowrap;
    }

    .blog-hero__subhead--wide {
        flex: 1 1 0;
        min-width: 18rem;
        font-size: 1.125rem;
        /* 18px */
    }

    .blog-hero__form {
        padding: 0.5rem 0.5rem 0.5rem 1.5rem;
        /* 8px 8px 8px 24px */
    }

    .blog-hero__input {
        font-size: 1rem;
        /* 16px */
    }

    .blog-hero__submit {
        padding: 0.8125rem 1.625rem;
        /* 13px 26px */
        width: 8.9375rem;
        /* 143px */
        font-size: 1rem;
        /* 16px */
        letter-spacing: -0.06em;
    }

    .blog-archives {
        padding: 5.125rem;
        /* 82px */
        gap: 3rem;
        /* 48px */
    }

    .blog-archives__header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .blog-archives__heading {
        font-size: 2.5rem;
        /* 40px */
    }

    .blog-archives__view-all {
        display: block;
        font-size: 0.875rem;
        /* 14px */
    }

    .blog-archives__grid--mobile {
        display: none;
    }

    .blog-archives__grid--full {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        /* 32px */
    }

    .archive-card__image {
        height: 13.75rem;
        /* 220px */
    }

    .archive-card__body {
        padding: 1.5rem;
        /* 24px */
        gap: 0.75rem;
        /* 12px */
    }

    .archive-card__date {
        letter-spacing: 0.0625em;
        /* 1px */
    }

    .archive-card__title {
        font-size: 1.75rem;
        /* 28px */
    }

    .archive-card__excerpt {
        font-size: 0.875rem;
        /* 14px */
        line-height: 1.6;
    }
}

/* ================================================================
   Blog Details page (Figma: Desktop node 181:2245, Mobile node 183:2272)
   ================================================================
   Same 4-tier convention as the rest of the site. Header and footer are
   shared components — .aboutus-header gets a transparent overlay
   modifier so it can sit on top of the hero banner image; the shared
   .footer is reused unchanged (this page's own Figma mobile frame shows
   a more compact one-off footer variant, but every other page uses the
   established shared footer, so that wins for site-wide consistency).
   .archive-card is reused from the Blog listing page for the related
   cards below — same visual language, just with an added tag/date row. */

/* ---------- Blog Details: Hero Banner ---------- */

.blog-detail-hero {
    position: relative;
    height: 26.1875rem;
    /* 419px, Figma both tiers */
    margin-bottom: -7.875rem;
    /* -126px, Figma mobile 183:2287 */
}

.blog-detail-hero__bg {
    position: absolute;
    inset: 0;
}

    .blog-detail-hero__bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.blog-detail-hero__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(17, 17, 17, 0), #111111);
}

.aboutus-header--overlay {
    position: relative;
    z-index: 1;
    background: transparent;
}

/* ---------- Blog Details: Article ---------- */

.blog-detail-article {
    position: relative;
    /* .blog-detail-hero is also `position:relative`,
    which makes it paint as a positioned box (after plain in-flow
    content, regardless of DOM order) — without this, the hero's
    background image painted over the article in their overlap zone. */
    z-index: 1;
    display: flex;
    justify-content: center;
    padding: 0.75rem 1.25rem 2.5rem;
    /* 12px 20px 40px, Figma mobile 183:2288 */
}

.blog-detail-article__inner {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* 24px, Figma mobile */
    width: 100%;
    max-width: 50rem;
    /* 800px, Figma desktop's Text Frame width */
}

.blog-detail-article__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* 8px */
}

.blog-detail-article__eyebrow-rule {
    flex-shrink: 0;
    width: 0.75rem;
    /* 12px */
    height: 0.125rem;
    /* 2px */
    background: #edb959;
}

.blog-detail-article__eyebrow span:last-child {
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.875rem;
    /* 14px, Figma mobile */
    color: #edb959;
}

.blog-detail-article__title {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 1.625rem;
    /* 26px, Figma mobile */
    line-height: 1.25;
}

/* Byline row: present only in the Mobile Figma frame, absent from
   Desktop's. Kept across Mobile/Tablet Portrait and hidden from Tablet
   Landscape up, same "trust each frame at its own tier" rule the rest
   of the site follows — not added as a universal feature of my own. */
.blog-detail-article__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    /* 16px, Figma mobile 183:2293 */
}

.blog-detail-article__meta-author {
    font-family: "Libre Franklin", sans-serif;
    font-weight: 500;
    font-size: 0.75rem;
    /* 12px */
    color: #edb959;
}

.blog-detail-article__meta-divider {
    width: 1px;
    height: 0.625rem;
    /* 10px */
    background: rgba(255, 255, 255, 0.12);
}

.blog-detail-article__meta-date {
    font-family: "Libre Franklin", sans-serif;
    font-weight: 400;
    font-size: 0.75rem;
    /* 12px */
    color: rgba(255, 255, 255, 0.31);
}

.blog-detail-article__para {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 300;
    font-size: 0.9375rem;
    /* 15px, Figma mobile */
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.53);
}

.blog-detail-article__quote {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* 8px, Figma mobile */
    padding: 0.75rem 0.75rem 0.75rem 1.125rem;
    /* 12px 12px 12px 18px */
    border-left: 0.1875rem solid #edb959;
    /* 3px, Figma mobile 183:2299 */
}

    .blog-detail-article__quote p {
        margin: 0;
        font-family: "Fira Sans Extra Condensed", sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 1.375rem;
        /* 22px, Figma mobile */
        line-height: 1.3;
        color: #edb959;
    }

    .blog-detail-article__quote cite {
        font-style: normal;
        font-family: "Libre Franklin", sans-serif;
        font-weight: 500;
        font-size: 0.8125rem;
        /* 13px */
        color: rgba(255, 255, 255, 0.31);
    }

.blog-detail-article__subheading {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 1.375rem;
    /* 22px, Figma mobile */
}

/* ---------- Blog Details: Related ---------- */

.blog-related {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* 24px, Figma mobile */
    padding: 2.5rem 1.25rem;
    /* 40px 20px */
    background: #161616;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.blog-related__header {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    /* 6px, Figma mobile */
}

.blog-related__heading {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 1.5rem;
    /* 24px, Figma mobile */
}

.blog-related__view-all {
    font-family: "Libre Franklin", sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    /* 12px, Figma mobile */
    color: #edb959;
    text-decoration: none;
}

    .blog-related__view-all:hover {
        text-decoration: underline;
    }

.blog-related__grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* 16px, Figma mobile */
}

/* Related cards sit flush against their image (Figma has no gap there —
   the body's own 16/24px top padding already provides the breathing
   room), unlike the Archives page's cards which do want that gap. */
.archive-card--related {
    gap: 0;
}

.blog-related__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.blog-related__tag {
    font-family: "Libre Franklin", sans-serif;
    font-weight: 700;
    font-size: 0.6875rem;
    /* 11px, Figma mobile */
    letter-spacing: 0.0625em;
    /* 1px */
    color: #edb959;
}

.blog-related__date {
    font-family: "Libre Franklin", sans-serif;
    font-weight: 400;
    font-size: 0.6875rem;
    /* 11px */
    color: rgba(255, 255, 255, 0.31);
}

/* ---------- Blog Details: Tablet Portrait (744-1023px) ----------
   No Figma frame covers this range — reuses Mobile's stacked structure
   (single-column related cards), scaled up, per the site's established
   "Tablet Portrait stays close to Mobile" convention. */
@media (min-width: 46.5em) and (max-width: 63.9375em) {
    .blog-detail-hero {
        margin-bottom: -9rem;
    }

    .blog-detail-article {
        padding: 2.5rem 3rem 3.5rem;
    }

    .blog-detail-article__inner {
        gap: 1.75rem;
    }

    .blog-detail-article__eyebrow span:last-child {
        font-size: 1rem;
        /* 16px */
    }

    .blog-detail-article__title {
        font-size: 2rem;
        /* 32px */
    }

    .blog-detail-article__para {
        font-size: 1.0625rem;
        /* 17px */
    }

    .blog-detail-article__quote p {
        font-size: 1.75rem;
        /* 28px */
    }

    .blog-detail-article__subheading {
        font-size: 1.75rem;
        /* 28px */
    }

    .blog-related {
        padding: 3rem;
    }

    .blog-related__header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .blog-related__heading {
        font-size: 2rem;
        /* 32px */
    }

    .blog-related__view-all {
        font-size: 0.875rem;
        /* 14px */
    }

    .blog-related__grid {
        gap: 1.5rem;
    }
}

/* ---------- Blog Details: Tablet Landscape + Desktop Small (1024-1513px) ----------
   No Figma frame covers this range either — close enough to the 1514px
   Desktop reference to reuse its row/grid layouts directly, scaled down.
   Same 1024px anchor as the rest of the site (js/arcCarousel.js). */
@media (min-width: 64em) and (max-width: 94.5625em) {
    .blog-detail-hero {
        margin-bottom: -11rem;
    }

    .blog-detail-article {
        padding: 4rem 6rem 5rem;
    }

    .blog-detail-article__inner {
        max-width: 44rem;
        /* 704px, stepping down from Desktop's 800px */
        gap: 1.75rem;
    }

    .blog-detail-article__eyebrow span:last-child {
        font-size: 1rem;
        /* 16px */
    }

    .blog-detail-article__title {
        font-size: 2.25rem;
        /* 36px, same as Desktop's own value — already
      modest at that size, no need to shrink further */
        line-height: 1.2;
    }

    .blog-detail-article__meta {
        display: none;
        /* Desktop's own Figma frame has no byline row */
    }

    .blog-detail-article__para {
        font-size: 1.125rem;
        /* 18px */
    }

    .blog-detail-article__quote {
        gap: 0.75rem;
        /* 12px */
        padding: 1rem 1.5rem 1rem 2rem;
        /* 16px 24px 16px 32px */
        border-left: none;
    }

        .blog-detail-article__quote p {
            font-size: 1.75rem;
            /* 28px */
        }

    .blog-detail-article__subheading {
        font-size: 1.75rem;
        /* 28px */
    }

    .blog-related {
        padding: 3rem;
        gap: 3rem;
        background: #111111;
        border-top: none;
        border-bottom: none;
    }

    .blog-related__header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .blog-related__heading {
        font-size: 2.5rem;
        /* 40px */
    }

    .blog-related__view-all {
        font-size: 0.875rem;
        /* 14px */
    }

    .blog-related__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    .blog-related .archive-card__image {
        height: 13.75rem;
        /* 220px, reuse the Archives page's own tier value */
    }

    .blog-related .archive-card__title {
        font-size: 1.5rem;
        /* 24px */
    }
}

/* ---------- Blog Details: Desktop (1514w reference) ---------- */

@media (min-width: 94.625em) {
    .blog-detail-hero {
        margin-bottom: -13.125rem;
        /* -210px, Figma desktop 179:6611 */
    }

    .blog-detail-hero__gradient {
        background: linear-gradient(to bottom, rgba(17, 17, 17, 0.07), #111111);
    }

    .blog-detail-article {
        padding: 5.125rem 11.25rem 6.5rem;
        /* 82px 180px 104px */
    }

    .blog-detail-article__inner {
        gap: 2rem;
        /* 32px */
    }

    .blog-detail-article__eyebrow span:last-child {
        font-size: 1rem;
        /* 16px */
    }

    .blog-detail-article__title {
        font-size: 2.25rem;
        /* 36px */
        line-height: 1.2;
    }

    .blog-detail-article__meta {
        display: none;
        /* Desktop's own Figma frame has no byline row */
    }

    .blog-detail-article__para {
        font-size: 1.125rem;
        /* 18px */
        line-height: 1.7;
    }

    .blog-detail-article__quote {
        gap: 0.75rem;
        /* 12px */
        padding: 1rem 1.5rem 1rem 2rem;
        /* 16px 24px 16px 32px */
        border-left: none;
    }

        .blog-detail-article__quote p {
            font-size: 2rem;
            /* 32px */
            line-height: 1.3;
        }

        .blog-detail-article__quote cite {
            font-size: 0.875rem;
            /* 14px */
        }

    .blog-detail-article__subheading {
        font-size: 1.75rem;
        /* 28px */
    }

    .blog-related {
        padding: 5.125rem;
        /* 82px */
        gap: 3rem;
        /* 48px */
        background: #111111;
        border-top: none;
        border-bottom: none;
    }

    .blog-related__header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .blog-related__heading {
        font-size: 2.5rem;
        /* 40px */
    }

    .blog-related__view-all {
        font-size: 0.875rem;
        /* 14px */
    }

    .blog-related__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        /* 32px */
    }

    .blog-related .archive-card__image {
        height: 15rem;
        /* 240px */
    }

    .blog-related .archive-card__title {
        font-size: 1.75rem;
        /* 28px */
    }
}

/* ================================================================
   Artists page (Figma: Desktop node 178:4058, Mobile node 178:5081)
   ================================================================
   Same 4-tier convention as the rest of the site. Header and footer are
   shared components, reused here unchanged.

   Two deliberate departures from "trust each Figma frame at its own
   tier" (see figures elsewhere in this file for the usual rule):
   1. The genre filter row keeps all 7 chips at every breakpoint —
      Mobile's own frame only lays out 4 within its fixed export width,
      almost certainly because Figma doesn't render off-canvas content
      in a horizontally-scrollable chip row rather than as a deliberate
      "remove 3 filters on phones" decision. It scrolls horizontally
      below Desktop's width instead of disappearing.
   2. The grid keeps all 8 artist cards at every breakpoint — Mobile's
      frame only mocks up the first 4. Unlike the Blog Archives page
      (a preview list that links out to the full archive), this page
      *is* the full roster with no other way to reach the missing
      artists, so trimming it on mobile would be a real, not cosmetic,
      loss of content. */

/* ---------- Artists: Hero ---------- */

.artists-hero {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* 8px, Figma mobile 178:5093 */
    background: #111111;
    padding: 1.75rem 1.25rem;
    /* 28px 20px */
}

.artists-hero__eyebrow {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    /* 14px, Figma mobile */
    color: #edb959;
}

.artists-hero__heading--wide {
    display: none;
}

.artists-hero__title {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 2.25rem;
    /* 36px, Figma mobile 178:5095 */
    line-height: 1.1;
}

.artists-hero__accent {
    color: #edb959;
}

.artists-hero__subhead {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 300;
    font-size: 0.875rem;
    /* 14px, Figma mobile 178:5096 */
    line-height: 1.6;
    color: rgba(236, 236, 236, 0.76);
}

/* ---------- Artists: Genre Filter ---------- */

.artists-filter {
    display: flex;
    gap: 0.5rem;
    /* 8px, Figma mobile 178:5097 */
    overflow-x: auto;
    padding: 0 1.25rem 1rem;
    /* 0 20px 16px */
    scrollbar-width: none;
}

    .artists-filter::-webkit-scrollbar {
        display: none;
    }

.artists-filter__tab {
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.875rem;
    /* 30px */
    background: #1e1e1e;
    padding: 0.5rem 1rem;
    /* 8px 16px */
    font-family: "Libre Franklin", sans-serif;
    font-weight: 400;
    font-size: 0.75rem;
    /* 12px, Figma mobile */
    color: #ffffff;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

    .artists-filter__tab.is-active {
        border-color: #edb959;
        background: #edb959;
        font-weight: 600;
        color: #111111;
    }

    .artists-filter__tab:hover:not(.is-active) {
        border-color: rgba(255, 255, 255, 0.3);
    }

/* ---------- Artists: Grid ---------- */

.artists-grid-section {
    background: #111111;
    padding: 0 1.25rem 2.5rem;
    /* 0 20px 40px */
}

.artists-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    /* 24px, Figma mobile 178:5107 */
}

.artist-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* 16px, Figma mobile 178:5108 */
    background: #1e1e1e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    /* 16px */
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 420ms cubic-bezier(0.65, 0, 0.35, 1), transform 420ms cubic-bezier(0.65, 0, 0.35, 1), box-shadow 420ms cubic-bezier(0.65, 0, 0.35, 1);
}

    .artist-card:hover,
    .artist-card:focus-visible {
        border-color: rgba(237, 185, 89, 0.6);
        transform: translateY(-0.5rem);
        /* 8px */
        box-shadow: 0 1.5rem 2.5rem -1rem rgba(0, 0, 0, 0.55);
    }

    .artist-card[hidden] {
        display: none;
    }

.artist-card__image {
    position: relative;
    width: 100%;
    height: 12.5rem;
    /* 200px, Figma mobile 178:5109 */
    padding: 1rem;
    /* 16px — badge sits inset from the image edges */
    display: flex;
    align-items: flex-end;
}

    .artist-card__image img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 420ms cubic-bezier(0.65, 0, 0.35, 1);
    }

.artist-card:hover .artist-card__image img,
.artist-card:focus-visible .artist-card__image img {
    transform: scale(1.08);
}

.artist-card__badge {
    position: relative;
    z-index: 1;
    border: 1px solid #edb959;
    border-radius: 6.25rem;
    /* 100px */
    background: rgba(0, 0, 0, 0.6);
    padding: 0.25rem 0.625rem;
    /* 4px 10px */
    font-family: "Libre Franklin", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.6875rem;
    /* 11px */
    color: #edb959;
}

.artist-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* 8px */
    padding: 1rem;
    /* 16px */
}

.artist-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.artist-card__name {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 1.125rem;
    /* 18px, Figma mobile 178:5114 */
}

.artist-card__chevron {
    flex-shrink: 0;
    width: 1.25rem;
    /* 20px */
    height: 1.25rem;
    transition: transform 420ms cubic-bezier(0.65, 0, 0.35, 1);
}

.artist-card:hover .artist-card__chevron,
.artist-card:focus-visible .artist-card__chevron {
    transform: translateX(0.25rem);
}

.artist-card__desc {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 300;
    font-size: 0.75rem;
    /* 12px, Figma mobile */
    line-height: 1.5;
    color: rgba(236, 236, 236, 0.76);
}

/* ---------- Artists: Tablet Portrait (744-1023px) ----------
   No Figma frame covers this range — hero stays close to Mobile's
   stacked structure, but the grid steps to 2 columns: with 8 cards
   (not 4, as on the Blog Archives page) a single column would make for
   an excessively long scroll on a screen this wide. */
@media (min-width: 46.5em) and (max-width: 63.9375em) {
    .artists-hero {
        padding: 2.5rem 2rem;
        gap: 0.75rem;
    }

    .artists-hero__eyebrow {
        font-size: 1rem;
        /* 16px */
    }

    .artists-hero__title {
        font-size: 3rem;
        /* 48px */
    }

    .artists-hero__subhead {
        max-width: 34rem;
        font-size: 1rem;
    }

    .artists-filter {
        padding: 0 2rem 1.5rem;
        gap: 0.75rem;
    }

    .artists-filter__tab {
        padding: 0.625rem 1.25rem;
        /* 10px 20px */
        font-size: 0.875rem;
        /* 14px */
    }

    .artists-grid-section {
        padding: 0 2rem 3rem;
    }

    .artists-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .artist-card__image {
        height: 15rem;
        /* 240px */
    }

    .artist-card__name {
        font-size: 1.5rem;
        /* 24px */
    }

    .artist-card__desc {
        font-size: 0.875rem;
        /* 14px */
    }
}

/* ---------- Artists: Tablet Landscape + Desktop Small (1024-1513px) ----------
   No Figma frame covers this range either — close enough to the 1514px
   Desktop reference to reuse its row/grid layouts directly, scaled down.
   Same 1024px anchor as the rest of the site (js/arcCarousel.js). */
@media (min-width: 64em) and (max-width: 94.5625em) {
    .artists-hero {
        padding: 3.5rem 3rem 1.5rem;
        gap: 1rem;
    }

    .artists-hero__eyebrow {
        font-size: 1.125rem;
        /* 18px */
    }

    .artists-hero__heading--wide {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .artists-hero__heading--narrow {
        display: none;
    }

    .artists-hero__line2 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 1.125rem;
        /* 18px */
    }

    .artists-hero__title {
        font-size: 3.5rem;
        /* 56px, same reasoning as the other Hero
      components at this tier — see e.g. Career Hero's comment */
        line-height: 1.05;
    }

    .artists-hero__title--nowrap {
        white-space: nowrap;
    }

    .artists-hero__heading--wide .artists-hero__subhead {
        flex: 1 1 0;
        min-width: 18rem;
        font-size: 1rem;
    }

    .artists-filter {
        padding: 0 3rem 1.5rem;
        gap: 0.75rem;
    }

    .artists-filter__tab {
        padding: 0.625rem 1.25rem;
        /* 10px 20px */
        font-size: 0.875rem;
        /* 14px */
    }

    .artists-grid-section {
        padding: 0 3rem 4rem;
    }

    .artists-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    .artist-card__image {
        height: 17.5rem;
        /* 280px */
    }

    .artist-card__name {
        font-size: 1.5rem;
        /* 24px */
    }

    .artist-card__desc {
        font-size: 0.875rem;
        /* 14px */
    }
}

/* ---------- Artists: Desktop (1514w reference) ---------- */

@media (min-width: 94.625em) {
    .artists-hero {
        padding: 5.125rem 5.125rem 2rem;
        /* 82px 82px, bottom trimmed since
      the filter row below carries its own 32px pb-[32px] */
        gap: 1rem;
        /* 16px */
    }

    .artists-hero__eyebrow {
        font-size: 1.125rem;
        /* 18px */
    }

    .artists-hero__heading--wide {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .artists-hero__heading--narrow {
        display: none;
    }

    .artists-hero__line2 {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1.125rem;
        /* 18px */
    }

    .artists-hero__title {
        font-size: 6rem;
        /* 96px */
        line-height: 1.05;
    }

    .artists-hero__title--nowrap {
        white-space: nowrap;
    }

    .artists-hero__heading--wide .artists-hero__subhead {
        width: 39.4375rem;
        /* 631px, Figma desktop 178:4076 */
        font-size: 1.125rem;
        /* 18px */
    }

    .artists-filter {
        padding: 0 5.125rem 2rem;
        /* 0 82px 32px */
        gap: 0.75rem;
        /* 12px */
    }

    .artists-filter__tab {
        padding: 0.625rem 1.25rem;
        /* 10px 20px */
        font-size: 0.875rem;
        /* 14px */
    }

    .artists-grid-section {
        padding: 0 5.125rem 5.125rem;
        /* 82px */
    }

    .artists-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
        /* 24px */
    }

    .artist-card__image {
        height: 20rem;
        /* 320px */
    }

    .artist-card__name {
        font-size: 1.75rem;
        /* 28px */
    }

    .artist-card__desc {
        font-size: 0.875rem;
        /* 14px */
    }
}

/* ================================================================
   Artist Details page (Figma: Desktop node 178:4231, Mobile node 178:5204)
   ================================================================
   Same 4-tier convention as the rest of the site. Header and footer are
   shared components; .aboutus-header--overlay and the hero
   background/gradient pattern are reused unchanged from the Blog
   Details page. .artist-card / .artists-grid are reused unchanged from
   the Artists listing page for the "More Of Our Artists" row.

   Three deliberate departures from "trust each Figma frame at its own
   tier" (see comments throughout this file for the general rule):
   1. Breadcrumb nav and the "Available On" platform links exist only
      in Desktop's frame — Mobile's omits them entirely with no other
      way to reach that information, so both are kept at every tier
      (sized by hand, since no mobile reference exists for either).
   2. Upcoming Shows keeps all 4 dates at every tier — Mobile's frame
      mocks up only 2. Unlike the Blog Archives preview list, this is
      time-sensitive ticketing info with no other page to find the
      other 2 shows on, so trimming it would be a real functional loss.
   3. Releases keeps all 4 records at every tier (Mobile's frame mocks
      up 3, with two using different placeholder titles than Desktop's
      set — likely just inconsistent placeholder text between two
      independently-authored frames). Desktop's fuller list is used as
      the canonical data everywhere. The compact 100px mobile card
      treatment itself IS kept as designed — that's a real space-driven
      simplification (no room for a 3rd metadata line on a 100px card),
      unlike the missing record. */

/* ---------- Artist Details: Hero ---------- */

.artist-detail-hero {
    position: relative;
    height: 44.25rem;
    /* 708px, Figma both tiers */
    padding: 1.375rem;
    /* 22px, Figma mobile 178:5205 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.artist-detail-hero__bg {
    position: absolute;
    inset: 0;
}

    .artist-detail-hero__bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.artist-detail-hero__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(17, 17, 17, 0), #111111);
}

.artist-detail-hero__content {
    position: relative;
    z-index: 1;
}

.artist-detail-hero__content--wide {
    display: none;
}

.artist-detail-hero__content--narrow {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* 24px, Figma mobile 178:5217 */
}

.artist-detail-hero__text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* 8px, Figma mobile 178:5218 */
}

.artist-detail-badge {
    align-self: flex-start;
    background: #edb959;
    border-radius: 0.25rem;
    /* 4px */
    padding: 0.25rem 0.5rem;
    /* 4px 8px, Figma mobile */
    font-family: "Libre Franklin", sans-serif;
    font-weight: 700;
    font-size: 0.6875rem;
    /* 11px, Figma mobile */
    text-transform: uppercase;
    color: #111111;
}

.artist-detail-name {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 2.375rem;
    /* 38px, Figma mobile 178:5221 */
    line-height: 1.1;
}

.artist-detail-cta {
    align-self: flex-start;
    padding: 0.625rem 1.375rem;
    /* 10px 22px, Figma mobile */
}

    .artist-detail-cta .pill-cta__text {
        font-size: 1rem;
        /* 16px, Figma mobile */
    }

/* ---------- Artist Details: Bio + Stats ---------- */

.artist-detail-bio {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* 24px */
    background: #111111;
    padding: 1.25rem;
    /* 20px */
}

.artist-detail-bio__main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* 16px, Figma mobile 178:5223 */
    width: 100%;
}

/* Breadcrumb has no mobile Figma reference (see file header comment) —
   sized to read clearly at the smallest tier without competing with
   "The Journey" heading right below it. */
.artist-detail-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* 8px */
    font-family: "Libre Franklin", sans-serif;
    font-size: 0.75rem;
    /* 12px */
}

.artist-detail-breadcrumb__link {
    color: rgba(236, 236, 236, 0.76);
    text-decoration: none;
}

    .artist-detail-breadcrumb__link:hover {
        color: #ffffff;
    }

.artist-detail-breadcrumb__sep {
    color: rgba(255, 255, 255, 0.53);
}

.artist-detail-breadcrumb__current {
    color: #edb959;
}

.artist-detail-bio__eyebrow {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    color: #edb959;
    font-size: 1.5rem;
    /* 24px, Figma mobile 178:5224 */
}

.artist-detail-bio__para {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 300;
    font-size: 0.875rem;
    /* 14px, Figma mobile lead para */
    line-height: 1.6;
    color: #ffffff;
}

.artist-detail-bio__para--secondary {
    font-size: 0.75rem;
    /* 12px, Figma mobile 178:5226 */
    color: rgba(236, 236, 236, 0.76);
}

/* "Available On" has no mobile Figma reference (see file header
   comment) — sized down proportionally from Desktop's 22px label. */
.artist-detail-bio__platforms-label {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 700;
    color: #ffffff;
    font-size: 1rem;
    /* 16px */
}

.platform-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    /* 12px */
}

.platform-chip {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.875rem;
    /* 30px */
    background: #1e1e1e;
    padding: 0.5rem 0.875rem;
    /* 8px 14px */
    font-family: "Libre Franklin", sans-serif;
    font-weight: 500;
    font-size: 0.75rem;
    /* 12px */
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 200ms ease;
}

    .platform-chip:hover {
        border-color: rgba(255, 255, 255, 0.3);
    }

.artist-detail-stats {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* 12px, Figma mobile 178:5227 */
    background: #1e1e1e;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.75rem;
    /* 12px */
    padding: 1.25rem;
    /* 20px */
    width: 100%;
}

.artist-detail-stats__heading {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 800;
    color: #ffffff;
    font-size: 1.125rem;
    /* 18px, Figma mobile */
}

.artist-detail-stats__divider {
    height: 1px;
    width: 100%;
    background: rgba(255, 255, 255, 0.12);
}

.artist-detail-stats__list {
    display: flex;
    gap: 0.75rem;
    /* 12px, Figma mobile 178:5230 */
    width: 100%;
}

.artist-detail-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    /* 4px */
    flex: 1 1 0;
    min-width: 0;
}

.artist-detail-stat__value {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 900;
    color: #edb959;
    font-size: 1.5rem;
    /* 24px, Figma mobile */
}

.artist-detail-stat__label {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 400;
    font-size: 0.6875rem;
    /* 11px, Figma mobile */
    line-height: 1.4;
    color: rgba(236, 236, 236, 0.76);
}

/* ---------- Artist Details: Releases ---------- */

.artist-detail-releases {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* 16px, Figma mobile 178:5240 */
    background: #111111;
    padding: 1.25rem;
    /* 20px */
}

.artist-detail-releases__heading {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 1.5rem;
    /* 24px, Figma mobile */
}

.release-track {
    display: flex;
    gap: 0.75rem;
    /* 12px, Figma mobile 178:5242 */
    overflow-x: auto;
    scrollbar-width: none;
    /* padding + matching negative margin so the hover lift/shadow on
     .release-card has room to render instead of being clipped by this
     scroll container's forced overflow-y, without shifting layout */
    padding: 0.75rem 0.25rem 3rem;
    margin: -0.75rem -0.25rem -3rem;
}

    .release-track::-webkit-scrollbar {
        display: none;
    }

.release-card {
    flex: 0 0 auto;
    width: clamp(12.5rem, 55vw, 20rem);
    /* 200-320px per request */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* 8px */
    background: #1e1e1e;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    /* 8px */
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 420ms cubic-bezier(0.65, 0, 0.35, 1), transform 420ms cubic-bezier(0.65, 0, 0.35, 1), box-shadow 420ms cubic-bezier(0.65, 0, 0.35, 1);
}

    .release-card:hover,
    .release-card:focus-visible {
        border-color: rgba(237, 185, 89, 0.6);
        transform: translateY(-0.5rem);
        /* 8px */
        box-shadow: 0 1.5rem 2.5rem -1rem rgba(0, 0, 0, 0.55);
    }

.release-card__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

    .release-card__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 420ms cubic-bezier(0.65, 0, 0.35, 1);
    }

.release-card:hover .release-card__image img,
.release-card:focus-visible .release-card__image img {
    transform: scale(1.08);
}

.release-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    /* 2px */
    padding: 0.5rem;
    /* 8px */
}

.release-card__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.25rem;
}

.release-card__name {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 700;
    color: #ffffff;
    font-size: 0.75rem;
    /* 12px, Figma mobile */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.release-card__year {
    display: none;
    /* Figma's compact mobile card has no room for a year
    field — shown only on the wider Tablet Landscape+/Desktop card, see
    below */
    margin: 0;
    flex-shrink: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 400;
    color: #edb959;
}

.release-card__type {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 400;
    font-size: 0.625rem;
    /* 10px, Figma mobile */
    color: rgba(255, 255, 255, 0.53);
}

/* ---------- Artist Details: Upcoming Shows ---------- */

.artist-detail-shows {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* 16px, Figma mobile 178:5258 */
    background: #111111;
    padding: 1.25rem;
    /* 20px */
}

.artist-detail-shows__heading {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 1.5rem;
    /* 24px, Figma mobile */
}

.artist-detail-shows__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* 8px, Figma mobile */
    width: 100%;
}

.artist-detail-shows__list--wide {
    display: none;
}

.show-card--narrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* 8px, Figma mobile */
    background: #1e1e1e;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.75rem;
    /* 12px */
    padding: 1rem;
    /* 16px */
    width: 100%;
}

.show-card__info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* 8px */
    flex: 1 1 0;
    min-width: 0;
}

.show-card__date {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 800;
    color: #edb959;
    font-size: 1.125rem;
    /* 18px, Figma mobile */
}

.show-card__venue {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 600;
    color: #ffffff;
    font-size: 0.8125rem;
    /* 13px, Figma mobile */
}

.show-card__city {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 400;
    color: rgba(236, 236, 236, 0.76);
    font-size: 0.75rem;
    /* 12px, Figma mobile */
}

/* Get Ticket(s) reuses .pill-cta (same growing-circle hover as Hire
   Artist and every other CTA on the site) rather than a one-off flat
   button — Figma's own Desktop frame draws it flat/borderless, but
   that reads as an inconsistency next to the rest of the page's CTAs
   rather than an intentional variant, so the shared treatment wins
   here at every tier. */
.show-card__cta {
    flex-shrink: 0;
    padding: 0.8125rem 1.375rem;
    /* 13px 22px, Figma mobile */
}

    .show-card__cta .pill-cta__text {
        font-size: 1rem;
        /* 16px, Figma mobile */
    }

.show-card--wide {
    display: none;
}

/* ---------- Artist Details: More Of Our Artists ---------- */

.artist-detail-related {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    /* 32px, Figma mobile 178:5275 */
    background: #111111;
    padding: 1.375rem;
    /* 22px, Figma mobile 178:5273 */
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.artist-detail-related__heading {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 2rem;
    /* 32px, Figma mobile */
    line-height: 1.15;
}

/* ---------- Artist Details: Tablet Portrait (744-1023px) ----------
   No Figma frame covers this range — reuses Mobile's stacked structure
   (single-column bio+stats, narrow hero content, narrow show cards),
   scaled up, per the site's established "Tablet Portrait stays close
   to Mobile" convention. */
@media (min-width: 46.5em) and (max-width: 63.9375em) {
    .artist-detail-hero {
        padding: 2.5rem;
    }

    .artist-detail-badge {
        font-size: 0.75rem;
        /* 12px */
    }

    .artist-detail-name {
        font-size: 3.5rem;
        /* 56px */
    }

    .artist-detail-cta {
        padding: 0.875rem 1.75rem;
        /* 14px 28px */
    }

        .artist-detail-cta .pill-cta__text {
            font-size: 1.125rem;
            /* 18px */
        }

    .artist-detail-bio {
        padding: 2.5rem;
        gap: 2rem;
    }

    .artist-detail-bio__eyebrow {
        font-size: 2rem;
        /* 32px */
    }

    .artist-detail-bio__para {
        font-size: 1rem;
        /* 16px */
    }

    .artist-detail-bio__para--secondary {
        font-size: 0.9375rem;
        /* 15px */
    }

    .artist-detail-bio__platforms-label {
        font-size: 1.25rem;
        /* 20px */
    }

    .artist-detail-stats {
        padding: 1.75rem;
    }

    .artist-detail-stats__heading {
        font-size: 1.5rem;
        /* 24px */
    }

    .artist-detail-stat__value {
        font-size: 2rem;
        /* 32px */
    }

    .artist-detail-stat__label {
        font-size: 0.8125rem;
        /* 13px */
    }

    .artist-detail-releases {
        padding: 2.5rem;
    }

    .artist-detail-releases__heading {
        font-size: 2rem;
        /* 32px */
    }

    .artist-detail-shows {
        padding: 2.5rem;
    }

    .artist-detail-shows__heading {
        font-size: 2rem;
        /* 32px */
    }

    .show-card__date {
        font-size: 1.25rem;
        /* 20px */
    }

    .show-card__venue {
        font-size: 0.9375rem;
        /* 15px */
    }

    .artist-detail-related {
        padding: 2.5rem;
        gap: 2.5rem;
    }

    .artist-detail-related__heading {
        font-size: 2.5rem;
        /* 40px */
    }
}

/* ---------- Artist Details: Tablet Landscape + Desktop Small (1024-1513px) ----------
   No Figma frame covers this range either — close enough to the 1514px
   Desktop reference to reuse its row/grid layouts directly, scaled
   down. Same 1024px anchor as the rest of the site (js/arcCarousel.js).
   This is also where the hero, bio/stats and shows sections switch
   from their narrow/compact structure to the wide one Desktop uses. */
@media (min-width: 64em) {
    .artist-detail-hero {
        padding: 0 3rem 2.5rem;
    }

    .artist-detail-hero__content--narrow {
        display: none;
    }

    .artist-detail-hero__content--wide {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
    }

    .artist-detail-hero__text {
        gap: 1rem;
        /* 16px, Figma desktop 178:4245 */
    }

    .artist-detail-badge {
        font-size: 0.75rem;
        /* 12px, Figma desktop */
        padding: 0.25rem 0.75rem;
        /* 4px 12px */
    }

    .artist-detail-name {
        font-size: 5.5rem;
        /* 88px, stepping toward Desktop's 110px — see
      other Hero components' comments for the same "not the full size
      until true Desktop" reasoning */
        line-height: 0.95;
    }

    .artist-detail-cta {
        padding: 1rem 1.875rem;
        /* 16px 30px, Figma desktop */
    }

        .artist-detail-cta .pill-cta__text {
            font-size: 1.25rem;
            /* 20px, Figma desktop */
        }

    .artist-detail-bio {
        flex-direction: row;
        align-items: flex-start;
        gap: 3rem;
        padding: 3rem;
    }

    .artist-detail-bio__main {
        flex: 1 1 0;
        min-width: 0;
        gap: 1.5rem;
    }

    .artist-detail-breadcrumb {
        font-size: 0.875rem;
        /* 14px, Figma desktop */
    }

    .artist-detail-bio__eyebrow {
        font-size: 2.5rem;
        /* 40px, stepping toward Desktop's 48px */
    }

    .artist-detail-bio__para {
        font-size: 1.125rem;
        /* 18px, stepping toward Desktop's 20px */
    }

    .artist-detail-bio__para--secondary {
        font-size: 1rem;
        /* 16px, Figma desktop */
        color: rgba(236, 236, 236, 0.76);
    }

    .artist-detail-bio__platforms-label {
        font-size: 1.375rem;
        /* 22px, Figma desktop */
    }

    .platform-chip {
        padding: 0.625rem 1.125rem;
        /* 10px 18px, Figma desktop */
        font-size: 0.875rem;
        /* 14px, Figma desktop */
    }

    .artist-detail-stats {
        flex-shrink: 0;
        width: 22rem;
        /* stepping toward Desktop's 400px */
        padding: 2rem;
        gap: 1.5rem;
    }

    .artist-detail-stats__heading {
        font-size: 1.75rem;
        /* 28px, Figma desktop */
    }

    .artist-detail-stats__list {
        flex-direction: column;
        gap: 1.25rem;
    }

    .artist-detail-stat {
        flex: none;
    }

    .artist-detail-stat__value {
        font-size: 2.25rem;
        /* 36px, stepping toward Desktop's 40px */
    }

    .artist-detail-stat__label {
        font-size: 0.875rem;
        /* 14px, Figma desktop */
    }

    .artist-detail-releases {
        padding: 3rem;
        gap: 2rem;
    }

    .artist-detail-releases__heading {
        font-size: 2.5rem;
        /* 40px, stepping toward Desktop's 48px */
    }

    .release-track {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
        /* 24px, Figma desktop */
    }

    .release-card {
        width: auto;
        gap: 1rem;
        /* 16px, Figma desktop */
        border-radius: 0.75rem;
        /* 12px */
    }

    .release-card__image {
        height: 13.75rem;
        /* 220px, Figma desktop */
    }

    .release-card__body {
        padding: 1rem;
        /* 16px, Figma desktop */
        gap: 0.25rem;
        /* 4px */
    }

    .release-card__name {
        font-size: 1.375rem;
        /* 22px, Figma desktop */
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .release-card__year {
        display: block;
        font-size: 0.8125rem;
        /* 13px, Figma desktop */
    }

    .release-card__type {
        font-size: 0.8125rem;
        /* 13px, Figma desktop */
    }

    .artist-detail-shows {
        padding: 3rem;
        gap: 2rem;
    }

    .artist-detail-shows__heading {
        font-size: 2.5rem;
        /* 40px, stepping toward Desktop's 48px */
    }

    .artist-detail-shows__list--narrow {
        display: none;
    }

    .artist-detail-shows__list--wide {
        display: flex;
        gap: 0.75rem;
        /* 12px, Figma desktop */
    }

    .show-card--wide {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #1e1e1e;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0.75rem;
        /* 12px */
        padding: 1.5rem;
        /* 24px, Figma desktop */
        width: 100%;
    }

    .show-card__left,
    .show-card__right {
        display: flex;
        align-items: center;
        gap: 2rem;
        /* 32px, Figma desktop */
    }

    .show-card--wide .show-card__date {
        font-size: 1.5rem;
        /* 24px, Figma desktop */
    }

    .show-card--wide .show-card__venue {
        font-size: 1rem;
        /* 16px, Figma desktop */
    }

    .show-card--wide .show-card__city {
        margin: 0;
        font-size: 1rem;
        /* 16px, Figma desktop */
    }

    .show-card--wide .show-card__cta {
        padding: 0.625rem 1.25rem;
        /* 10px 20px, Figma desktop */
    }

        .show-card--wide .show-card__cta .pill-cta__text {
            font-size: 0.8125rem;
            /* 13px, Figma desktop */
            font-weight: 700;
            text-transform: uppercase;
        }

    .artist-detail-related {
        padding: 3rem;
        gap: 2.5rem;
        border-top: none;
    }

    .artist-detail-related__heading {
        font-size: 3rem;
        /* 48px, Figma desktop */
    }

    /* Only 4 related cards here (vs. 8 on the full Artists listing page,
     where 3-across is the right call at this tier) — 2x2 reads better
     than a lopsided 3-then-1 row for exactly 4 items. */
    .artist-detail-related .artists-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- Artist Details: Desktop (1514w reference) ---------- */

@media (min-width: 94.625em) {
    .artist-detail-hero {
        padding: 0 5.125rem 3rem;
        /* 82px, 48px */
    }

    .artist-detail-name {
        font-size: 6.875rem;
        /* 110px */
        line-height: 0.9;
    }

    .artist-detail-bio {
        gap: 5.125rem;
        /* 82px */
        padding: 5.125rem;
    }

    .artist-detail-bio__main {
        gap: 2rem;
        /* 32px */
    }

    .artist-detail-bio__eyebrow {
        font-size: 3rem;
        /* 48px */
    }

    .artist-detail-bio__para {
        font-size: 1.25rem;
        /* 20px */
    }

    .artist-detail-stats {
        width: 25rem;
        /* 400px */
        padding: 2rem;
    }

    .artist-detail-stat__value {
        font-size: 2.5rem;
        /* 40px */
    }

    .artist-detail-releases {
        padding: 0 5.125rem 5.125rem;
        /* 82px */
    }

    .artist-detail-releases__heading {
        font-size: 3rem;
        /* 48px */
    }

    .artist-detail-shows {
        padding: 0 5.125rem 5.125rem;
        /* 82px */
    }

    .artist-detail-shows__heading {
        font-size: 3rem;
        /* 48px */
    }

    .artist-detail-related {
        padding: 0 5.125rem 5.125rem;
        /* 82px */
    }

        .artist-detail-related .artists-grid {
            grid-template-columns: repeat(4, 1fr);
            /* Figma desktop: 4-across */
        }
}

/* ============================================================
   Contact Us
   ============================================================ */

.contact-hero {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* 12px, Figma mobile 178:4979 */
    background: #111111;
    padding: 1.25rem;
    /* 20px */
}

.contact-hero__heading {
    display: flex;
    flex-direction: column;
}

.contact-hero__title {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 2.25rem;
    /* 36px, Figma mobile */
    line-height: 1.05;
}

.contact-hero__accent {
    color: #edb959;
}

.contact-hero__subhead {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 400;
    font-size: 0.875rem;
    /* 14px, Figma mobile */
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.53);
}

.contact-hero__subhead--wide {
    display: none;
    /* Figma's mobile frame uses shorter copy; the fuller
    Desktop copy takes over at the wide tier below */
}

.contact-main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* 24px, Figma mobile 178:4982 */
    background: #111111;
    padding: 0 1.25rem 1.25rem;
    /* 20px — hero above already carries the
    matching top gap via its own padding */
}

/* ---------- Contact: Form ---------- */

.contact-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Figma: items-start — without this the
    default flex stretch expands the submit button (and its hover-fill
    circle, sized for a compact pill) to the card's full width */
    gap: 1.25rem;
    /* 20px, Figma mobile 178:4983 */
    background: #1c1c1c;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1rem;
    /* 16px */
    padding: 1.5rem;
    /* 24px */
}

.contact-form__heading {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: #edb959;
    font-size: 1.25rem;
    /* 20px, Figma mobile */
}

.contact-form__stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* 16px, Figma mobile */
    width: 100%;
}

.contact-form__row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* stacked on mobile/Tablet Portrait — Figma's Input Row
    goes side-by-side only from Tablet Landscape up */
    width: 100%;
}

.contact-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    /* 6px, Figma mobile */
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
}

.contact-field__label {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 600;
    color: #ececec;
    font-size: 0.8125rem;
    /* 13px, Figma mobile */
}

.contact-field__input,
.contact-field__textarea,
.contact-field__select {
    width: 100%;
    background: #222222;
    /* Figma mobile fields sit on a lighter box than
    the #1c1c1c card; Desktop drops this and lets the card show through */
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    /* 8px */
    padding: 0.75rem;
    /* 12px, Figma mobile */
    font-family: "Libre Franklin", sans-serif;
    font-weight: 400;
    font-size: 0.8125rem;
    /* 13px, Figma mobile */
    color: #ececec;
    transition: border-color 200ms ease;
}

    .contact-field__input::placeholder,
    .contact-field__textarea::placeholder {
        color: #888888;
        /* Figma mobile placeholder color */
    }

    .contact-field__input:focus,
    .contact-field__textarea:focus,
    .contact-field__select:focus {
        outline: none;
        border-color: rgba(237, 185, 89, 0.6);
    }

.contact-field__textarea {
    height: 9.375rem;
    /* 150px, close to Desktop's 160px — Figma's mobile
    frame has no Message field of its own, see the HTML comment above it */
    resize: vertical;
}

.contact-field__select-wrap {
    position: relative;
    width: 100%;
}

.contact-field__select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 2.25rem;
    /* room for the icon */
    /* The trigger itself is fully custom-styled above, but the dropdown
     popup a browser opens on click is native UI outside CSS's reach —
     color-scheme is the one hook that tells the browser to draw that
     popup (and its own default scrollbar/focus styling) in dark chrome
     instead of the light default. */
    color-scheme: dark;
}

    .contact-field__select:invalid {
        color: rgba(255, 255, 255, 0.53);
        /* dims the placeholder option */
    }

    .contact-field__select option {
        background: #1c1c1c;
        color: #ececec;
    }

.contact-field__select-icon {
    position: absolute;
    right: 0.75rem;
    /* 12px */
    top: 50%;
    transform: translateY(-50%);
    width: 0.75rem;
    /* 12px, Figma mobile */
    height: 0.75rem;
    pointer-events: none;
}

.contact-form__submit {
    padding: 0.625rem 1.375rem;
    /* 10px 22px, Figma mobile */
}

    .contact-form__submit .pill-cta__text {
        font-size: 1rem;
        /* 16px, Figma mobile */
    }

/* ---------- Contact: Details ---------- */

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* 24px, matches Figma mobile's flat rhythm between the
    Office and Departments blocks */
    width: 100%;
}

.contact-details__label {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    color: #edb959;
    font-size: 1.5rem;
    /* 24px */
}

.contact-office {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* 16px, only visible once the label reappears at the wide
    tier below — a display:none label contributes no flex gap on mobile */
    width: 100%;
}

.contact-details__label--office {
    display: none;
    /* Figma mobile's Office card skips the "OFFICE CONTACT"
    eyebrow entirely — reintroduced from Tablet Landscape up */
}

.contact-office__card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* 12px, Figma mobile */
    background: #1c1c1c;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1rem;
    /* 16px */
    padding: 1.5rem;
    /* 24px */
    width: 100%;
}

.contact-office__city {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 700;
    color: #ffffff;
    font-size: 1.125rem;
    /* 18px, Figma mobile */
}

.contact-office__address {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.53);
    font-size: 0.8125rem;
    /* 13px, Figma mobile */
    line-height: 1.5;
}

.contact-office__rule {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
}

.contact-office__meta {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 400;
    color: #ffffff;
    font-size: 0.8125rem;
    /* 13px, Figma mobile */
}

.contact-office__value {
    color: #edb959;
    text-decoration: none;
}

    .contact-office__value:hover,
    .contact-office__value:focus-visible {
        text-decoration: underline;
    }

.contact-departments {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* 16px */
    width: 100%;
}

.contact-departments__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* 12px */
    width: 100%;
}

.dept-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* 8px */
    background: #1c1c1c;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.75rem;
    /* 12px */
    padding: 1.25rem;
    /* 20px */
    width: 100%;
}

.dept-card__name {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 700;
    color: #ffffff;
    font-size: 1.125rem;
    /* 18px — same at every tier per Figma */
}

.dept-card__desc {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.53);
    font-size: 0.8125rem;
    /* 13px — same at every tier per Figma */
}

.dept-card__email {
    display: inline-block;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 600;
    color: #edb959;
    font-size: 0.8125rem;
    /* 13px — same at every tier per Figma */
    text-decoration: none;
}

    .dept-card__email:hover,
    .dept-card__email:focus-visible {
        text-decoration: underline;
    }

/* ---------- Contact: Tablet Portrait ---------- */

@media (min-width: 46.5em) and (max-width: 63.9375em) {
    .contact-hero {
        padding: 2.5rem;
    }

    .contact-hero__title {
        font-size: 3rem;
        /* 48px, stepping toward Desktop's 96px */
    }

    .contact-main {
        padding: 0 2.5rem 2.5rem;
    }

    .contact-form {
        padding: 2rem;
        gap: 1.5rem;
    }

    .contact-form__heading {
        font-size: 1.5rem;
        /* 24px, stepping toward Desktop's 32px */
    }
}

/* ---------- Contact: Tablet Landscape + Desktop Small ---------- */

@media (min-width: 64em) {
    .contact-hero {
        padding: 3rem 3rem 2rem;
    }

    .contact-hero__title {
        font-size: 4.5rem;
        /* 72px, stepping toward Desktop's 96px */
    }

    .contact-hero__subhead {
        font-size: 1.125rem;
        /* 18px, Figma desktop */
    }

    .contact-hero__subhead--narrow {
        display: none;
    }

    .contact-hero__subhead--wide {
        display: block;
    }

    .contact-main {
        flex-direction: row;
        align-items: flex-start;
        gap: 3rem;
        /* stepping toward Desktop's 82px */
        padding: 0 3rem 3rem;
    }

    .contact-form {
        flex: 1 1 0;
        min-width: 0;
        padding: 2rem;
    }

    .contact-form__heading {
        font-size: 1.75rem;
        /* 28px, stepping toward Desktop's 32px */
    }

    .contact-form__row {
        flex-direction: row;
        gap: 1.25rem;
        /* 20px, Figma desktop */
    }

    .contact-field__label {
        font-size: 0.75rem;
        /* 12px, Figma desktop */
    }

    .contact-field__input,
    .contact-field__textarea,
    .contact-field__select {
        background: transparent;
        /* Desktop drops the lighter mobile field
      background and lets the #1c1c1c card show through */
        padding: 1rem;
        /* 16px, Figma desktop */
        font-size: 0.875rem;
        /* 14px, Figma desktop */
        color: #ececec;
    }

        .contact-field__input::placeholder,
        .contact-field__textarea::placeholder {
            color: rgba(255, 255, 255, 0.53);
            /* Figma desktop placeholder color */
        }

    .contact-field__textarea {
        height: 10rem;
        /* 160px, Figma desktop */
    }

    .contact-field__select-icon {
        width: 1rem;
        /* 16px, Figma desktop */
        height: 1rem;
        right: 1rem;
    }

    .contact-form__submit {
        padding: 1rem 1.875rem;
        /* 16px 30px, Figma desktop */
    }

        .contact-form__submit .pill-cta__text {
            font-size: 1.25rem;
            /* 20px, Figma desktop */
        }

    .contact-details {
        flex-shrink: 0;
        width: 21.25rem;
        /* stepping toward Desktop's 480px */
        gap: 3rem;
        /* 48px, Figma desktop */
    }

    .contact-details__label--office {
        display: block;
    }

    .contact-office__city {
        font-size: 1.25rem;
        /* 20px, stepping toward Desktop's 22px */
    }

    .contact-office__address,
    .contact-office__meta {
        font-size: 0.875rem;
        /* 14px, Figma desktop */
    }
}

/* ---------- Contact: Desktop (1514w reference) ---------- */

@media (min-width: 94.625em) {
    .contact-hero {
        padding: 5.125rem 5.125rem 3rem;
        /* 82px 82px 48px */
        gap: 1.5rem;
        /* 24px, Figma desktop */
    }

    .contact-hero__title {
        font-size: 6rem;
        /* 96px */
    }

    .contact-main {
        padding: 3rem 5.125rem 5.125rem;
        /* 48px 82px 82px */
        gap: 5.125rem;
        /* 82px */
    }

    .contact-form {
        padding: 2.5rem;
        /* 40px */
        gap: 2rem;
        /* 32px */
    }

    .contact-form__heading {
        font-size: 2rem;
        /* 32px */
    }

    .contact-details {
        width: 30rem;
        /* 480px */
    }

    .contact-office__city {
        font-size: 1.375rem;
        /* 22px */
    }
}

/* ============================================================
   Legal (Privacy Policy / Terms & Condition)
   ============================================================ */

.legal-hero {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* 12px, Figma mobile 59:860 */
    background: #111111;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 1.25rem;
    /* 20px */
}

.legal-hero__title {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 2.25rem;
    /* 36px, Figma mobile */
    line-height: 1.05;
}

.legal-hero__subhead {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 400;
    font-size: 0.8125rem;
    /* 13px, Figma mobile */
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.53);
}

/* ---------- Legal: Directory nav ---------- */

.legal-nav--narrow {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    /* 8px, Figma mobile 59:863 */
    padding: 0 1.25rem 1rem;
    /* 20px, 16px */
}

.legal-nav__chip {
    border-radius: 0.25rem;
    /* 4px */
    padding: 0.5rem 0.75rem;
    /* 8px 12px */
    font-family: "Libre Franklin", sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    /* 12px, Figma mobile */
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 200ms ease, color 200ms ease;
}

    .legal-nav__chip.is-active {
        background: #edb959;
        color: #111111;
    }

    .legal-nav__chip:hover:not(.is-active),
    .legal-nav__chip:focus-visible:not(.is-active) {
        background: rgba(255, 255, 255, 0.18);
    }

.legal-nav--wide {
    display: none;
    /* a vertical sidebar list only makes sense once there's
    room beside the content column — reintroduced at Tablet Landscape,
    the mobile chip row above covers this same navigation until then */
}

/* ---------- Legal: Content ---------- */

.legal-body {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.legal-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    /* 32px, Figma mobile 59:870 */
    padding: 0 1.25rem 1.25rem;
    /* 20px */
    width: 100%;
}

.legal-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* 12px, Figma mobile */
    width: 100%;
}

.legal-section__heading {
    margin: 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: #edb959;
    font-size: 1.5rem;
    /* 24px, Figma mobile */
    line-height: 1.2;
}

.legal-section__subheading {
    margin: 0.5rem 0 0;
    font-family: "Fira Sans Extra Condensed", sans-serif;
    font-weight: 700;
    color: #ffffff;
    font-size: 1.125rem;
    /* 18px */
    line-height: 1.3;
}

.legal-section p {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 400;
    font-size: 0.875rem;
    /* 14px, Figma mobile */
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.53);
}

.legal-section ul,
.legal-section ol {
    margin: 0;
    padding-left: 1.25rem;
    /* 20px */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* 8px */
}

.legal-section li {
    font-family: "Libre Franklin", sans-serif;
    font-weight: 400;
    font-size: 0.875rem;
    /* 14px, Figma mobile */
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.53);
}

    .legal-section li::marker {
        color: #edb959;
    }

.legal-section a {
    color: #edb959;
    text-decoration: underline;
    text-underline-offset: 0.125rem;
}

    .legal-section a:hover,
    .legal-section a:focus-visible {
        color: #f5cd7e;
    }

.legal-section strong {
    color: #ececec;
    font-weight: 600;
}

/* ---------- Legal: Tablet Portrait ---------- */

@media (min-width: 46.5em) and (max-width: 63.9375em) {
    .legal-hero {
        padding: 2.5rem;
    }

    .legal-hero__title {
        font-size: 3rem;
        /* 48px, stepping toward Desktop's 96px */
    }

    .legal-nav--narrow {
        padding: 0 2.5rem 1.5rem;
    }

    .legal-content {
        padding: 0 2.5rem 2.5rem;
        gap: 2.5rem;
    }

    .legal-section__heading {
        font-size: 1.75rem;
        /* 28px, stepping toward Desktop's 32px */
    }
}

/* ---------- Legal: Tablet Landscape + Desktop Small ---------- */

@media (min-width: 64em) {
    .legal-hero {
        padding: 3rem 3rem 2rem;
        border-bottom: none;
        /* the rule now sits at the end of the wide
      sidebar/content row below instead, matching Figma's desktop frame */
    }

    .legal-hero__title {
        font-size: 4.5rem;
        /* 72px, stepping toward Desktop's 96px */
    }

    .legal-hero__subhead {
        font-size: 1rem;
        /* 16px, Figma desktop */
    }

    .legal-nav--narrow {
        display: none;
    }

    .legal-nav--wide {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        /* 24px, Figma desktop */
        flex-shrink: 0;
        width: 18rem;
        /* stepping toward Desktop's 320px */
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        /* stands in for the
      hero's own border-bottom, now removed above, so the divider still
      reads as separating the hero from the body on desktop */
        padding-top: 3rem;
        margin-top: -3rem;
        /* the content column runs to 20+ sections — pin the 3-link directory
       in view instead of losing it to a few thousand pixels of scroll */
        position: sticky;
        top: 2rem;
    }

    .legal-nav__eyebrow {
        margin: 0;
        font-family: "Fira Sans Extra Condensed", sans-serif;
        font-weight: 700;
        color: #edb959;
        font-size: 1.375rem;
        /* 22px, Figma desktop */
    }

    .legal-nav__list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        /* 16px, Figma desktop */
        width: 100%;
    }

    .legal-nav__link {
        display: flex;
        align-items: center;
        width: 100%;
        padding-bottom: 0.5rem;
        /* 8px */
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        font-family: "Libre Franklin", sans-serif;
        font-weight: 600;
        font-size: 0.875rem;
        /* 14px, Figma desktop */
        color: #ececec;
        text-decoration: none;
        transition: color 200ms ease, border-color 200ms ease;
    }

        .legal-nav__link.is-active {
            color: #edb959;
            border-color: #edb959;
        }

        .legal-nav__link:hover:not(.is-active),
        .legal-nav__link:focus-visible:not(.is-active) {
            color: #ffffff;
            border-color: rgba(255, 255, 255, 0.3);
        }

    .legal-body {
        flex-direction: row;
        align-items: flex-start;
        gap: 3rem;
        /* stepping toward Desktop's 82px */
        padding: 0 3rem 3rem;
    }

    .legal-content {
        padding: 0;
        gap: 2.5rem;
        /* stepping toward Desktop's 48px */
        flex: 1 1 0;
        min-width: 0;
    }

    .legal-section__heading {
        font-size: 2rem;
        /* 32px, Figma desktop */
    }

    .legal-section p,
    .legal-section li {
        font-size: 1rem;
        /* 16px, Figma desktop */
        line-height: 1.7;
        /* Figma desktop */
    }

    .legal-section__subheading {
        font-size: 1.25rem;
        /* 20px */
    }
}

/* ---------- Legal: Desktop (1514w reference) ---------- */

@media (min-width: 94.625em) {
    .legal-hero {
        padding: 5.125rem 5.125rem 4rem;
        /* 82px 82px 64px */
    }

    .legal-hero__title {
        font-size: 6rem;
        /* 96px */
    }

    .legal-nav--wide {
        width: 20rem;
        /* 320px */
    }

    .legal-body {
        gap: 5.125rem;
        /* 82px */
        padding: 4rem 5.125rem 5.125rem;
        /* 64px 82px 82px */
    }

    .legal-content {
        gap: 3rem;
        /* 48px */
    }
}