/* ============
   TYPEFACES 
   ============ */
/* Assigning all font-family properties to the same family and adding font-weight and font-style properties enables browswerz to 
   substitue the font's italics and bold versions when using <em> and <strong> tags. Without this consistent assignment
   browsers will create false italics and bold versions of the font. */
   
/********* MOTORWAY ************/
/* REGULAR (400) */
@font-face {
    font-family: 'Motorway';
    src: url('/assets/fonts/Motorway/MotorwayRegular/font.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
/* REGULAR ITALIC (400) • Default with <em> tags */
@font-face {
    font-family: 'Motorway';
    src: url('/assets/fonts/Motorway/MotorwayItalic/font.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
}

/* SEMIBOLD (600) */
@font-face {
    font-family: 'Motorway';
    src: url('/assets/fonts/Motorway/MotorwaySemiBold/font.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}
/* SEMIBOLD ITALIC (600) */
@font-face {
    font-family: 'Motorway';
    src: url('/assets/fonts/Motorway/MotorwaySemiBoldItalic/font.woff2') format('woff2');
    font-weight: 600;
    font-style: italic;
}

/* BOLD (700) • Default with <strong> tag */
@font-face {
    font-family: 'Motorway';
    src: url('/assets/fonts/Motorway/MotorwayBold/font.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}
/* BOLD ITALIC (700)  • Default with <em><strong> tags */
@font-face {
    font-family: 'Motorway';
    src: url('/assets/fonts/Motorway/MotorwayBoldItalic/font.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
}

/********* KENSBULLETS ************/
@font-face {
    font-family: 'KensBullets';
    src: url('/assets/fonts/KensBullets/KensBullets-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

/********* google Inter Medium (text bubble text) ************/
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/Inter-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

:root {
    /* General Colors */
    --Gold: #ffc904;
    --Gray-Text: #737577;
    --Text-Bubble: #1e8aff;

    /* Navbar Colors */
    --Trans-Gold: rgb(255, 201, 4,.7);

    /* E-mail Form Colors */
    --Form-Frame: #9a9c9f;
    --Form-Bkgd: rgba(255, 255, 255, .85);
    --Form-Field-Bkgd: rgba(255,255,255,0);
    --Form-Field-Hover: #7FA7CB;
    --Send-Button-Bkgd: #737577;
    --Send-Button-Text: white;
    --Button-Hover: #4d4d4d;
    --Button-Pressed: black;

    /* Typefaces, Fonts, & Sizes */
    --DefaultFont: 'Motorway', sans-serif;
    --KensBullets: 'KensBullets', sans-serif;
    --Text-Bubble-Text: Inter, sans-serif;

    --Regular: 400;
    --SemiBold: 600;
    --Bold: 700;
    
    --text-8pt: 0.667rem;  /* ~8pt */
    --text-10pt: 0.833rem; /* ~10pt */
    --text-12pt: 1rem;     /* ~12pt */
    --text-14pt: 1.167rem; /* ~14pt */
    --text-16pt: 1.333rem; /* ~16pt */
    --text-18pt: 1.5rem;   /* ~18pt */
    --text-22pt: 1.83rem;  /* ~22pt */
    --text-24pt: 2rem;     /* ~24pt */
    --text-26pt: 2.167rem; /* ~26pt */

    --Bullets: clamp(var(--text-24pt),1.7vw,var(--text-26pt));
}
    

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--DefaultFont);
}

body, html {
    Background-color: black;
    height: auto;
    min-height: 100%;
}

h1 {
    font-size: clamp(var(--text-16pt),3vw,var(--text-22pt));
    text-align: center;
}

h2 {
    font-size: clamp(var(--text-14pt),2vw,var(--text-18pt));
    text-align: center;
}

h3 {
    font-size: clamp(var(--text-12pt),1.7vw,var(--text-14pt));
    text-align: left;
    margin-bottom: 2vh;
}

h4 {
    font-size: clamp(var(--text-8pt),1.7vw,var(--text-10pt));
    text-align: center;
    margin-top: 2vh;
}

p {
    font-size: clamp(var(--text-12pt),2vw,var(--text-16pt));
    color: var(--Gray-Text);
}

#overlay-text h1, #overlay-text p {
    margin: 0;

        padding-bottom: var(--text-10pt);
}

a {
    text-decoration: none;
}

img {
    width: 100%;
    height: 100%;
    display: block;
}

/* Prevents site background from scrolling */
/* This locks both body and html tags for safety */
body.no-scroll {
    position: fixed; /* Forced lock for iOS WebKit */
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Prevents the 'rubber-band' pull effect */
    overscroll-behavior: none; 
    -webkit-overflow-scrolling: none;
}

footer, footer a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(40px, 4vw,80px);
    width: auto;
    background-color: var(--Gold);
    color: white;
    font-size: clamp(var(--text-10pt),1.4vw,var(--text-14pt));
}


/* ===========================
   Navbar With Overlay Pages
   =========================== */
.navbar-grid {
    position: fixed;
    z-index: 21;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto;
    grid-template-areas: 'left_margin nav_bar right_margin';
}

.navbar {
    display: flex;
    gap: 2vw;
    grid-area: nav_bar;
    pointer-events: auto;
}

.nav-link {
    background-image: url("data:image/svg+xml;charset=utf-8,<svg id='a' data-name='Gear' xmlns='http://www.w3.org/2000/svg' width='75.5' height='75.5' viewBox='0 0 75.5 75.5'><path d='M.34,40.31c2.18-.27,4.22,1.21,4.61,3.41.4,2.2-1,4.31-3.13,4.82.46,1.55,1.02,3.06,1.66,4.52,1.95-1.01,4.37-.32,5.49,1.61,1.12,1.93.53,4.38-1.29,5.6.96,1.29,1.99,2.51,3.1,3.67,1.49-1.61,3.99-1.79,5.7-.37,1.71,1.42,1.99,3.93.7,5.71,1.33.88,2.72,1.68,4.16,2.39.85-2.04,3.14-3.07,5.23-2.32,2.1.75,3.22,3.02,2.59,5.14,1.45.34,2.93.6,4.43.77.12-2.21,1.93-3.96,4.15-3.96s4.03,1.75,4.15,3.96c1.61-.18,3.18-.46,4.72-.84-.64-2.12.46-4.39,2.55-5.15,2.09-.77,4.38.25,5.25,2.28,1.44-.72,2.82-1.53,4.14-2.42-1.31-1.77-1.05-4.27.65-5.71,1.7-1.44,4.19-1.27,5.7.32,1.1-1.16,2.13-2.4,3.07-3.7-1.83-1.21-2.44-3.65-1.33-5.59,1.11-1.94,3.52-2.65,5.48-1.66.64-1.47,1.18-2.98,1.63-4.54-2.14-.49-3.55-2.59-3.17-4.79.38-2.2,2.4-3.7,4.58-3.45.04-.75.07-1.5.07-2.26,0-.86-.03-1.71-.09-2.56-2.18.27-4.22-1.21-4.61-3.41-.4-2.2,1-4.31,3.13-4.82-.46-1.55-1.02-3.06-1.66-4.52-1.95,1.01-4.37.32-5.49-1.61-1.12-1.93-.53-4.38,1.29-5.6-.96-1.29-1.99-2.51-3.1-3.67-1.49,1.61-3.99,1.79-5.7.37-1.71-1.42-1.99-3.93-.7-5.71-1.33-.88-2.72-1.68-4.16-2.39-.85,2.04-3.14,3.07-5.23,2.32-2.1-.75-3.22-3.02-2.59-5.14-1.45-.34-2.93-.6-4.43-.77-.12,2.21-1.93,3.96-4.15,3.96s-4.03-1.75-4.15-3.96c-1.61.18-3.18.46-4.72.84.64,2.11-.46,4.39-2.55,5.15-2.09.77-4.38-.25-5.25-2.28-1.44.72-2.82,1.53-4.14,2.42,1.31,1.77,1.05,4.27-.65,5.71-1.7,1.44-4.2,1.27-5.7-.32-1.1,1.16-2.13,2.4-3.07,3.7,1.83,1.21,2.44,3.65,1.33,5.59-1.11,1.94-3.52,2.65-5.48,1.66-.64,1.47-1.18,2.98-1.63,4.53,2.14.49,3.55,2.59,3.17,4.79-.38,2.2-2.4,3.7-4.58,3.45-.04.75-.07,1.5-.07,2.26,0,.86.03,1.71.09,2.56Z' fill='%23ffc904' stroke='%23000' stroke-miterlimit='10' stroke-width='2'/></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: inline-flex;
    width: clamp(50px, 10vw, 110px);
    height: clamp(50px, 10vw, 110px);
    justify-content: center;
    align-items: center;
    color: black;
    font-weight: var(--Bold);
}

/* Only trigger the nav-link gear icon on devices with a mouse/stylus */
@media (hover: hover) and (pointer: fine) {
    /* Color navbar link black as a viaual selction indicator */
    .nav-link:hover {
        background-image: url("data:image/svg+xml;charset=utf-8,<svg id='a' data-name='Gear' xmlns='http://www.w3.org/2000/svg' width='75.5' height='75.5' viewBox='0 0 75.5 75.5'><path d='M.34,40.31c2.18-.27,4.22,1.21,4.61,3.41.4,2.2-1,4.31-3.13,4.82.46,1.55,1.02,3.06,1.66,4.52,1.95-1.01,4.37-.32,5.49,1.61,1.12,1.93.53,4.38-1.29,5.6.96,1.29,1.99,2.51,3.1,3.67,1.49-1.61,3.99-1.79,5.7-.37,1.71,1.42,1.99,3.93.7,5.71,1.33.88,2.72,1.68,4.16,2.39.85-2.04,3.14-3.07,5.23-2.32,2.1.75,3.22,3.02,2.59,5.14,1.45.34,2.93.6,4.43.77.12-2.21,1.93-3.96,4.15-3.96s4.03,1.75,4.15,3.96c1.61-.18,3.18-.46,4.72-.84-.64-2.12.46-4.39,2.55-5.15,2.09-.77,4.38.25,5.25,2.28,1.44-.72,2.82-1.53,4.14-2.42-1.31-1.77-1.05-4.27.65-5.71,1.7-1.44,4.19-1.27,5.7.32,1.1-1.16,2.13-2.4,3.07-3.7-1.83-1.21-2.44-3.65-1.33-5.59,1.11-1.94,3.52-2.65,5.48-1.66.64-1.47,1.18-2.98,1.63-4.54-2.14-.49-3.55-2.59-3.17-4.79.38-2.2,2.4-3.7,4.58-3.45.04-.75.07-1.5.07-2.26,0-.86-.03-1.71-.09-2.56-2.18.27-4.22-1.21-4.61-3.41-.4-2.2,1-4.31,3.13-4.82-.46-1.55-1.02-3.06-1.66-4.52-1.95,1.01-4.37.32-5.49-1.61-1.12-1.93-.53-4.38,1.29-5.6-.96-1.29-1.99-2.51-3.1-3.67-1.49,1.61-3.99,1.79-5.7.37-1.71-1.42-1.99-3.93-.7-5.71-1.33-.88-2.72-1.68-4.16-2.39-.85,2.04-3.14,3.07-5.23,2.32-2.1-.75-3.22-3.02-2.59-5.14-1.45-.34-2.93-.6-4.43-.77-.12,2.21-1.93,3.96-4.15,3.96s-4.03-1.75-4.15-3.96c-1.61.18-3.18.46-4.72.84.64,2.11-.46,4.39-2.55,5.15-2.09.77-4.38-.25-5.25-2.28-1.44.72-2.82,1.53-4.14,2.42,1.31,1.77,1.05,4.27-.65,5.71-1.7,1.44-4.2,1.27-5.7-.32-1.1,1.16-2.13,2.4-3.07,3.7,1.83,1.21,2.44,3.65,1.33,5.59-1.11,1.94-3.52,2.65-5.48,1.66-.64,1.47-1.18,2.98-1.63,4.53,2.14.49,3.55,2.59,3.17,4.79-.38,2.2-2.4,3.7-4.58,3.45-.04.75-.07,1.5-.07,2.26,0,.86.03,1.71.09,2.56Z' fill='%23000' stroke='%23000' stroke-miterlimit='10' stroke-width='2'/></svg>");
            /* Ensure the background doesn't repeat and stays centered on the link */
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            color: white;
    }
}

/* Mobile indicator for the tapped link */
.nav-link.active-tap {
     background-image: url("data:image/svg+xml;charset=utf-8,<svg id='a' data-name='Gear' xmlns='http://www.w3.org/2000/svg' width='75.5' height='75.5' viewBox='0 0 75.5 75.5'><path d='M.34,40.31c2.18-.27,4.22,1.21,4.61,3.41.4,2.2-1,4.31-3.13,4.82.46,1.55,1.02,3.06,1.66,4.52,1.95-1.01,4.37-.32,5.49,1.61,1.12,1.93.53,4.38-1.29,5.6.96,1.29,1.99,2.51,3.1,3.67,1.49-1.61,3.99-1.79,5.7-.37,1.71,1.42,1.99,3.93.7,5.71,1.33.88,2.72,1.68,4.16,2.39.85-2.04,3.14-3.07,5.23-2.32,2.1.75,3.22,3.02,2.59,5.14,1.45.34,2.93.6,4.43.77.12-2.21,1.93-3.96,4.15-3.96s4.03,1.75,4.15,3.96c1.61-.18,3.18-.46,4.72-.84-.64-2.12.46-4.39,2.55-5.15,2.09-.77,4.38.25,5.25,2.28,1.44-.72,2.82-1.53,4.14-2.42-1.31-1.77-1.05-4.27.65-5.71,1.7-1.44,4.19-1.27,5.7.32,1.1-1.16,2.13-2.4,3.07-3.7-1.83-1.21-2.44-3.65-1.33-5.59,1.11-1.94,3.52-2.65,5.48-1.66.64-1.47,1.18-2.98,1.63-4.54-2.14-.49-3.55-2.59-3.17-4.79.38-2.2,2.4-3.7,4.58-3.45.04-.75.07-1.5.07-2.26,0-.86-.03-1.71-.09-2.56-2.18.27-4.22-1.21-4.61-3.41-.4-2.2,1-4.31,3.13-4.82-.46-1.55-1.02-3.06-1.66-4.52-1.95,1.01-4.37.32-5.49-1.61-1.12-1.93-.53-4.38,1.29-5.6-.96-1.29-1.99-2.51-3.1-3.67-1.49,1.61-3.99,1.79-5.7.37-1.71-1.42-1.99-3.93-.7-5.71-1.33-.88-2.72-1.68-4.16-2.39-.85,2.04-3.14,3.07-5.23,2.32-2.1-.75-3.22-3.02-2.59-5.14-1.45-.34-2.93-.6-4.43-.77-.12,2.21-1.93,3.96-4.15,3.96s-4.03-1.75-4.15-3.96c-1.61.18-3.18.46-4.72.84.64,2.11-.46,4.39-2.55,5.15-2.09.77-4.38-.25-5.25-2.28-1.44.72-2.82,1.53-4.14,2.42,1.31,1.77,1.05,4.27-.65,5.71-1.7,1.44-4.2,1.27-5.7-.32-1.1,1.16-2.13,2.4-3.07,3.7,1.83,1.21,2.44,3.65,1.33,5.59-1.11,1.94-3.52,2.65-5.48,1.66-.64,1.47-1.18,2.98-1.63,4.53,2.14.49,3.55,2.59,3.17,4.79-.38,2.2-2.4,3.7-4.58,3.45-.04.75-.07,1.5-.07,2.26,0,.86.03,1.71.09,2.56Z' fill='%23000' stroke='%23000' stroke-miterlimit='10' stroke-width='2'/></svg>");
        /* Ensure the background doesn't repeat and stays centered on the link */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: white;
}

 /* TARGETED MOBILE LINK DISMISSAL INDICATOR ENGINE */

/* 1. THE CORE BLINK KEYFRAMES
   Breathes down to 40% visibility before returning to full strength. */
@keyframes gearDismissBlink {
    0%, 100% {
        opacity: 1;
        filter: drop-shadow(0 0 0px rgba(255, 201, 4, 0));
    }
    50% {
        opacity: 0.4;
        filter: drop-shadow(0 0 4px var(--Trans-Gold)); 
    }
}

/* 2. THE CHOSEN ACTIVE-TAP LINK ONLY
   This rule checks if the overlay is currently active. If so, it looks down the 
   HTML track to locate the specific navbar gear carrying your active-tap class. 
   Only that individual item will slowly blink to guide the visitor's close intent! */
.overlay.active ~ .navbar-grid .nav-link.active-tap {
    animation: gearDismissBlink 3s ease-in-out infinite !important;
    will-change: opacity, filter; 
}

.overlay {
    position: fixed;
    inset: 0;
    /* dvh (Dynamic Viewport Height) ensures it fits perfectly even if 
       the Safari address bar expands or shrinks */
    height: 100dvh; 
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    z-index: 20;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

/* PORTRAIT: Perfectly balanced sandwich */
@media screen and (orientation: portrait) {
    .overlay-content {
        padding-top: 0 !important; /* Forces the sandwich to be equal */
    }
    #overlay-text {
        align-self: center !important;
    }
}

@media screen and (orientation: landscape) and (max-height: 500px) {
    .overlay {
        padding-top: 6rem;
    }
}

/* LAYER 2: The Spinning Gear */
.overlay::before {
    content: "";
    position: absolute;
    width: 90vmax;
    height: 90vmax;
    top: 50%;
    left: 50%;
    /* 🌟 THE GRAPHICS HARDWARE ACCELERATOR:
       Adding 'will-change: transform, filter' signals the mobile browser engine 
       ahead of time to prepare the device's GPU for this element. 
       This completely eliminates any motion stutters or jitters during the rotation! */
    will-change: transform, filter;
    transform: translate(-50%, -50%) scale(1.3) rotate(-90deg);
    /* The Graphic */
    background-image: url('../assets/img/Navbar_Overlay.svg');
    background-size: contain; /* Ensures the gear isn't cropped */
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1; 
    opacity: 0;
    filter: blur(4px);
    /* Motion remains the same */
    transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), 
                filter 0.7s ease, 
                opacity 0.4s ease;
}

@media screen and (max-width: 500px) and (orientation: portrait) {
    .overlay::before {
        width: 100vmax;
        height: 100vmax;
        transform: translate(-50%, -50%) scale(1.6) rotate(-90deg);
    }
    .overlay.active::before {
        transform: translate(-50%, -50%) scale(1.6) rotate(0deg);
    }
}


/* THE GEAR ENDING STATE: Visible, smaller, not rotated, and blurred */
.overlay.active::before {
    opacity: 1;
    filter: blur(0px);
    /* CRITICAL: Must repeat the translate to stay centered */
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
}

.overlay.active {
    opacity: 1;
    /* CRITICAL: Allows the user to interact with the hub again */
    pointer-events: auto !important; 
    cursor: pointer;
}

/* The Static Background Blur */
.overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1; /* Between gear and text */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: backdrop-filter 0.5s ease 0.3s;
}

/* Blur the background with no rotation */
.overlay.active::after {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: -1; 
}

.overlay-content {
    padding-top: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 1fr auto 1fr;
    grid-template-areas:    '.      .       .' 
                            '. overlay_text .'
                            '.      .       .';
    width: 100%;
    height: 100dvh; /* Use dynamic height to match the parent */
    z-index: 10;
    /* Base state */
    opacity: 0; 
    transform: translateY(10px); /* Text is shifted downward */
    transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
    pointer-events: none;
}

/* Gear overlay text */
#overlay-text {
    grid-area: overlay_text;
    display: grid;
    grid-auto-rows: min-content;
    row-gap: 0 !important;
    text-align: left;
    width: min(65vi, 35rem);
    align-self: center !important;
    justify-self: center !important;
    margin:0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    color: var(--Gray-Text);
    line-height: 1.4;
    hyphens: auto;
    /* Limit height to a safe visible area (70% of the dynamic screen) */
    max-height: 70dvh; 
    max-width: 90vw;
    /* CRITICAL: Prevents scroll-chaining where moving the hub text scrolls the background */
    overscroll-behavior: contain; 
    overflow-y: auto; /* Allows scrolling if it's sticky */
    /* Modern Safari handles momentum scrolling automatically, 
       but we keep it for older iOS versions */
    -webkit-overflow-scrolling: touch; 
    /* Ensure the scrollbar doesn't ruin the cinematic look */
    scrollbar-width: thin; 
    scrollbar-color: var(--Gray-Text) transparent;
    pointer-events: auto;
    
}

/* Spacing for unbulleted text */
#overlay-text p {
    line-height: 1.4 !important;
    padding-bottom: 0 !important;
    width: 100%;
    text-align: left;
    margin-bottom: 0 !important;
}

/* MICRO-GRID: For the hanging indents */
.list-item {
    display: grid;
    /* Col 1: Fixed gear box | Col 2: The wrapping text */
    grid-template-columns: var(--Bullets) 1fr; 
    column-gap: 2pt; /* Space adjustment between bullets and text*/
    align-items: baseline;
     /* Pull the rows closer together to match the tight look of wrapped lines. */
    margin-bottom: 0 !important; /* Vertical space adjustment between lines*/
}

/* Spacing for bulleted text */
.list-item p {
    text-align: left;
}

/* NESTED INDENT: For the 'g' bullet sub-items */
.list-item.sub-item {
    margin-left: 1.5rem;
}

/* GEAR GLYPHS: Using your pre-kerned graphics */
.list-item span.gears {
    font-family: var(--KensBullets) !important;
    font-size: var(--Bullets);
    line-height: 1 !important;
    display: inline-block;
    text-align: center;
    transform: translateY(3px); /* Vertical alignment of bullets and text */
}

.pricing-block {
    display: table;          /* Shrinks the container width tightly to the longest text line */
    margin: 2rem auto;       /* Computes equal left/right space to center the block perfectly */
    text-align: left;        /* Forces internal micro-grids to remain left-aligned to each other */
}

/* When the overlay is active, make the content visible */
.overlay.active .overlay-content {
    opacity: 1;
    transform: translateY(0); /* Nudges text upwards into its final spot */
    pointer-events: auto;
}


/* =====================
   Hero Image & Video
   ====================*/
/* Hero Stage Container (Proportional Stacking Grid Framework) */
/* Hero Stage Container (Proportional Stacking Grid Framework) */
.hero-image-video-grid {
    /* 🌟 THE SINGLE-CELL CANVASSING LOCK:
       Using a single explicit 100% grid cell forces your JPG map, SVG network lines, 
       video clip, and container query overlay to overlap natively on identical coordinates. */
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    
    position: relative;
    width: 100%;
    height: 100%; /* Allows the height to compress dynamically */
    
    /* 🌟 THE RESONSIVE SPACE LOCK:
       Adding this explicit aspect-ratio matches the exact 2448x1224 proportions of your JPG map. 
       This forces the parent grid container to shrink-wrap tightly right against the true bottom edge 
       of your artwork, completely eradicating any white or black letterbox padding loops! */
    aspect-ratio: 2448 / 1224;
}

/* Hero Background Layers - Proportional Stack Lock */
.hero-image {
    grid-column: 1;
    grid-row: 1;
    z-index: 0;
    width: 100%;
    height: 100%;
    display: block;
    border-bottom: 1px solid var(--Text-Bubble);
}

/*  Hero Logo Video Component (Mathematically Locked to Width Matrix) */
#hero-video {
  /* Rips the video out of any shifting grid tracks so it tracks your map natively */
  position: absolute;
  
  /* 🌟 THE UNBREAKABLE HORIZONTAL CHANNEL:
     Maps your custom X-coordinate safely based on your 2448 canvas width blueprint. */
  left: calc((2000 / 2448) * 100%);
  
  /* 🌟 THE RESIZING UNLOCK CORRECTIONS:
     - Changing the height division base (1224) over to your horizontal canvas base (2448) 
       completely decouples the vertical placement from the screen height tracker.
     - Multiplying by '100cqw' forces the top positioning of the video box to track 
       the map width exclusively. Pulling your window down can never cause a drift again! */
  top: calc((940 / 2448) * 100cqw);
  
  /* 🌟 FIXED WATER-FLOATING TRANSLATION RESET:
     Swapping your custom vertical offset padding shift over to use horizontal container width 
     units (cqw) ensures your WebM logo graphics float perfectly over the ocean waters, 
     completely immune to dynamic browser window expansions across all systems! */
  transform: translate(-50%, -50%) translate(-12.5cqw, -3cqw);
  
  /* Fluid sizing clamp keeps your custom snapshot width scale perfectly preserved */
  width: 48vw;
  z-index: 2; 
  pointer-events: none; /* Mouse clicks continue to pass straight through transparent spaces */
}


/* ======================
   Dynamic Text Bubbles
   ====================== */
.text-bubble-interactive-overlay {
    position: absolute;
    inset: 0;
    max-width: 100%;
    max-height: 100%;
    grid-area: 1 / 1 / 4 / 4; 
    z-index: 19;            
    aspect-ratio: 2448 / 1224;
    overflow: visible;     
    container-type: size; 

    /* 🌟 REQUIRED PRODUCTION BASELINE: Keeps the canvas transparent to clicks 
        so visitors can seamlessly toggle underlying buttons and forms on your live site. */
    pointer-events: none;  
}

/* DEVELOPER TOOLING OVERRIDES: Coordinate Extraction Matrix */
.text-bubble-interactive-overlay.edit-mode {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    
    /* 🌟 THE HEIGHT EXPANSION MATRIX:
       Forces the tracking element box to stretch completely to the exact bottom edge 
       of your 2448x1224 grid parent, matching your map proportions exactly [INDEX]! */
    height: 100% !important;
    min-height: 100% !important;
    
    z-index: 9999 !important;
    pointer-events: auto !important;
    cursor: crosshair !important;
    
    /* 🌟 THE TARGET DIAGNOSTIC SHIELD:
       Temporary visual test tint. When you reload the page, your map area should turn 
       a light semi-transparent red. If it turns red, your click box is perfectly active! 
       (We will delete this line once you get your numbers) */
    background-color: rgba(255, 0, 0, 0.15) !important;
}

/* 2. INNER CHILD CONTAINER TEXT BULLETS: Swept completely away out of your path */
.text-bubble-interactive-overlay.edit-mode .text-bubble-container {
    /* 🌟 THE PASS-THROUGH GHOST CHANNEL:
       Forces the browser engine to ignore these child text bubble frames entirely [INDEX]. 
       Clicks pass right through their empty bounds to let the overlay record 
       the clean coordinate point below them [INDEX, INDEX]! */
    pointer-events: none !important;
    
    /* 🌟 THE WORKSPACE VISIBILITY CLEARER:
       Completely hides the text objects out of your sight so you can see your 
       laptop gear graphic icons on the underlying map asset perfectly. */
    opacity: 0 !important;
    visibility: hidden !important;
animation: none !important;
}

/* 
  MASTER CONTAINER: Positions based on your --x and --y coordinates.
  - Converts your raw variables into responsive percentage plots based on the 2448x1224 canvas bounds [INDEX].
  - This un-clusters them from the top-left corner and maps them straight to their city nodes on all monitors [INDEX].
  - Set to opacity: 0 by default so they stay completely invisible until their delay hits [INDEX].
*/
.text-bubble-container {
    position: absolute;
    left: calc((var(--x) / 2448) * 100%);
    top: calc((var(--y) / 1224) * 100%);
    transform: translate(0, -100%); /* Shifts the entire structure upward so it grows upward and rightward */
    display: inline-flex;
    flex-direction: column;
    user-select: none;
    opacity: 0; /* Unlocks the animation engine baseline instantly [INDEX] */
    transform-origin: bottom left; 
    /* 🌟 THE SOLID HIT-TARGET INJECTION:
        By giving the master container a completely transparent background fill, 
        the browser engine treats the entire outer box—including the text, tail space, 
        and boundary cushions—as a single, unified hit target [INDEX]. */
    background-color: rgba(255, 255, 255, 0); 
    /* 🌟 COMPREHENSIVE CURSOR RANGE:
        Forces the mouse to register a active tracking state across the entire 
        element canvas before the cursor even touches the inner blue letters [INDEX]. */
    pointer-events: none !important; 
    }

    /* 1. PAUSE LOGIC: Freezes your 30s 'growAndScatterFade' loop precisely in place */
.text-bubble-container.is-paused {
    animation-play-state: paused !important;
    opacity: 1 !important;
    transform: translate(0, -100%) scale(1) !important;
    z-index: 1000 !important; /* Raises it above other crossing elements while reading */
}

/* 2. DISMISSAL OVERRIDE: Snaps the item out of sight immediately when toggled closed */
.text-bubble-container.is-dismissed {
    animation: none !important; /* Terminates the active scale keyframe cycle */
    opacity: 0 !important;
    transform: translate(0, -100%) scale(0) !important;
    pointer-events: none !important; /* Stops ghost hover mouse triggers */
    transition: opacity 0.2s ease, transform 0.2s ease; /* Crisp cinematic fade-out */
}

.text-bubble-body {
    background-color: var(--Text-Bubble);
    color: white;
  
  /* 🌟 FLUID PADDING & RADIUS: Compresses dynamically on smaller viewports */
    padding: clamp(6px, 1.2cqw, 14px) clamp(10px, 1.8cqw, 18px); 
    border-radius: clamp(10px, 1.6cqw, 15.94px) / clamp(10px, 1.6cqw, 15.65px); 
  
    font-family: var(--Text-Bubble-Text), sans-serif;
  
  /* 🌟 FLUID TYPOGRAPHY CLAMP: Scales the 16pt font up and down cleanly */
    font-size: clamp(0.85rem, 1.4cqw, var(--text-16pt)); 
    font-weight: 500;
    line-height: 1.1;                 
    word-wrap: break-word;
    
  /* 🌟 FLUID MAX WIDTH: Limits horizontal box stretch proportionally */
    max-width: clamp(180px, 45cqw, 450px); 
}

/* THE TAIL COMPONENT: Re-anchored to match the compressed text height box */
.text-bubble-tail {
    position: absolute;
    left: -5px; /* Keeps your 5-pixel rightward nudge completely locked in [INDEX] */
    bottom: 0; 
    width: 21.6px;   
    height: 20.71px; 
    z-index: -1; 
}

/* 🛠️ FIXED HOVER TRIGGER: 
   Freezes the parent container running the dynamic transform/scale keyframe loop */
.text-bubble-container:hover {
    animation-play-state: paused !important;
    cursor: pointer;
}

/* Animation Engine Matrix (Staggered Upward-Growing Scattering Cycles) */
/* 
  1. TIMELINE DEPLOYMENT:
     Applies the 20-second infinite loop directly to your active HTML state selectors.
     We set the transform-origin here so it grows upward natively from the bottom-left.
*/
.text-bubble-container {
    transform-origin: bottom left; /* Anchors the balloon growth right at your tail dot */
}

/* Interaction Lock: Allows clicking nodes only when sequence is active */
.media-sequence-complete .text-bubble-container {
    pointer-events: auto !important;
}

.media-sequence-complete .washington   { animation: growAndScatterFade 40s infinite cubic-bezier(0.34, 1.56, 0.64, 1) 0s forwards; }
.media-sequence-complete .michigan     { animation: growAndScatterFade 40s infinite cubic-bezier(0.34, 1.56, 0.64, 1) 4s forwards; }
.media-sequence-complete .arizona      { animation: growAndScatterFade 40s infinite cubic-bezier(0.34, 1.56, 0.64, 1) 8s forwards; }
.media-sequence-complete .minnesota    { animation: growAndScatterFade 40s infinite cubic-bezier(0.34, 1.56, 0.64, 1) 12s forwards; }
.media-sequence-complete .montana      { animation: growAndScatterFade 40s infinite cubic-bezier(0.34, 1.56, 0.64, 1) 18s forwards; }
.media-sequence-complete .arkansas     { animation: growAndScatterFade 40s infinite cubic-bezier(0.34, 1.56, 0.64, 1) 22s forwards; }
.media-sequence-complete .west-texas   { animation: growAndScatterFade 40s infinite cubic-bezier(0.34, 1.56, 0.64, 1) 28s forwards; }
.media-sequence-complete .north-texas  { animation: growAndScatterFade 40s infinite cubic-bezier(0.34, 1.56, 0.64, 1) 32s forwards; }
.media-sequence-complete .north-CA     { animation: growAndScatterFade 40s infinite cubic-bezier(0.34, 1.56, 0.64, 1) 36s forwards; }

/* 
  2. THE SCATTERING TIMELINE MECHANICS:
     Each bubble springs to life from scale(0) to scale(1) using your elastic curve, 
     holds steady for reading, and dissolves completely before the next group pops up.
*/
@keyframes growAndScatterFade {
  /* 0% to 1.5%: Pops open at your original high velocity speed */
  0% {
    opacity: 0;
    transform: translate(0, -100%) scale(0);
  }
  
  /* 1.5% to 28.5%: THE EXTENDED RETENTION HOLD 
     By keeping the bubble locked open all the way to 28.5% of a 30s loop, 
     visitors get a massive reading window before the bubble triggers its departure! */
  1.5%, 28.5% {
    opacity: 1;
    transform: translate(0, -100%) scale(1);
  }
  
  /* 30% to 100%: Drops away and vanishes completely in a crisp 1.5% window */
  30%, 100% {
    opacity: 0;
    transform: translate(0, -100%) scale(0);
  }
}


/* ==========================================================================
   Social Media Logos & Unmute/Mute Button
   ========================================================================== */
.sm-logos-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 2vw;
    position: fixed;
    top:10px; 
    right: 10px; 
    margin-top: 10px;
    z-index: 25;
}

.sm-logos {
    width: clamp(20px,3vw,30px);
    height: clamp(20px,3vw,30px);
    fill: white;
}

.sm-logos:hover {
    fill:var(--Text-Bubble);
}

/* Hero Mute Toggle Button (Social Utility Hub Integration) */
/* 1. MASTER BUTTON FRAME: Seamlessly integrates into your column flex track */
.unmute-mute-button {
    background-color: transparent;
    border: none;
    padding: 0;
    margin-top: 13vw !important;
    
    /* 🌟 THE RESIZING IDENTITY SYNC:
       Forces your button frame to perfectly follow the clamp size limits 
       of your neighboring social media logo assets across all viewports. */
    width: clamp(40px, 5vw, 70px);
    height: clamp(40px, 5vw, 70px);
    display: block;
    cursor: pointer;
    position: relative;
}

/* 2. INNER SVG CANVAS: Ensures your vector drawings scale natively */
#mute-icon, 
#unmute-icon {
    /* width: 100%;
    height: 100%; */
    display: block;
}

