/* ============================================================
   CONTACT PAGE — contact.css
   Page-specific styles. Uses global CSS variables.
   All new classes prefixed .ct-
   ============================================================ */

/* ── Prism watermark ──────────────────────────────────────── */
.ct-prism-watermark {
    position:         absolute;
    bottom:           0;
    left:             50%;
    transform:        translateX(-50%);
    width:            60vw;
    height:           60vw;
    opacity:          0.03;
    z-index:          0;
    pointer-events:   none;
    background-image: linear-gradient(135deg, var(--clr-green) 0%, transparent 100%);
    clip-path:        polygon(50% 0%, 0% 100%, 100% 100%);
}

/* ── Page wrapper ─────────────────────────────────────────── */
.ct-page {
    position:  relative;
    max-width: 1280px;
    margin:    0 auto;
    padding:   calc(var(--sp-16) + 64px) var(--sp-8) var(--sp-20);
}

/* ── Two-column grid ──────────────────────────────────────── */
.ct-grid {
    display:   grid;
    gap:       var(--sp-12);
    grid-template-columns: 1fr;
    align-items: start;
    position:  relative;
    z-index:   1;
}

@media (min-width: 1024px) {
    .ct-grid {
        grid-template-columns: 5fr 7fr;
        gap: var(--sp-16);
    }
}

/* ── Left column ──────────────────────────────────────────── */
.ct-left {
    display:        flex;
    flex-direction: column;
    gap:            var(--sp-12);
}

.ct-h1 {
    font-family:    var(--font-display);
    font-size:      clamp(3rem, 7vw, 6rem);
    font-weight:    700;
    letter-spacing: -0.04em;
    line-height:    0.95;
    color:          #fff;
    margin-top:     var(--sp-5);
    margin-bottom:  var(--sp-6);
}

.ct-h1 em {
    font-style: italic;
    color:      var(--clr-green);
}

.ct-hero-sub {
    font-family: var(--font-body);
    font-size:   1.0625rem;
    color:       rgba(255,255,255,0.42);
    line-height: 1.7;
    font-weight: 300;
    max-width:   420px;
}

/* ── "Other ways to reach us" ─────────────────────────────── */
.ct-reach {
    padding-top: var(--sp-8);
    display:     flex;
    flex-direction: column;
    gap:         var(--sp-6);
}

.ct-reach-label {
    font-family:    var(--font-display);
    font-size:      0.625rem;
    font-weight:    700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color:          var(--clr-green);
    margin-bottom:  var(--sp-2);
}

.ct-reach-item {
    display:         flex;
    align-items:     center;
    gap:             var(--sp-4);
    text-decoration: none;
    transition:      transform 0.3s var(--ease-out);
}

a.ct-reach-item:hover { transform: translateX(6px); }

.ct-reach-icon {
    flex-shrink:     0;
    width:           52px;
    height:          52px;
    border-radius:   50%;
    background:      #131313;
    border:          1px solid rgba(202,255,111,0.12);
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      border-color 0.3s;
}

a.ct-reach-item:hover .ct-reach-icon { border-color: rgba(202,255,111,0.35); }

.ct-reach-icon svg {
    width:  20px;
    height: 20px;
    stroke: var(--clr-green);
}

.ct-reach-detail-label {
    font-family:    var(--font-display);
    font-size:      0.5625rem;
    font-weight:    600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.3);
    display:        block;
    margin-bottom:  var(--sp-1);
}

.ct-reach-detail-value {
    font-family:    var(--font-display);
    font-size:      1rem;
    font-weight:    600;
    color:          #fff;
    line-height:    1.3;
}

