/* -------- Theme tokens -------- */
/*
   Global design variables:
   - Define colours, spacing, and layout constants used across the site.
   - Makes it easy to adjust the overall theme in one place.
*/
:root {
    --bg: #0e0e0e;
    --panel: #171717;
    --ink: #f2f2f2;
    --muted: #bdbdbd;
    --ring: rgba(255, 255, 255, 0.12); /* semi-transparent frame line */
    --header-h: 0px; /* JS updates this to your real header height */
    --pills-gap: 15px; /* the small space you wanted */

    /* New band colours (adjust to taste) */
    --band-1: #0f1012; /* slightly different from hero */
    --band-2: #12151a; /* deeper slate */
    --band-3: #16181f; /* final section colour */
    --accent: #d1f365; /* gentle lime accent for buttons/links */
}

/* -------- Base reset & typography -------- */
/*
   Basic reset / global defaults:
   - Ensure consistent box sizing.
   - Set full-height for layout calculations.
   - Apply default background and typography.
*/
* {
    box-sizing: border-box;
}
html,
body {
    height: 100%;
}
html {
    background: var(--bg);
}
body {
    margin: 0;
    color: var(--ink);
    font-family:
        "Inter",
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;
    background: transparent;
    overflow-x: hidden;
}

/*
   Utility class to explicitly force Inter font.
   Helpful when combined with Tailwind or other utilities.
*/
.font-inter {
    font-family:
        "Inter",
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}

/* ===== Parallax background ===== */
/*
   Fixed full-screen background wrapper:
   - Stays in place while content scrolls.
   - Sits behind everything via z-index.
   - pointer-events: none so it never blocks clicks.
*/
#bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/*
   Fade at the bottom of the background:
   - Creates a soft transition from the hero image into band-1 background.
*/
#bg::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10vh; /* shorter fade */
    background: linear-gradient(to bottom, transparent 0%, var(--band-1) 100%);
    pointer-events: none;
}

/*
   Background image styling:
   - Covers more than viewport height to allow parallax movement.
   - Slight scale for a subtle zoomed-in feel.
*/
#bgImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 130vh; /* image stops at band 1 */
    object-fit: cover;
    transform: translate3d(0, 0, 0) scale(1.12);
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
}

/*
   Dark overlay:
   - Keeps foreground text readable regardless of image brightness.
*/
.bg-dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.36);
}

/* -------- Links -------- */
/*
   Global link style:
   - Inherit text colour (for dark aesthetic).
   - Remove default underline; handled manually when needed.
*/
a {
    color: inherit;
    text-decoration: none;
}

/* ===== Header + Navigation (fixed top bar) ===== */
/*
   Fixed site header:
   - Stays at the top of the viewport.
   - Slight translucency and blur for a glassy look.
*/
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    background: rgba(14, 14, 14, 0.62);
    border-bottom: 1px solid var(--ring);
    backdrop-filter: blur(4px);
}

/*
   Dark nav links:
   - Flexible layout with icon/text.
   - Soft hover background to indicate interactivity.
*/
.nav-link-dark {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--ink);
    transition: background 0.2s ease;
}
.nav-link-dark:hover {
    background: rgba(255, 255, 255, 0.06);
}

/*
   Chevron icon:
   - Simple triangle for dropdown indicators.
   - Rotates on hover via parent .group.
*/
.chev {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #9ca3af;
    transition: transform 0.18s ease;
}
.group:hover .chev {
    transform: rotate(180deg);
}

/*
   Dark dropdown menu:
   - Positioned below its trigger.
   - Hidden by default; shown on hover or focus.
*/
.dropdown-dark {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 240px;
    padding: 8px;
    border-radius: 14px;
    background: var(--panel);
    border: 1px solid var(--ring);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s;
}
.group:hover .dropdown-dark,
.group:focus-within .dropdown-dark {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/*
   Links inside dropdown:
   - Padding and hover background for clear targets.
*/
.dd-link-dark {
    display: block;
    padding: 12px;
    border-radius: 10px;
    color: #cfcfcf;
    transition: background 0.2s;
}
.dd-link-dark:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--ink);
}

/* ===== Mobile nav panel ===== */
/*
   Slide-down mobile nav:
   - Fixed below the header.
   - Hidden until .open class is applied by JS.
*/
.mobile-panel-dark {
    display: none;
    position: fixed;
    left: 12px;
    right: 12px;
    top: 64px;
    background: var(--panel);
    border: 1px solid var(--ring);
    border-radius: 16px;
    padding: 10px;
    z-index: 40;
}
.mobile-panel-dark a {
    display: block;
    padding: 12px;
    border-radius: 10px;
    color: #cfcfcf;
}
.mobile-panel-dark a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--ink);
}
.mobile-panel-dark.open {
    display: block;
}

