:root {
    --black: #000000;
    --near-black: #030303;
    --white: #f1f1ef;
    --soft-white: #d7d7d4;
    --muted: #777;
    --dim: #4d4d4d;
    --line: rgba(255, 255, 255, 0.11);
    --dark-red: #8B1A1A;      /* rich dark red */
    --shiny-silver: #e8e8e8;   /* base for silver */
}


/* =========================================
   RESET
========================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    background: var(--black);
    color: var(--white);

    font-family: "Manrope", sans-serif;

    font-size: 16px;

    overflow-x: hidden;
}


/* =========================================
   PREMIUM BLACK TEXTURE
========================================= */

body::before {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    z-index: 0;

    background:
        radial-gradient(
            ellipse at 50% -20%,
            rgba(255,255,255,0.035),
            transparent 48%
        ),

        radial-gradient(
            ellipse at 15% 70%,
            rgba(255,255,255,0.012),
            transparent 40%
        ),

        radial-gradient(
            ellipse at 85% 40%,
            rgba(255,255,255,0.01),
            transparent 42%
        );
}


.noise {
    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 50;

    opacity: 0.035;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.7'/%3E%3C/svg%3E");

    mix-blend-mode: screen;
}


main {
    position: relative;

    z-index: 1;
}


/* =========================================
   HERO
========================================= */

.hero {
    min-height: 100vh;

    position: relative;

    display: flex;

    align-items: center;

    padding: 8vw;

    overflow: hidden;
}


.hero::after {
    content: "";

    position: absolute;

    width: 65vw;
    height: 65vw;

    right: -35vw;
    top: -30vw;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.025),
            transparent 67%
        );

    pointer-events: none;
}


.hero-content {
    width: 100%;

    max-width: 1450px;

    margin: auto;
}


/* =========================================
   EYEBROW
========================================= */

.eyebrow {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 34px;

    font-family: "DM Mono", monospace;

    font-size: 13px;   /* slightly bigger */

    letter-spacing: 0.23em;

    color: #666;

    text-transform: uppercase;
}


.status-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #bcbcbc;

    box-shadow:
        0 0 12px rgba(255,255,255,0.55);
}


/* =========================================
   MAIN WEBSITE NAME
========================================= */

.title-row {
    display: flex;

    align-items: flex-end;

    gap: clamp(24px, 3vw, 55px);

    flex-wrap: wrap;
}


.studio-name {
    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(
        4.8rem,
        12vw,
        13rem
    );

    line-height: 0.82;

    letter-spacing: -0.075em;

    font-weight: 600;

    text-transform: none;

    white-space: nowrap;

    overflow: visible;
}


.word {
    display: inline-block;

    opacity: 0;

    transform: translateY(110%);

    animation:
        titleReveal
        1.15s
        cubic-bezier(.16, 1, .3, 1)
        forwards;
}


.word:nth-child(2) {
    animation-delay: 0.12s;
}


/* =========================================
   BYLINE — Samarth Dave in shiny silver, bigger
========================================= */

.byline {
    position: relative;

    bottom: clamp(
        8px,
        1vw,
        16px
    );

    white-space: nowrap;

    font-family: "Manrope", sans-serif;

    /* bigger */
    font-size: clamp(24px, 2.5vw, 40px);

    font-weight: 500;

    font-style: normal;

    letter-spacing: 0.01em;

    opacity: 0;

    transform: translateY(18px);

    animation:
        bylineReveal
        1s
        cubic-bezier(.16, 1, .3, 1)
        0.72s
        forwards;
}


/* =========================================
   POWERED BY METASYS
========================================= */

.powered {
    margin-top: 42px;

    font-family: "DM Mono", monospace;

    font-size: 13px;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    color: #555;
}


.powered span {
    color: #bdbdbd;
}


sup {
    font-size: 0.5em;

    line-height: 0;

    vertical-align: super;

    margin-left: 2px;
}


/* =========================================
   HERO DIVIDER
========================================= */

.hero-line {
    width: min(450px, 70%);

    height: 1px;

    margin: 32px 0;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.35),
            transparent
        );
}


/* =========================================
   HERO DESCRIPTION
========================================= */

.hero-description {
    max-width: 650px;

    color: #929292;

    font-size: 20px;   /* slightly larger */

    line-height: 1.7;

    letter-spacing: -0.01em;
}


/* =========================================
   REVEAL ANIMATIONS
========================================= */

.reveal {
    opacity: 0;

    transform: translateY(25px);

    animation:
        fadeUp
        0.9s
        cubic-bezier(.16, 1, .3, 1)
        forwards;

    animation-delay: 0.45s;
}


.powered.reveal {
    animation-delay: 0.7s;
}


.hero-line.reveal {
    animation-delay: 0.85s;
}


.hero-description.reveal {
    animation-delay: 1s;
}


/* =========================================
   SCROLL INDICATOR
========================================= */

.scroll-indicator {
    position: absolute;

    bottom: 40px;
    left: 8vw;

    display: flex;

    align-items: center;

    gap: 16px;

    color: #444;

    font-family: "DM Mono", monospace;

    font-size: 10px;

    letter-spacing: 0.2em;
}


.scroll-line {
    width: 60px;

    height: 1px;

    background: #333;
}


/* =========================================
   SECTIONS
========================================= */

section.services,
section.contact {
    max-width: 1450px;

    margin: auto;

    padding:
        170px
        8vw;
}


.section-heading {
    display: flex;

    align-items: center;

    gap: 20px;

    margin-bottom: 70px;
}


.section-heading span {
    font-family: "DM Mono", monospace;

    font-size: 11px;

    color: #444;
}


.section-heading h2 {
    font-family: "Manrope", sans-serif;

    font-size: 20px;   /* increased from 14px */

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 0.2em;

    color: #888;
}


