/* ============================================================
   Alternative Concepts Studio
   Design inspired by McLaren.com aesthetic
   Colour palette derived from McLaren CSS variables
   ============================================================ */

/* ---- Custom Properties ------------------------------------ */
:root {
    /* Extra hero tokens */
    --hero-eyebrow-color: rgba(204, 16, 16, 0.75);
    /* Brand */
    --brand-red:        #CC1010;
    --brand-red-hover:  #E31E1E;
    --brand-red-dim:    rgba(204, 16, 16, 0.12);

    /* Backgrounds — McLaren palette adapted */
    --bg-void:      #0B0C0D;   /* deepest black */
    --bg-dark:      #111314;   /* mono-dark-grey */
    --bg-mid:       #1a1c1e;
    --bg-card-art:  #090e11;
    --bg-card-photo:#0c0f0a;
    --bg-card-poems:#0a090f;
    --bg-card-esport:#0f0909;

    /* Text & neutral — from McLaren vars */
    --white:        rgb(255 255 255);
    --soft-white:   rgb(251 251 251);
    --light-grey:   rgb(240 240 240);
    --mono-grey:    rgb(201 201 201);
    --anthracite:   rgb(83 86 90);     /* --anthracite */
    --mid-grey:     rgb(72 75 80);     /* --mono-mid-grey */
    --dark-grey:    rgb(120 120 120);  /* --dark-grey */
    --extra-dark:   rgb(40 40 40);     /* --extra-dark-grey */

    /* Accent per division — subtle tint only */
    --accent-art:   #1a9e8a;   /* teal / ocean */
    --accent-photo: #c8962a;   /* golden amber */
    --accent-poems: #8e5cd0;   /* violet */
    --accent-esport:#1e90d0;   /* electric blue */

    /* Typography */
    --font-heading: 'Space Grotesk', ui-sans-serif, system-ui;
    --font-body:    'Noto Sans', ui-sans-serif, system-ui;

    /* Chamfer sizes (from McLaren token set) */
    --chamfer-xs: 3px;
    --chamfer-sm: 6px;
    --chamfer-md: 12px;

    /* Layout */
    --nav-h: 60px;
    --section-pad: clamp(4rem, 8vw, 7rem);
    --gutter: clamp(1.25rem, 5vw, 4rem);

    /* Motion */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --dur: 0.3s;
}

/* ---- Reset ------------------------------------------------ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid transparent;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-void);
    color: var(--white);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }

/* ============================================================
   NAVIGATION
   ============================================================ */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-h);
    background-color: rgba(11, 12, 13, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--gutter);
    z-index: 900;
    border-bottom: 1px solid rgba(83, 86, 90, 0.18);
    transition: background-color var(--dur) var(--ease);
}

.nav.is-scrolled {
    background-color: rgba(11, 12, 13, 1);
}

/* Hamburger */
.nav__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 0;
    z-index: 910;
    flex-shrink: 0;
}

.nav__hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--white);
    border-radius: 1px;
    transition: transform 0.35s var(--ease), opacity 0.25s var(--ease);
    transform-origin: center;
}

.nav__hamburger.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav__hamburger.is-active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.nav__hamburger.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Logo in nav (top-right, McLaren style) */
.nav__brand {
    display: flex;
    align-items: center;
}

.nav__logo-img {
    height: 26px;
    width: auto;
}

/* Slide-out Menu */
.nav__menu {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    bottom: 0;
    width: min(400px, 90vw);
    background-color: var(--bg-dark);
    border-right: 1px solid rgba(83, 86, 90, 0.2);
    padding: 2.5rem var(--gutter);
    transform: translateX(-100%);
    transition: transform 0.4s var(--ease);
    z-index: 890;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.nav__menu.is-open {
    transform: translateX(0);
}

.nav__list {
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
}

.nav__list li {
    border-bottom: 1px solid rgba(83, 86, 90, 0.2);
}

.nav__list li:first-child {
    border-top: 1px solid rgba(83, 86, 90, 0.2);
}

.nav__link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 0;
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--light-grey);
    transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}

