/* =========================================================
   KUMBR Studio — Contact Page v5
   Aurora hero → Simple form + vertical marquee strip + side
   ========================================================= */

/* --- Header (dark hero = white header) --- */
.header--contact .nav-logo-dark{ display:none; }
.header--contact .nav-logo-white{ display:block; }
.header--contact .menu-btn-label{ color:#fff; }
.header--contact .menu-line{ background:#fff; }

/* =========================================================
   S1: HERO — Aurora canvas background
   ========================================================= */
.ct-hero{
    position:relative;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:var(--dark);
    overflow:hidden;
    padding:var(--header-h) var(--pad) 0;
}

.ct-aurora{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
}

.ct-hero-grain{
    position:absolute;
    inset:0;
    opacity:.03;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size:128px;
    pointer-events:none;
    z-index:1;
}

.ct-hero-content{
    position:relative;
    z-index:2;
    text-align:center;
    max-width:900px;
}

/* Eyebrow */
.ct-hero-eyebrow{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin-bottom:40px;
    opacity:0;
    transform:translateY(12px);
}

.ct-eyebrow-line{
    width:40px;
    height:1px;
    background:var(--gold);
    opacity:.4;
}

.ct-eyebrow-text{
    font-family:var(--font-body);
    font-size:11px;
    font-weight:500;
    letter-spacing:.3em;
    text-transform:uppercase;
    color:var(--gold);
}

/* Headline */
.ct-headline{
    font-family:var(--font);
    font-size:clamp(64px, 10vw, 160px);
    font-weight:700;
    line-height:1;
    letter-spacing:-.05em;
    color:#fff;
    margin:0 0 28px;
}

.ct-headline-line{
    display:block;
    overflow:hidden;
}

.ct-char-wrap{
    display:inline-block;
    transform:translateY(110%);
    opacity:0;
}

.ct-char--italic{
    font-weight:300;
    font-style:italic;
    color:var(--gold);
}

/* Sub */
.ct-hero-sub{
    font-family:var(--font-body);
    font-size:clamp(14px, 1.2vw, 18px);
    font-weight:300;
    line-height:1.7;
    color:rgba(255,255,255,.35);
    margin:0 auto 40px;
    max-width:480px;
    opacity:0;
    transform:translateY(18px);
}

/* Hero clocks */
.ct-hero-clocks{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:32px;
    margin-top:0;
    opacity:0;
    transform:translateY(16px);
}

.ct-clock{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
}

.ct-clock-city{
    font-family:var(--font-body);
    font-size:10px;
    font-weight:500;
    letter-spacing:.25em;
    text-transform:uppercase;
    color:rgba(255,255,255,.3);
}

.ct-clock-time{
    font-family:var(--font);
    font-size:clamp(28px, 3vw, 42px);
    font-weight:300;
    color:rgba(255,255,255,.7);
    font-variant-numeric:tabular-nums;
    letter-spacing:-.02em;
}

/* Clock separator — animated scroll-down line */
.ct-clock-sep{
    width:1px;
    height:56px;
    background:rgba(255,255,255,.08);
    position:relative;
    overflow:hidden;
}

.ct-clock-sep-fill{
    position:absolute;
    top:-100%;
    left:0;
    width:100%;
    height:100%;
    background:var(--gold);
    animation:scrollDown 2.5s ease-in-out infinite;
}

@keyframes scrollDown{
    0%{ top:-100%; }
    50%{ top:100%; }
    100%{ top:100%; }
}

/* =========================================================
   S2: FORM SECTION — Form left + Side right (with marquee)
   ========================================================= */
.ct-form-section{
    display:grid;
    grid-template-columns:1fr 380px;
    min-height:100vh;
}

/* --- Form container --- */
.ct-form-container{
    background:#f5f3ef;
    padding:clamp(60px, 8vh, 100px) clamp(50px, 5vw, 100px) clamp(60px, 8vh, 100px);
    display:flex;
    align-items:center;
}

/* Form */
.ct-form{
    display:flex;
    flex-direction:column;
    gap:22px;
    max-width:580px;
    width:100%;
}

.ct-field{
    opacity:0;
    transform:translateY(20px);
}

/* Two-column row for Company + Role */
.ct-field-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px 28px;
    opacity:0;
    transform:translateY(20px);
}

.ct-field-row .ct-field{
    opacity:1;
    transform:none;
}

.ct-field-label{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-body);
    font-size:11px;
    font-weight:500;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgba(29,29,27,.35);
    margin-bottom:8px;
}

.ct-req{
    font-size:9px;
    font-weight:600;
    letter-spacing:.1em;
    color:var(--gold);
    opacity:.7;
}

.ct-opt{
    font-size:9px;
    font-weight:500;
    letter-spacing:.1em;
    color:rgba(29,29,27,.2);
}