/* 3. CORE BRAND COLOR MAPPING: Restores your original color profile */
.unmute-mute-bkgd {
    fill: white; /* Keeps your solid backplate circle a crisp, clean white */
}

.unmute-mute-icon {
    fill: var(--Gold); /* Locks your speaker/waves vector cleanly to premium gold */
    transition: fill 0.3s ease;
}

/* 4. INTERACTIVE DESKTOP HOVER STYLES: Matches social hub hover effects */
@media (hover: hover) and (pointer: fine) {
    /* 🌟 UNIFIED HOVER ACTION:
       When a cursor glides over the button block, the inner gold speaker icon 
       flashes blue to match your .sm-logos:hover style profile! */
    .unmute-mute-button:hover .unmute-mute-icon {
        fill:var(--Text-Bubble); 
    }
}


/* =====================
   E-mail Contact Form
   ===================== */
#contact-form.container {
    grid-area: overlay_text;
    display: block;
    min-height: 400px; /* Matches the exact height footprint of your form layout */
    width: 100%;
    box-sizing: border-box;
}

#contact-form {
    margin-top: 35px;
}

.contact-form-field-group {
    position: relative;
    width: 100%;
    margin-bottom: 35px;
}

.contact-form-field {
    padding: 10px 0;
    width: 100%;
    text-align: left;
    border-width: 1px;
    border-style: hidden hidden solid hidden;
    border-color: var(--Form-Frame);
    background-color: var(--Form-Field-Bkgd);
    font-family: var(--DefaultFont);
    font-size: clamp(var(--text-12pt),2vw,var(--text-16pt));
    color: var(--Gray-Text);
}

