/* ================================================================
   Tuesdays — CONTACT page styles
   Shared tokens/nav/footer/buttons/crumb live in shared.css.

   Design intent: this page has almost no content (a phone, an email,
   a 4-field form) so the boldness is spent in ONE place — the ambient
   canvas panel in the hero. Everything else (cards, form) stays quiet
   and disciplined so the two real contact facts and the form don't
   compete with decoration. No second dark CTA band — the form IS
   the close.
   ================================================================ */

:root{
  --ct-sand:#F3E5B1; --ct-sage:#E6EEE5; --ct-lav:#EAE4EE; --ct-sky:#DFEAF1;
}

/* ---------- HERO ---------- */
.ct-hero{padding-top:clamp(120px,14vw,170px);padding-bottom:clamp(64px,8vw,100px)}
.ct-hero-grid{margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:start}

.ct-hero-copy h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.08;letter-spacing:-.02em;max-width:15ch}
.ct-hero-copy .sub{margin-top:22px;max-width:48ch;font-size:1.08rem;line-height:1.6;color:var(--ink-soft)}

/* ---------- CONTACT CARDS (copy-to-clipboard) ---------- */
.ct-cards{margin-top:38px;display:flex;flex-direction:column;gap:14px;max-width:440px}
.ct-card{
  display:flex;align-items:center;gap:16px;width:100%;
  padding:18px 20px;border-radius:18px;background:#fff;border:1px solid var(--line);
  font:inherit;color:inherit;text-align:left;cursor:pointer;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.ct-card:hover{transform:translateY(-3px);box-shadow:0 22px 44px -28px rgba(22,24,29,.28);border-color:transparent}
.ct-card:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}

.ct-card-icon{position:relative;flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--accent-tint);display:flex;align-items:center;justify-content:center;transition:background .3s var(--ease)}
.ct-card-icon svg{position:absolute;width:18px;height:18px;fill:none;stroke:var(--accent);stroke-width:1.6;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.ct-card-icon .ct-check{opacity:0;transform:scale(.5);stroke:#1c8a52}
.ct-card.is-copied .ct-card-icon{background:#E4F3E9}
.ct-card.is-copied .ct-card-icon svg:not(.ct-check){opacity:0;transform:scale(.5)}
.ct-card.is-copied .ct-card-icon .ct-check{opacity:1;transform:scale(1)}

.ct-card-body{display:flex;flex-direction:column;gap:2px}
.ct-card-label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.ct-card-value{font-family:var(--serif);font-size:1.08rem;color:var(--ink)}
.ct-card-hint{margin-left:auto;flex:0 0 auto;font-family:var(--mono);font-size:11px;color:var(--ink-faint);opacity:0;transition:opacity .3s var(--ease)}
.ct-card:hover .ct-card-hint,.ct-card:focus-visible .ct-card-hint{opacity:1}

/* ---------- VISUAL PANEL (the one bold, ambient moment) ---------- */
.ct-visual{position:relative;aspect-ratio:1/1;max-width:440px;margin:0 auto;border-radius:32px;overflow:hidden;
  background:linear-gradient(135deg,var(--ct-sky),var(--ct-lav) 45%,var(--ct-sand) 100%)}
.ct-visual canvas{position:absolute;inset:0;width:100%;height:100%}
@media(max-width:900px){
  .ct-hero-grid{grid-template-columns:1fr}
  .ct-visual{order:-1;max-width:340px}
}

/* ---------- TOAST (copy confirmation) ---------- */
.ct-toast{
  position:fixed;left:50%;bottom:28px;z-index:80;
  transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:var(--ink);color:var(--bg);font-family:var(--mono);font-size:12px;letter-spacing:.05em;
  padding:12px 20px;border-radius:100px;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.ct-toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- FORM ---------- */
.ct-form-section{padding-top:0}
.ct-form-wrap{width:100%;background:var(--paper-2);border-radius:28px;padding:clamp(28px,4vw,44px)}

.ct-form-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:32px}
.ct-form-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.01em}
.ct-progress{width:96px;height:3px;flex:0 0 auto;background:var(--line);border-radius:100px;overflow:hidden}
.ct-progress span{display:block;height:100%;width:0%;background:var(--accent);border-radius:100px;transition:width .4s var(--ease)}

.ct-form{display:flex;flex-direction:column;gap:22px}
.ct-field{position:relative}
.ct-field input{
  width:100%;background:none;border:none;border-bottom:1.5px solid var(--line);
  padding:14px 2px 12px;font-family:var(--sans);font-size:1.02rem;color:var(--ink);
}
.ct-field input:focus{outline:none}
.ct-field label{
  position:absolute;left:2px;top:14px;font-family:var(--sans);font-size:1.02rem;color:var(--ink-faint);
  pointer-events:none;transform-origin:left top;
  transition:transform .25s var(--ease),color .25s var(--ease);
}
.ct-field input:focus + label,
.ct-field input:not(:placeholder-shown) + label{
  transform:translateY(-22px) scale(.78);color:var(--accent);
}
.ct-field::after{content:'';position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--accent);transition:width .35s var(--ease)}
.ct-field:focus-within::after{width:100%}

.ct-submit{align-self:flex-start;margin-top:6px}
.ct-success{margin-top:4px;font-size:.95rem;color:var(--ink-soft);max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--ease),opacity .5s var(--ease)}
.ct-success.show{max-height:60px;opacity:1;margin-top:14px}
.ct-form.is-sent .ct-field,.ct-form.is-sent .ct-submit{opacity:.45;pointer-events:none}

@media(prefers-reduced-motion:reduce){
  .ct-card,.ct-card-icon svg,.ct-toast,.ct-field label,.ct-field::after,.ct-progress span{transition:none}
}

/* textarea field (message) — mirror the input styling */
.ct-field textarea{
  width:100%;background:none;border:none;border-bottom:1.5px solid var(--line);
  padding:14px 2px 12px;font-family:var(--sans);font-size:1.02rem;color:var(--ink);
  resize:vertical;min-height:52px;line-height:1.5;
}
.ct-field textarea:focus{outline:none}
.ct-field textarea:focus + label,
.ct-field textarea:not(:placeholder-shown) + label{transform:translateY(-22px) scale(.78);color:var(--accent)}
.ct-field-msg label{top:14px}

/* error message (FormSubmit failure) */
.ct-error{margin-top:4px;font-size:.95rem;color:#b3261e;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--ease),opacity .5s var(--ease)}
.ct-error.show{max-height:60px;opacity:1;margin-top:14px}