/* ===== Contact Cinematic (Black + Orange + Grey) ===== */
:root{
  --orange:#ffa500;
  --orange2:#ff8c00;
  --ink:#0f172a;
  --muted:#cbd5e1;
  --brd:#2a3242;
  --panel:#0b0f1a;
}

/* Essentials */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{ font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:#fff; background:#0d0f15; line-height:1.6 }
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
.container{ width:min(100% - 48px, 1180px); margin-inline:auto }

/* ---- Hero ---- */
.ct-hero{
  position:relative; overflow:hidden; color:#fff; background:#000000;
  min-height: clamp(56vh, 64vh, 72vh);
  display:grid; place-items:center;
}
.ct-hero::before,
.ct-hero::after{
  content:""; position:absolute; inset:-20% -10% -30% -10%; pointer-events:none; filter: blur(16px);
}
.ct-hero::before{
  background:
    radial-gradient(800px 320px at 12% 10%, rgba(255,165,0,.18), transparent 60%),
    radial-gradient(900px 380px at 88% 90%, rgba(255,140,0,.12), transparent 60%);
  z-index:0;
}
.ct-hero::after{
  background:
    conic-gradient(from 180deg at 50% 50%, rgba(255,165,0,.12), rgba(255,140,0,.06), transparent 50%, rgba(255,165,0,.10)),
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.10));
  z-index:0; mix-blend-mode: screen; animation: wave 12s ease-in-out infinite alternate;
}
@keyframes wave{ to{ transform: translateY(8px) scale(1.02) } }

.ct-hero__inner{
  position:relative; z-index:1; width:min(100% - 48px, 1180px);
  display:grid; align-items:center; grid-template-columns: 1fr; gap:14px;
  padding-block: clamp(40px, 9vh, 72px);
}
.ct-hero__kicker{
  display:inline-block; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
  background:linear-gradient(90deg, #ffd9a1, #fff); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:14px;
}
.ct-hero__title{
  margin:0 0 6px; font-weight:900; font-size: clamp(38px, 6vw, 72px); line-height:1.05;
  text-shadow:0 0 34px rgba(255,165,0,.25), 0 0 18px rgba(255,140,0,.22);
}
.ct-hero__title .w{
  display:inline-block; margin-right:.35ch;
  background:linear-gradient(90deg, var(--orange), var(--orange2)); -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:0; transform: translateY(18px) scale(.98); filter: blur(2px);
  animation: tWord .65s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--i) * 90ms + 80ms);
}
@keyframes tWord{ to{ opacity:1; transform:none; filter:none } }

.ct-hero__sub{ margin:6px 0 12px; color:#e5e7eb; max-width:720px; opacity:.0; transform: translateY(10px); animation: fadeIn .6s ease .25s forwards }
.ct-hero__actions{ display:flex; gap:12px; flex-wrap:wrap }
.btn-glass{
  position:relative; display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:14px; font-weight:900; color:#fff;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.22); backdrop-filter: blur(8px);
  box-shadow:0 12px 28px rgba(255,165,0,.18), inset 0 0 0 1px rgba(255,255,255,.08);
  overflow:hidden;
}
.btn-glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 18px rgba(255,165,0,.55) inset; opacity:.65; transition:.25s;
}
.btn-glass::after{
  content:""; position:absolute; left:-40%; top:0; width:40%; height:100%; transform: skewX(-25deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transition: .35s; opacity:.0;
}
.btn-glass:hover{ border-color: rgba(255,165,0,.55) }
.btn-glass:hover::after{ left:120%; opacity:1 }
.btn-ghost{
  display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:14px; font-weight:900; color:#fff;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06);
}
@keyframes fadeIn{ to{ opacity:1; transform:none } }

/* Particles */
.particles{ position:absolute; inset:0; z-index:0; pointer-events:none }
.particles span{
  position:absolute; left:var(--x); top:var(--y); width:3px; height:3px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,165,0,1), rgba(255,165,0,.2));
  box-shadow:0 0 10px rgba(255,165,0,.65), 0 0 20px rgba(255,140,0,.45);
  animation: drift var(--d) ease-in-out infinite alternate; transform: scale(var(--s));
}
@keyframes drift{ to{ transform: translate(6px, -8px) scale(var(--s)) } }