.nav__link:hover {
    color: var(--brand-red);
    padding-left: 0.5rem;
}

.nav__link-num {
    font-size: 0.6875rem;
    color: var(--brand-red);
    letter-spacing: 0.1em;
    font-weight: 500;
    flex-shrink: 0;
}

.nav__menu-footer {
    padding-top: 2rem;
    font-size: 0.75rem;
    color: var(--anthracite);
    letter-spacing: 0.05em;
}

/* Overlay */
.nav__overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 880;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s var(--ease);
}

.nav__overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

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

.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(var(--nav-h) + 3rem) var(--gutter) 6rem;
    overflow: hidden;
    background-color: var(--bg-void);
}

/* Subtle radial glow */
.hero__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 50% 45%, rgba(204, 16, 16, 0.07) 0%, transparent 65%),
        radial-gradient(ellipse 50% 40% at 15% 85%, rgba(83, 86, 90, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 40% 30% at 85% 15%, rgba(83, 86, 90, 0.05) 0%, transparent 55%);
    pointer-events: none;
}

.hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 860px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.hero__logo {
    width: clamp(220px, 52vw, 500px);
    height: auto;
    /* keep logo colours as-is — it's already red on white bg
       If logo has white bg, use mix-blend-mode to integrate */
    filter: drop-shadow(0 0 40px rgba(204, 16, 16, 0.2));
    animation: heroFadeIn 1s var(--ease) both;
}

.hero__title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 5.5vw, 3.75rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: var(--white);
    animation: heroFadeIn 1s 0.15s var(--ease) both;
}

.hero__tagline {
    font-family: var(--font-body);
    font-size: clamp(0.8rem, 1.8vw, 1.0625rem);
    font-weight: 300;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--anthracite);
    animation: heroFadeIn 1s 0.3s var(--ease) both;
}

.hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.875rem 2.25rem;
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bg-void);
    background-color: var(--brand-red);
    /* chamfer/parallelogram inspired by McLaren UI tokens */
    clip-path: polygon(var(--chamfer-md) 0%, 100% 0%, calc(100% - var(--chamfer-md)) 100%, 0% 100%);
    transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
    animation: heroFadeIn 1s 0.45s var(--ease) both;
}

.hero__cta:hover {
    background-color: var(--brand-red-hover);
    transform: translateY(-2px);
}

/* Scroll indicator */
.hero__scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    z-index: 1;
    animation: heroFadeIn 1s 0.8s var(--ease) both;
}

.hero__scroll-label {
    font-family: var(--font-heading);
    font-size: 0.5625rem;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--mid-grey);
}

.hero__scroll-bar {
    width: 1px;
    height: 42px;
    background: linear-gradient(to bottom, var(--mid-grey) 0%, transparent 100%);
    animation: scrollBounce 2.2s ease-in-out infinite;
}

@keyframes scrollBounce {
    0%, 100% { opacity: 0.35; transform: scaleY(1) translateY(0); }
    50%       { opacity: 0.9;  transform: scaleY(1.15) translateY(3px); }
}

@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   BUSINESS DIVISIONS
   ============================================================ */

.divisions {
    display: flex;
    flex-direction: column;
}

/* Each division is a full-bleed link */
.division {
    position: relative;
    display: block;
    min-height: 110px;
    overflow: hidden;
    border-bottom: 1px solid rgba(83, 86, 90, 0.18);
    cursor: pointer;
    transition: min-height var(--dur) var(--ease);
    text-decoration: none;
}

/* Left accent track (brand red, slides in on hover — McLaren-inspired) */
.division__track {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--brand-red);
    transform: scaleY(0);
    transform-origin: bottom center;
    transition: transform 0.45s var(--ease);
}

.division:hover .division__track,
.division:focus-visible .division__track {
    transform: scaleY(1);
}