/* Ultimate Browser Autofill Override Shield */
.contact-form-field:-webkit-autofill,
.contact-form-field:-webkit-autofill:hover, 
.contact-form-field:-webkit-autofill:focus,
.contact-form-field:-webkit-autofill:active {
    /* 🌟 FIX: Force the inset shadow to match your exact --Form-Field-Bkgd variable at all times */
    -webkit-box-shadow: 0 0 0 1000px var(--Form-Field-Bkgd) inset !important;
    box-shadow: 0 0 0 1000px var(--Form-Field-Bkgd) inset !important;
    
    /* Force the text characters to match your exact gray text token */
    -webkit-text-fill-color: var(--Gray-Text) !important;
    
    /* 🌟 THE POSITION FIX: Keep the time freeze, but remove the background-color override lock. */
    /* This allows the field to transition smoothly back to its natural transparent style state */
    /* the exact millisecond you move your cursor focus to the next input field! */
    transition: background-color 9999s ease-in-out 0s !important;
    
    font-family: inherit !important;
}

.contact-form-field:hover, .contact-form-field:focus {
    background-color: var(--Form-Field-Hover);
}

.contact-form-field-group label {
  position: absolute;
  left: 0;
  top: 10px;
  font-style: var(--DefaultFont);
  font-size: clamp(var(--text-12pt),2vw,var(--text-16pt));
  color: var(--Gray-Text);
  transition: all 0.2s ease;
  pointer-events: none; /* Allows clicking "through" the label into the input */
}

