/* IFUNDA Website — Version 34
   Contact page: direct school enquiries, demonstrations and pricing. */

:root {
    --contact-ink: #271811;
    --contact-ink-soft: #4b2f21;
    --contact-gold: #e5b55f;
    --contact-gold-bright: #ffdda0;
    --contact-caramel: #b77a45;
    --contact-ivory: #f7efe2;
    --contact-paper: #fffaf1;
    --contact-navy: #182432;
    --contact-shadow: 0 34px 90px rgba(24, 13, 8, .28);
}

body.contact-body {
    min-height: 100vh;
    overflow-x: clip;
    background: var(--contact-ink);
    color: var(--contact-paper);
}

.contact-body::before {
    content: "";
    position: fixed;
    z-index: -2;
    inset: 0;
    background:
        radial-gradient(circle at 14% 10%, rgba(229, 181, 95, .13), transparent 31%),
        radial-gradient(circle at 84% 42%, rgba(149, 88, 49, .13), transparent 32%),
        linear-gradient(145deg, #21130d, #3b2116 54%, #1d110c);
}

.contact-site-header { z-index: 42; }
.contact-main { position: relative; isolation: isolate; }
.contact-container { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }

.contact-kicker {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 20px;
    color: var(--contact-gold-bright);
    font-size: .76rem;
    font-weight: 780;
    letter-spacing: .2em;
    line-height: 1.3;
    text-transform: uppercase;
}
.contact-kicker span { width: 34px; height: 1px; background: linear-gradient(90deg, currentColor, transparent); }
.contact-kicker-dark { color: #8c582e; }

.contact-hero {
    position: relative;
    display: grid;
    min-height: 92svh;
    align-items: center;
    overflow: hidden;
    padding: 165px 0 105px;
    background:
        linear-gradient(90deg, rgba(25, 14, 9, .98) 0%, rgba(34, 19, 13, .91) 39%, rgba(33, 19, 13, .26) 72%, rgba(25, 14, 10, .48) 100%),
        linear-gradient(180deg, rgba(18, 10, 7, .1), rgba(22, 12, 8, .82));
}
.contact-hero::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: auto 0 0;
    height: 190px;
    background: linear-gradient(180deg, transparent, rgba(35, 20, 14, .96));
    pointer-events: none;
}
.contact-hero-image {
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image: url("../images/products-page-background/ifunda-products-classroom-background.webp");
    background-position: 68% center;
    background-size: cover;
    transform: scale(1.02);
}
.contact-hero-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 69% 34%, rgba(255, 218, 149, .15), transparent 26%),
        linear-gradient(90deg, rgba(24, 13, 8, .95), rgba(28, 15, 10, .75) 43%, transparent 77%);
}
.contact-hero-grain {
    position: absolute;
    z-index: 1;
    inset: 0;
    opacity: .11;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.33'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
}
.contact-hero-grid {
    position: relative;
    z-index: 3;
    display: grid;
    align-items: end;
    gap: clamp(42px, 7vw, 100px);
    grid-template-columns: minmax(0, 1.15fr) minmax(310px, .62fr);
}
.contact-hero-copy { max-width: 780px; }
.contact-hero h1 {
    margin: 0;
    color: #fff8ed;
    text-wrap: balance;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3.7rem, 7.2vw, 7.5rem);
    font-weight: 500;
    letter-spacing: -.06em;
    line-height: .9;
    text-shadow: 0 14px 50px rgba(0,0,0,.45);
}
.contact-hero h1 em { display: block; color: var(--contact-gold-bright); font-style: italic; font-weight: 500; }
.contact-hero-copy > p:not(.contact-kicker) { max-width: 700px; margin: 30px 0 0; color: rgba(255, 247, 234, .82); font-size: clamp(1.05rem, 1.55vw, 1.28rem); line-height: 1.72; }
.contact-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.contact-button {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 21px;
    border: 1px solid rgba(255, 220, 156, .3);
    border-radius: 999px;
    color: #fff7e9;
    font-weight: 760;
    text-decoration: none;
    transition: translate .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.contact-button:hover, .contact-button:focus-visible { translate: 0 -2px; border-color: rgba(255, 220, 156, .75); }
.contact-button-primary { border-color: rgba(255, 220, 156, .85); background: linear-gradient(135deg, #d89b48, #8c5127); box-shadow: 0 14px 36px rgba(105, 54, 23, .38); }
.contact-button-ghost { background: rgba(28, 16, 11, .48); backdrop-filter: blur(16px); }

.contact-person-card {
    position: relative;
    overflow: hidden;
    padding: 34px;
    border: 1px solid rgba(255, 222, 163, .28);
    border-radius: 30px;
    background: linear-gradient(145deg, rgba(67, 39, 26, .74), rgba(29, 17, 12, .56));
    box-shadow: var(--contact-shadow);
    backdrop-filter: blur(24px) saturate(1.15);
}
.contact-person-card::before { content: ""; position: absolute; inset: -45% 36% 50% -25%; background: radial-gradient(circle, rgba(255, 215, 145, .22), transparent 70%); }
.contact-person-label { position: relative; margin: 0 0 22px; color: var(--contact-gold-bright); font-size: .7rem; font-weight: 780; letter-spacing: .19em; }
.contact-person-avatar { position: relative; display: grid; width: 70px; height: 70px; margin-bottom: 20px; place-items: center; border: 1px solid rgba(255, 223, 164, .55); border-radius: 50%; background: linear-gradient(145deg, #edbf6f, #855028); color: #2a170d; font-family: Georgia, serif; font-size: 2rem; font-weight: 700; box-shadow: 0 10px 32px rgba(0,0,0,.24); }
.contact-person-card h2 { position: relative; margin: 0; font-family: Georgia, serif; font-size: 2.4rem; font-weight: 500; }
.contact-person-card > p:not(.contact-person-label) { position: relative; margin: 8px 0 22px; color: rgba(255,248,235,.7); line-height: 1.55; }
.contact-person-card a { position: relative; display: block; width: fit-content; margin: 8px 0; color: #fff4de; font-size: 1.04rem; font-weight: 700; text-decoration-color: rgba(239, 189, 104, .45); text-underline-offset: 4px; }
.contact-person-card small { position: relative; display: block; margin-top: 18px; color: rgba(255,248,235,.54); letter-spacing: .08em; text-transform: uppercase; }

.contact-direct { padding: clamp(90px, 10vw, 145px) 0; background: linear-gradient(180deg, var(--contact-ivory), #efe0cc); color: var(--contact-ink); }
.contact-section-heading { max-width: 760px; }
.contact-section-heading h2, .contact-form-intro h2, .contact-final h2 { margin: 0; text-wrap: balance; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.7rem, 5.2vw, 5.3rem); font-weight: 500; letter-spacing: -.048em; line-height: .98; }
.contact-section-heading > p:last-child { max-width: 620px; margin: 23px 0 0; color: #6f4b36; font-size: 1.08rem; line-height: 1.7; }
.contact-direct-grid { display: grid; gap: 20px; margin-top: 56px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.contact-direct-grid article { position: relative; min-height: 230px; overflow: hidden; padding: 30px; border: 1px solid rgba(101, 60, 34, .15); border-radius: 26px; background: rgba(255, 250, 241, .74); box-shadow: 0 18px 48px rgba(72, 42, 24, .09); }
.contact-direct-grid article > span { position: absolute; top: 18px; right: 22px; color: rgba(113, 65, 35, .15); font-family: Georgia, serif; font-size: 4.8rem; line-height: 1; }
.contact-direct-grid article > p { margin: 62px 0 15px; color: #9a6539; font-size: .7rem; font-weight: 800; letter-spacing: .18em; }
.contact-direct-grid h3 { position: relative; margin: 0; overflow-wrap: anywhere; font-family: Georgia, serif; font-size: clamp(1.45rem, 2.1vw, 2.1rem); font-weight: 500; }
.contact-direct-grid h3 a { color: inherit; text-decoration-color: rgba(162, 102, 52, .35); text-underline-offset: 5px; }
.contact-direct-grid small { display: block; margin-top: 15px; color: #80604d; line-height: 1.55; }

.contact-form-section { padding: clamp(90px, 11vw, 160px) 0; background: linear-gradient(150deg, #1d110c, #392116 55%, #1b100b); }
.contact-form-layout { display: grid; align-items: start; gap: clamp(45px, 7vw, 95px); grid-template-columns: minmax(0, .82fr) minmax(520px, 1.18fr); }
.contact-form-intro { position: sticky; top: 130px; }
.contact-form-intro > p:not(.contact-kicker) { margin: 25px 0 0; color: rgba(255,247,234,.69); font-size: 1.08rem; line-height: 1.75; }
.contact-form-intro ol { display: grid; gap: 24px; margin: 42px 0 0; padding: 0; list-style: none; counter-reset: steps; }
.contact-form-intro li { position: relative; padding-left: 57px; counter-increment: steps; }
.contact-form-intro li::before { content: counter(steps); position: absolute; top: 0; left: 0; display: grid; width: 37px; height: 37px; place-items: center; border: 1px solid rgba(255, 216, 151, .42); border-radius: 50%; color: var(--contact-gold-bright); font-family: Georgia, serif; }
.contact-form-intro li strong { display: block; color: #fff5e5; font-size: 1.02rem; }
.contact-form-intro li span { display: block; margin-top: 6px; color: rgba(255,247,234,.6); line-height: 1.55; }

.contact-form-card { padding: clamp(27px, 4vw, 46px); border: 1px solid rgba(255, 221, 160, .25); border-radius: 32px; background: linear-gradient(145deg, rgba(71, 41, 27, .72), rgba(31, 18, 12, .78)); box-shadow: var(--contact-shadow); backdrop-filter: blur(20px); }
.contact-form-status { margin-bottom: 24px; padding: 16px 18px; border-radius: 16px; font-weight: 650; line-height: 1.55; }
.contact-form-status.is-success { border: 1px solid rgba(129, 220, 154, .4); background: rgba(45, 120, 66, .24); color: #dff8e5; }
.contact-form-status.is-error { border: 1px solid rgba(255, 173, 133, .45); background: rgba(146, 58, 31, .22); color: #ffe4d8; }
.contact-form-status a { display: block; width: fit-content; margin-top: 8px; color: inherit; }
.contact-field-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contact-form-card label > span, .contact-preference legend { display: block; margin-bottom: 8px; color: rgba(255, 244, 224, .78); font-size: .79rem; font-weight: 760; letter-spacing: .035em; }
.contact-form-card input[type="text"], .contact-form-card input[type="email"], .contact-form-card input[type="tel"], .contact-form-card select, .contact-form-card textarea {
    width: 100%;
    border: 1px solid rgba(255, 224, 168, .2);
    border-radius: 14px;
    outline: none;
    background: rgba(20, 11, 7, .42);
    color: #fff8eb;
    font: inherit;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.contact-form-card input[type="text"], .contact-form-card input[type="email"], .contact-form-card input[type="tel"], .contact-form-card select { min-height: 50px; padding: 0 14px; }
.contact-form-card textarea { resize: vertical; min-height: 145px; padding: 14px; line-height: 1.55; }
.contact-form-card select { color-scheme: dark; }
.contact-form-card input:focus, .contact-form-card select:focus, .contact-form-card textarea:focus { border-color: rgba(255, 215, 145, .72); background: rgba(25, 14, 9, .62); box-shadow: 0 0 0 4px rgba(229, 181, 95, .1); }
.contact-field-full { display: block; margin-top: 20px; }
.contact-plan-note { margin: 14px 0 0; color: var(--contact-gold-bright); }
.contact-preference { display: flex; flex-wrap: wrap; gap: 12px 22px; margin: 22px 0 0; padding: 0; border: 0; }
.contact-preference legend { width: 100%; }
.contact-preference label { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,248,235,.75); }
.contact-consent { display: grid; margin-top: 21px; align-items: start; gap: 11px; grid-template-columns: auto 1fr; color: rgba(255,248,235,.63); font-size: .85rem; line-height: 1.5; }
.contact-consent input { margin-top: 3px; accent-color: #d99e4d; }
.contact-submit { display: inline-flex; width: 100%; min-height: 54px; margin-top: 25px; align-items: center; justify-content: center; gap: 10px; border: 1px solid rgba(255, 226, 173, .72); border-radius: 15px; background: linear-gradient(135deg, #e0a756, #8f5127); color: #25150d; font: inherit; font-weight: 820; cursor: pointer; box-shadow: 0 15px 35px rgba(86, 42, 19, .32); transition: translate .2s ease, filter .2s ease; }
.contact-submit:hover, .contact-submit:focus-visible { translate: 0 -2px; filter: brightness(1.06); }
.contact-form-fallback { margin: 17px 0 0; color: rgba(255,248,235,.54); font-size: .82rem; line-height: 1.55; text-align: center; }
.contact-form-fallback a { color: #ffe0a6; }
.contact-honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

.contact-final { position: relative; overflow: hidden; padding: clamp(90px, 11vw, 150px) 0; text-align: center; background: linear-gradient(135deg, #52311f, #25150e); }
.contact-final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 25%, rgba(255, 211, 136, .17), transparent 38%); }
.contact-final-inner { position: relative; max-width: 920px; }
.contact-final h2 { margin-inline: auto; color: #fff6e8; }
.contact-final .contact-button { margin-top: 35px; }
.contact-site-footer { position: relative; }

[data-contact-reveal] { opacity: 1; transform: none; }
.js [data-contact-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .75s ease, transform .75s cubic-bezier(.18,.8,.24,1); }
.js [data-contact-reveal].is-visible { opacity: 1; transform: none; }

@media (max-width: 1020px) {
    .contact-hero-grid, .contact-form-layout { grid-template-columns: 1fr; }
    .contact-hero-copy { max-width: 720px; }
    .contact-person-card { max-width: 510px; }
    .contact-form-intro { position: static; max-width: 760px; }
    .contact-direct-grid { grid-template-columns: 1fr 1fr; }
    .contact-direct-grid article:last-child { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
    .contact-container { width: min(100% - 32px, 1180px); }
    .contact-hero { min-height: auto; padding: 132px 0 82px; }
    .contact-hero-image { background-position: 72% center; }
    .contact-hero h1 { font-size: clamp(3.25rem, 16vw, 5rem); }
    .contact-person-card { padding: 26px; border-radius: 23px; }
    .contact-direct-grid, .contact-field-grid { grid-template-columns: 1fr; }
    .contact-direct-grid article:last-child { grid-column: auto; }
    .contact-form-card { padding: 23px 18px; border-radius: 23px; }
    .contact-form-section, .contact-direct { padding-block: 82px; }
    .contact-preference { display: grid; grid-template-columns: 1fr 1fr; }
    .contact-preference legend { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
    .js [data-contact-reveal] { opacity: 1; transform: none; transition: none; }
    .contact-button, .contact-submit { transition: none; }
}

/* Version 43 — direct WhatsApp contact card. */
.contact-direct-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.contact-whatsapp-card { border-color: rgba(35, 174, 91, .24) !important; background: linear-gradient(145deg, rgba(240,255,246,.88), rgba(229,247,236,.78)) !important; }
.contact-whatsapp-card h3 a { display: inline-flex; align-items: center; gap: .65rem; color: #176d39; }
.contact-whatsapp-icon { display: grid; width: 2rem; height: 2rem; flex: 0 0 2rem; place-items: center; border-radius: 50%; color: #fff; background: #25d366; box-shadow: 0 8px 18px rgba(23,109,57,.18); }
.contact-whatsapp-icon svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
@media (max-width: 1020px) {
    .contact-direct-grid { grid-template-columns: 1fr 1fr; }
    .contact-direct-grid article:last-child { grid-column: auto; }
}
@media (max-width: 700px) {
    .contact-direct-grid { grid-template-columns: 1fr; }
}