/* Background colours per division */
.division--art    { background-color: var(--bg-card-art); }
.division--photo  { background-color: var(--bg-card-photo); }
.division--poems  { background-color: var(--bg-card-poems); }
.division--esport { background-color: var(--bg-card-esport); }

/* Subtle coloured glow on hover */
.division--art:hover    { background-color: #0a1014; }
.division--photo:hover  { background-color: #0d110a; }
.division--poems:hover  { background-color: #0c0a12; }
.division--esport:hover { background-color: #130a0a; }

/* Inner layout */
.division__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 2.5rem 2rem clamp(2.5rem, 6vw, 5.5rem);
    transition: padding-left var(--dur) var(--ease);
}

.division:hover .division__inner,
.division:focus-visible .division__inner {
    padding-left: clamp(3rem, 7vw, 6.5rem);
}

.division__text {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.division__num {
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand-red);
}

.division__title {
    font-family: var(--font-heading);
    font-size: clamp(1.125rem, 3vw, 1.875rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--white);
    line-height: 1.1;
    transition: color var(--dur) var(--ease);
}

.division:hover .division__title {
    color: var(--light-grey);
}

.division__desc {
    font-family: var(--font-body);
    font-size: clamp(0.8125rem, 1.4vw, 0.9375rem);
    font-weight: 300;
    color: var(--anthracite);
    line-height: 1.65;
    max-width: 520px;
    transition: color var(--dur) var(--ease);
    margin-top: 0.15rem;
}

.division:hover .division__desc {
    color: var(--dark-grey);
}

.division__domain {
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: rgba(83, 86, 90, 0.6);
    text-transform: lowercase;
    margin-top: 0.25rem;
    transition: color var(--dur) var(--ease);
}

.division:hover .division__domain {
    color: var(--brand-red);
    opacity: 0.8;
}

/* Arrow button */
.division__arrow {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(83, 86, 90, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--anthracite);
    /* chamfer shape */
    clip-path: polygon(var(--chamfer-sm) 0%, 100% 0%, calc(100% - var(--chamfer-sm)) 100%, 0% 100%);
    transition: background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                color var(--dur) var(--ease),
                transform var(--dur) var(--ease);
}

.division__arrow svg {
    width: 17px;
    height: 17px;
}

.division:hover .division__arrow,
.division:focus-visible .division__arrow {
    background-color: var(--brand-red);
    border-color: var(--brand-red);
    color: var(--white);
    transform: translateX(5px);
}

/* Accent colour underline per division on hover */
.division--art:hover    .division__num { color: var(--accent-art); }
.division--photo:hover  .division__num { color: var(--accent-photo); }
.division--poems:hover  .division__num { color: var(--accent-poems); }
.division--esport:hover .division__num { color: var(--accent-esport); }

/* ============================================================
   ABOUT
   ============================================================ */

.about {
    background-color: var(--bg-dark);
    padding: var(--section-pad) var(--gutter);
    border-top: 1px solid rgba(83, 86, 90, 0.12);
    position: relative;
    overflow: hidden;
}

.about::before {
    content: '';
    position: absolute;
    top: -1px;
    left: var(--gutter);
    width: 60px;
    height: 3px;
    background-color: var(--brand-red);
}

.about__container {
    max-width: 780px;
}

.about__label {
    font-family: var(--font-heading);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--brand-red);
    margin-bottom: 1.25rem;
}

.about__heading {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--white);
    margin-bottom: 1.75rem;
}

.about__body {
    font-family: var(--font-body);
    font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
    font-weight: 300;
    line-height: 1.85;
    color: var(--anthracite);
    max-width: 660px;
}

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

.footer {
    background-color: var(--bg-void);
    border-top: 1px solid rgba(83, 86, 90, 0.2);
    padding: 3rem var(--gutter) 2.5rem;
}

.footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.footer__logo img {
    height: 28px;
    width: auto;
    opacity: 0.7;
    transition: opacity var(--dur) var(--ease);
}

.footer__logo img:hover {
    opacity: 1;
}

.footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
}

