/* contact.html — page-only pieces on top of v3-kit.css (2026-09-28)
   · hero: Henry answering the phone inside "ringing" rings + live open badge
   · contact tiles overlapping the hero · restyled form / visit card
   · the confirmation modal + spinner the page's form script relies on */

/* ─── Hero ────────────────────────────────────────────────────────────── */
.ct-hero { padding-bottom: clamp(120px, 12vw, 170px); }
.ct-henry { width: min(100%, 440px); display: grid; place-items: center; }
.ct-henry-frame { position: relative; z-index: 1; width: 78%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 3px solid var(--lime); box-shadow: 0 0 0 12px rgba(185, 242, 74, .12), 0 40px 80px -30px rgba(0, 0, 0, .7); background: #0c2a16; }
.ct-henry-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ct-rings { position: absolute; inset: 11%; pointer-events: none; }
.ct-rings span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(185, 242, 74, .5); opacity: 0; }
html.sv-js .ct-rings span { animation: ctRing 3s ease-out infinite; }
html.sv-js .ct-rings span:nth-child(2) { animation-delay: 1s; }
html.sv-js .ct-rings span:nth-child(3) { animation-delay: 2s; }
@keyframes ctRing { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } }
.ct-henry .sv-chip--1 { left: -6%; top: 14%; z-index: 2; }
.ct-henry .sv-chip--3 { right: -8%; left: auto; bottom: 12%; z-index: 2; }

.ct-open { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); color: #fff; font: 700 14px/1 var(--body); }
.ct-open i { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #9aa89f; }
.ct-open.is-open { background: rgba(185, 242, 74, .14); border-color: rgba(185, 242, 74, .4); }
.ct-open.is-open i { background: var(--lime); }
.ct-open.is-open i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--lime); animation: svPing 2s var(--ease) infinite; }

/* ─── Contact tiles (overlap the hero) ─────────────────────────────────── */
.ct-tiles-sec { position: relative; z-index: 5; margin-top: calc(-1 * clamp(80px, 8vw, 110px)); }
.ct-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ct-tile { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 22px; border-radius: 26px; background: var(--card); border: 1px solid var(--line); color: var(--fg) !important; text-decoration: none !important; box-shadow: 0 30px 60px -36px rgba(7, 19, 11, .55); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s; }
.ct-tile:hover { transform: translateY(-6px); border-color: rgba(15, 162, 74, .45); box-shadow: 0 40px 70px -36px rgba(7, 19, 11, .6); }
.ct-tile-ic { grid-row: span 2; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; background: var(--forest); color: var(--lime); transition: transform .5s var(--ease); }
.ct-tile-ic svg { width: 24px; height: 24px; }
.ct-tile:hover .ct-tile-ic { transform: rotate(-10deg) scale(1.06); }
html.sv-js .ct-ring svg { animation: ctWiggle 3.2s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes ctWiggle { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(-14deg); } 78% { transform: rotate(12deg); } 82% { transform: rotate(-10deg); } 86% { transform: rotate(8deg); } 90% { transform: rotate(0); } }
.ct-tile-l { font: 700 12.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); align-self: end; }
.ct-tile-v { font: 800 17px/1.25 var(--display); letter-spacing: -.01em; align-self: start; margin-top: 6px; overflow-wrap: anywhere; }
.ct-tile[href^="mailto"] .ct-tile-v { font-size: 15px; overflow-wrap: normal; }
.ct-tile-go { grid-row: 1 / span 2; grid-column: 3; color: var(--green); font-weight: 800; transition: transform .3s var(--ease); }
.ct-tile:hover .ct-tile-go { transform: translateX(4px); }
.ct-tile--go { background: var(--lime); border-color: var(--lime); }
.ct-tile--go .ct-tile-l { color: rgba(5, 32, 13, .7); }
.ct-tile--go .ct-tile-v, .ct-tile--go .ct-tile-go { color: var(--forest); }
[data-theme="dark"] .ct-tile-ic { background: rgba(185, 242, 74, .12); }
[data-theme="dark"] .ct-tile--go .ct-tile-ic { background: var(--forest); }

