/* Contact page.
   Loaded only on the contact page, so the rest of the site does not carry it.
   Every colour comes from the tokens in site.css; nothing is hardcoded. */

/* The hero is a header, not an experience. Shorter than the article hero so the
   phone number and the form are both above the fold on a laptop. */
.ct-hero .media{height:min(34vh,340px);min-height:230px}
.ct-hero h1{max-width:20ch}
.ct-sub{margin-top:12px;max-width:52ch;color:#CDBCEC;font-size:.98rem}

.ct-wrap{padding:46px 0 10px}
.ct-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:46px;align-items:start}
.ct-grid > *{min-width:0}

.ct-main h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:0}
.ct-note{color:var(--mist-2);max-width:58ch;margin:10px 0 24px}

/* The GoHighLevel embed. The helper script sets the real height once the form is
   measured; until then the inline height attribute reserves the space, which is why
   there is no height here to fight with it. */
.ghl-form{
  display:block;width:100%;border:1px solid var(--line);border-radius:var(--r);
  background:var(--night);box-shadow:var(--shadow);
}

/* Administrator-only notice where an unconfigured form would be. */
.ghl-hint{
  padding:14px 16px;border:1px dashed var(--line-gold);border-radius:var(--r);
  background:var(--night-2);color:var(--mist-2);font-size:.86rem;
}
.ghl-hint b{color:var(--mist);margin-right:.4em}

/* Fallback shown to guests while the form slot is empty. Deliberately a complete
   contact route rather than a placeholder. */
.ct-direct{
  margin-top:18px;padding:28px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--night-2);
}
.ct-direct p{margin:16px 0 0;color:var(--mist-2);font-size:.9rem}
.ct-direct-btns{display:flex;flex-wrap:wrap;gap:12px}

/* No form connected: nothing belongs in a narrow second column, so the page becomes
   one column and the two rail cards sit side by side. Without this the main column
   is a tall empty space next to a full rail, which reads as a broken page rather
   than a page whose form has not been wired up yet. */
.ct-grid-noform{grid-template-columns:1fr;gap:26px}
.ct-grid-noform .ct-rail{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.ct-grid-noform .ct-card + .ct-card{margin-top:0}

/* Right-hand rail. */
.ct-card{
  padding:26px;border:1px solid var(--line-gold);border-radius:var(--r);
  background:var(--night);box-shadow:var(--shadow);
}
.ct-card + .ct-card{margin-top:20px}
.ct-card hr{border:0;border-top:1px solid var(--line-2);margin:22px 0}
.ct-card .kicker{margin:0 0 8px}
.ct-card p{margin:0;color:var(--mist-2);font-size:.92rem}

.ct-card-quiet{background:var(--night-2);box-shadow:none}

/* The phone number is the primary action on this page, so it is set as display type
   and given a tap target well over the 44px minimum. */
.ct-phone{
  display:inline-flex;align-items:center;min-height:48px;
  font-family:var(--serif);font-size:clamp(1.5rem,3vw,1.85rem);font-weight:600;
  color:var(--magic-deep);text-decoration:none;letter-spacing:.01em;
}
.ct-phone:hover{color:var(--magic)}
.ct-hours{margin-top:2px !important;font-size:.84rem !important;color:var(--mist-3) !important}

.ct-email{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--magic-deep);text-decoration:none;font-weight:600;font-size:.95rem;
  word-break:break-word;
}
.ct-email:hover{color:var(--magic);text-decoration:underline}

.ct-areas{color:var(--mist) !important;font-weight:600}
.ct-areas-note{margin-top:6px !important;font-size:.82rem !important;color:var(--mist-3) !important}

/* Deflection grid. */
.ct-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
.ct-quick-cell{
  display:block;padding:24px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--night);text-decoration:none;transition:.22s;
}
.ct-quick-cell:hover{border-color:var(--gold-deep);transform:translateY(-3px);box-shadow:var(--shadow)}
.ct-quick-cell h3{margin:0 0 8px;font-size:1.02rem;color:var(--mist)}
.ct-quick-cell p{margin:0;font-size:.86rem;color:var(--mist-2);line-height:1.55}

@media(max-width:1080px){
  .ct-grid{grid-template-columns:1fr;gap:34px}
  .ct-quick{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:820px){
  .ct-grid-noform .ct-rail{grid-template-columns:1fr;gap:0}
  .ct-grid-noform .ct-card + .ct-card{margin-top:20px}
}

@media(max-width:640px){
  .ct-wrap{padding:32px 0 6px}
  .ct-quick{grid-template-columns:1fr;gap:14px}
  .ct-direct{padding:22px}
  .ct-direct-btns .btn{flex:1 1 100%}
  .ct-card{padding:22px}
}