/* The "Floating" form animation */
/* Triggers when field is clicked (focus) OR has text (placeholder not shown) */
.contact-form-field:focus + label,
.contact-form-field:not(:placeholder-shown) + label {
    top: -18px; /* Moves label above the text line */
    font-size: 0.75rem;
    letter-spacing: 1px;
}

/* Hide the actual browser placeholder text so only your label is visible */
.contact-form-field::placeholder {
  color: transparent;
}

#contact-form-send-button {
    margin: 40px auto 0;
    display: block;
    width: 120px;
    height: 44px;
    color: var(--Send-Button-Text);
    background-color: var(--Send-Button-Bkgd);
    border: none;
    border-radius: 7px;
    cursor: pointer;
}

.send-button-text {
    font-size: var(--text-14pt);
    font-weight: bold;
    line-height: 1;
    display: block;
    text-align: center;
}

#contact-form-send-button:hover {
    background-color: var(--Button-Hover);
}

#contact-form-send-button.contact-form-field::placeholder {
    background-color: var(--Button-Pressed);
}

#contact-form-thank-you {
    position: relative;
    display: none;
    padding: 25px 0;
    text-align: center;
}

#contact-form-thank-you p {
    position: relative;
    font-size: var(--text-18pt);
    color: white;
    text-align: center;
}

