/* ════════════════════════════════════════════════════════
   CONTACT PAGE — FULL CSS
   File: css/contact.css  |  Loaded AFTER css/style.css
════════════════════════════════════════════════════════ */

/* ════════ HERO ════════ */
.contact-hero {
    position:relative; width:100%; min-height:60vh;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; padding:160px 2rem 5rem;
    background:
        linear-gradient(to bottom, rgba(26,32,44,0.3) 0%, rgba(26,32,44,0.65) 50%, rgba(26,32,44,0.97) 100%),
        url('/images/contact-hero.jpg') no-repeat center 40% / cover;
}
.contact-hero__inner { position:relative; z-index:2; text-align:center; max-width:780px; }
.contact-hero__eyebrow { display:inline-block; font-family:'Cormorant Garamond',serif; font-size:0.7rem; letter-spacing:0.42em; text-transform:uppercase; color:var(--gold-dim); margin-bottom:1.2rem; }
.contact-hero__title { font-family:'Pinyon Script',cursive; font-size:clamp(3.8rem,8vw,7rem); font-weight:400; color:var(--gold-light); line-height:1.05; margin-bottom:1rem; text-shadow:0 0 3px rgba(0,0,0,0.9),0 0 12px rgba(0,0,0,0.7),0 4px 24px rgba(0,0,0,0.5); }
.contact-hero__line { width:60px; height:1px; background:linear-gradient(to right, transparent, var(--gold-light), transparent); margin:1.1rem auto; box-shadow:0 0 6px rgba(228,201,123,0.3); }
.contact-hero__subtitle { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(1.05rem,2.2vw,1.45rem); font-weight:300; color:rgba(240,237,232,0.78); letter-spacing:0.06em; line-height:1.6; max-width:600px; margin:0 auto; }

/* ════════ HOW IT WORKS ════════ */
.booking-section { padding:7rem 0; }
.booking-inner { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid rgba(201,168,76,0.22); overflow:hidden; position:relative; }
.booking-inner::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(to right, transparent, rgba(201,168,76,0.6) 50%, transparent); z-index:2; }
.booking-img-col { position:relative; overflow:hidden; min-height:460px; }
.booking-img-col img { width:100%; height:100%; object-fit:cover; filter:grayscale(15%) brightness(82%); transition:transform 0.6s ease,filter 0.6s ease; display:block; }
.booking-inner:hover .booking-img-col img { transform:scale(1.03); filter:grayscale(5%) brightness(88%); }
.booking-img-col::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(201,168,76,0.06) 0%, transparent 60%); pointer-events:none; }
.booking-text-col { padding:4rem 3.5rem; display:flex; flex-direction:column; justify-content:center; background:var(--bg2); position:relative; }
.booking-text-col::before { content:''; position:absolute; top:10%; bottom:10%; left:0; width:1px; background:linear-gradient(to bottom, transparent, rgba(201,168,76,0.4) 50%, transparent); }
.booking-checklist { list-style:none; margin:1.5rem 0 2rem; }
.booking-checklist li { font-family:'Cormorant Garamond',serif; font-size:1rem; color:var(--text-muted); padding:0.4rem 0; border-bottom:1px solid rgba(255,255,255,0.04); display:flex; align-items:baseline; gap:0.6rem; line-height:1.5; }
.booking-checklist li:last-child { border-bottom:none; }
.booking-checklist li::before { content:'·'; color:var(--gold-dim); font-size:1.2rem; flex-shrink:0; }

/* ════════ GOOD TO KNOW ════════ */
.contact-notes-section { padding:7rem 0; }
.contact-notes-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:2.5rem; }
.cnote { display:flex; flex-direction:column; gap:0.55rem; padding:1.4rem 1.2rem; background:var(--bg2); border:1px solid rgba(201,168,76,0.18); border-radius:2px; position:relative; overflow:hidden; transition:border-color var(--transition),background var(--transition); }
.cnote::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%, rgba(201,168,76,0.07), transparent 65%); opacity:0; pointer-events:none; transition:opacity var(--transition); }
.cnote:hover { border-color:rgba(201,168,76,0.4); background:var(--bg3); }
.cnote:hover::before { opacity:1; }
.cnote__icon { font-size:1.1rem; line-height:1; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(201,168,76,0.22); border-radius:2px; background:rgba(201,168,76,0.04); flex-shrink:0; }
.cnote__title { font-family:'Jost',sans-serif; font-size:0.62rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--gold-light); font-weight:400; }
.cnote__text { font-family:'Cormorant Garamond',serif; font-size:0.92rem; color:var(--text-muted); line-height:1.6; font-weight:300; margin:0; }

/* ════════ CHANNELS SECTION ════════ */
.contact-channels-section { padding:7rem 0; }

/* Image (300px) | channels column */
.contact-channels-split {
    display:grid;
    grid-template-columns: 300px 1fr;          /* ← image width | channels */
    gap:4rem;                                  /* ← spacing between image and cards */
    align-items:start;
    margin-top:2.5rem;
}