/* --- Top-left logo aligned with floating pill nav ---
   - Fixed pill in the top-left that acts as your brand + home link.
   - Mirrors the style of the floating right-hand pill for consistency.
*/
.top-left-logo {
    position: fixed;
    top: var(--pills-gap); /* vertically aligned with floating nav pill */
    left: clamp(16px, 4vw, 40px);
    z-index: 650; /* above background, under floating pill */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
    font-size: 24px;
    white-space: nowrap;
    pointer-events: auto;
    cursor: pointer;
    text-decoration: none;
}

.top-left-logo:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Logo mark inside the pill (your circular badge) */
.top-left-logo img {
    height: 40px;
    width: auto;
    opacity: 0.95;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
    user-select: none;
    -webkit-user-drag: none;
}

.top-left-logo img:hover {
    opacity: 1;
    transform: scale(1.03);
}

/* Visually hidden helper for accessibility (e.g. screen-reader-only text) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Burger toggle base styles ---
   - Hidden by default on desktop.
   - Styled as a circular glassy button once it's visible on mobile.
*/
.pillmenu-toggle {
    display: none; /* shown only under 1000px */
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
    cursor: pointer;
    pointer-events: auto;
    padding: 0;
}

/* Default: floating nav shows its pill menu inline (desktop behaviour) */
#floatingNavPill .pillmenu {
    display: inline-flex;
}

/* --- Basic burger lines ---
   - Three horizontal bars that will animate into an “X” when the menu is open.
*/
.pillmenu-toggle .burger-line {
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    display: block;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.pillmenu-toggle .burger-line + .burger-line {
    margin-top: 4px;
}

/* Burger → “X” animation when the floating nav has .is-open */
#floatingNavPill.is-open .burger-line:nth-child(2) {
    opacity: 0;
}

#floatingNavPill.is-open .burger-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

#floatingNavPill.is-open .burger-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* ===== Pill menu (primary pill bar) =====
   - Shared pill styling used both for the main centre pill bar and
     the floating right-hand nav.
*/
.pillmenu {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--ring);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}

/* Individual pill buttons/links */
.pill {
    display: block;
    padding: 8px 14px;
    border-radius: 999px;
    color: #d9d9d9;
    border: none;
    background: transparent;
    cursor: pointer;
}
.pill:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--ink);
}
.pill.active {
    background: rgba(255, 255, 255, 0.12);
    color: var(--ink);
}

/* ===== Floating right-hand pill nav =====
   - Fixed pill menu that sits on the right side near the top.
   - Contains both the inline pills (desktop) and burger toggle (mobile).
*/
.nav-pill {
    position: fixed;
    top: var(--pills-gap);
    right: 0;
    left: 0;
    z-index: 600;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    margin: 0;
}

/* Right-align the floating nav pill bar */
.nav-pill--right {
    display: flex;
    justify-content: flex-end;
    padding: 0 clamp(16px, 4vw, 40px);
}

/* Inner pill menu styling when floating nav is in desktop mode */
.nav-pill .pillmenu {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
    pointer-events: auto;
}

/* ===== Desktop-only behaviour (≥ 1001px) =====
   - Show inline floating pills.
   - Hide burger toggle.
   - Hide the Home item inside the overlay list (logo acts as Home on desktop).
*/
@media (min-width: 1001px) {
    .pillmenu-toggle {
        display: none !important;
    }

    #floatingNavPill .pillmenu {
        display: inline-flex !important;
    }

    #floatingPillMenu .overlay-home-only {
        display: none;
    }
}

/* ===== Mobile behaviour (≤ 1000px) =====
   - Floating pills are hidden.
   - Burger button appears in the top-right.
   - Top-left logo shrinks to icon-only.
   - When nav has .is-open, it becomes a full-screen black overlay
     with centred navigation items (Home, Work, Studio, Contact).
*/
@media (max-width: 1000px) {
    /* Hide inline floating pills under the header; burger takes over */
    #floatingNavPill .pillmenu {
        display: none;
    }

    /* Show burger toggle and pin it to the top-right */
    .pillmenu-toggle {
        display: inline-flex;
        position: fixed;
        top: 16px;
        right: 16px;
        z-index: 1001;
    }

    /* Logo pill becomes icon-only on mobile */
    .top-left-logo {
        top: 8px;
        padding: 0;
        font-size: 0; /* hides text label size */
    }

    .top-left-logo-text {
        display: none; /* explicitly hide the label span if present */
    }

    .top-left-logo img {
        height: 40px;
    }

    /* FULL-SCREEN BLACK OVERLAY WHEN BURGER IS OPEN
       - #floatingNavPill stretches to cover the viewport.
       - Pills stack vertically in the centre.
    */
    #floatingNavPill.is-open {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        padding: 0;
        background: #000;
        z-index: 900;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #floatingNavPill.is-open .pillmenu {
        display: flex;
        flex-direction: column;
        gap: 24px;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    #floatingNavPill.is-open .pillmenu .pill {
        font-size: 24px;
        padding: 12px 24px;
    }

    /* Ensure the Home item (overlay-home-only) is visible in the overlay */
    #floatingNavPill.is-open .overlay-home-only {
        display: block;
    }
}