.ct-field-input{
    display:block;
    width:100%;
    font-family:var(--font);
    font-size:clamp(16px, 1.3vw, 20px);
    font-weight:500;
    color:var(--dark);
    background:none;
    border:none;
    outline:none;
    padding:8px 0;
    letter-spacing:-.01em;
}

.ct-field-input::placeholder{
    color:rgba(29,29,27,.12);
}

.ct-field-line{
    height:1px;
    background:rgba(29,29,27,.08);
    position:relative;
    overflow:hidden;
}

.ct-field-line-fill{
    position:absolute;
    bottom:0;
    left:0;
    width:0;
    height:100%;
    background:var(--gold);
    transition:width .6s var(--ease);
}

.ct-field-input:focus ~ .ct-field-line .ct-field-line-fill{
    width:100%;
}

.ct-field-textarea{
    resize:none;
    min-height:90px;
    line-height:1.6;
}

/* Submit row */
.ct-field--submit{
    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
    margin-top:8px;
}

.ct-submit-btn{
    display:inline-flex;
    align-items:center;
    gap:14px;
    font-family:var(--font);
    font-size:16px;
    font-weight:600;
    letter-spacing:.04em;
    color:#fff;
    background:var(--dark);
    border:none;
    padding:18px 40px;
    border-radius:100px;
    cursor:pointer;
    transition:all .4s var(--ease);
    position:relative;
    overflow:hidden;
}

.ct-submit-btn::before{
    content:'';
    position:absolute;
    inset:0;
    background:var(--gold);
    transform:scaleX(0);
    transform-origin:right;
    transition:transform .5s var(--ease);
    border-radius:100px;
}

.ct-submit-btn:hover::before{
    transform:scaleX(1);
    transform-origin:left;
}

.ct-submit-text,
.ct-submit-icon{
    position:relative;
    z-index:1;
}

.ct-submit-icon{
    display:flex;
    transition:transform .3s ease;
}

.ct-submit-btn:hover .ct-submit-icon{
    transform:translate(3px, -3px);
}

.ct-submit-note{
    font-family:var(--font-body);
    font-size:12px;
    font-weight:400;
    color:rgba(29,29,27,.3);
}

/* --- Side info panel (marquee strip + content) --- */
.ct-side-info{
    background:var(--dark);
    display:flex;
    flex-direction:row;
    position:relative;
    overflow:hidden;
}

/* Vertical marquee strip on left edge of side panel */
.ct-vmarquee{
    width:44px;
    flex-shrink:0;
    position:relative;
    overflow:hidden;
    border-right:1px solid rgba(255,255,255,.06);
}

.ct-vmarquee-track{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:24px;
    position:absolute;
    left:50%;
    top:0;
    will-change:transform;
}

.ct-vmarquee-item{
    font-family:var(--font);
    font-size:12px;
    font-weight:500;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:rgba(255,255,255,.1);
    white-space:nowrap;
    writing-mode:vertical-rl;
    text-orientation:mixed;
}

.ct-vmarquee-dot{
    width:4px;
    height:4px;
    border-radius:50%;
    background:var(--gold);
    opacity:.2;
    flex-shrink:0;
}

.ct-side-content{
    flex:1;
    padding:clamp(100px, 14vh, 180px) clamp(28px, 3vw, 40px) clamp(40px, 5vh, 60px);
    display:flex;
    flex-direction:column;
    gap:clamp(20px, 2.5vh, 32px);
    position:relative;
    z-index:1;
}

.ct-side-block{
    opacity:0;
    transform:translateY(15px);
}

.ct-side-label{
    display:block;
    font-family:var(--font-body);
    font-size:10px;
    font-weight:500;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:rgba(255,255,255,.25);
    margin-bottom:8px;
}

.ct-side-value{
    font-family:var(--font);
    font-size:clamp(14px, 1.1vw, 18px);
    font-weight:500;
    color:rgba(255,255,255,.7);
    line-height:1.6;
    margin:0;
}

.ct-side-link{
    display:inline-block;
    text-decoration:none;
    transition:color .3s ease;
}

.ct-side-link:hover{
    color:var(--gold);
}

.ct-side-divider{
    width:30px;
    height:1px;
    background:rgba(255,255,255,.08);
}

.ct-side-socials{
    display:flex;
    gap:10px;
}

.ct-social-badge{
    font-family:var(--font-body);
    font-size:12px;
    font-weight:500;
    letter-spacing:.04em;
    color:rgba(255,255,255,.4);
    text-decoration:none;
    width:38px;
    height:38px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all .3s ease;
}

