/*
Theme Name:  Camille Coming Soon
Theme URI:   https://camillemarketinsights.com
Description: Astra child theme — single-page Coming Soon for Camille Market Insight.
Template:    astra
Version:     1.0.0
Author:      Camille Market Insight
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: camille-coming-soon
*/

/* ============================================================
   DESIGN TOKENS — exact copy from main Camille theme
   Primary: Crimson #e31837 | Secondary: Navy #1a3c5e
   Fonts: Inter Tight (display) + Lato (sans)
   ============================================================ */
:root {
    --crimson:          #e31837;
    --crimson-dark:     #b8102a;
    --crimson-mid:      #c81530;
    --crimson-pale:     #fde8ec;
    --navy:             #1a3c5e;
    --navy-dark:        #0e2540;
    --navy-mid:         #2d5a8e;

    --color-white:          #ffffff;
    --color-off-white:      #f8f9fb;
    --color-ink:            #111827;
    --color-parchment:      #f8f9fb;
    --color-parchment-2:    #eff1f5;
    --color-stone:          #64748b;
    --color-stone-lt:       #94a3b8;
    --color-dark-gray:      #1e293b;
    --color-text:           var(--color-ink);

    --font-heading:  'Inter Tight', sans-serif;
    --font-display:  'Inter Tight', sans-serif;
    --font-sans:     'Lato', sans-serif;
    --font-body:     'Lato', sans-serif;
}

/* ── RESET & BASE ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow-x: hidden; }
img, video { max-width: 100%; height: auto; display: block; }

/* Kill Astra chrome */
#masthead,
.ast-primary-header-bar,
.ast-desktop-header,
.ast-mobile-header,
.astra-hfb-header,
#colophon,
#ast-scroll-top { display: none !important; }
body,
body.ast-header-break-point,
body.astra-hfb-header { padding-top: 0 !important; }

/* ── PAGE SHELL ─────────────────────────────────── */
body {
    font-family:    var(--font-sans);
    background:     var(--navy-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display:        flex;
    flex-direction: column;
    min-height:     100vh;
}

.cs-page {
    flex:           1;
    display:        flex;
    flex-direction: column;
    min-height:     100vh;
    position:       relative;
    overflow:       hidden;
}

/* ── VIDEO BACKGROUND — exact same as .hero-video ── */
.cs-video {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
    z-index:         0;
    pointer-events:  none;
}

/* ── VIDEO OVERLAY — exact same as .hero-overlay ─── */
.cs-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(to top, rgba(14,37,64,.88) 0%, rgba(14,37,64,.45) 40%, rgba(0,0,0,.25) 75%, rgba(0,0,0,.15) 100%);
    z-index:    1;
}

/* Grain texture on top of video — identical to .cta-band grain */
.cs-page::before {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     repeating-linear-gradient(88deg, transparent 0px, transparent 3px, rgba(255,255,255,.008) 3px, rgba(255,255,255,.008) 6px);
    pointer-events: none;
    z-index:        2;
}

/* Crimson top stripe */
.cs-topbar-line {
    position:   absolute;
    top: 0; left: 0; right: 0;
    height:     3px;
    background: linear-gradient(90deg, var(--crimson-dark), var(--crimson), var(--crimson-dark));
    z-index:    20;
}

/* ── TOP BAR (nav-feel) ─────────────────────────── */
.cs-topbar {
    position:        relative;
    z-index:         10;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         36px 64px 0;
    flex-shrink:     0;
}

.cs-logo a,
.cs-logo .custom-logo-link { display: inline-block; text-decoration: none; }
.cs-logo img,
.cs-logo .custom-logo-link img {
    height:      56px;
    width:       auto;
    max-width:   200px;
    object-fit:  contain;
    /*
     * If your logo is dark and disappears on navy, uncomment:
     * filter: brightness(0) invert(1);
     */
}

.cs-nav-badge {
    font-family:    var(--font-sans);
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color:          rgba(255,255,255,.3);
    display:        flex;
    align-items:    center;
    gap:            12px;
}
.cs-nav-badge::before {
    content:    '';
    display:    block;
    width:      24px;
    height:     .5px;
    background: rgba(255,255,255,.22);
    flex-shrink:0;
}

/* ── MAIN BODY — hero-inner layout ─────────────── */
.cs-body {
    flex:            1;
    position:        relative;
    z-index:         5;
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    padding:         0 64px 80px;
    gap:             56px;
}

/* ── TEXT COLUMN (left) ─────────────────────────── */
.cs-text {
    max-width:  660px;
    flex-shrink:0;
}