.thank-you-logo-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
    animation: fadeInLogo 0.6s ease-out forwards;
}

.thank-you-logo-wrapper svg {
    max-width: 140px;
    height: auto;
}

@keyframes fadeInLogo {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}


/* ===============================
   SEO Copy & Tag Words Section
   =============================== */
.seo-keywords-container {
    /* 🌟 THE IMMERSIVE VOID: 
       Perfectly matches your satellite map theme with zero visual seams */
    background-color: black; 
    width: 100%;
    padding: clamp(40px, 6vw, 80px) 5%; /* Generous breathing room across all viewports */
   /* 🌟 THE PERSISTENT LAYER LOCKS:
       Maintains the 3D space calculation tracks and sets a baseline index 
       priority that stays securely underneath your map system [INDEX]. */
    transform-style: preserve-3d !important;
    position: relative !important;
    z-index: 1 !important;
       /* 🌟 THE SAFARI/FIREFOX DEPTH REVERSAL:
       Using translate3d with a negative Z-axis value forces the phone's graphics 
       processor (GPU) to push this entire text block back into virtual 3D space [INDEX]. 
       This completely stops Firefox iOS from flattening the layers and painting 
       this black block over your floating logo video [INDEX]! */
    transform: translate3d(0, 0, -5px) !important;

    /* 🌟 THE VISUAL SEGREGATION BOUNDARY:
       Forces an exact empty cushion equal to 100% of the visible glass screen height.
       This pushes the entire container completely below the fold, forcing 
       users to explicitly swipe or scroll down to discover your tag cloud content! */
    margin-top: 100vh !important;
    
}

