/* ==========================================================
HEADER
========================================================== */

.site-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    padding:1.4rem 0;

    transition:

        background .45s ease,

        backdrop-filter .45s ease,

        border-color .45s ease,

        padding .35s ease,

        box-shadow .35s ease;

}

.site-header.scrolled{

    padding:1rem 0;

    background:rgba(7,11,15,.82);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.06);

    box-shadow:0 10px 40px rgba(0,0,0,.28);

}

.nav-container {
    width: 100%;
    /* Matches .container in base.css -- same fixed-cap bug, same fix. */
    max-width: min(1800px, 92vw);
    margin: 0 auto;
    padding-left: clamp(48px, 6vw, 96px);
    padding-right: clamp(48px, 6vw, 96px);
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.logo-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .02);
}

.logo-mark.has-uploaded-logo {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-color: transparent;
    background-color: transparent;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.logo-text span {
    font-size: 1.15rem;
    font-weight: 700;
}

.logo-text strong {
    color: var(--color-red);
    font-size: 1.15rem;
}

.main-nav{

    display:flex;

    gap:2.75rem;

    align-items:center;

}

.main-nav a{

    position:relative;

    color:rgba(255,255,255,.72);

    text-decoration:none;

    font-weight:600;

    transition:

        color .3s ease;

}

.main-nav a:hover{

    color:#ffffff;

}

.main-nav a::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-10px;

    width:0;

    height:2px;

    background:var(--color-red);

    transform:translateX(-50%);

    transition:

        width .35s cubic-bezier(.22,.61,.36,1);

}

.main-nav a:hover::after,

.main-nav a.active::after{

    width:100%;

}

.main-nav a.active{

    color:#ffffff;

}

/* ==========================================================
   MOBILE NAV
========================================================== */

.mobile-toggle {
    display: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(var(--color-white-rgb), .04);
    align-items: center;
    justify-content: center;
}

.mobile-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-white);
    position: relative;
    transition: .35s;
}

.mobile-toggle span::before,
.mobile-toggle span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: var(--color-white);
    transition: .35s;
}

.mobile-toggle span::before {
    top: -7px;
}

.mobile-toggle span::after {
    top: 7px;
}

/* Hamburger morphs into an X while the menu is open. */
.mobile-toggle.active span {
    background: transparent;
}

.mobile-toggle.active span::before {
    top: 0;
    transform: rotate(45deg);
}

.mobile-toggle.active span::after {
    top: 0;
    transform: rotate(-45deg);
}

body.nav-open {
    overflow: hidden;
}

@media (max-width: 980px) {
    .mobile-toggle {
        display: flex;
    }

    /* There are two <nav class="main-nav"> panels per page (a left half and
       a right half, split around the centred logo on desktop). On mobile
       they used to both become full-height fixed overlays anchored at the
       same top offset, so opening the menu just stacked one panel exactly
       on top of the other -- the right-hand links (Behind the Beak, Uplift
       Directory, Contact) were rendered underneath and were never
       reachable by tap. Splitting the overlay into two stacked halves by
       DOM order (nav:nth-of-type(1) / (2)) keeps both panels visible and
       independently tappable instead of overlapping. */
    .main-nav {
        position: fixed;
        top: 94px;
        left: 100%;
        width: 100%;
        background: var(--surface-primary);
        flex-direction: column;
        justify-content: center;
        padding: 2.5rem 2rem;
        transition: left .45s;
        gap: 1.75rem;
    }

    nav.main-nav:nth-of-type(1) {
        height: calc(50vh - 47px);
    }

    nav.main-nav:nth-of-type(2) {
        top: calc(50vh + 47px);
        height: calc(50vh - 47px);
        border-top: 1px solid rgba(255, 255, 255, .08);
    }

    .main-nav.active {
        left: 0;
    }
}

/* ==========================================================
   BUTTONS
========================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    padding: 1rem 1.8rem;
    border-radius: 999px;
    font-weight: 600;
    /* .btn never set its own text color, relying on inheritance --
       fine everywhere else, but it left "See Our Work" (.btn-outline,
       near-transparent background) with no guaranteed contrast, so it
       only became visible on hover once the background/color pair
       changed. Explicit white text makes every .btn variant readable
       at rest, not just on hover. */
    color: var(--color-white);
    transition:
        background .35s ease,
        color .35s ease,
        transform .35s cubic-bezier(.22,.61,.36,1),
        box-shadow .35s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.btn-primary {
    background: var(--color-red);
    color: var(--color-white);
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 35px rgba(233,42,74,.28);
}

.btn-outline {
    border: 1px solid rgba(var(--color-white-rgb), .15);
    background: rgba(var(--color-white-rgb), .03);
    backdrop-filter: blur(8px);
}

.btn-outline:hover {
    background: var(--color-white);
    color: var(--color-black);
}

/* .btn-secondary was used on the closing CTA's "View Our Work" button
   but was never actually defined anywhere -- it silently fell back to
   bare .btn with no border or background, i.e. an invisible button. */