/* Eyebrow — exact same as .hero-eyebrow */
.cs-eyebrow {
    font-family:    var(--font-sans);
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color:          rgba(255,255,255,.7);
    display:        flex;
    align-items:    center;
    gap:            14px;
    margin-bottom:  20px;
    animation:      fadeUp .8s .1s ease both;
}
.cs-eyebrow::before {
    content:    '';
    width:      32px;
    height:     .5px;
    background: rgba(255,255,255,.5);
    flex-shrink:0;
}

/* Headline — exact same as .hero-h1 */
.cs-h1 {
    font-family:    var(--font-display);
    font-size:      clamp(52px, 7vw, 90px);
    font-weight:    800;
    color:          #fff;
    line-height:    1.0;
    margin-bottom:  22px;
    letter-spacing: -.02em;
    animation:      fadeUp .8s .2s ease both;
}
/* Crimson italic line — exact same as .hero-h1 em */
.cs-h1 em {
    font-style: italic;
    color:      var(--crimson);
    display:    block;
}

/* Sub copy — exact same as .hero-sub */
.cs-sub {
    font-family:    var(--font-sans);
    font-size:      15px;
    font-weight:    300;
    color:          rgba(255,255,255,.52);
    line-height:    1.85;
    max-width:      480px;
    margin-bottom:  36px;
    letter-spacing: .02em;
    animation:      fadeUp .8s .3s ease both;
}

/* ── EMAIL FORM ─────────────────────────────────── */
.cs-form-wrap { animation: fadeUp .8s .4s ease both; }

.cs-form-lbl {
    font-family:    var(--font-sans);
    font-size:      9px;
    font-weight:    700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color:          rgba(255,255,255,.28);
    display:        block;
    margin-bottom:  12px;
}

.cs-form { display: flex; }

.cs-form input[type="email"] {
    flex:           1;
    height:         50px;
    padding:        0 20px;
    background:     rgba(255,255,255,.07);
    border:         .5px solid rgba(255,255,255,.18);
    border-right:   none;
    color:          #fff;
    font-family:    var(--font-sans);
    font-size:      13px;
    font-weight:    300;
    letter-spacing: .04em;
    outline:        none;
    transition:     background .25s ease, border-color .25s ease;
    min-width:      0;
    -webkit-appearance: none;
}
.cs-form input[type="email"]::placeholder { color: rgba(255,255,255,.3); }
.cs-form input[type="email"]:focus {
    background:   rgba(255,255,255,.1);
    border-color: rgba(227,24,55,.55);
}