/* 2 columns of 3 rows */
.contact-channels-grid {
    display:grid;
    grid-template-columns: repeat(2,1fr);
    gap:8px;
}

.contact-channel { display:flex; align-items:center; gap:0.85rem; padding:0.95rem 1.1rem; background:var(--bg2); border:1px solid rgba(201,168,76,0.18); text-decoration:none; position:relative; overflow:hidden; border-radius:2px; transition:border-color var(--transition),background var(--transition),box-shadow var(--transition); }
.contact-channel::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 20% 50%, rgba(201,168,76,0.07), transparent 65%); opacity:0; pointer-events:none; transition:opacity var(--transition); }
.contact-channel:hover { border-color:rgba(201,168,76,0.55); background:var(--bg3); box-shadow:0 0 14px rgba(201,168,76,0.1); }
.contact-channel:hover::before { opacity:1; }
.contact-channel__icon { width:38px; height:38px; flex-shrink:0; border:1px solid rgba(201,168,76,0.25); border-radius:2px; display:flex; align-items:center; justify-content:center; background:rgba(201,168,76,0.04); position:relative; z-index:1; transition:border-color var(--transition),background var(--transition); }
.contact-channel:hover .contact-channel__icon { border-color:var(--gold); background:rgba(201,168,76,0.1); }
.contact-channel__icon svg { width:16px; height:16px; fill:none; stroke:var(--gold-light); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.contact-channel__text { display:flex; flex-direction:column; gap:2px; position:relative; z-index:1; flex:1; min-width:0; }
.contact-channel__label { font-family:'Jost',sans-serif; font-size:0.58rem; letter-spacing:0.26em; text-transform:uppercase; color:var(--gold-dim); font-weight:400; }
.contact-channel__value { font-family:'Cormorant Garamond',serif; font-size:1rem; color:var(--text); font-style:italic; font-weight:300; transition:color var(--transition); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.contact-channel:hover .contact-channel__value { color:var(--gold-light); }
.contact-channel__arrow { color:var(--gold-dim); font-size:0.85rem; position:relative; z-index:1; transition:transform var(--transition),color var(--transition); flex-shrink:0; }
.contact-channel:hover .contact-channel__arrow { transform:translateX(3px); color:var(--gold-light); }
.contact-channel__badge { position:absolute; top:0; right:0; font-family:'Jost',sans-serif; font-size:0.5rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--bg); background:linear-gradient(135deg, var(--gold-dim), var(--gold-light)); padding:2px 8px; font-weight:400; }

/* Discretion bar — full width below the 2-col grid */
.contact-discretion-bar { display:flex; align-items:center; gap:0.8rem; padding:0.85rem 1rem; margin-top:8px; border:1px solid rgba(201,168,76,0.12); background:rgba(201,168,76,0.03); border-radius:2px; }
.contact-discretion-bar__icon { font-size:0.9rem; flex-shrink:0; }
.contact-discretion-bar p { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:0.9rem; color:var(--text-muted); margin:0; line-height:1.5; font-weight:300; }

/* Quick-links */
.contact-quicklinks { margin-top:1.4rem; display:flex; flex-direction:column; gap:0; border-top:1px solid rgba(255,255,255,0.04); }
.contact-quicklink { display:flex; justify-content:space-between; align-items:center; padding:0.65rem 0; border-bottom:1px solid rgba(255,255,255,0.04); text-decoration:none; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:0.95rem; color:var(--text-muted); transition:color var(--transition),padding-left var(--transition); }
.contact-quicklink:hover { color:var(--gold-light); padding-left:6px; }
.contact-quicklink span:last-child { color:var(--gold-dim); flex-shrink:0; font-style:normal; transition:transform var(--transition); }
.contact-quicklink:hover span:last-child { transform:translateX(4px); display:inline-block; }

/* Inline discretion box (used inside form intro) */
.contact-discretion { display:flex; gap:0.8rem; align-items:flex-start; padding:1rem 1.2rem; border:1px solid rgba(201,168,76,0.12); background:rgba(201,168,76,0.03); border-radius:2px; }
.contact-discretion__icon { font-size:0.9rem; flex-shrink:0; margin-top:2px; }
.contact-discretion p { font-size:0.88rem; color:var(--text-muted); margin:0; line-height:1.6; font-family:'Cormorant Garamond',serif; }

/* ════════ FORM SECTION ════════ */
.contact-form-section { padding:7rem 0 8rem; }

/* Intro text block — full width, plain block */
.contact-form-intro-top {
    margin-bottom: 2.5rem;                     /* ← spacing between intro and form box */
}

/* ────────────────────────────────────────────
   FORM BOX — dark theme
   Width + centering set inline on the element:
   style="width:80%; margin:0 auto;"
   All labels stacked above their inputs.
   Two-column rows (name/email, phone/dates).
   Service + message + button span full width.
──────────────────────────────────────────── */
.contact-form-box {
    background:var(--bg2);
    border:1px solid rgba(201,168,76,0.28);
    padding:2.5rem;                            /* ← BOX PADDING */
    position:relative; border-radius:2px;
    box-sizing:border-box;
}
.contact-form-box::before {
    content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
    background:linear-gradient(to right, transparent, var(--gold-light), transparent);
    box-shadow:0 0 8px rgba(228,201,123,0.2);
}
.cf-corner { position:absolute; width:14px; height:14px; border-color:var(--gold-light); border-style:solid; z-index:2; }
.cf-corner-tl { top:-1px;    left:-1px;  border-width:1px 0 0 1px; }
.cf-corner-tr { top:-1px;    right:-1px; border-width:1px 1px 0 0; }
.cf-corner-bl { bottom:-1px; left:-1px;  border-width:0 0 1px 1px; }
.cf-corner-br { bottom:-1px; right:-1px; border-width:0 1px 1px 0; }

/* ── Two-column row ── */
.form-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 1.2rem;
}