/* ===== Hero ===== */
/*
   Hero section wrapper:
   - Vertically centers its content.
   - Keeps things relative so overlays/effects can be applied.
*/
.hero {
    position: relative;
    min-height: 40vh;
    display: flex;
    align-items: center;
    text-align: center;
}

/*
   Optional overlay inside hero:
   - Currently just reserves space for potential visual effects.
*/
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.28;
}

/*
   Main hero headline:
   - Constrained width for readability.
   - Responsive font size, tight line height, and visual balance.
*/
.headline {
    margin: 0.4rem auto 0.6rem;
    max-width: 86ch;
    font-size: clamp(34px, 5vw, 106px);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.06;
    text-wrap: balance;
}

/*
   Hero subheading:
   - Slightly smaller and muted.
   - Centered with a max width for easy reading.
*/
.subhead {
    max-width: 780px;
    margin-inline: auto;
    color: #d0d0d0;
    font-size: clamp(16px, 3vw, 20px);
}

/*
   Generic fade-up animation:
   - Used for subtle entrance of elements from below.
*/
@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pillmenu-wrap {
    position: sticky;
    top: calc(var(--header-h) + var(--pills-gap));
    z-index: 500; /* keep it above the carousel */
    pointer-events: auto; /* make sure it always receives clicks */
    display: grid;
    place-items: center;
    margin: 28px 0 18px;
}

/*
   Visual tweak when the pill bar is in its "stuck" state:
   - Slightly stronger background, blur, and shadow for a docked feel.
*/
.pillmenu-wrap.stuck .pillmenu {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--ring);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

/*
   Individual pill:
   - Clickable chip acting as filter/nav item.
   - Active state used for currently-viewed section.
*/
.pill {
    display: block;
    padding: 8px 14px;
    border-radius: 999px;
    color: #d9d9d9;
    border: none;
    background: transparent;
    cursor: pointer;
}

/* ===== Dock panel / Carousel container ===== */
/*
   Dock-style panel:
   - Used to frame the carousel as a hero object.
   - Rounded, elevated card with inner padding.
*/
.dock-panel {
    position: relative;
    z-index: 0; /* baseline so higher z-index pills sit above */
    width: min(1000px, calc(100% - 40px));
    margin: 28px auto 140px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 22px;
    padding: 16px 16px 24px;
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.6),
        0 1px 0 rgba(255, 255, 255, 0.03) inset;
    overflow: visible;
}

/* ===== Carousel core layout ===== */
/*
   Carousel container:
   - Relative positioning for arrows and overlays.
*/
.carousel {
    position: relative;
}

/*
   Viewport wrapper:
   - Ensures the carousel occupies full width.
*/
.viewport {
    position: relative;
    width: 100%;
}

/*
   Clip region:
   - Hides overflowing slides.
   - Rounded corners for the image frame.
*/
.viewport-clip {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 18px;
}

/*
   Track:
   - Horizontal flex strip that holds all slides.
   - JS adjusts transform to move between slides.
*/
.track {
    display: flex;
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
}

/*
   Individual slide:
   - Takes full viewport width.
   - 16:9 aspect ratio for consistent image framing.
*/
.slide {
    position: relative;
    min-width: 100%;
    aspect-ratio: 16/9;
    background: #0f0f0f;
    overflow: hidden;
}

/*
   Slide image:
   - Fully covers slide area.
   - Prevent drag/select behaviour for smoother UX.
*/
.slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* ===== Carousel arrows ===== */
/*
   Left/right navigation arrows:
   - Centrally aligned vertically.
   - Dark translucent buttons with hover feedback.
*/
.ctrl {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid var(--ring);
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.2s ease;
    color: #e8e8e8;
}
.ctrl:hover {
    background: rgba(255, 255, 255, 0.1);
}
.prev {
    left: 12px;
}
.next {
    right: 12px;
}

/* ===== New: Section bands & content patterns ===== */
/*
   Generic section block:
   - Provides vertical spacing and ensures content sits above background image.
*/
.section {
    position: relative;
    z-index: 1; /* above the fixed bg image */
    padding: 80px 0;
}

/*
   Section inner container:
   - Centers content and constrains width.
*/
.section .container {
    width: min(1150px, calc(100% - 32px));
    margin-inline: auto;
    padding-inline: 8px;
}

/*
   Band background colours:
   - Each band visually separates a content block with a slightly different shade.
*/
.band-1 {
    background: var(--band-1);
}
.band-2 {
    background: var(--band-2);
}
.band-3 {
    background: var(--band-3);
}

