/* ================================================================
   LANDING PAGE — Isolated stylesheet
   Applies only to the Demo Landing Page template.
   No styles from the main site load here.
   All design direction comes from Justin's brief.
================================================================ */

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

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

body {
    min-height: 100vh;
    background-color: #060E1A;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, video {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
}

/* ── Breakpoints ────────────────────────────────────────────
   xs  : 0 – 479px       (phones portrait)
   sm  : 480px – 767px   (phones landscape / small tablet)
   md  : 768px – 1023px  (tablet)
   lg  : 1024px – 1279px (small desktop / laptop)
   xl  : 1280px+         (desktop)
───────────────────────────────────────────────────────────── */

/* ── 12-column grid ─────────────────────────────────────────
   Mobile-first: starts as a single column stack, scales up.

   Responsive col classes:
     col-{n}        default (all sizes)
     col-sm-{n}     480px+
     col-md-{n}     768px+
     col-lg-{n}     1024px+
     col-xl-{n}     1280px+

   Start offset classes (same breakpoint prefixes):
     col-start-{n}
     col-sm-start-{n}
     col-md-start-{n}
     col-lg-start-{n}
     col-xl-start-{n}

   Example — logo full width on mobile, 6 cols from tablet up:
     <div class="col-12 col-md-6">
───────────────────────────────────────────────────────────── */

/* Grid wrapper */
.l-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    width: 100%;
}

/* Tighten gutter on small screens */
@media (max-width: 479px) { .l-grid { gap: 12px; } }
@media (max-width: 767px) { .l-grid { gap: 16px; } }

/* ── Default col spans (all breakpoints) ── */
.col-1  { grid-column: span 1;  }
.col-2  { grid-column: span 2;  }
.col-3  { grid-column: span 3;  }
.col-4  { grid-column: span 4;  }
.col-5  { grid-column: span 5;  }
.col-6  { grid-column: span 6;  }
.col-7  { grid-column: span 7;  }
.col-8  { grid-column: span 8;  }
.col-9  { grid-column: span 9;  }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

.col-start-1  { grid-column-start: 1;  }
.col-start-2  { grid-column-start: 2;  }
.col-start-3  { grid-column-start: 3;  }
.col-start-4  { grid-column-start: 4;  }
.col-start-5  { grid-column-start: 5;  }
.col-start-6  { grid-column-start: 6;  }
.col-start-7  { grid-column-start: 7;  }
.col-start-8  { grid-column-start: 8;  }
.col-start-9  { grid-column-start: 9;  }
.col-start-10 { grid-column-start: 10; }
.col-start-11 { grid-column-start: 11; }

/* ── sm: 480px+ ── */
@media (min-width: 480px) {
    .col-sm-1  { grid-column: span 1;  }
    .col-sm-2  { grid-column: span 2;  }
    .col-sm-3  { grid-column: span 3;  }
    .col-sm-4  { grid-column: span 4;  }
    .col-sm-5  { grid-column: span 5;  }
    .col-sm-6  { grid-column: span 6;  }
    .col-sm-7  { grid-column: span 7;  }
    .col-sm-8  { grid-column: span 8;  }
    .col-sm-9  { grid-column: span 9;  }
    .col-sm-10 { grid-column: span 10; }
    .col-sm-11 { grid-column: span 11; }
    .col-sm-12 { grid-column: span 12; }
    .col-sm-start-1  { grid-column-start: 1;  }
    .col-sm-start-2  { grid-column-start: 2;  }
    .col-sm-start-3  { grid-column-start: 3;  }
    .col-sm-start-4  { grid-column-start: 4;  }
    .col-sm-start-5  { grid-column-start: 5;  }
    .col-sm-start-6  { grid-column-start: 6;  }
}

