/* ============================================
   GENERAL INQUIRIES / CONTACT PAGE
   4 sections: White hero → Dark HQ+map → Gray form sheet → White links
   No warm CTA — the form IS the CTA
   ============================================ */

/* ---- Shared typography ---- */
.ct-label { display: block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-primary); margin-bottom: var(--space-4); }
.ct-heading { font-family: var(--font-heading); font-size: var(--text-section); font-weight: var(--font-semibold); line-height: var(--leading-tight); letter-spacing: -0.6px; color: var(--color-text-primary); margin: 0 0 var(--space-6); }
.ct-section-title { font-family: var(--font-heading); font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: var(--font-semibold); line-height: var(--leading-tight); letter-spacing: -0.6px; color: var(--color-text-primary); margin: 0 0 var(--space-5); }


/* ============================================
   1. HERO — Centered welcome + 4 category cards
   ============================================ */
.ct-hero { position: relative; background: #FFFFFF; overflow: hidden; }

.ct-hero__grid-bg {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(50, 48, 47, 0.18) 1.5px, transparent 2px);
    background-size: 32px 32px;
    pointer-events: none;
    /* Fade the dots near the horizontal center while keeping the outer
       dots at full strength — center 20% strength, edges 100%. */
    -webkit-mask-image: radial-gradient(ellipse 60% 80% at center,
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0.5) 35%,
        rgba(0, 0, 0, 1) 70%);
    mask-image: radial-gradient(ellipse 60% 80% at center,
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0.5) 35%,
        rgba(0, 0, 0, 1) 70%);
}
.ct-hero__grid-bg::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 200px; background: linear-gradient(to bottom, #FFFFFF, transparent); z-index: 1; }

.ct-hero__inner {
    position: relative; z-index: 2; max-width: 1100px; margin: 0 auto;
    padding: 200px var(--container-padding) clamp(60px, 8vw, 100px);
    text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-10);
}

.ct-hero__ghost {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%);
    font-family: var(--font-heading); font-size: clamp(8rem, 22vw, 20rem); font-weight: 800;
    color: rgba(50,48,47,0.02); line-height: 0.85; letter-spacing: -0.04em;
    white-space: nowrap; pointer-events: none; user-select: none;
}

.ct-hero__content { position: relative; }

.ct-hero__eyebrow { display: block; font-family: var(--font-body); font-size: 0.7rem; font-weight: var(--font-semibold); letter-spacing: 0.3em; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: var(--space-6); }

.ct-hero__title { display: flex; flex-direction: column; align-items: center; margin: 0 0 var(--space-6); }
.ct-hero__line--display { font-family: var(--font-display); font-size: clamp(3.5rem, 8vw, 7rem); font-weight: 600; line-height: 1; letter-spacing: -3px; color: var(--color-text-primary); }
.ct-hero__line--script { font-family: 'Dancing Script', cursive; font-size: clamp(3rem, 7vw, 6rem); font-weight: 700; line-height: 1; color: var(--color-text-primary); position: relative; padding-bottom: 0.2em; }
.ct-hero__line--script::after { content: ''; position: absolute; left: 15%; bottom: 0; width: 70%; height: 0.18em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'%3E%3Cpath d='M 4,8 C 50,3 130,2 200,6 C 270,10 350,8 396,5 C 350,11 270,15 200,12 C 130,9 50,12 4,13 Z' fill='%23FF1A0F' opacity='0.92'/%3E%3C/svg%3E"); background-size: 100% 100%; background-repeat: no-repeat; }

.ct-hero__lead { font-family: var(--font-body); font-size: var(--text-lg); color: var(--color-text-secondary); line-height: var(--leading-relaxed); max-width: 560px; margin: 0; }

/* 4 category cards — horizontal row */
.ct-hero__categories { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); width: 100%; }