/* ─── Form + visit ────────────────────────────────────────────────────── */
.ct-main-sec { padding-top: clamp(56px, 7vw, 90px); }
.ct-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px; align-items: start; }
.sv--contact .ct-card { position: relative; padding: clamp(26px, 3.4vw, 44px); border-radius: 32px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 40px 80px -50px rgba(7, 19, 11, .5); }
.sv--contact form.ct-card::before { content: ""; position: absolute; left: 32px; right: 32px; top: -1px; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--green), var(--lime)); }
html body.eco-chromed main.sv .ct-card h2 { font-size: clamp(26px, 2.6vw, 36px) !important; line-height: 1.05 !important; letter-spacing: -.035em !important; font-weight: 900 !important; }
.ct-card-sub { margin: 10px 0 26px !important; font-size: 16px; line-height: 1.6; color: var(--fg-2); }
.ct-hp { position: absolute !important; left: -9999px !important; width: 0 !important; height: 0 !important; overflow: hidden !important; }
.ct-row { margin-bottom: 16px; }
.ct-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ct-field label { display: block; margin-bottom: 7px; font: 700 14px/1.2 var(--body); color: var(--fg); }
.ct-field .req { color: #dc2626; }
html body.eco-chromed main.sv .ct-field :is(input, textarea) { width: 100%; min-height: 54px; padding: 14px 16px; border-radius: 16px !important; border: 1.5px solid var(--line) !important; background: var(--bg-2); color: var(--fg); font: 500 16px/1.4 var(--body) !important; transition: border-color .2s, box-shadow .2s, background .2s !important; }
html body.eco-chromed main.sv .ct-field textarea { min-height: 150px; resize: vertical; }
html body.eco-chromed main.sv .ct-field :is(input, textarea):focus { background: var(--card); border-color: var(--green) !important; box-shadow: 0 0 0 5px rgba(15, 162, 74, .14) !important; outline: 0 !important; }
.ct-captcha-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ct-captcha-img-wrap { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 16px; background: var(--bg-2); border: 1.5px solid var(--line); }
.ct-captcha-img { display: block; height: 42px; width: auto; border-radius: 10px; }
.ct-captcha-refresh { width: 42px; height: 42px; border: 0; border-radius: 12px; background: var(--forest); color: var(--lime); font-size: 20px; cursor: pointer; transition: transform .4s var(--ease); }
.ct-captcha-refresh:hover { transform: rotate(180deg); }
.ct-captcha-row input { flex: 1 1 180px; }
#cformErrors { margin-top: 14px; padding: 12px 16px; border-radius: 14px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 14px; font-weight: 500; }
[data-theme="dark"] #cformErrors { background: rgba(220, 38, 38, .1); border-color: rgba(220, 38, 38, .35); color: #fca5a5; }
.ct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 22px; }
.ct-submit { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 0 30px; border: 0; border-radius: 999px; background: var(--lime); color: var(--forest); font: 800 17px/1 var(--body); cursor: pointer; box-shadow: 0 18px 36px -16px rgba(185, 242, 74, .95); transition: transform .3s var(--ease), box-shadow .3s; }
.ct-submit svg { width: 18px; height: 18px; }
.ct-submit:hover { transform: translateY(-3px); }
.ct-submit:disabled { opacity: .7; cursor: progress; transform: none; }
.ct-submit::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%); transform: translateX(-120%); }
.ct-submit:hover::after { transform: translateX(120%); transition: transform .8s var(--ease); }
.ct-status { font-size: 14px; color: var(--muted); }
.ct-foot { margin-top: 16px !important; font-size: 13px; color: var(--muted); }

.sv--contact aside.ct-card { background: var(--forest); color: #fff; border-color: transparent; background-image: radial-gradient(80% 50% at 100% 0%, rgba(15, 162, 74, .4), transparent 70%); }
[data-theme="dark"] .sv--contact aside.ct-card { background-color: #030f07; border-color: rgba(185, 242, 74, .16); }
.sv--contact aside.ct-card .ct-card-sub { color: rgba(255, 255, 255, .75); }
.ct-visit-info dl { display: grid; gap: 12px; margin: 0; }
.ct-visit-info dl > div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.ct-visit-info dt { font: 700 12.5px/1.5 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.ct-visit-info dd { margin: 0; font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, .88); }
.ct-map { margin-top: 18px; overflow: hidden; border-radius: 22px; border: 1px solid rgba(185, 242, 74, .25); aspect-ratio: 16 / 11; }
.ct-map iframe { display: block; width: 100%; height: 100%; border: 0; filter: saturate(.9); }
.ct-visit-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
html body.eco-chromed main.sv .ct-visit-actions .btn { flex: 1 1 100%; min-height: 52px !important; border-radius: 999px !important; white-space: normal; text-align: center; }
html body.eco-chromed main.sv .ct-visit-actions .btn-bright { background: var(--lime) !important; color: var(--forest) !important; box-shadow: none !important; }
html body.eco-chromed main.sv .ct-visit-actions .btn-outline { background: rgba(255, 255, 255, .08) !important; color: #fff !important; border: 1.5px solid rgba(255, 255, 255, .28) !important; }

/* ─── Confirmation modal (driven by the page's inline form script) ────── */
#contactModal .pm-box { background: #fff; border-radius: 28px; padding: 38px 32px; max-width: 440px; width: 100%; text-align: center; box-shadow: 0 30px 80px rgba(5, 32, 13, .35); animation: ctModalIn .3s ease-out; font-family: 'DM Sans', system-ui, sans-serif; }
#modalIcon { font-size: 56px; margin-bottom: 8px; line-height: 1; }
#modalTitle { font: 900 24px/1.15 'Outfit', system-ui, sans-serif; letter-spacing: -.02em; color: #05200d; margin: 8px 0; }
#modalMsg { color: #3d4d42; font-size: 15.5px; line-height: 1.55; margin: 0 0 22px; }
#modalCloseBtn { background: #b9f24a; color: #05200d; font: 800 16px/1 'DM Sans', system-ui, sans-serif; padding: 15px 32px; border-radius: 999px; border: none; cursor: pointer; transition: transform .2s; }
#modalCloseBtn:hover { transform: translateY(-2px); }
[data-theme="dark"] #contactModal .pm-box { background: #0f2016; border: 1px solid #1c3524; }
[data-theme="dark"] #modalTitle { color: #b9f24a; }
[data-theme="dark"] #modalMsg { color: #b8c8bb; }
@keyframes ctModalIn { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ctModalShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }
@keyframes ctSpin { to { transform: rotate(360deg); } }

@media (max-width: 1080px) { .ct-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 980px) {
  .ct-grid { grid-template-columns: 1fr; }
  .ct-henry { width: min(100%, 340px); }
}
@media (max-width: 640px) {
  .ct-tiles { grid-template-columns: 1fr; gap: 10px; }
  .ct-row-2 { grid-template-columns: 1fr; }
  .ct-visit-info dl > div { grid-template-columns: 1fr; gap: 4px; }
  .ct-submit { width: 100%; }
}