/* =====================================================================
   VESPERS — Contact (/contact)
   Inherits tokens + shared form styles from main.css. Mobile-first.
   ===================================================================== */

.ct-hero{position:relative; overflow:hidden; isolation:isolate; color:var(--on-dark-1); text-align:center;
  background:radial-gradient(120% 90% at 50% -10%, #2b2f5c 0%, var(--ink-900) 48%, var(--ink-950) 100%);
  padding-top:clamp(118px,15vw,156px); padding-bottom:clamp(44px,6vw,76px);}
.ct-hero-glow{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(46% 40% at 50% 28%, rgba(226,203,148,.26), transparent 64%);}
.ct-hero .hero-arch{bottom:-30%; opacity:.5;}
.ct-hero-inner{position:relative; z-index:2; max-width:60ch; margin-inline:auto;}
.ct-hero h1{color:var(--on-dark-1); font-size:clamp(2.5rem,5.6vw,4rem); line-height:1.04; margin:12px 0 0; text-shadow:0 2px 46px rgba(20,22,46,.55);}
.ct-hero h1 em{font-style:italic; color:var(--gilt-300);}
.ct-hero .lead{color:var(--on-dark-2); margin:16px auto 0; max-width:54ch;}

.ct-body{background:var(--parchment-50);}
.ct-shell{display:grid; grid-template-columns:1fr; gap:clamp(24px,3.4vw,42px); align-items:start;}
@media (min-width:880px){ .ct-shell{grid-template-columns:.92fr 1.08fr;} }

/* channels */
.ct-channels-h{font:600 clamp(1.5rem,2.4vw,1.95rem)/1.15 var(--font-display); color:var(--fg1); margin-bottom:16px;}
.ct-channel{display:flex; align-items:center; gap:15px; padding:16px 18px; margin-bottom:12px; background:var(--surface);
  border:1px solid var(--border-soft); border-radius:14px; box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);}
.ct-channel-med{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:46px; height:52px; border-radius:var(--arch);
  color:var(--accent-strong); background:var(--gilt-100); border:1px solid var(--hairline-gold);}
.ct-channel-txt{flex:1 1 auto; min-width:0;}
.ct-channel-txt b{display:block; font:700 .72rem/1 var(--font-body); letter-spacing:.12em; text-transform:uppercase; color:var(--fg3);}
.ct-channel-txt span{display:block; font:600 1.02rem/1.3 var(--font-display); color:var(--fg1); margin-top:4px; word-break:break-word;}
.ct-channel-go{flex:0 0 auto; color:var(--accent-strong); transition:transform .3s var(--ease);}
.ct-channel--wa{border-color:var(--hairline-gold); background:linear-gradient(180deg,#fff,var(--gilt-100));}
.ct-channel--static{cursor:default;}
@media (hover:hover){
  a.ct-channel:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--hairline-gold);}
  a.ct-channel:hover .ct-channel-go{transform:translateX(4px);}
}
.ct-soc{display:flex; gap:12px; margin-top:18px;}
.ct-soc a{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%;
  color:var(--accent-strong); background:var(--surface); border:1px solid var(--border); transition:all .25s var(--ease);}
@media (hover:hover){ .ct-soc a:hover{background:var(--ink-900); color:var(--gilt-300); border-color:var(--ink-900);} }

/* form card */
.ct-card{position:relative; background:var(--surface); border:1px solid var(--hairline-gold); border-radius:20px;
  padding:clamp(26px,3.6vw,42px); box-shadow:var(--shadow-lg);}
.ct-card::before{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.6); pointer-events:none;}
.ct-card-head{margin-bottom:8px;}
.ct-seal{display:inline-flex; align-items:center; justify-content:center; width:54px; height:60px; border-radius:var(--arch);
  color:var(--accent-strong); background:var(--gilt-100); border:1px solid var(--hairline-gold); margin-bottom:12px;}
.ct-card-head h2{font:600 clamp(1.5rem,2.4vw,2rem)/1.1 var(--font-display); color:var(--fg1);}
.ct-card-head p{font:400 1rem/1.6 var(--font-body); color:var(--fg2); margin-top:8px;}
.ct-grid2{display:grid; grid-template-columns:1fr; gap:0 18px;}
@media (min-width:560px){ .ct-grid2{grid-template-columns:1fr 1fr;} }
.ct-actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:24px;}
/* Block, never flex — a flex container blockifies the inline Privacy Policy link. */
.ct-privacy{display:block; margin-top:16px; font:500 .82rem/1.5 var(--font-body); color:var(--fg3);}
.ct-privacy > vm-icon{vertical-align:-.15em; margin-right:7px; color:var(--accent-strong);}
.prq-opt{font-weight:500; letter-spacing:0; text-transform:none; color:var(--fg3);}

/* success */
.ct-success{text-align:center; background:var(--surface); border:1px solid var(--hairline-gold); border-radius:20px;
  padding:clamp(36px,5vw,56px) clamp(24px,4vw,44px); box-shadow:var(--shadow-lg);}
.ct-success-mark{display:inline-flex; align-items:center; justify-content:center; width:76px; height:76px; border-radius:50%;
  color:var(--accent-strong); background:var(--gilt-100); border:1px solid var(--hairline-gold); margin-bottom:16px;}
.ct-success h2{font:600 clamp(1.7rem,3vw,2.3rem)/1.1 var(--font-display); color:var(--fg1);}
.ct-success p{font:400 1.05rem/1.65 var(--font-body); color:var(--fg2); margin:12px auto 0; max-width:42ch;}
.ct-success-cta{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:22px;}

@media (prefers-reduced-motion:reduce){ .ct-channel{transition:none;} }