/* ── Single field group — label ABOVE input ── */
.form-group {
    display:flex; flex-direction:column;
    gap:6px; margin-bottom:1.1rem;
    width:100%; box-sizing:border-box;
}
.form-group label {
    font-family:'Jost',sans-serif; font-size:0.68rem;
    letter-spacing:0.25em; text-transform:uppercase;
    color:var(--gold-dim); font-weight:400; line-height:1;
}
.form-optional { font-size:0.75em; opacity:0.65; text-transform:none; letter-spacing:0; }

/* ── Dark field base ── */
.contact-form-box input,
.contact-form-box select,
.contact-form-box textarea {
    width:100%; box-sizing:border-box;
    background:rgba(16,20,30,0.85) !important;
    border:1px solid rgba(201,168,76,0.22) !important;
    color:var(--text) !important;
    border-radius:2px;
    font-family:'Cormorant Garamond',serif; font-size:1rem;
    -webkit-appearance:none; appearance:none;
    transition:border-color var(--transition),box-shadow var(--transition),background var(--transition);
}
.contact-form-box input::placeholder,
.contact-form-box textarea::placeholder { color:rgba(138,136,128,0.5) !important; font-style:italic; }
.contact-form-box input:focus,
.contact-form-box select:focus,
.contact-form-box textarea:focus {
    border-color:rgba(201,168,76,0.5) !important;
    box-shadow:0 0 10px rgba(201,168,76,0.12) !important;
    outline:none; background:rgba(20,26,38,0.95) !important;
}

/* Uniform single-line height */
.contact-form-box input[type="text"],
.contact-form-box input[type="email"],
.contact-form-box input[type="tel"],
.contact-form-box select {
    height:46px; padding:0 14px; line-height:46px;
}

/* Select gold arrow */
.contact-form-box select {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a84c' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important; background-position:right 14px center !important;
    padding-right:36px !important; cursor:pointer;
}
.contact-form-box select option,
.contact-form-box select optgroup { background:#1a202c; color:var(--text); }

/* Textarea */
.contact-form-box textarea { min-height:130px; padding:12px 14px; resize:vertical; line-height:1.6; }

/* Send button */
.contact-form-box .cf-submit { width:100%; margin-top:0.5rem; }

/* Feedback */
.cf-feedback { padding:1rem 1.2rem; border-radius:2px; font-family:'Cormorant Garamond',serif; font-size:1rem; line-height:1.6; margin-top:1rem; display:none; }
.cf-feedback--success { border:1px solid rgba(201,168,76,0.45); background:rgba(201,168,76,0.06); color:var(--gold-light); }
.cf-feedback--error   { border:1px solid rgba(220,80,80,0.4);   background:rgba(220,80,80,0.06);   color:#e4a0a0; }

@media (max-width:1080px) {
    .contact-notes-grid        { grid-template-columns:repeat(2,1fr); }
    .contact-channels-split    { grid-template-columns:1fr; gap:3rem; }
    .contact-channels-grid     { grid-template-columns:1fr; }
    .booking-inner             { grid-template-columns:1fr; }
    .booking-img-col           { min-height:300px; }
    .booking-text-col::before  { display:none; }
    .booking-text-col          { padding:3rem 2.5rem; }
    .contact-form-box[style]   { width:95% !important; }  /* override 80% on tablet */
}
@media (max-width:768px) {
    .contact-hero              { min-height:52vh; padding:130px 2rem 4rem; }
    .contact-hero__title       { font-size:clamp(3.2rem,12vw,5.5rem); }
    .booking-section           { padding:5rem 0; }
    .contact-notes-section     { padding:5rem 0; }
    .contact-channels-section  { padding:5rem 0; }
    .contact-form-section      { padding:5rem 0 6rem; }
    .contact-notes-grid        { grid-template-columns:1fr; gap:1rem; }
    .contact-form-box          { padding:1.8rem 1.4rem; }
    .contact-form-box[style]   { width:100% !important; } /* full width on mobile */
    .booking-text-col          { padding:2.5rem 1.8rem; }
    .booking-img-col           { min-height:240px; }
    .form-row                  { grid-template-columns:1fr; }
}