/* =========================================================================
   KAAYA GLOW — CONTACT PAGE "GET IN TOUCH" SECTION, V2 ("CF" DESIGN SYSTEM)
   A self-contained, fully namespaced layer for contact.php's Get In Touch
   section only. Reuses the sitewide tokens already defined in
   kaaya-editorial.css (--kaaya-*, --kg-*, .kg-container, .kg-eyebrow) for
   brand consistency, but every new component class below is namespaced
   "cf-" — nothing here touches or overrides the old .kg-contact* rules,
   which simply go unused once this section's markup is replaced.
   ========================================================================= */

.cf-section {
    position: relative;
    background: var(--kaaya-ivory);
    padding: 132px 0;
    overflow: hidden;
}

/* ================= DECORATIVE BACKGROUND ================= */
.cf-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cf-leaf { position: absolute; animation: cfLeafFloat 9s ease-in-out infinite; }
.cf-leaf svg { display: block; }
.cf-leaf--tl { top: -64px; left: -70px; width: 230px; }
.cf-leaf--tl .cf-leaf-inner { display: block; transform: rotate(-10deg); }
.cf-leaf--br { bottom: -84px; right: -60px; width: 300px; animation-delay: -4.5s; }
.cf-leaf--br .cf-leaf-inner { display: block; transform: rotate(164deg); }
@keyframes cfLeafFloat {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(8px, -12px); }
}
.cf-dots {
    position: absolute;
    bottom: 46px;
    right: 64px;
    width: 120px;
    height: 76px;
    background-image: radial-gradient(var(--kaaya-sage) 1.6px, transparent 1.6px);
    background-size: 16px 16px;
    opacity: 0.4;
}
@media (max-width: 768px) {
    .cf-leaf--tl { width: 150px; top: -40px; left: -50px; }
    .cf-leaf--br { width: 190px; bottom: -50px; right: -40px; }
    .cf-dots { display: none; }
}

.cf-container { position: relative; z-index: 1; }

.cf-grid {
    display: grid;
    grid-template-columns: 0.85fr 1fr;
    gap: 80px;
    align-items: start;
}

/* ================= REVEAL-ON-SCROLL ================= */
.cf-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.85s var(--kg-ease), transform 0.85s var(--kg-ease);
    transition-delay: calc(var(--i, 0) * 90ms);
}
.cf-reveal.is-in { opacity: 1; transform: none; }
.cf-underline.cf-reveal {
    opacity: 1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.8s var(--kg-ease);
}
.cf-underline.cf-reveal.is-in { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
    .cf-reveal, .cf-leaf, .cf-card-badge { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
}

/* ================= LEFT COLUMN: INFO ================= */
.cf-heading {
    font-family: var(--kg-heading-font);
    font-weight: 600;
    text-transform: uppercase;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.14;
    color: var(--kaaya-black);
    margin: 14px 0 22px;
}
.cf-heading-accent { display: block; color: var(--kaaya-olive); }

.cf-underline { width: 58px; height: 3px; background: var(--kaaya-gold); border-radius: 2px; margin-bottom: 28px; }

.cf-lede { font-family: var(--kg-body-font); font-size: 16.5px; line-height: 1.75; color: var(--kaaya-charcoal); margin: 0 0 40px; max-width: 460px; }

.cf-details { list-style: none; margin: 0 0 34px; padding-top: 22px; border-top: 1px solid var(--kaaya-beige); }
.cf-details li {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid var(--kaaya-beige);
}
.cf-detail-icon {
    flex-shrink: 0;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--kaaya-beige);
    color: var(--kaaya-olive);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.4s var(--kg-ease), color 0.4s var(--kg-ease), transform 0.4s var(--kg-ease);
}
.cf-detail-icon svg { width: 19px; height: 19px; }
.cf-details li:hover .cf-detail-icon { background: var(--kaaya-black); color: var(--kaaya-gold); transform: rotate(-8deg) scale(1.08); }
.cf-detail-label { font-family: var(--kg-body-font); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kaaya-olive); margin-bottom: 4px; display: block; }
.cf-detail-value, .cf-detail-value a { font-family: var(--kg-body-font); font-size: 15px; line-height: 1.6; color: var(--kaaya-charcoal); text-decoration: none; }
.cf-detail-value a:hover { color: var(--kaaya-olive); }

.cf-social { display: flex; gap: 12px; }
.cf-social a {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid var(--kaaya-beige);
    display: flex; align-items: center; justify-content: center;
    color: var(--kaaya-black);
    transition: background 0.4s var(--kg-ease), border-color 0.4s var(--kg-ease), color 0.4s var(--kg-ease), transform 0.4s var(--kg-ease);
}
.cf-social svg { width: 18px; height: 18px; }
.cf-social a:hover { background: var(--kaaya-black); border-color: var(--kaaya-black); color: var(--kaaya-white); transform: translateY(-4px) rotate(-6deg); }