.footer__links a {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--anthracite);
    letter-spacing: 0.04em;
    transition: color var(--dur) var(--ease);
}

.footer__links a:hover {
    color: var(--white);
}

.footer__copy {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--mid-grey);
    letter-spacing: 0.04em;
}

.footer__copy-mark {
    color: var(--brand-red);
}

/* ============================================================
   RESPONSIVE — Tablet (768px+)
   ============================================================ */

@media (min-width: 768px) {
    .nav__logo-img {
        height: 30px;
    }

    .division {
        min-height: 130px;
    }

    .footer__inner {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
    }

    .footer__copy {
        width: 100%;
    }
}

/* ============================================================
   RESPONSIVE — Desktop (1024px+)
   ============================================================ */

@media (min-width: 1024px) {
    .division {
        min-height: 150px;
    }

    .division__inner {
        padding: 2.5rem 6rem 2.5rem 7rem;
    }

    .division:hover .division__inner,
    .division:focus-visible .division__inner {
        padding-left: 8rem;
    }

    .footer__copy {
        width: auto;
    }
}

/* ============================================================
   ACCESSIBILITY — Focus styles
   ============================================================ */

:focus-visible {
    outline: 2px solid var(--brand-red);
    outline-offset: 3px;
}

.division:focus-visible {
    outline: 2px solid var(--brand-red);
    outline-offset: -2px;
}

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

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ============================================================
   LOGO — transparent PNG on dark UI (RawLogo3.png)
   ============================================================ */

/* Nav logo — sits directly on dark nav */
.nav__logo-img {
    height: 28px;
    width: auto;
    filter: drop-shadow(0 0 8px rgba(204, 16, 16, 0.5));
    transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.nav__brand:hover .nav__logo-img {
    filter: drop-shadow(0 0 14px rgba(204, 16, 16, 0.85));
    opacity: 0.85;
}

/* Hero logo — dominant centrepiece of the hero */
.hero__logo {
    width: clamp(280px, 62vw, 680px);
    height: auto;
    filter: drop-shadow(0 0 48px rgba(204, 16, 16, 0.55))
            drop-shadow(0 0 16px rgba(204, 16, 16, 0.25))
            drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
    animation: heroFadeIn 1s var(--ease) both;
    margin-bottom: 0.5rem;
}

/* Grain overlay for depth */
.hero__grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

/* Footer logo — transparent, dimmed on dark background */
.footer__logo-img {
    height: 24px;
    width: auto;
    opacity: 0.55;
    filter: drop-shadow(0 0 6px rgba(204, 16, 16, 0.3));
    transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease);
}

.footer__logo a:hover .footer__logo-img {
    opacity: 0.85;
    filter: drop-shadow(0 0 10px rgba(204, 16, 16, 0.55));
}

/* ============================================================
   HERO  TITLE overrides — tighter for big display text
   ============================================================ */

.hero__title {
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 8vw, 5.5rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.0;
    color: var(--white);
    animation: heroFadeIn 1s 0.2s var(--ease) both;
}

.hero__tagline {
    font-family: var(--font-body);
    font-size: clamp(0.7rem, 1.5vw, 0.9rem);
    font-weight: 300;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--anthracite);
    animation: heroFadeIn 1s 0.2s var(--ease) both;
}

.hero__content {
    gap: 1.5rem;
}

/* ============================================================
   HERO  enhanced background
   ============================================================ */
.hero__bg {
    background:
        radial-gradient(ellipse 55% 50% at 50% 40%, rgba(204, 16, 16, 0.09) 0%, transparent 70%),
        radial-gradient(ellipse 80% 60% at 50% 50%, rgba(17, 19, 20, 1) 50%, transparent 100%),
        radial-gradient(ellipse 45% 35% at 10% 90%, rgba(83, 86, 90, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse 35% 25% at 90% 10%, rgba(83, 86, 90, 0.05) 0%, transparent 50%);
}