/*
  The Name:
  Author: 
  Support: 
  Description:
  Version: 1.0
*/

/* CSS Index
-----------------------------------
1.  Default CSS
2.  Font Faces (Magnetik)
3.  Base & Reset
4.  Lenis Smooth Scroll
5.  Custom Scrollbar
6.  Utility Classes
7.  Buttons
8.  Typography / Headings
9.  Inputs & Form Elements
10. Animation Helpers
11. Parallax
12. Header Section
13. Banner Section
14. Gradient Bars
15. Contact Form Section
16. Footer Section
17. Thank You Banner
-----------------------------------
*/


/* ============================================================
   2. FONT FACES — Magnetik Family
   ============================================================ */

/* Magnetik — Light */
@font-face {
    font-family: "Magnetik";
    src: url('../fonts/Magnetik-Light.woff2') format('woff2'),
        url('../fonts/Magnetik-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Magnetik — Light Italic */
@font-face {
    font-family: "Magnetik";
    src: url('../fonts/Magnetik-LightItalic.woff2') format('woff2'),
        url('../fonts/Magnetik-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

/* Magnetik — Regular */
@font-face {
    font-family: "Magnetik";
    src: url('../fonts/Magnetik-Regular.woff2') format('woff2'),
        url('../fonts/Magnetik-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Magnetik — Regular Italic */
@font-face {
    font-family: "Magnetik";
    src: url('../fonts/Magnetik-RegularItalic.woff2') format('woff2'),
        url('../fonts/Magnetik-RegularItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

/* Magnetik — Medium */
@font-face {
    font-family: "Magnetik";
    src: url('../fonts/Magnetik-Medium.woff2') format('woff2'),
        url('../fonts/Magnetik-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Magnetik — Medium Italic */
@font-face {
    font-family: "Magnetik";
    src: url('../fonts/Magnetik-MediumItalic.woff2') format('woff2'),
        url('../fonts/Magnetik-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/* Magnetik — Bold */
@font-face {
    font-family: "Magnetik";
    src: url('../fonts/Magnetik-Bold.woff2') format('woff2'),
        url('../fonts/Magnetik-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* Magnetik — Bold Italic */
@font-face {
    font-family: "Magnetik";
    src: url('../fonts/Magnetik-BoldItalic.woff2') format('woff2'),
        url('../fonts/Magnetik-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

/* Magnetik — Extra Bold */
@font-face {
    font-family: "Magnetik";
    src: url('../fonts/Magnetik-ExtraBold.woff2') format('woff2'),
        url('../fonts/Magnetik-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* Magnetik — Extra Bold Italic */
@font-face {
    font-family: "Magnetik";
    src: url('../fonts/Magnetik-ExtraBoldItalic.woff2') format('woff2'),
        url('../fonts/Magnetik-ExtraBoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}


/* ============================================================
   3. BASE & RESET
   ============================================================ */

body {
    color: #FFF;
    font-family: "Magnetik", sans-serif;
    font-size: clamp(16px, 2vw, 24px);
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    background: #0B0B0B;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: #000;
}

a:hover {
    color: #000;
}

/* Background shorthand utility */
.bg-fix {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Bootstrap container override */
.container {
    max-width: 1123px;
}


/* ============================================================
   4. LENIS SMOOTH SCROLL
   ============================================================ */

/* Allow natural document height when Lenis is active */
html.lenis,
html.lenis body {
    height: auto;
}

/* Disable native scroll-behavior so Lenis can take full control */
.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

/* Contain overscroll for elements that opt out of Lenis */
.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

/* Hide overflow when scroll is stopped (e.g. modal open) */
.lenis.lenis-stopped {
    overflow: hidden;
}


/* ============================================================
   5. CUSTOM SCROLLBAR (Overlay Scrollbars plugin)
   ============================================================ */

/* Scrollbar handle color */
.os-scrollbar-handle {
    background: #FF653B;
}

/* Keep the scrollbar above all page content */
body > .os-scrollbar {
    z-index: 999;
}


/* ============================================================
   6. UTILITY CLASSES
   ============================================================ */

/* Z-index scale */
.z-4 { z-index: 4 !important; }
.z-5 { z-index: 5 !important; }
.z-6 { z-index: 6 !important; }
.z-7 { z-index: 7 !important; }

/* Remove bottom margin from the last <p> inside these wrappers */
.animation-line p:last-child,
.mb-p p:last-child {
    margin-bottom: 0;
}
.section-padding {
    padding: clamp(130px, 16vw, 260px) 0 0;
}

/* ============================================================
   7. BUTTONS
   ============================================================ */

/* Primary CTA button — pill shape, orange fill */
.btn-1 {
    color: #FFF;
    text-align: center;
    font-family: "Magnetik", sans-serif;
    font-size: clamp(14px, 1.8vw, 16px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: inline-block;
    border-radius: 100px;
    background: #FF653B;
    border: 1px solid #FF653B;
    padding: clamp(10px, 1.5vw, 12.5px) clamp(28px, 5vw, 45.5px);
    transition: background 0.3s linear;
}

/* Hover: dark fill, keep border accent */
.btn-1:hover {
    background: #151515;
    color: #FFF;
}


/* ============================================================
   8. TYPOGRAPHY / HEADINGS
   ============================================================ */

/* All headings share the brand orange and Magnetik Medium */
h1, h2, h3, h4, h5, h6 {
    color: #FF653B;
    font-weight: 500;
    line-height: 0.91;
    font-family: "Magnetik", sans-serif;
}

h1 {
  font-size: clamp(3rem, 8vw, 6rem); /* 48px → 96px */
}

h2 {
  font-size: clamp(2.25rem, 6vw, 3.75rem); /* 36px → 60px */
}

h3 {
  font-size: clamp(2rem, 4.5vw, 2.8125rem); /* 32px → 45px */
}

h4 {
  font-size: clamp(1.75rem, 3.5vw, 2.1875rem); /* 28px → 35px */
}

h5 {
  font-size: clamp(1.375rem, 2.5vw, 1.5625rem); /* 22px → 25px */
}

h6 {
  font-size: clamp(1.125rem, 2vw, 1.25rem); /* 18px → 20px */
}


/* ============================================================
   9. INPUTS & FORM ELEMENTS
   ============================================================ */

/* Shared styles for all text-like inputs and textarea */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
textarea {
    width: 100%;
    padding: 13px 16px;
    background: #fff;
    border: 1px solid #000;
    color: rgba(248, 248, 241, 0.75);
    font-family: "Magnetik", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    opacity: 1;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
    display: block;
}

/* Fixed height for textarea */
textarea {
    height: 142px;
}

/* Remove default browser focus ring */
input:focus,
textarea:focus {
    outline: none;
    box-shadow: none;
}

/* Placeholder styling to match input text */
::placeholder {
    color: rgba(248, 248, 241, 0.75);
    font-family: "Magnetik", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}


/* ============================================================
   10. ANIMATION HELPERS
   ============================================================ */

/* Clip-mask wrapper for line-by-line text reveal animations */
.animation-line {
    overflow: hidden;
}


/* ============================================================
   11. PARALLAX
   ============================================================ */

/* Clip the parallax image so the extra height is hidden */
.trigger-parallax {
    overflow: hidden;
    position: relative;
}

/* Extra height lets GSAP/ScrollTrigger shift the image on scroll */
.parallax-img {
    height: calc(100% + 120px);
    width: 100%;
    object-fit: cover;
    transform: translateY(0);
}


/* ============================================================
   12. HEADER SECTION
   ============================================================ */

.header {
    margin-top: clamp(40px, 6vw, 73px);
}

/* Logo image responsive sizing */
.header img {
    max-width: clamp(180px, 25vw, 375px);
    width: 100%;
}


/* ============================================================
   13. BANNER SECTION
   ============================================================ */

/* Overall banner padding — large top gap for full-bleed hero */
.banner-area {
    padding:
        clamp(180px, 30vw, 250px)
        0
        clamp(56px, 8vw, 88px);
    min-height: clamp(500px, 100vh, 1006px);
	background-attachment: fixed;
}
/* Responsive hero headline */
.banner-content h1 {
    font-size: clamp(36px, 7vw, 96px);
    letter-spacing: 0.01em;
}

/* Layered gradient overlays that create the dark-vignette effect */

/* Dark radial vignette over the hero image */
.banner-gradient-1 {
    background: radial-gradient(141.88% 242.35% at 50% 62.22%, rgba(21, 21, 21, 0.15) 0%, #151515 46.15%);
    mix-blend-mode: multiply;
}

/* Subtle top-edge white fade (lightens sky area) */
.banner-gradient-2 {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.00) 71.05%, rgba(255, 255, 255, 0.50) 138.54%);
}

/* Hard black fade at the very top (over navbar area) */
.banner-gradient-3 {
    background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 31.6%);
    mix-blend-mode: multiply;
}

/* Central oval dark spot — draws focus to headline text */
.banner-gradient-4 {
    width: 100%;
    height: 100%;
    max-width: clamp(600px, 80vw, 1189px);
    max-height: clamp(320px, 50vw, 627px);
    border-radius: 100%;
    background: radial-gradient(
        50% 50% at 50% 50%,
        rgba(15, 15, 15, 0.75) 0%,
        rgba(15, 15, 15, 0.00) 100%
    );
    mix-blend-mode: multiply;
    position: absolute;
    left: 50%;
    bottom: clamp(-52px, -5vw, -30px);
    transform: translateX(-50%);
}

/* Spacing below banner paragraph */
.banner-content p {
    margin-bottom: clamp(16px, 3vw, 28px);
}

/* Extra top margin for the CTA button */
.banner-content .btn-1 {
    margin-top: clamp(12px, 2vw, 20px);
}

/* Hide the contact trigger button once the form is open */
.contact-trigger.active {
    opacity: 0;
    visibility: hidden;
}


/* ============================================================
   14. GRADIENT BARS (decorative column bars in the banner)
   ============================================================ */

/* Base style for every bar — orange diagonal gradient */
.gradient-bar-item {
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.10) 20.01%, rgba(0, 0, 0, 0.00) 70.11%),
                linear-gradient(182deg, rgba(255, 101, 59, 0.00) 4.56%, #FF653B 78.48%);
    mix-blend-mode: multiply;
    opacity: 0.95;
    height: 610px;
}

/* Each bar column stretches equally across the wrapper */
.gradient-bar-wrapper > div {
    flex: 1 0 0%;
}

/* Bar heights decrease toward the center to create a mountain silhouette.
   Bars 1/11 are the tallest (outer edges), bar 6 is the shortest (center). */
.bar-1,  .bar-11 { height: clamp(320px, 45vw, 610px); opacity: 0.95; }
.bar-2,  .bar-10 { height: clamp(260px, 35vw, 493px); opacity: 0.9;  }
.bar-3,  .bar-9  { height: clamp(180px, 25vw, 346px); opacity: 0.8;  }
.bar-4,  .bar-8  { height: clamp(120px, 18vw, 200px); opacity: 0.7;  }
.bar-5,  .bar-7  { height: clamp(90px,  14vw, 157px); opacity: 0.5;  }
.bar-6           { height: clamp(50px,  10vw, 66px);  opacity: 0.25; }


/* ============================================================
   15. CONTACT FORM SECTION
   ============================================================ */

/* Hidden by default — shown via JS when the trigger button is clicked */
.contact-form-wrapper {
    display: none;
}

/* Frosted-glass card with orange border and subtle radial glow */
.contact-form-wrapper {
    max-width: 824px;
    border-radius: 16px;
    border: 1px solid #FF653B;
    background: radial-gradient(75.06% 31.93% at 47.45% 100%, rgba(255, 101, 59, 0.15) 0%, rgba(254, 54, 0, 0.00) 100%),
                linear-gradient(180deg, rgba(21, 21, 21, 0.90) 0%, rgba(32, 32, 32, 0.90) 100%);
    box-shadow:
        0 0 1px 0 rgba(255, 101, 59, 0.00),
        0 0 1px 0 rgba(255, 101, 59, 0.01),
        0 0 1px 0 rgba(255, 101, 59, 0.05),
        0 0 1px 0 rgba(255, 101, 59, 0.09);
    padding:
        clamp(24px, 4vw, 55px)
        clamp(20px, 5vw, 75px)
        clamp(24px, 4vw, 53px)
        clamp(20px, 5vw, 75px);
    /* Negative margin pulls the card up over the banner bottom edge */
    margin-top: clamp(-120px, -8vw, -60px) !important;
}

/* Bootstrap gutter overrides for the form grid */
.contact-form-wrapper .row {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 23px;
}

/* Form field labels — small all-caps, muted grey */
.contact-info label {
    color: #848484;
    font-size: clamp(12px, 1.8vw, 16px);
    font-weight: 500;
    line-height: 1.03;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}


/* ============================================================
   16. FOOTER SECTION
   ============================================================ */

/* Footer background — dark base with a warm orange radial glow at the bottom */
.footer-area {
    background: radial-gradient(52.55% 62.9% at 47.45% 100%, rgba(255, 101, 59, 0.35) 0%, rgba(254, 54, 0, 0.00) 100%), #0B0B0B;
    padding-top: clamp(72px, 10vw, 128px);
}

/* Footer text style — small, light, spaced uppercase */
.footer-text {
    color: #F8F8F1;
    font-size: clamp(11px, 1.5vw, 13px);
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    transition: all 0.3s linear;
    opacity: 0.5;
}

/* Orange accent on hover for anchor footer text */
a.footer-text:hover {
    color: #FF653B;
}

/* Underline links in the "other links" group; remove on hover */
.other-link-wrapper a {
    text-decoration: underline;
}
.other-link-wrapper a:hover {
    text-decoration: none;
}

/* Wider container for the footer layout */
.footer-area .container {
    max-width: 1604px;
}

/* Left padding and row gutters for the top footer row */
.footer-top-area {
    padding-left: clamp(20px, 6vw, 90px);
}
.footer-top-area .row {
    --bs-gutter-x: clamp(24px, 2vw, 80px);
    --bs-gutter-y: clamp(16px, 2vw, 20px);
}

/* Bottom padding and margin create space before the separator line */
.footer-top-area {
    padding-bottom: clamp(15px, 2vw, 17px);
    margin-bottom: clamp(32px, 5vw, 64px);
}

/* Separator line — fades from transparent to orange and back (radial gradient) */
.footer-top-area:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background: radial-gradient(ellipse at center, rgba(255, 101, 59, 1) 0%, rgba(254, 54, 0, 0) 75%);
    z-index: 1;
}

/* Large wordmark image at the very bottom of the footer */
.footer-bottom img {
    max-width: 1213px;
    mix-blend-mode: overlay;
    opacity: 0.65;
}


/* ============================================================
   17. THANK YOU BANNER
   ============================================================ */

/* Taller top padding for the confirmation page hero */
.banner-area.thank-you-banner {
    background: #101316;
    padding:
        clamp(180px, 25vw, 521px)
        0
        clamp(60px, 15vw, 210px);
}

/* Dim the background image so text stays readable */
.thank-you-bg {
    opacity: 0.2;
}

/* Override banner gradient blend modes for the thank-you page */
.thank-you-banner .banner-gradient-1 {
    mix-blend-mode: normal;
}

/* Both gradients become a simple bottom fade on this page */
.thank-you-banner .banner-gradient-1,
.thank-you-banner .banner-gradient-2 {
    background: linear-gradient(180deg, rgba(11, 11, 11, 0.00) 0%, #0B0B0B 84.49%);
}

/* Secondary top-corner radial glow (blue-tinted) */
.thank-you-banner .banner-gradient-2 {
    background: radial-gradient(49.02% 37.85% at 35.36% 35.9%, rgba(36, 58, 76, 0.15) 0%, rgba(36, 58, 76, 0.00) 100%);
}

/* Circular icon container used inside the back button */
.svg-icon {
    height: clamp(28px, 3vw, 35px);
    width: clamp(28px, 3vw, 35px);
    background: #151515;
    border-radius: 100%;
    transition: all 0.3s linear;
}

/* Compact padding variant for the "back" pill button */
.btn-1.back-btn {
    padding:
        clamp(4px, 1vw, 6px)
        clamp(6px, 1.5vw, 7.5px)
        clamp(4px, 1vw, 6px)
        clamp(20px, 3vw, 31.5px);
}

/* Highlight the icon circle on hover */
.back-btn:hover .svg-icon {
    background-color: #FF653B;
}

/* Subdued body copy colour on the thank-you page */
.banner-area.thank-you-banner .banner-content p {
    color: rgba(255, 255, 255, 0.65);
}