.btn-secondary {
    border: 1px solid rgba(var(--color-white-rgb), .3);
    background: rgba(var(--color-white-rgb), .05);
    backdrop-filter: blur(8px);
}

.btn-secondary:hover {
    background: var(--color-white);
    color: var(--color-black);
}

.nav-client-btn{
    padding:.55rem 1.3rem;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.25);
    font-size:.85rem !important;
    font-weight:600 !important;
    color:#fff !important;
    transition:background .25s ease,color .25s ease,border-color .25s ease;
}

.nav-client-btn:hover{
    background:#fff;
    color:#000 !important;
    border-color:#fff;
}

.staff-access-dot{
    display:inline-block;
    width:5px;
    height:5px;
    border-radius:50%;
    background:currentColor;
    opacity:.14;
    margin-left:.65rem;
    vertical-align:middle;
    transition:opacity .3s ease;
}

.staff-access-dot:hover{
    opacity:.6;
}

/* ==========================================================
   BUTTON SHIMMER
========================================================== */

.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 120%;
    height: 100%;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(var(--color-white-rgb), .22),
            transparent
        );
    transition: .8s;
    z-index: -1;
}

.btn:hover::before {
    left: 130%;
}

/* ==========================================================
   CARDS
========================================================== */

.card {
    background: var(--gradient-card);
    border: 1px solid rgba(var(--color-white-rgb), .05);
    border-radius: var(--radius-lg);
    padding: 2rem;
    transition: .45s cubic-bezier(.22, .61, .36, 1);
    overflow: hidden;
    position: relative;
}

.card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            135deg,
            rgba(var(--color-white-rgb), .06),
            transparent
        );
    opacity: 0;
    transition: .45s;
}

.card:hover {
    transform: translateY(-10px);
    border-color: rgba(var(--color-white-rgb), .14);
    box-shadow: 0 35px 90px rgba(var(--color-black-rgb), .45);
}

.card:hover::before {
    opacity: 1;
}

.card h3 {
    margin-bottom: .85rem;
    font-size: 1.4rem;
}

.card p {
    color: var(--text-secondary);
}

/* ==========================================================
   ICON BADGES
========================================================== */

.icon-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--color-white-rgb), .05);
    margin-bottom: 2rem;
    font-size: 1.8rem;
    color: var(--color-red);
}

/* ==========================================================
   SECTION TITLES
========================================================== */

.section-title {
    font-size: var(--heading-xl);
    margin-bottom: 1rem;
}

.section-intro {
    max-width: 640px;
    color: var(--text-secondary);
    margin-bottom: 4rem;
    line-height: 1.75;
}

/* ==========================================================
   TRUST STRIP
========================================================== */

.trust-strip {
    position: relative;
    background: #060606;
    border-top: 1px solid rgba(255, 255, 255, .05);
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.trust-grid {
    /* flex + space-between spaced items by leftover row space, which
       is uneven when the words themselves are different widths
       ("Integrity" vs "Communication") -- dividers ended up sitting
       right against one word and far from its neighbour. Equal grid
       columns give every item the same width, so the divider always
       lands at the same relative spot regardless of word length.
       Deliberately NOT wrapped in .container -- runs edge to edge. */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    padding: 3.5rem clamp(2.5rem, 6vw, 6rem);
}

.trust-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 clamp(1.5rem, 3vw, 3rem);
    /* Wider, more visible divider than the original hairline -- this
       is what carried the sense of structure/color that got lost. */
    border-right: 1px solid rgba(227, 28, 61, .18);
    transition: transform .35s cubic-bezier(.22,.61,.36,1);
}

.trust-item:last-child {
    border-right: none;
}

/* Alternating tilt gives the line a hand-placed feel rather than a
   machine-perfect grid. Straightens and lifts on hover. */
.trust-item:nth-child(odd)  { transform: rotate(-2deg); }
.trust-item:nth-child(even) { transform: rotate(1.6deg); }
.trust-item:nth-child(3)    { transform: rotate(-1.2deg); }

.trust-item:hover {
    transform: rotate(0deg) translateY(-6px);
}

/* Big ghost numeral behind the word -- same visual language as the
   Process section's numerals, and brings color back into this
   section instead of it reading flat/monochrome. */
.trust-number {
    display: block;
    position: absolute;
    top: -1.6rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1;
    color: rgba(227, 28, 61, .16);
    z-index: 0;
    transition: color .35s ease;
    pointer-events: none;
}

.trust-item:hover .trust-number {
    color: rgba(227, 28, 61, .32);
}

.trust-item h3,
.trust-item p {
    position: relative;
    z-index: 1;
}

.trust-item h3 {
    margin: 0;
    /* Fraunces read as too playful/whimsical for this brand -- swapped
       for Instrument Serif, a cleaner high-contrast editorial serif
       with real curve but none of the wonky character. */
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2.1rem, 4vw, 3.4rem);
    letter-spacing: -.01em;
    text-transform: none;
}

.trust-item p {
    margin-top: .6rem;
    color: rgba(255, 255, 255, .38);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: center;
    max-width: 180px;
}