/* Sliding button — exact same mechanics as .h-btn .h-btn--white */
.cs-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             10px;
    font-family:     var(--font-sans);
    font-size:       11px;
    font-weight:     600;
    letter-spacing:  .22em;
    text-transform:  uppercase;
    padding:         0 28px;
    height:          50px;
    position:        relative;
    overflow:        hidden;
    cursor:          pointer;
    transition:      color .35s ease;
    border:          none;
    background:      #fff;
    color:           var(--color-ink);
    white-space:     nowrap;
    flex-shrink:     0;
}
.cs-btn span { position: relative; z-index: 1; }
.cs-btn::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: var(--crimson);
    transform:  translateX(-101%);
    transition: transform .38s cubic-bezier(.77,0,.175,1);
    z-index:    0;
}
.cs-btn:hover::before { transform: translateX(0); }
.cs-btn:hover         { color: #fff; }
.cs-btn:disabled      { opacity: .6; cursor: not-allowed; }

/* Inline form message */
.cs-msg {
    margin-top:     10px;
    font-family:    var(--font-sans);
    font-size:      12px;
    font-weight:    300;
    letter-spacing: .06em;
    display:        none;
}
.cs-msg.visible { display: block; }
.cs-msg.success { color: rgba(255,255,255,.62); }
.cs-msg.error   { color: #f87171; }

/* ── COUNTDOWN CARD (right) — .hero-stats-card style ── */
.cs-card {
    background:         rgba(255,255,255,.94);
    backdrop-filter:    blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border:             .5px solid rgba(227,24,55,.3);
    padding:            28px 32px;
    min-width:          240px;
    flex-shrink:        0;
    animation:          fadeUp .8s .5s ease both;
}

/* Card eyebrow — .hsc-eye */
.cs-card-eye {
    font-family:    var(--font-sans);
    font-size:      9px;
    font-weight:    600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color:          var(--crimson);
    margin-bottom:  18px;
}

/* Countdown row — .hsc-row */
.cs-countdown {
    display:     flex;
    align-items: flex-start;
}

/* Divider — .hsc-divider */
.cs-cd-div {
    width:      .5px;
    background: rgba(227,24,55,.2);
    align-self: stretch;
    flex-shrink:0;
    margin:     0 18px;
}

/* Number — .hsc-num */
.cs-cd-num {
    font-family: var(--font-display);
    font-size:   36px;
    font-weight: 700;
    color:       var(--navy);
    line-height: 1;
    margin:      0 0 5px;
    min-width:   40px;
}

/* Label — .hsc-lbl */
.cs-cd-lbl {
    font-family:    var(--font-sans);
    font-size:      10px;
    font-weight:    300;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          var(--color-stone);
    margin:         0;
}

/* Card bottom note */
.cs-card-note {
    margin-top:     18px;
    padding-top:    16px;
    border-top:     .5px solid rgba(0,0,0,.07);
    font-family:    var(--font-sans);
    font-size:      11px;
    font-weight:    300;
    letter-spacing: .06em;
    color:          var(--color-stone);
}
.cs-card-note strong {
    font-weight: 600;
    color:       var(--crimson);
}

/* ── RIGHT SIDE VERTICAL LABEL — .scroll-hint ───── */
.cs-vert {
    position:        absolute;
    right:           28px;
    top:             50%;
    transform:       translateY(-50%);
    z-index:         3;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             8px;
    pointer-events:  none;
}
.cs-vert-txt {
    font-family:    var(--font-sans);
    font-size:      9px;
    font-weight:    300;
    letter-spacing: .26em;
    text-transform: uppercase;
    color:          rgba(255,255,255,.18);
    writing-mode:   vertical-rl;
}
.cs-vert-line {
    width:      .5px;
    height:     60px;
    background: linear-gradient(to bottom, rgba(227,24,55,.45), transparent);
}

/* ── FOOTER STRIP ───────────────────────────────── */
.cs-footer {
    position:        relative;
    z-index:         10;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         20px 64px;
    border-top:      .5px solid rgba(255,255,255,.06);
    flex-wrap:       wrap;
    gap:             16px;
}

.cs-footer-contacts {
    display:     flex;
    align-items: center;
    gap:         24px;
    flex-wrap:   wrap;
}

.cs-footer a {
    font-family:    var(--font-sans);
    font-size:      11px;
    font-weight:    300;
    letter-spacing: .08em;
    color:          rgba(255,255,255,.32);
    text-decoration:none;
    display:        flex;
    align-items:    center;
    gap:            7px;
    transition:     color .25s;
}
.cs-footer a:hover { color: rgba(255,255,255,.72); }
.cs-footer a svg { flex-shrink: 0; opacity: .7; }

.cs-footer-divider {
    width:      .5px;
    height:     16px;
    background: rgba(255,255,255,.12);
}

.cs-copy {
    font-family:    var(--font-sans);
    font-size:      10px;
    font-weight:    300;
    letter-spacing: .14em;
    text-transform: uppercase;
    color:          rgba(255,255,255,.18);
}

/* ── ANIMATIONS ─────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 1100px) {
    .cs-topbar  { padding: 28px 32px 0; }
    .cs-body    { padding: 40px 32px 64px; flex-direction: column; align-items: flex-start; gap: 36px; justify-content: flex-end; }
    .cs-vert    { display: none; }
    .cs-footer  { padding: 18px 32px; }
    .cs-card    { width: 100%; }
    .cs-countdown { justify-content: flex-start; }
}

@media (max-width: 700px) {
    .cs-topbar  { padding: 22px 20px 0; }
    .cs-body    { padding: 32px 20px 48px; gap: 28px; }
    .cs-h1      { font-size: clamp(40px, 10vw, 56px); }
    .cs-sub     { font-size: 14px; }
    .cs-form    { flex-direction: column; }
    .cs-form input[type="email"] {
        border-right:  .5px solid rgba(255,255,255,.18);
        border-bottom: none;
        height:        46px;
    }
    .cs-btn     { width: 100%; justify-content: center; height: 46px; }
    .cs-cd-num  { font-size: 28px; }
    .cs-cd-div  { margin: 0 12px; }
    .cs-footer  { padding: 16px 20px; flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (max-width: 420px) {
    .cs-cd-num  { font-size: 22px; }
    .cs-cd-div  { margin: 0 8px; }
    .cs-cd-lbl  { font-size: 9px; }
}