/* ================= RIGHT COLUMN: FORM CARD ================= */
.cf-card-wrap { position: relative; }
.cf-card {
    position: relative;
    background: var(--kaaya-white);
    border-radius: 0;
    padding: 48px 44px;
    box-shadow: 0 50px 90px -36px rgba(5, 31, 32, 0.28);
}
.cf-card-badge {
    position: absolute;
    top: -24px;
    right: 34px;
    width: 62px; height: 62px;
    border-radius: 50%;
    background: var(--kaaya-olive);
    color: var(--kaaya-white);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 18px 32px -12px rgba(35, 83, 71, 0.55);
    animation: cfBadgeBob 4.5s ease-in-out infinite;
}
.cf-card-badge svg { width: 23px; height: 23px; }
@keyframes cfBadgeBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.cf-form { display: flex; flex-direction: column; gap: 22px; }
.cf-field { display: flex; flex-direction: column; gap: 8px; }
.cf-field label {
    font-family: var(--kg-body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kaaya-olive);
    transition: color 0.3s ease;
}
.cf-field:focus-within label { color: var(--kaaya-gold); }
.cf-field input,
.cf-field textarea {
    font-family: var(--kg-body-font);
    font-size: 15px;
    color: var(--kaaya-black);
    background: var(--kaaya-ivory);
    border: 1.5px solid var(--kaaya-beige);
    border-radius: 12px;
    padding: 15px 18px;
    resize: vertical;
    transition: border-color 0.35s var(--kg-ease), box-shadow 0.35s var(--kg-ease), background 0.35s var(--kg-ease);
}
.cf-field input::placeholder, .cf-field textarea::placeholder { color: var(--kaaya-sage); opacity: 0.75; }
.cf-field input:focus,
.cf-field textarea:focus {
    outline: none;
    border-color: var(--kaaya-gold);
    background: var(--kaaya-white);
    box-shadow: 0 0 0 4px rgba(142, 182, 155, 0.22);
}

.cf-submit {
    margin-top: 8px;
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 17px 22px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    background: var(--kaaya-black);
    color: var(--kaaya-white);
    font-family: var(--kg-body-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    transition: background 0.4s ease, transform 0.3s ease, box-shadow 0.4s ease;
}
.cf-submit::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 40%, rgba(142, 182, 155, 0.55) 50%, transparent 60%);
    transform: translateX(-120%);
    transition: transform 0.7s var(--kg-ease);
}
.cf-submit:hover::before { transform: translateX(120%); }
.cf-submit:hover { background: var(--kaaya-olive); transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(35, 83, 71, 0.5); }
.cf-submit svg { width: 15px; height: 15px; transition: transform 0.4s ease; position: relative; z-index: 1; }
.cf-submit:hover svg { transform: translate(3px, -3px); }
.cf-submit-label { position: relative; z-index: 1; }
.cf-submit:disabled { opacity: 0.8; cursor: default; transform: none; }
.cf-spinner {
    display: none;
    width: 15px; height: 15px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cfSpin 0.7s linear infinite;
    position: relative; z-index: 1;
}
.cf-submit.is-sending .cf-spinner { display: inline-block; }
.cf-submit.is-sending .cf-submit-icon { display: none; }
@keyframes cfSpin { to { transform: rotate(360deg); } }

.cf-alert {
    font-family: var(--kg-body-font);
    font-size: 14px;
    padding: 16px 20px;
    border-radius: 14px;
    margin-bottom: 24px;
    display: flex; align-items: center; gap: 10px;
    animation: cfAlertIn 0.5s var(--kg-ease);
}
.cf-alert-success { background: rgba(35, 83, 71, 0.12); color: var(--kaaya-moss); border: 1px solid rgba(35, 83, 71, 0.3); }
.cf-alert-error { background: rgba(178, 58, 58, 0.1); color: #8f3232; border: 1px solid rgba(178, 58, 58, 0.3); }
@keyframes cfAlertIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@media (max-width: 992px) {
    .cf-section { padding: 90px 0; }
    .cf-grid { grid-template-columns: 1fr; gap: 56px; }
    .cf-card { padding: 38px 30px; }
    .cf-card-badge { top: -20px; right: 26px; width: 54px; height: 54px; }
}
@media (max-width: 480px) {
    .cf-card { padding: 30px 20px; border-radius: 0; }
}