a.ct-reach-item .ct-reach-detail-value { color: #fff; }

/* Social links row */
.ct-social-links {
    display: flex;
    gap:     var(--sp-4);
    margin-top: var(--sp-1);
}

.ct-social-links a {
    font-family:    var(--font-display);
    font-size:      0.9375rem;
    font-weight:    600;
    color:          rgba(255,255,255,0.55);
    text-decoration: none;
    transition:     color 0.2s;
}

.ct-social-links a:hover { color: var(--clr-green); }

.ct-social-sep {
    color:       rgba(255,255,255,0.2);
    font-weight: 300;
    line-height: 1.5;
}

/* ── Right column — form card ─────────────────────────────── */
.ct-form-card {
    background:    #0a0a0a;
    border:        1px solid rgba(255,255,255,0.06);
    border-radius: var(--r-xl);
    padding:       var(--sp-10) var(--sp-10);
    position:      relative;
    overflow:      hidden;
}

/* Soft lime glow top-right */
.ct-form-card::before {
    content:       '';
    position:      absolute;
    top:           -80px;
    right:         -80px;
    width:         320px;
    height:        320px;
    background:    radial-gradient(circle, rgba(202,255,111,0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* ── Form field groups ────────────────────────────────────── */
.ct-form {
    display:        flex;
    flex-direction: column;
    gap:            var(--sp-8);
    position:       relative;
    z-index:        1;
}

.ct-row {
    display: grid;
    gap:     var(--sp-6);
    grid-template-columns: 1fr;
}

@media (min-width: 600px) {
    .ct-row { grid-template-columns: 1fr 1fr; }
}

.ct-field { display: flex; flex-direction: column; gap: var(--sp-2); }

.ct-label {
    font-family:    var(--font-display);
    font-size:      0.5625rem;
    font-weight:    600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.35);
    transition:     color 0.2s;
}

.ct-field:focus-within .ct-label { color: var(--clr-green); }

.ct-label-req { color: var(--clr-green); margin-left: 2px; }
.ct-label-opt { color: rgba(255,255,255,0.2); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 0.625rem; }

/* Bottom-border-only inputs */
.ct-input,
.ct-select,
.ct-textarea {
    width:         100%;
    background:    transparent;
    border:        none;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    border-radius: 0;
    padding:       var(--sp-3) 0;
    font-family:   var(--font-body);
    font-size:     0.9375rem;
    color:         #fff;
    outline:       none;
    transition:    border-color 0.25s;
    appearance:    none;
    -webkit-appearance: none;
}

.ct-input::placeholder,
.ct-textarea::placeholder { color: rgba(255,255,255,0.2); }

.ct-input:focus,
.ct-select:focus,
.ct-textarea:focus { border-bottom-color: var(--clr-green); }

.ct-select {
    /* Hidden — replaced by .ct-custom-select */
    display: none !important;
}

/* ── Custom select ─────────────────────────────────────────── */
.ct-custom-select {
    position:   relative;
    width:      100%;
    user-select: none;
}

.ct-cs-trigger {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--sp-3);
    width:           100%;
    background:      transparent;
    border:          none;
    border-bottom:   1px solid rgba(255,255,255,0.12);
    border-radius:   0;
    padding:         var(--sp-3) 0;
    font-family:     var(--font-body);
    font-size:       0.9375rem;
    color:           #fff;
    cursor:          pointer;
    outline:         none;
    text-align:      left;
    transition:      border-color 0.25s;
}

.ct-cs-trigger[aria-expanded="true"],
.ct-cs-trigger:focus { border-bottom-color: var(--clr-green); }

.ct-cs-trigger-text { flex: 1; line-height: 1.4; }
.ct-cs-trigger-text.is-placeholder { color: rgba(255,255,255,0.2); }

.ct-cs-chevron {
    flex-shrink: 0;
    width:       12px;
    height:      12px;
    stroke:      rgba(255,255,255,0.3);
    transition:  transform 0.25s var(--ease-out), stroke 0.25s;
}

.ct-cs-trigger[aria-expanded="true"] .ct-cs-chevron {
    transform: rotate(180deg);
    stroke:    var(--clr-green);
}

/* Dropdown panel */
.ct-cs-panel {
    position:      absolute;
    top:           calc(100% + 4px);
    left:          0;
    right:         0;
    background:    #111311;
    border:        1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    overflow:      hidden;
    z-index:       100;
    opacity:       0;
    transform:     translateY(-6px);
    pointer-events: none;
    transition:    opacity 0.2s, transform 0.2s var(--ease-out);
    max-height:    260px;
    overflow-y:    auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(202,255,111,0.2) transparent;
}

.ct-cs-panel::-webkit-scrollbar       { width: 4px; }
.ct-cs-panel::-webkit-scrollbar-track { background: transparent; }
.ct-cs-panel::-webkit-scrollbar-thumb { background: rgba(202,255,111,0.2); border-radius: 2px; }

.ct-cs-panel.is-open {
    opacity:        1;
    transform:      translateY(0);
    pointer-events: auto;
}

/* Optgroup label */
.ct-cs-group-label {
    display:        block;
    padding:        var(--sp-2) var(--sp-4);
    font-family:    var(--font-display);
    font-size:      0.5rem;
    font-weight:    700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          rgba(202,255,111,0.5);
    background:     rgba(255,255,255,0.02);
    margin-top:     2px;
}

/* Options */
.ct-cs-option {
    display:     block;
    width:       100%;
    padding:     var(--sp-3) var(--sp-4);
    font-family: var(--font-body);
    font-size:   0.9rem;
    color:       rgba(255,255,255,0.75);
    background:  transparent;
    border:      none;
    text-align:  left;
    cursor:      pointer;
    transition:  background 0.15s, color 0.15s;
    line-height: 1.4;
}

.ct-cs-option:hover,
.ct-cs-option:focus { background: rgba(255,255,255,0.05); color: #fff; outline: none; }

.ct-cs-option.is-selected {
    color:      var(--clr-green);
    background: rgba(202,255,111,0.06);
}

.ct-cs-option[disabled] {
    color:  rgba(255,255,255,0.2);
    cursor: default;
}

.ct-textarea { resize: none; line-height: 1.65; }

/* ── Submit row ───────────────────────────────────────────── */
.ct-submit-row {
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    padding-top:     var(--sp-4);
}

.ct-submit-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--sp-3);
    background:      var(--clr-green);
    color:           #0e0e0e;
    font-family:     var(--font-display);
    font-size:       1rem;
    font-weight:     700;
    letter-spacing:  -0.01em;
    padding:         1rem 2.5rem;
    border:          none;
    border-radius:   var(--r-pill);
    cursor:          pointer;
    transition:      opacity 0.2s, box-shadow 0.2s, transform 0.15s;
    box-shadow:      0 8px 32px -4px rgba(202,255,111,0.3);
}

.ct-submit-btn:hover  { opacity: 0.88; box-shadow: 0 12px 40px -4px rgba(202,255,111,0.38); }
.ct-submit-btn:active { transform: scale(0.97); }

.ct-submit-btn svg {
    width:  18px;
    height: 18px;
    stroke: #0e0e0e;
    transition: transform 0.3s var(--ease-out);
}

.ct-submit-btn:hover svg { transform: translateX(3px); }

/* ── Flash messages ───────────────────────────────────────── */
.ct-flash {
    border-radius: var(--r-lg);
    padding:       var(--sp-4) var(--sp-5);
    font-family:   var(--font-body);
    font-size:     0.9375rem;
    line-height:   1.5;
    margin-bottom: var(--sp-6);
}

.ct-flash--success {
    background: rgba(202,255,111,0.08);
    border:     1px solid rgba(202,255,111,0.25);
    color:      var(--clr-green);
}

.ct-flash--error {
    background: rgba(255,80,80,0.08);
    border:     1px solid rgba(255,80,80,0.25);
    color:      #ff6b6b;
}

/* ── Bottom pillars ───────────────────────────────────────── */
.ct-pillars {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var(--sp-6);
    margin-top:            calc(var(--sp-20) * 2);
    position:              relative;
    z-index:               1;
}

@media (min-width: 768px) {
    .ct-pillars { grid-template-columns: repeat(3, 1fr); }
}

.ct-pillar {
    background:    #111311;
    border:        1px solid rgba(255,255,255,0.06);
    border-radius: var(--r-xl);
    padding:       var(--sp-8);
    transition:    background 0.3s, border-color 0.3s;
}

.ct-pillar:hover {
    background:   #171917;
    border-color: rgba(255,255,255,0.1);
}

.ct-pillar-num {
    font-family:    var(--font-display);
    font-size:      2.5rem;
    font-weight:    700;
    color:          var(--clr-green);
    letter-spacing: -0.03em;
    line-height:    1;
    margin-bottom:  var(--sp-4);
    display:        block;
}

.ct-pillar-title {
    font-family:    var(--font-display);
    font-size:      1.125rem;
    font-weight:    700;
    color:          #fff;
    letter-spacing: -0.01em;
    margin-bottom:  var(--sp-3);
}

.ct-pillar-body {
    font-family: var(--font-body);
    font-size:   0.875rem;
    color:       rgba(255,255,255,0.4);
    line-height: 1.65;
    font-weight: 300;
}

/* ── Mobile tweaks ────────────────────────────────────────── */
@media (max-width: 599px) {
    .ct-page      { padding-left: var(--sp-5); padding-right: var(--sp-5); }
    .ct-form-card { padding: var(--sp-6) var(--sp-5); }
    .ct-h1        { font-size: clamp(2.5rem, 10vw, 3.5rem); }
}