@media (max-width: 900px) {
    .trust-grid {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }

    .trust-item {
        border-right: none;
        border-bottom: 1px solid rgba(227, 28, 61, .18);
        padding-bottom: 2rem;
    }

    .trust-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .trust-item:nth-child(odd),
    .trust-item:nth-child(even),
    .trust-item:nth-child(3) {
        transform: none;
    }
}

/* ==========================================================
   GLOBAL CARD SYSTEM
========================================================== */

.card-surface {
    background:
        linear-gradient(
            180deg,
            rgba(27,33,39,.96),
            rgba(19,24,29,.98)
        );
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 24px;
    box-shadow:
        0 12px 40px rgba(0,0,0,.20);
    transition:
        transform .35s cubic-bezier(.22,.61,.36,1),
        border-color .35s ease,
        box-shadow .35s ease;
}

.card-surface:hover {
    transform: translateY(-8px);
    border-color: rgba(233,42,74,.25);
    box-shadow:
        0 22px 60px rgba(0,0,0,.28);
}

/* ==========================================================
   SIGNATURE FOOTER
========================================================== */

.site-footer{

    position:relative;

    margin-top:-1px;

    background:

        linear-gradient(

            180deg,

            #030507 0%,

            #071A22 18%,

            #0A313C 55%,

            #0D4A59 100%

        );

    padding:3.25rem 0 1.5rem;

}

.footer-content{

    display:grid;

    grid-template-columns:

        auto

        1fr

        auto;

    align-items:center;

    gap:3rem;

}

.footer-logo{

    display:flex;

    align-items:center;

    gap:1rem;

}

.footer-logo-mark{

    width:46px;

    height:46px;

    border-radius:12px;

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.16);

}

.footer-logo-mark.has-uploaded-logo{

    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-color: transparent;
    background-color: transparent;

}

.footer-logo-text{

    display:flex;

    flex-direction:column;

    line-height:1;

}

.footer-logo-text span{

    font-size:1rem;

    font-weight:700;

    color:#ffffff;

}

.footer-logo-text span:last-child{

    color:rgba(255,255,255,.72);

}

.footer-links{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:2rem;

}

.footer-links a{

    color:rgba(255,255,255,.72);

    text-decoration:none;

    font-size:.92rem;

    font-weight:500;

    transition:

        color .3s ease,

        transform .3s ease;

}

.footer-links a:hover{

    color:#ffffff;

    transform:translateY(-2px);

}

.footer-contact{

    text-align:right;

}

.footer-contact>a{

    color:#ffffff;

    text-decoration:none;

    font-size:.92rem;

}

.footer-contact>a:hover{

    opacity:.8;

}

.footer-social{

    display:flex;

    justify-content:flex-end;

    gap:1.5rem;

    margin-top:1.25rem;

}

.footer-social a{

    color:rgba(255,255,255,.72);

    text-decoration:none;

    transition:

        color .3s ease,

        transform .3s ease;

}

.footer-social a:hover{

    color:#ffffff;

    transform:translateY(-2px);

}

.footer-bottom{

    margin-top:2.5rem;

    padding-top:1.5rem;

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:rgba(255,255,255,.58);

    font-size:.8rem;

}

@media (max-width:900px){

    .site-footer{

        padding:2.5rem 0 1.5rem;

    }

    .footer-content{

        grid-template-columns:1fr;

        gap:2.5rem;

        text-align:center;

    }

    .footer-logo{

        justify-content:center;

    }

    .footer-links{

        justify-content:center;

        gap:1.25rem;

    }

    .footer-contact{

        text-align:center;

    }

    .footer-social{

        justify-content:center;

    }

    .footer-bottom{

        flex-direction:column;

        gap:.75rem;

        text-align:center;

    }

}

/* ==========================================================
   CUSTOM CURSOR
   Shared sitewide: a neutral ring grows over any
   .cursor-hover element; elements with data-cursor-label
   additionally show a filled label pill. See main.js
   initCustomCursor.
========================================================== */

.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid transparent;
    pointer-events: none;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, border-color 0.3s ease;
}

.custom-cursor span {
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.custom-cursor.grow {
    transform: translate(-50%, -50%) scale(0.38);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.5);
}

.custom-cursor.label-active {
    transform: translate(-50%, -50%) scale(1);
    background: var(--color-red);
    border-color: var(--color-red);
}

.custom-cursor.label-active span {
    opacity: 1;
}

@media (hover: none), (pointer: coarse) {
    .custom-cursor {
        display: none;
    }
}

/* ==========================================================
GENERIC IMAGE SLOT FALLBACK
Any element carrying data-image-slot gets its uploaded photo
applied as a CSS background-image by site-images.js. This is
the default sizing/positioning for that state so a fresh slot
"just works" without needing bespoke CSS for every new one;
page-specific rules loaded after this file can still override
it (e.g. the hero's off-center crop).
========================================================== */
[data-image-slot].has-uploaded-image {
    background-size: cover;
    background-position: center;
    color: transparent;
    border-color: transparent;
}