/* ── md: 768px+ ── */
@media (min-width: 768px) {
    .col-md-1  { grid-column: span 1;  }
    .col-md-2  { grid-column: span 2;  }
    .col-md-3  { grid-column: span 3;  }
    .col-md-4  { grid-column: span 4;  }
    .col-md-5  { grid-column: span 5;  }
    .col-md-6  { grid-column: span 6;  }
    .col-md-7  { grid-column: span 7;  }
    .col-md-8  { grid-column: span 8;  }
    .col-md-9  { grid-column: span 9;  }
    .col-md-10 { grid-column: span 10; }
    .col-md-11 { grid-column: span 11; }
    .col-md-12 { grid-column: span 12; }
    .col-md-start-1  { grid-column-start: 1;  }
    .col-md-start-2  { grid-column-start: 2;  }
    .col-md-start-3  { grid-column-start: 3;  }
    .col-md-start-4  { grid-column-start: 4;  }
    .col-md-start-5  { grid-column-start: 5;  }
    .col-md-start-6  { grid-column-start: 6;  }
    .col-md-start-7  { grid-column-start: 7;  }
    .col-md-start-8  { grid-column-start: 8;  }
}

/* ── lg: 1024px+ ── */
@media (min-width: 1024px) {
    .col-lg-1  { grid-column: span 1;  }
    .col-lg-2  { grid-column: span 2;  }
    .col-lg-3  { grid-column: span 3;  }
    .col-lg-4  { grid-column: span 4;  }
    .col-lg-5  { grid-column: span 5;  }
    .col-lg-6  { grid-column: span 6;  }
    .col-lg-7  { grid-column: span 7;  }
    .col-lg-8  { grid-column: span 8;  }
    .col-lg-9  { grid-column: span 9;  }
    .col-lg-10 { grid-column: span 10; }
    .col-lg-11 { grid-column: span 11; }
    .col-lg-12 { grid-column: span 12; }
    .col-lg-start-1  { grid-column-start: 1;  }
    .col-lg-start-2  { grid-column-start: 2;  }
    .col-lg-start-3  { grid-column-start: 3;  }
    .col-lg-start-4  { grid-column-start: 4;  }
    .col-lg-start-5  { grid-column-start: 5;  }
    .col-lg-start-6  { grid-column-start: 6;  }
    .col-lg-start-7  { grid-column-start: 7;  }
    .col-lg-start-8  { grid-column-start: 8;  }
    .col-lg-start-9  { grid-column-start: 9;  }
    .col-lg-start-10 { grid-column-start: 10; }
}

/* ── xl: 1280px+ ── */
@media (min-width: 1280px) {
    .col-xl-1  { grid-column: span 1;  }
    .col-xl-2  { grid-column: span 2;  }
    .col-xl-3  { grid-column: span 3;  }
    .col-xl-4  { grid-column: span 4;  }
    .col-xl-5  { grid-column: span 5;  }
    .col-xl-6  { grid-column: span 6;  }
    .col-xl-7  { grid-column: span 7;  }
    .col-xl-8  { grid-column: span 8;  }
    .col-xl-9  { grid-column: span 9;  }
    .col-xl-10 { grid-column: span 10; }
    .col-xl-11 { grid-column: span 11; }
    .col-xl-12 { grid-column: span 12; }
    .col-xl-start-1  { grid-column-start: 1;  }
    .col-xl-start-2  { grid-column-start: 2;  }
    .col-xl-start-3  { grid-column-start: 3;  }
    .col-xl-start-4  { grid-column-start: 4;  }
    .col-xl-start-5  { grid-column-start: 5;  }
    .col-xl-start-6  { grid-column-start: 6;  }
    .col-xl-start-7  { grid-column-start: 7;  }
    .col-xl-start-8  { grid-column-start: 8;  }
    .col-xl-start-9  { grid-column-start: 9;  }
    .col-xl-start-10 { grid-column-start: 10; }
    .col-xl-start-11 { grid-column-start: 11; }
}

/* ── Page wrapper — side padding only, bg stays full-width ──── */
.l-wrap {
    padding-left:  clamp(16px, 4vw, 80px);
    padding-right: clamp(16px, 4vw, 80px);
}

/* ── Header / Logo ──────────────────────────────────────────── */
.l-header {
    padding-top: clamp(20px, 4vw, 40px);
}

.l-logo {
    display: flex;
    align-items: flex-start;
}

.l-logo img {
    display: block;
    width: 100%;
    height: auto;
}

/* ── Sections added below as Justin provides direction ──────── */