/* Sliding-pill aesthetic (matches .co-about__indicator + map popup + project cards + step pills):
   white bg, soft warm border, 18px radius, soft elevated shadow,
   house motion curve on hover lift. */
.ct-hero__cat {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
    background: var(--color-pure-white);
    border: 0.5px solid #d8d8d4;
    border-radius: 18px;
    box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.22),
                0 2px 6px rgba(0, 0, 0, 0.04);
    text-decoration: none; text-align: center;
    transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1),
                box-shadow 520ms cubic-bezier(0.4, 0, 0.1, 1);
}
.ct-hero__cat:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.28),
                0 4px 10px rgba(0, 0, 0, 0.05);
}

.ct-hero__cat i { font-size: 1.8rem; color: var(--color-text-primary); opacity: 0.4; }
.ct-hero__cat:hover i { opacity: 0.8; }

.ct-hero__cat-title { font-family: var(--font-heading); font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-text-primary); letter-spacing: -0.4px; }
.ct-hero__cat-desc { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-text-secondary); line-height: var(--leading-normal); }

@media (max-width: 768px) { .ct-hero__categories { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ct-hero__categories { grid-template-columns: 1fr; } }


/* ============================================
   2. HQ — Dark blueprint card + map
   ============================================ */
.ct-hq { background: #1a1814; padding: var(--section-padding) 0; position: relative; overflow: hidden; }

.ct-hq::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; }

.ct-hq__inner { position: relative; z-index: 1; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-8); align-items: stretch; }

/* Dark info card */
.ct-hq__card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }

.ct-hq__card-bar { display: flex; justify-content: space-between; padding: var(--space-3) var(--space-6); border-bottom: 1px solid rgba(255,255,255,0.06); font-family: 'Courier New', monospace; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.2); }

.ct-hq__card-body { padding: var(--space-8) var(--space-6); flex: 1; display: flex; flex-direction: column; gap: var(--space-8); }

.ct-hq__name { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--font-semibold); color: #FFFFFF; letter-spacing: -0.6px; margin: 0; }

.ct-hq__details { display: flex; flex-direction: column; gap: var(--space-5); }

.ct-hq__detail { display: flex; align-items: flex-start; gap: var(--space-4); }
.ct-hq__detail i { font-size: 1.2rem; color: rgba(255,255,255,0.3); margin-top: 2px; flex-shrink: 0; }
.ct-hq__detail p, .ct-hq__detail a { font-family: var(--font-body); font-size: var(--text-base); color: rgba(255,255,255,0.7); line-height: var(--leading-normal); margin: 0; text-decoration: none; }
.ct-hq__detail a:hover { color: #FFFFFF; }
.ct-hq__detail-sub { font-size: var(--text-sm); color: rgba(255,255,255,0.35); }

/* Map */
.ct-hq__map-wrap { border-radius: var(--radius-lg); overflow: hidden; min-height: 400px; position: relative; z-index: 0; }
.ct-hq__map { width: 100%; height: 100%; min-height: 400px; }
.ct-hq__map .leaflet-control-attribution { display: none; }

@media (max-width: 900px) { .ct-hq__inner { grid-template-columns: 1fr; } .ct-hq__map-wrap { min-height: 300px; } }


/* ============================================
   3. FORM — Blueprint drawing sheet
   ============================================ */
.ct-form { background: #F5F5F5; padding: var(--section-padding) 0; }

.ct-form__inner { max-width: 900px; margin: 0 auto; padding: 0 var(--container-padding); }

/* Sliding-pill aesthetic (matches the rest of the family).
   Form container — no hover lift since it's not interactive. */
.ct-form__sheet {
    background: var(--color-pure-white);
    border: 0.5px solid #d8d8d4;
    border-radius: 18px;
    box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.22),
                0 2px 6px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
}

.ct-form__sheet-bar { display: flex; justify-content: space-between; padding: var(--space-3) var(--space-6); border-bottom: 0.5px solid #c8c8c8; font-family: 'Courier New', monospace; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #aaa; }

.ct-form__sheet-body { padding: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 4rem); position: relative; z-index: 2; }

.ct-form__header { margin-bottom: var(--space-8); }
.ct-form__header p { font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text-secondary); line-height: var(--leading-normal); margin: 0; }
.ct-form__header a { color: var(--color-text-primary); font-weight: var(--font-semibold); text-decoration: underline; text-underline-offset: 3px; }