/*
   Kicker text:
   - Small uppercase label used above section headings.
*/
.kicker {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #b7b7b7;
    margin-bottom: 10px;
}

/*
   Section heading:
   - Reusable h2 style, responsive in size.
*/
.h2 {
    font-size: clamp(24px, 2.4vw, 44px);
    letter-spacing: -0.01em;
    line-height: 1.08;
    margin: 6px 0 14px;
}

/*
   Lead paragraph:
   - Slightly larger or more prominent text for intros.
*/
.lead {
    color: #d0d0d0;
    max-width: 70ch;
}

/* ===== Cards (services/projects) ===== */
/*
   Card grid system:
   - 12-column grid for flexible span-based layouts.
*/
.card-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    margin-top: 28px;
}

/*
   Base card styling:
   - Soft translucent background, border, and hover elevation.
*/
.card {
    grid-column: span 12;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--ring);
    border-radius: 16px;
    overflow: hidden;
    transition:
        transform 0.2s ease,
        background 0.2s ease;
}
.card:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.05);
}

/*
   Card image wrapper:
   - Fixed aspect ratio to keep cards consistent.
*/
.card .img-wrap {
    aspect-ratio: 16/9;
    background: #0f0f0f;
}

/*
   Card image:
   - Fills wrapper while maintaining aspect ratio.
*/
.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
    display: block;
}

/*
   Card text body:
   - Padding for comfortable reading.
*/
.card .body {
    padding: 16px 16px 18px;
}
.card .title {
    font-weight: 600;
    margin: 0 0 6px;
}
.card .muted {
    color: var(--muted);
    font-size: 14px;
}

/*
   Larger-screen card spans:
   - On wider viewports, allow cards to span fewer columns.
*/
@media (min-width: 700px) {
    .card.span-6 {
        grid-column: span 6;
    }
    .card.span-4 {
        grid-column: span 4;
    }
}

/* ===== Split layout (image + text) ===== */
/*
   Split layout base:
   - Single-column on small screens.
   - Image and text stacked.
*/
.split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 26px;
}

/*
   Split media block:
   - Holds an image or visual.
   - Aspect ratio and border help match card style.
*/
.split .media {
    aspect-ratio: 4/3;
    background: #0f0f0f;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--ring);
}

/*
   Split content block:
   - Vertically centers text alongside image on larger screens.
*/
.split .content {
    align-self: center;
}
.split .content p {
    color: #d0d0d0;
}

/*
   Desktop split:
   - Switch to two-column layout for more classic image/text split.
*/
@media (min-width: 900px) {
    .split {
        grid-template-columns: 1.1fr 1fr;
        gap: 32px;
    }
}

/* ===== CTA (call-to-action) ===== */
/*
   CTA block:
   - Centered, framed card inviting user action.
   - Radial gradient highlight from bottom for subtle emphasis.
*/
.cta {
    display: grid;
    place-items: center;
    text-align: center;
    gap: 12px;
    padding: 48px 20px;
    border: 1px solid var(--ring);
    border-radius: 20px;
    background: radial-gradient(
        1200px 400px at 50% 100%,
        rgba(255, 255, 255, 0.06),
        transparent 60%
    );
}

/*
   CTA button:
   - Rounded pill with subtle hover change.
*/
.button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid var(--ring);
    background: rgba(255, 255, 255, 0.06);
    color: var(--ink);
    cursor: pointer;
    transition: background 0.2s ease;
}
.button:hover {
    background: rgba(255, 255, 255, 0.12);
}

/*
   Accent dot inside CTA button:
   - Small coloured dot for a bit of visual personality.
*/
.button .dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--accent);
}

/* ===== Carousel dots (indicators) ===== */
/*
   Dots container:
   - Centers slide indicators under the carousel.
*/
.dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}

/*
   Individual dot:
   - Circular buttons with hover and active states.
*/
.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    border: none;
    cursor: pointer;
    transition: background 0.25s ease;
}

.dot:hover {
    background: rgba(255, 255, 255, 0.55);
}

.dot.active {
    background: var(--accent);
}

/*Contact Page*/

.form-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--ring);
    border-radius: 16px;
    padding: 18px 16px 20px;
    display: grid;
    gap: 12px;
}

.form-field {
    display: grid;
    gap: 4px;
}

.form-field label {
    font-size: 13px;
    color: var(--muted);
}

.form-field input,
.form-field textarea,
.form-field select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: #0f1012;
    color: var(--ink);
    font-size: 14px;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: rgba(189, 189, 189, 0.9);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(209, 243, 101, 0.45);
}

.button-full {
    width: 100%;
    justify-content: center;
}

/* Hide the Home item in the desktop floating pill */
@media (min-width: 1001px) {
    #floatingPillMenu .overlay-home-only {
        display: none;
    }
}