.fi{
    --fi-copper:#e8b18a;
    --fi-cream:#fff0e3;
    position:relative;
    isolation:isolate;
    overflow:hidden;
    padding:clamp(100px,10vw,150px) 20px 70px;
    background:
        radial-gradient(ellipse at 50% -10%,rgba(171,88,48,.22),transparent 52%),
        linear-gradient(145deg,#100b0b,#201310 55%,#100b0b);
    color:var(--fi-cream);
}
.fi *{box-sizing:border-box}
.fi-atmosphere{
    position:absolute;
    width:650px;
    height:650px;
    top:-390px;
    left:50%;
    transform:translateX(-50%);
    border:1px solid rgba(235,169,124,.18);
    border-radius:50%;
    box-shadow:0 0 0 95px rgba(228,151,98,.025),0 0 0 195px rgba(228,151,98,.018);
    pointer-events:none;
}
.fi-container{position:relative;max-width:1260px;margin:auto}
.fi-intro{text-align:center;max-width:900px;margin:0 auto 75px}
.fi-eyebrow{
    color:#e6b28d;
    font:700 11px/1.5 system-ui,sans-serif;
    letter-spacing:.27em;
}
.fi h2{
    margin:24px 0;
    font:normal clamp(50px,7vw,98px)/1.05 Georgia,serif;
    letter-spacing:-.065em;
    text-wrap:balance;
}
.fi h2 em{
    display:block;
    color:#eab18b;
    font-weight:normal;
}
.fi-intro p{
    max-width:550px;
    margin:auto;
    color:#c6a99d;
    font:15px/1.9 system-ui,sans-serif;
}
.fi-contact-layout{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:25px;
    align-items:stretch;
}
.fi-form-panel{
    padding:clamp(25px,4vw,50px);
    border:1px solid rgba(235,177,139,.35);
    border-radius:26px;
    background:linear-gradient(145deg,rgba(64,39,33,.92),rgba(33,23,22,.97));
    box-shadow:0 30px 80px rgba(0,0,0,.18);
}
.fi-kicker{
    color:#e3ae88;
    font:700 10px/1.5 system-ui,sans-serif;
    letter-spacing:.23em;
}
.fi-panel-heading h3,.fi-direct-heading h3{
    margin:15px 0;
    font:normal clamp(32px,3.5vw,49px)/1.1 Georgia,serif;
    letter-spacing:-.045em;
}
.fi-panel-heading h3 em,.fi-direct-heading h3 em{
    color:#eab58f;
    font-weight:normal;
}
.fi-panel-heading p,.fi-direct-heading p{
    color:#c8aea3;
    font:14px/1.8 system-ui,sans-serif;
    margin:0;
}
.fi-form{margin-top:32px}
.fi-fields-two{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:17px;
}
.fi-field{margin-bottom:21px}
.fi-field label{
    display:block;
    margin-bottom:9px;
    color:#f3d7c5;
    font:600 12px/1.5 system-ui,sans-serif;
}
.fi-field input,.fi-field textarea{
    display:block;
    width:100%;
    padding:15px 16px;
    border:1px solid rgba(230,179,147,.28);
    border-radius:11px;
    outline:none;
    background:rgba(14,11,12,.4);
    color:#fff0e3;
    font:14px/1.6 system-ui,sans-serif;
    transition:border-color .25s ease,box-shadow .25s ease;
}
.fi-field input::placeholder,.fi-field textarea::placeholder{color:#a88d83}
.fi-field input:focus,.fi-field textarea:focus{
    border-color:#e7b28d;
    box-shadow:0 0 0 3px rgba(231,178,141,.1);
}
.fi-field textarea{resize:vertical;min-height:140px}
.fi-field small{display:block;margin-top:7px;color:#ffc0b5}
.fi-submit{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    width:100%;
    padding:18px 23px;
    border:0;
    border-radius:12px;
    background:linear-gradient(110deg,#f1c5a0,#d99c74);
    color:#29170f;
    font:800 12px/1.4 system-ui,sans-serif;
    letter-spacing:.14em;
    cursor:pointer;
    transition:filter .25s ease,transform .25s ease;
}
.fi-submit:hover{filter:brightness(1.08);transform:translateY(-2px)}
.fi-submit span{font-size:22px}
.fi-form-note{
    margin:18px 0 0;
    color:#baa198;
    font:12px/1.7 system-ui,sans-serif;
}
.fi-honeypot{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
    clip-path:inset(50%)!important;
    white-space:nowrap!important;
}
.fi-alert{
    padding:15px 18px;
    margin-top:20px;
    border-radius:11px;
    font:14px/1.6 system-ui,sans-serif;
}
.fi-alert-success{
    border:1px solid rgba(123,226,159,.4);
    background:rgba(35,105,65,.3);
    color:#c8f4d4;
}
.fi-alert-error{
    border:1px solid rgba(245,135,135,.35);
    background:rgba(128,39,48,.3);
    color:#ffd1ce;
}
.fi-direct{
    display:flex;
    flex-direction:column;
    gap:19px;
}
.fi-direct-heading{padding:20px 12px 15px}
.fi-direct-card{
    display:flex;
    align-items:center;
    gap:21px;
    flex:1;
    min-height:180px;
    padding:30px;
    border:1px solid rgba(236,178,136,.36);
    border-radius:22px;
    text-decoration:none!important;
    color:#fff1e5!important;
    transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.fi-direct-card:hover,.fi-direct-card:focus-visible{
    transform:translateY(-4px);
    border-color:rgba(250,208,165,.75);
    box-shadow:0 20px 50px rgba(0,0,0,.15);
}
.fi-call{
    background:radial-gradient(circle at 100% 0%,rgba(245,190,129,.15),transparent 55%),linear-gradient(125deg,#523323,#30201b);
}
.fi-whatsapp{
    border-color:rgba(141,224,176,.3);
    background:radial-gradient(circle at 100% 0%,rgba(114,217,150,.15),transparent 55%),linear-gradient(125deg,#1d4939,#112b24);
}
.fi-direct-icon{
    display:grid;
    place-items:center;
    flex:none;
    width:60px;
    height:60px;
    border:1px solid rgba(249,214,177,.34);
    border-radius:18px;
    color:#f6c9a2;
    font:normal 30px Georgia,serif;
}
.fi-whatsapp .fi-direct-icon{
    color:#aaf0c6;
    border-color:rgba(168,240,198,.35);
}
.fi-direct-copy{
    display:flex;
    flex:1;
    flex-direction:column;
    gap:6px;
}
.fi-direct-label{
    color:#e2b18d;
    font:700 10px/1.5 system-ui,sans-serif;
    letter-spacing:.17em;
}
.fi-whatsapp .fi-direct-label{color:#a9eac4}
.fi-direct-copy strong{
    font:normal clamp(25px,2.8vw,37px)/1.2 Georgia,serif;
}
.fi-direct-copy>span:last-child{
    color:#d3b8aa;
    font:13px/1.6 system-ui,sans-serif;
}
.fi-whatsapp .fi-direct-copy>span:last-child{color:#b3d3bf}
.fi-direct-arrow{align-self:flex-start;color:#f4c4a2;font-size:25px}
.fi-whatsapp .fi-direct-arrow{color:#a9eac4}
.fi-privacy-panel{
    display:flex;
    align-items:flex-start;
    gap:18px;
    margin-top:auto;
    padding:26px;
    border:1px solid rgba(235,183,146,.19);
    border-radius:19px;
    background:rgba(255,220,185,.035);
}
.fi-privacy-icon{color:#e8b58f;font-size:29px;line-height:1}
.fi-privacy-panel strong{
    color:#efd1b9;
    font:normal 23px Georgia,serif;
}
.fi-privacy-panel p{
    margin:9px 0 0;
    color:#c3a79b;
    font:13px/1.8 system-ui,sans-serif;
}
.fi-unavailable{
    padding:25px;
    border:1px solid rgba(235,183,146,.25);
    border-radius:18px;
    color:#e7c0a6;
}
.fi-signature{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    margin-top:90px;
    color:#9f7666;
    font:700 10px/1.5 system-ui,sans-serif;
    letter-spacing:.4em;
}
.fi-signature span{
    width:55px;
    height:1px;
    background:linear-gradient(90deg,transparent,#a47560);
}
.fi-signature span:last-child{transform:rotate(180deg)}
@media(max-width:1000px){
    .fi-contact-layout{grid-template-columns:1fr}
    .fi-direct{display:grid;grid-template-columns:1fr 1fr;gap:18px}
    .fi-direct-heading,.fi-privacy-panel{grid-column:1/-1}
    .fi-direct-card{min-height:190px}
}
@media(max-width:650px){
    .fi{padding:85px 16px 60px}
    .fi-intro{margin-bottom:48px}
    .fi h2{font-size:clamp(45px,11vw,70px)}
    .fi-form-panel{padding:25px 20px}
    .fi-fields-two,.fi-direct{grid-template-columns:1fr}
    .fi-direct-heading,.fi-privacy-panel{grid-column:auto}
    .fi-direct-card{min-height:150px;padding:23px}
    .fi-direct-icon{width:48px;height:48px;font-size:25px}
    .fi-direct-copy strong{font-size:28px}
    .fi-signature{margin-top:65px}
}
@media(prefers-reduced-motion:reduce){
    .fi-submit,.fi-direct-card{transition:none}
}
/* ==========================================================
   THE FINAL INVITATION — CINEMATIC COPPER EDITION
   ========================================================== */

.fi {
    --fi-copper-light: #ffd0a3;
    --fi-copper-deep: #bd724a;
    --fi-emerald-light: #9ceac2;
    position: relative;
    background:
        radial-gradient(ellipse at 14% 20%, rgba(181,86,48,.23), transparent 46%),
        radial-gradient(ellipse at 87% 65%, rgba(117,65,43,.19), transparent 48%),
        linear-gradient(145deg,#0e0909 0%,#281510 49%,#100b0c 100%);
}

/* Fine architectural grid */
.fi::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(238,177,133,.045) 1px,transparent 1px),
        linear-gradient(90deg,rgba(238,177,133,.045) 1px,transparent 1px);
    background-size: 92px 92px;
    mask-image: linear-gradient(to bottom,transparent,#000 22%,#000 80%,transparent);
}

/* Large editorial background lettering */
.fi::after {
    content: "CONNECT";
    position: absolute;
    left: -2%;
    bottom: -3%;
    z-index: 0;
    pointer-events: none;
    white-space: nowrap;
    color: rgba(245,187,139,.035);
    font: normal clamp(130px,22vw,350px)/1 Georgia,serif;
    letter-spacing: -.09em;
}

/* Liquid copper light */
.fi-atmosphere {
    width: 900px;
    height: 900px;
    top: -490px;
    left: 50%;
    border: 1px solid rgba(246,183,127,.18);
    background:
        radial-gradient(circle at 50% 50%,rgba(233,128,70,.20),transparent 48%);
    box-shadow:
        0 0 0 100px rgba(228,151,98,.025),
        0 0 0 210px rgba(228,151,98,.015),
        inset 0 0 110px rgba(231,135,77,.11);
    animation: fi-halo-breathe 12s ease-in-out infinite;
}

.fi-container {
    z-index: 1;
}

/* Intro */
.fi-intro {
    position: relative;
}

.fi-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 18px;
}

.fi-eyebrow::before,
.fi-eyebrow::after {
    content: "";
    width: 35px;
    height: 1px;
    background: linear-gradient(90deg,transparent,#e6ad82);
}

.fi-eyebrow::after {
    transform: rotate(180deg);
}

.fi h2 {
    text-shadow: 0 18px 55px rgba(0,0,0,.25);
}

.fi h2 em {
    background: linear-gradient(
        105deg,
        #ffe1bb 0%,
        #d89b72 35%,
        #ffddb0 65%,
        #e5a67c 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: fi-metallic-text 10s ease-in-out infinite alternate;
}

/* Glass enquiry form */
.fi-form-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(145deg,rgba(78,48,38,.74),rgba(25,18,18,.91));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow:
        0 30px 90px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,213,171,.12);
    transition: border-color .4s ease,box-shadow .4s ease;
}

.fi-form-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(248,180,126,.13),
            transparent 43%
        );
}

.fi-form-panel::after {
    content: "";
    position: absolute;
    top: -120%;
    left: -60%;
    width: 65%;
    height: 300%;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,215,172,.055),
        transparent
    );
    transform: rotate(22deg);
    transition: left 1.1s ease;
}

.fi-form-panel:hover::after {
    left: 150%;
}

.fi-form-panel:focus-within {
    border-color: rgba(255,204,159,.67);
    box-shadow:
        0 35px 100px rgba(0,0,0,.3),
        0 0 55px rgba(224,139,83,.07);
}

/* Form fields */
.fi-field input,
.fi-field textarea {
    background: rgba(8,7,8,.44);
    border-color: rgba(240,188,150,.24);
    transition:
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}

.fi-field input:hover,
.fi-field textarea:hover {
    border-color: rgba(240,188,150,.5);
}

.fi-field input:focus,
.fi-field textarea:focus {
    background: rgba(13,9,9,.75);
    border-color: #f1bb92;
    box-shadow:
        0 0 0 3px rgba(231,178,141,.1),
        0 0 30px rgba(232,158,101,.07);
    transform: translateY(-2px);
}

.fi-field:focus-within label {
    color: #ffd3ae;
}

/* Submit button */
.fi-submit {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    box-shadow: 0 10px 35px rgba(198,109,63,.19);
}

.fi-submit::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        105deg,
        transparent 15%,
        rgba(255,255,255,.42) 50%,
        transparent 85%
    );
    transform: translateX(-150%);
    transition: transform .75s ease;
}

.fi-submit:hover::before {
    transform: translateX(150%);
}

.fi-submit:hover {
    box-shadow: 0 16px 45px rgba(222,132,76,.3);
}

.fi-submit:focus-visible,
.fi-direct-card:focus-visible {
    outline: 2px solid #ffdab8;
    outline-offset: 4px;
}

/* Contact cards */
.fi-direct-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.fi-direct-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 280px;
    height: 280px;
    right: -125px;
    top: -135px;
    border: 1px solid rgba(255,224,179,.16);
    border-radius: 50%;
    box-shadow:
        0 0 0 45px rgba(255,215,170,.025),
        0 0 0 95px rgba(255,215,170,.015);
    transition: transform .7s cubic-bezier(.2,.7,.2,1);
}

.fi-direct-card:hover::before {
    transform: translate(-35px,35px) scale(1.08);
}

.fi-call {
    background:
        radial-gradient(circle at 100% 0%,rgba(247,177,112,.22),transparent 60%),
        linear-gradient(125deg,#5b3525,#271916);
}

.fi-whatsapp {
    background:
        radial-gradient(circle at 100% 0%,rgba(100,228,157,.19),transparent 60%),
        linear-gradient(125deg,#1d4c3b,#10271f);
}

.fi-call:hover {
    box-shadow:
        0 22px 65px rgba(168,88,48,.24),
        inset 0 1px 0 rgba(255,220,177,.13);
}

.fi-whatsapp:hover {
    border-color: rgba(156,234,194,.78);
    box-shadow:
        0 22px 65px rgba(44,140,91,.2),
        inset 0 1px 0 rgba(173,255,203,.12);
}

.fi-direct-icon {
    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.fi-direct-card:hover .fi-direct-icon {
    transform: rotate(-8deg) scale(1.08);
    box-shadow: 0 0 35px rgba(245,182,129,.15);
}

.fi-whatsapp:hover .fi-direct-icon {
    box-shadow: 0 0 35px rgba(133,238,176,.15);
}

.fi-direct-arrow {
    transition: transform .35s ease;
}

.fi-direct-card:hover .fi-direct-arrow {
    transform: translate(5px,-5px);
}

/* Privacy panel */
.fi-privacy-panel {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(110deg,rgba(232,164,111,.07),rgba(255,225,190,.015));
}

.fi-privacy-panel::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15%;
    height: 70%;
    width: 2px;
    background: linear-gradient(
        to bottom,
        transparent,
        #e8b18a,
        transparent
    );
}

/* Scroll entrance animations */
.fi.fi-motion-ready .fi-intro,
.fi.fi-motion-ready .fi-form-panel,
.fi.fi-motion-ready .fi-direct-heading,
.fi.fi-motion-ready .fi-direct-card,
.fi.fi-motion-ready .fi-privacy-panel {
    opacity: 0;
    transform: translateY(36px);
    transition:
        opacity .85s cubic-bezier(.2,.7,.2,1),
        transform .85s cubic-bezier(.2,.7,.2,1);
}

.fi.fi-motion-ready .fi-revealed {
    opacity: 1;
    transform: translateY(0);
}

.fi.fi-motion-ready .fi-direct-card:hover {
    transform: translateY(-5px);
}

/* Keyframes */
@keyframes fi-halo-breathe {
    0%,100% {
        transform: translateX(-50%) scale(.95);
        opacity: .65;
    }
    50% {
        transform: translateX(-50%) scale(1.08);
        opacity: 1;
    }
}

@keyframes fi-metallic-text {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}

/* Responsive */
@media(max-width:1000px) {
    .fi-atmosphere {
        width: 700px;
        height: 700px;
        top: -380px;
    }
}

@media(max-width:650px) {
    .fi-atmosphere {
        width: 490px;
        height: 490px;
        top: -260px;
    }

    .fi::after {
        font-size: 120px;
    }

    .fi-form-panel::after {
        display: none;
    }
}

@media(prefers-reduced-motion:reduce) {
    .fi-atmosphere,
    .fi h2 em {
        animation: none!important;
    }

    .fi.fi-motion-ready .fi-intro,
    .fi.fi-motion-ready .fi-form-panel,
    .fi.fi-motion-ready .fi-direct-heading,
    .fi.fi-motion-ready .fi-direct-card,
    .fi.fi-motion-ready .fi-privacy-panel {
        opacity: 1!important;
        transform: none!important;
        transition: none!important;
    }

    .fi-submit::before,
    .fi-direct-card::before,
    .fi-direct-icon,
    .fi-direct-arrow {
        transition: none!important;
    }
}