.seo-wrapper {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.seo-wrapper h2 {
    color: var(--Gold); /* Your premium branding gold pops perfectly over black */
    margin-bottom: 20px;
    font-weight: var(--Bold);
}

.seo-wrapper p {
    /* 🌟 THE HIGH-CONTRAST ACCESSIBILITY SYNC:
       Swapping your mid-tone gray variable out for a bright, clean off-white (#d1d5db) 
       ensures your paragraphs are highly legible against the pure black background, 
       passing all modern accessibility and SEO contrast ranking audits cleanly! */
    color: #d1d5db; 
    line-height: 1.6;
    margin-bottom: 35px;
    font-size: clamp(var(--text-12pt), 1.5vw, var(--text-14pt));
}

/* THE TAG CLOUD: Arranges your keyword tokens into a clean, modern grid */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.tag {
    /* Subtle background and border tints let the tokens float cleanly over the floor */
    background-color: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 255, 255, 0.15);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: var(--text-10pt);
    font-weight: var(--SemiBold);
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

/* Interactive feedback on desktop pointer devices */
@media (hover: hover) and (pointer: fine) {
    .tag:hover {
        border-color: var(--Gold);
        color: var(--Gold);
        background-color: rgba(255, 201, 4, 0.08);
        cursor: pointer;
    }
}


/* ==========================================================================
   Responsive Landscape Orientation Recommendation Matrix
   ========================================================================== */

/* 1. GLOBAL ROOT KEYFRAMES (Always outside queries for runtime stability) */
@keyframes rotateIcon {
    0% { transform: rotate(0deg); }
    30% { transform: rotate(90deg); }
    70% { transform: rotate(90deg); }
    100% { transform: rotate(0deg); }
}

/* 2. HIDE BY DEFAULT: Keeps the overlay hidden on desktops and landscape screens */
.orientation-alert-overlay {
    display: none;
}

/* 3. HANDHELD PORTRAIT MEDIA QUERY ENGINE: 
   Only activates on screens under 700px wide when held completely upright! */
@media screen and (max-width: 700px) and (orientation: portrait) {
    .orientation-alert-overlay {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.78);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 999999 !important;
        padding: 20px;
        box-sizing: border-box;
    }

    .orientation-alert-box {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important; 
        background-color: #111111;
        border: 2px solid var(--Gold);
        border-radius: 12px;
        padding: 30px 24px;
        max-width: 350px;
        text-align: center;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    /* THE STREAMLINED SPINNING ICON FRAME */
    .orientation-icon-container {
        background-color: #111111 !important;
        border: 2px solid var(--Gold, #d4af37) !important;
        border-radius: 50% !important;
        width: 72px !important;
        height: 72px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
    }

    .orientation-icon {
        font-size: 32px;
        line-height: 1;
        display: inline-block;
        animation: rotateIcon 2s ease-in-out infinite;
    }

    .orientation-alert-box p {
        color: white;
        font-family: var(--DefaultFont), sans-serif;
        font-size: clamp(var(--text-12pt), 4vw, var(--text-14pt));
        line-height: 1.5;
        margin: 0 !important;
    }
}

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

.site-footer {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    
    /* 🌟 THE POSITION LOCK: Exactly 10px from outer window edges */
    padding: 20px 10px !important; 
    
    background-color: var(--Gold) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Left Credits: Force the container to adapt to the full text length */
.site-footer .footer-left {
    flex: 1 1 auto !important;
    min-width: max-content !important; /* 🌟 Forces container to grow to match your full sentence */
    text-align: left !important;
}

/* Right Copyright: Lock tightly to its natural right edge boundaries */
.site-footer .footer-right {
    flex: 0 0 auto !important;
    text-align: right !important;
}

/* Global Footer Typography Safeguard */
.site-footer p {
    margin: 0 !important;
    padding: 0 !important;
    font-size: var(--text-14pt, 14px) !important;
    color: #ffffff !important;      /* Solid high-visibility white on gold layout */
    white-space: nowrap !important;  /* 🌟 Stops the browser from cutting or dropping words */
    text-indent: 0 !important;       /* 🌟 Eradicates any hidden indent text-shoving rules */
}

/* Absolute Anchor Link Color Preservation */
.site-footer .footer-left a {
    color: #ffffff !important;
    text-decoration: underline !important;
    display: inline !important;      /* Keeps the link inline with the surrounding text strings */
}



/*Window Sizing Breakpoints - used for manual selection within Pinegrow*/
@media (width: 1366px){}
@media (width: 1440px){}
@media (width: 1600px){}
@media (width: 1920px){}