/* =========================================
   SERVICES
========================================= */

.service-list {
    border-top: 1px solid var(--line);
}


.service-card {
    position: relative;

    display: grid;

    grid-template-columns:
        100px
        1fr
        70px;

    align-items: center;

    min-height: 250px;

    border-bottom:
        1px solid var(--line);

    color: inherit;

    text-decoration: none;

    transition:
        padding
        0.5s
        cubic-bezier(.16, 1, .3, 1);
}


.service-card::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.025),
            transparent 65%
        );

    transform: scaleX(0);

    transform-origin: left;

    transition:
        transform
        0.65s
        cubic-bezier(.16, 1, .3, 1);
}


.service-card:hover {
    padding-left: 20px;
}


.service-card:hover::before {
    transform: scaleX(1);
}


/* Service number */

.service-number {
    position: relative;

    font-family: "DM Mono", monospace;

    font-size: 12px;

    color: #444;
}


/* =========================================
   BIG SERVICE HEADINGS
========================================= */

.service-info {
    position: relative;
}


.service-info h3 {
    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(
        3.2rem,
        6vw,
        7rem
    );

    line-height: 0.9;

    letter-spacing: -0.065em;

    font-weight: 600;

    text-transform: none;
}


.service-info p {
    margin-top: 17px;

    font-family: "DM Mono", monospace;

    font-size: 12px;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color: #666;
}


/* Arrow */

.service-arrow {
    position: relative;

    font-size: 32px;

    color: #555;

    transition:
        transform .4s ease,
        color .4s ease;
}


.service-card:hover .service-arrow {
    transform: translate(6px, -6px);

    color: #ddd;
}


/* =========================================
   CONTACT
========================================= */

.contact {
    border-top:
        1px solid var(--line);
}


.contact-grid {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 120px;
}


.small-label {
    margin-bottom: 38px;

    font-family: "DM Mono", monospace;

    font-size: 11px;

    letter-spacing: .18em;

    color: #4c4c4c;
}


/* =========================================
   BIG FOUNDER NAME
========================================= */

.contact-intro h2 {
    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(
        5rem,
        10vw,
        10rem
    );

    line-height: 0.82;

    letter-spacing: -0.08em;

    font-weight: 600;

    text-transform: none;
}


.contact-details {
    align-self: end;
}


.detail {
    padding: 27px 0;

    border-bottom:
        1px solid var(--line);
}


.detail span {
    display: block;

    margin-bottom: 11px;

    font-family: "DM Mono", monospace;

    font-size: 10px;

    letter-spacing: .2em;

    color: #4b4b4b;
}


.detail a {
    color: #cfcfcd;

    text-decoration: none;

    font-size: 17px;

    transition:
        color .3s ease;
}


.detail a:hover {
    color: #fff;
}


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

footer {
    max-width: 1450px;

    margin: auto;

    padding:
        38px
        8vw
        48px;

    border-top:
        1px solid var(--line);

    display: grid;

    grid-template-columns:
        1fr
        1fr
        1fr;

    font-family: "DM Mono", monospace;

    font-size: 10px;

    letter-spacing: .15em;

    color: #3f3f3f;
}


.footer-center {
    text-align: center;
}


footer div:last-child {
    text-align: right;
}


/* =========================================
   CUSTOM COLOUR CLASSES
========================================= */

.dark-red {
    color: var(--dark-red);
}


.shiny-silver {
    color: #d0d0d0;
    background: linear-gradient(135deg, #f0f0f0, #b0b0b0, #e0e0e0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 15px rgba(255,255,255,0.2);
}

/* For inline italic accents */
.italic-accent {
    font-style: italic;
    color: inherit;  /* stays shiny silver because parent is .shiny-silver */
}

.gta-accent {
    font-style: italic;
    color: var(--dark-red);
    /* override the shiny silver */
    background: none;
    -webkit-text-fill-color: var(--dark-red);
}


/* =========================================
   ANIMATIONS
========================================= */

@keyframes titleReveal {

    from {
        opacity: 0;

        transform:
            translateY(110%);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes bylineReveal {

    from {
        opacity: 0;

        transform:
            translateY(18px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes fadeUp {

    from {
        opacity: 0;

        transform:
            translateY(25px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


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

@media (max-width: 700px) {

    .hero {
        padding: 30px;
    }


    .studio-name {
        font-size:
            clamp(
                3.5rem,
                16vw,
                7rem
            );

        line-height: .88;

        white-space: normal;
    }


    .title-row {
        gap: 18px;
    }


    .byline {
        width: 100%;

        margin-top: 4px;

        font-size: 22px;   /* bigger on mobile too */
    }


    .powered {
        font-size: 11px;
    }


    .hero-description {
        font-size: 17px;
    }


    .scroll-indicator {
        left: 30px;
    }


    section.services,
    section.contact {
        padding:
            110px
            30px;
    }


    .section-heading {
        margin-bottom: 50px;
    }


    .service-card {
        grid-template-columns:
            40px
            1fr
            30px;

        min-height: 190px;
    }


    .service-info h3 {
        font-size: 2.8rem;

        line-height: .9;
    }


    .service-info p {
        font-size: 10px;

        line-height: 1.5;
    }


    .service-arrow {
        font-size: 25px;
    }


    .contact-grid {
        grid-template-columns: 1fr;

        gap: 75px;
    }


    .contact-intro h2 {
        font-size:
            clamp(
                4.5rem,
                19vw,
                7rem
            );
    }


    .detail a {
        font-size: 16px;

        word-break: break-word;
    }


    footer {
        padding:
            35px
            30px
            45px;

        grid-template-columns: 1fr;

        gap: 15px;
    }


    .footer-center,
    footer div:last-child {
        text-align: left;
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

}