.ct-social-badge:hover{
    background:var(--gold);
    border-color:var(--gold);
    color:#fff;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* --- Large tablets / small laptops --- */
@media(max-width:1024px){
    .ct-form-section{
        grid-template-columns:1fr 300px;
    }
    .ct-form-container{
        padding:60px 40px;
    }
    .ct-side-content{
        padding:60px 24px 40px;
        gap:20px;
    }
    .ct-vmarquee{ width:36px; }
    .ct-hero-sub{ margin-bottom:32px; }
    .ct-hero-clocks{ gap:24px; }
    .ct-clock-sep{ height:44px; }
}

/* --- Tablets / landscape phones --- */
@media(max-width:768px){
    /* Hero — switch from flex-center to padding-based positioning */
    .ct-hero{
        min-height:100svh;
        min-height:100vh;
        padding:0 24px 0;
        padding-top:22vh;
        justify-content:flex-start;
    }
    .ct-headline{
        font-size:clamp(48px, 13vw, 80px);
        margin-bottom:20px;
    }
    .ct-hero-eyebrow{ margin-bottom:28px; gap:12px; }
    .ct-eyebrow-line{ width:28px; }
    .ct-eyebrow-text{ font-size:10px; letter-spacing:.25em; }
    .ct-hero-sub{
        font-size:14px;
        margin-bottom:32px;
        max-width:360px;
    }
    .ct-hero-sub br{ display:none; }
    .ct-hero-clocks{ gap:24px; }
    .ct-clock-time{ font-size:28px; }
    .ct-clock-sep{ height:40px; }
    .ct-clock-city{ font-size:9px; }

    /* Form section — single column */
    .ct-form-section{
        grid-template-columns:1fr;
        min-height:auto;
    }
    .ct-form-container{
        padding:48px 24px;
        align-items:flex-start;
    }
    .ct-form{
        max-width:100%;
        gap:20px;
    }
    .ct-field-row{
        grid-template-columns:1fr;
        gap:20px;
    }
    .ct-field-input{
        font-size:16px;
        padding:8px 0;
    }
    .ct-field-textarea{ min-height:80px; }
    .ct-submit-btn{
        width:100%;
        justify-content:center;
        padding:18px 36px;
        font-size:15px;
    }
    .ct-field--submit{
        flex-direction:column;
        align-items:stretch;
        gap:12px;
    }
    .ct-submit-note{ text-align:center; }

    /* Side panel — full width, stacked below form */
    .ct-side-info{
        flex-direction:row;
    }
    .ct-vmarquee{ display:none; }
    .ct-side-content{
        flex:1;
        padding:40px 24px;
        gap:20px;
    }
    .ct-side-value{ font-size:15px; }
    .ct-social-badge{ width:36px; height:36px; font-size:11px; }
}

/* --- Small phones --- */
@media(max-width:480px){
    .ct-hero{
        padding:0 20px 0;
        padding-top:20vh;
    }
    .ct-headline{
        font-size:clamp(40px, 12vw, 56px);
        margin-bottom:16px;
    }
    .ct-hero-eyebrow{ margin-bottom:24px; }
    .ct-hero-sub{
        font-size:13px;
        margin-bottom:28px;
        max-width:300px;
    }
    .ct-hero-sub br{ display:none; }
    .ct-hero-clocks{ gap:20px; }
    .ct-clock-time{ font-size:24px; }
    .ct-clock-sep{ height:32px; }

    .ct-form-container{ padding:40px 20px; }
    .ct-form{ gap:18px; }
    .ct-field-label{ font-size:10px; gap:6px; margin-bottom:6px; }
    .ct-req, .ct-opt{ font-size:8px; }
    .ct-field-input{ font-size:15px; padding:6px 0; }
    .ct-submit-btn{ padding:16px 32px; font-size:14px; }

    .ct-side-content{ padding:32px 20px; gap:18px; }
    .ct-side-label{ font-size:9px; }
    .ct-side-value{ font-size:14px; }
}

/* --- Very small phones (iPhone SE, etc.) --- */
@media(max-width:375px){
    .ct-headline{ font-size:38px; }
    .ct-hero-sub{ font-size:12px; }
    .ct-clock-time{ font-size:22px; }
    .ct-form-container{ padding:36px 16px; }
    .ct-form{ gap:16px; }
    .ct-field-input{ font-size:14px; }
    .ct-submit-btn{ padding:15px 28px; font-size:13px; }
    .ct-side-content{ padding:28px 16px; }
}

/* --- Safe area for notched devices --- */
@supports(padding-bottom: env(safe-area-inset-bottom)){
    .ct-hero{
        padding-bottom:env(safe-area-inset-bottom);
    }
}

/* --- Touch devices: no hover effects --- */
@media(hover:none){
    .ct-submit-btn::before{ display:none; }
    .ct-social-badge:active{
        background:var(--gold);
        border-color:var(--gold);
        color:#fff;
    }
}