/* ---- Split: Info + Form ---- */
.ct-split{ background: linear-gradient(180deg, #0e1320, #bec7dd); padding: clamp(48px, 9vh, 80px) 0; }
.ct-split__grid{ display:grid; gap:22px; grid-template-columns: .9fr 1.1fr; align-items:start }
@media (max-width:960px){ .ct-split__grid{ grid-template-columns:1fr } }

.ct-info{
  background:#606676; border:1px solid #1b2332; border-radius:16px; padding:16px;
  box-shadow:0 16px 40px rgba(0,0,0,.28);
}
.info-item{ display:flex; align-items:center; gap:12px; padding:12px; border-radius:12px; background:rgba(255,255,255,.02); border:1px solid #1b2332; color:#e5e7eb }
.info-item + .info-item{ margin-top:10px }
.info-item .ico{ width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:rgba(255,165,0,.08); box-shadow: inset 0 0 0 1px rgba(255,165,0,.35), 0 12px 26px rgba(255,165,0,.08) }
.info-item .ico img{ width:22px; height:22px; object-fit:contain }
.info-item h3{ margin:0; font-size:16px; font-weight:900; color:#fff }
.info-item p{ margin:2px 0 0; color:#cbd5e1; font-weight:800 }

/* Address pin drop + glow */
.info-item.address .ico{ animation: pinDrop .8s ease .1s backwards, pinGlow 2.2s ease-in-out 1.2s infinite; }
@keyframes pinDrop{ from{ transform: translateY(-16px); opacity:0 } to{ transform:none; opacity:1 } }
@keyframes pinGlow{ 0%,100%{ box-shadow: inset 0 0 0 1px rgba(255,165,0,.35), 0 0 0 0 rgba(255,165,0,.0) } 50%{ box-shadow: inset 0 0 0 1px rgba(255,165,0,.6), 0 0 18px 6px rgba(255,165,0,.18) } }

/* Phone pulse on hover */
.info-item.phone a{ display:inline-block; transition: text-shadow .25s }
.info-item.phone a:hover{ text-shadow: 0 0 14px rgba(255,165,0,.55) }

/* Email typewriter */
.typewriter{ min-height:1.2em; color:#fff; font-weight:900; letter-spacing:.3px; border-right:2px solid rgba(255,255,255,.8); padding-right:4px; white-space:nowrap; overflow:hidden }
.typewriter.done{ border-right-color: transparent }

/* Hours flip reveal */
.flip{ display:inline-block; transform: rotateX(90deg); transform-origin: bottom; opacity:.0; }
.flip.is-in{ animation: flipIn .6s ease forwards }
@keyframes flipIn{ to{ transform: rotateX(0); opacity:1 } }

/* Form card (glass on dark) */
.ct-form .cf{
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius:16px; padding:16px; color:#fff; box-shadow:0 16px 40px rgba(0,0,0,.28);
  display:grid; gap:12px;
}
.row{ display:grid; gap:12px; grid-template-columns:1fr 1fr }
@media (max-width:720px){ .row{ grid-template-columns:1fr } }
.field{ display:grid; gap:6px }
.field span{ font-weight:900; color:#fff; font-size:14px }
.field input, .field select, .field textarea{
  width:100%; border-radius:12px; border:1px solid rgba(255,255,255,.16);
  padding:12px 14px; background:rgba(255,255,255,.04); color:#fff; font:inherit; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease
}
.field input::placeholder, .field textarea::placeholder{ color:#94a3b8 }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: rgba(255,165,0,.65); box-shadow:0 0 0 4px rgba(255,165,0,.18); background:rgba(255,255,255,.06);
}
.err{ color:#fca5a5; font-size:12px; min-height:14px }
.hp{ position:absolute; left:-9999px; opacity:0; pointer-events:none }
.consent{ display:flex; align-items:flex-start; gap:10px; color:#cbd5e1; font-weight:800 }

.btn-submit{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 18px; border-radius:14px; font-weight:900; color:#111;
  background: linear-gradient(90deg, var(--orange2), var(--orange));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 34px rgba(255,165,0,.35);
  overflow:hidden; cursor:pointer;
}
.btn-submit::after{
  content:""; position:absolute; left:-30%; top:0; width:30%; height:100%; transform: skewX(-25deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transition:.4s; opacity:.0;
}
.btn-submit:hover::after{ left:120%; opacity:1 }
.cf-status{ min-height:18px; margin:6px 2px 0; color:#94a3b8; font-weight:800 }

/* ---- Map ---- */
.ct-map{ background: linear-gradient(180deg, #0b0f19, #0a0d17); padding: clamp(40px, 8vh, 60px) 0 }
.map-box{ position:relative; border:1px solid #1b2332; border-radius:16px; overflow:hidden; box-shadow:0 16px 40px rgba(0,0,0,.28) }
.map-box iframe{ width:100%; height:380px; display:block; filter: grayscale(100%) contrast(110%) brightness(70%) }
.map-overlay{ position:absolute; inset:0; background: radial-gradient(60% 60% at 50% 50%, rgba(255,165,0,.06), transparent 60%), linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.35)) }
.map-pin{ position:absolute; left:50%; top:50%; transform: translate(-50%,-58%); filter: drop-shadow(0 0 10px rgba(255,165,0,.55)); animation: pinBounce 1.2s ease .4s both }
.map-pin img{ width:34px; height:34px; object-fit:contain }
@keyframes pinBounce{ 0%{ transform: translate(-50%,-80%); opacity:0 } 60%{ transform: translate(-50%,-50%); opacity:1 } 100%{ transform: translate(-50%,-58%); } }

/* ---- Social ---- */
.ct-social{ background: linear-gradient(180deg, #0a0d17, #0f172a); padding: clamp(40px, 8vh, 60px) 0; text-align:center; color:#fff }
.soc-title{ margin:0 0 10px; font-weight:900; font-size: clamp(24px, 4vw, 34px) }
.soc-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
.soc-btn{
  width:50px; height:50px; border-radius:999px; display:grid; place-items:center;
  background: linear-gradient(90deg, var(--white), var(--orange2)); box-shadow:0 12px 30px rgba(255, 255, 255, 0.3);
  transition: transform .25s, box-shadow .25s; border:1px solid rgba(255,255,255,.08)
}
.soc-btn img{ width:22px; height:22px; object-fit:contain; transition: transform .3s }
.soc-btn:hover{ transform: translateY(-4px); box-shadow:0 20px 50px rgba(248, 248, 247, 0.45) }
.soc-btn:hover img{ transform: rotate(15deg) }

/* ---- Closing above footer ---- */
.ct-closing{ background:#0f172a; color:#fff; padding: clamp(36px, 8vh, 56px) 0; text-align:center }
.glow-divider{
  margin:0 auto 12px; width:0%; height:3px; border-radius:999px;
  background: linear-gradient(90deg, var(--orange), var(--orange2)); box-shadow:0 10px 34px rgba(255,165,0,.45);
}
.glow-divider.is-in{ animation: dividerIn .9s ease forwards }
@keyframes dividerIn{ to{ width: 80% } }
.closing-tagline{ margin:0; color:#e5e7eb; font-weight:800 }

/* ---- Reveals ---- */
[data-anim]{ opacity:0; transform: translateY(12px); transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d,0s) }
[data-anim="left"]{ transform: translateX(-18px) }
[data-anim="right"]{ transform: translateX(18px) }
[data-anim="fade-up"]{ transform: translateY(14px) }
[data-anim].is-in{ opacity:1; transform:none }
[data-anim-item]{ opacity:0; transform: translateY(12px); transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i,0)*100ms) }
[data-anim-item].is-in{ opacity:1; transform:none }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ct-hero::after, .ct-hero__title .w, .particles span, .glow-divider,
  [data-anim], [data-anim-item], .map-pin{
    animation:none !important; transition:none !important; opacity:1 !important; transform:none !important;
  }
}