/* Form fields */
.ct-form__form { display: flex; flex-direction: column; gap: var(--space-5); }

.ct-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

.ct-form__field { display: flex; flex-direction: column; gap: var(--space-2); }
.ct-form__field--full { grid-column: 1 / -1; }

.ct-form__label { font-family: var(--font-body); font-size: 0.7rem; font-weight: var(--font-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary); }

.ct-form__input {
    width: 100%; padding: 12px 16px; font-family: var(--font-body); font-size: var(--text-base);
    color: var(--color-text-primary); background: #FFFFFF; border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md); outline: none;
    transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.ct-form__input:focus { border-color: var(--color-text-primary); box-shadow: 0 0 0 3px rgba(50,48,47,0.06); }

.ct-form__select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; cursor: pointer; }

.ct-form__textarea { resize: vertical; min-height: 120px; }

.ct-form__submit {
    display: inline-flex; align-items: center; gap: var(--space-3); align-self: flex-start;
    padding: 14px 36px; font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--font-semibold);
    color: var(--color-pure-white); background: var(--color-text-primary); border: none;
    border-radius: var(--radius-pill); cursor: pointer;
    transition: background var(--duration-base) var(--ease-out), gap var(--duration-base) var(--ease-out);
}
.ct-form__submit:hover { background: var(--color-navy); gap: var(--space-4); }
.ct-form__submit i { font-size: 1rem; }

/* Success state is now the shared injected .form-success card — see form-handler.css */

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

    /* Mobile: form goes near edge-to-edge with tight padding
       so inputs get the most horizontal space possible. */
    .ct-form__inner { padding: 0 var(--space-3); }
    .ct-form__sheet-body { padding: var(--space-5) var(--space-3); }
    .ct-form__sheet-bar { padding: var(--space-2) var(--space-3); }
}


/* ============================================
   4. QUICK LINKS — Three pathway cards
   White bg, blueprint-sheet cards
   ============================================ */
.ct-links { background: #FFFFFF; padding: var(--section-padding) 0; }

.ct-links__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); }

.ct-links__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }

/* Sliding-pill aesthetic (matches map popup, project cards, contact hero buttons,
   tracks cards, projects carousel, related-projects grid):
   white bg, soft warm border, 18px radius, soft elevated shadow,
   house motion curve on hover lift. */
.ct-links__card {
    background: var(--color-pure-white);
    border: 0.5px solid #d8d8d4;
    border-radius: 18px;
    box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.22),
                0 2px 6px rgba(0, 0, 0, 0.04);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1),
                box-shadow 520ms cubic-bezier(0.4, 0, 0.1, 1);
}
.ct-links__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.28),
                0 4px 10px rgba(0, 0, 0, 0.05);
}

.ct-links__card-bar { display: flex; justify-content: space-between; padding: var(--space-2) var(--space-5); border-bottom: 0.5px solid #c8c8c8; font-family: 'Courier New', monospace; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #aaa; }

.ct-links__card-body { padding: var(--space-6) var(--space-5); }

.ct-links__card-icon { font-size: 1.6rem; color: var(--color-text-primary); opacity: 0.25; display: block; margin-bottom: var(--space-4); }

.ct-links__card-title { font-family: var(--font-heading); font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-text-primary); letter-spacing: -0.4px; margin: 0 0 var(--space-3); }

.ct-links__card-desc { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal); margin: 0; }

@media (max-width: 768px) { .ct-links__grid { grid-template-columns: 1fr; } }