/* Contact page, rebuilt to match the premium pages (2026-10-20).

   Hero: copy and three ways to reach us on the left; the gold branch and a
   ring on the right, shadow leaves behind the copy.

   Below: the message form in a card beside a card with the phone, the
   address and the next steps; line leaves and a ring at the edges. */

/* ------------------------------------------------------------------------
   Hero */
.cth { position: relative; }
.cth-leaf {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -3rem;
  width: min(30vw, 27rem);
  aspect-ratio: 840 / 1012;
  transform: translateY(-50%) scaleX(-1);
  pointer-events: none;
  opacity: 0.9;
  background: no-repeat center / contain;
  background-image: url("../img/loc-hero-left-1x.webp");
  background-image: image-set(url("../img/loc-hero-left-1x.avif") type("image/avif") 1x, url("../img/loc-hero-left-2x.avif") type("image/avif") 2x, url("../img/loc-hero-left-1x.webp") type("image/webp") 1x, url("../img/loc-hero-left-2x.webp") type("image/webp") 2x);
}
.cth-ring {
  position: absolute;
  z-index: 0;
  right: -10rem;
  top: -26rem;
  width: 44rem;
  aspect-ratio: 1;
  border: 1.5px solid rgba(216, 184, 144, 0.65);
  border-radius: 50%;
  pointer-events: none;
}
.cth-shadow {
  position: absolute;
  z-index: 0;
  left: -4rem;
  top: 0.5rem;
  width: 20rem;
  aspect-ratio: 1104 / 1330;
  pointer-events: none;
  background: rgba(2, 8, 20, 0.42);
  -webkit-mask: url("../img/loc-hero-left-2x.webp") no-repeat center / contain;
  mask: url("../img/loc-hero-left-2x.webp") no-repeat center / contain;
}

.page-hero .container.cth-inner {
  position: relative;
  z-index: 1;
  max-width: none;
  padding-block: 4.25rem 4.5rem;
  padding-inline: clamp(1.5rem, 16vw - 5rem, 16rem);
}
.page-hero .cth-inner h1 { max-width: none; margin: var(--sp-3) 0 var(--sp-4); font-size: clamp(2.6rem, 4.4vw, 4.5rem); line-height: 1.05; }
.cth-em { display: block; font-style: italic; font-weight: 400; color: var(--champagne); }
.page-hero .cth-inner p { max-width: 36rem; margin: 0; line-height: 1.5; }
.page-hero .cth-inner p a { color: var(--champagne); font-weight: 600; text-underline-offset: 0.2em; white-space: nowrap; }

.cth-ways { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) 0; }
.cth-ways li { padding-right: var(--sp-6); }
.cth-ways li + li { padding-left: var(--sp-6); border-left: 1px solid rgba(216, 184, 144, 0.35); }
.cth-ways a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 2.75rem;
  border-radius: 999px;
  font-size: var(--fs-0);
  line-height: 1.35;
  color: var(--champagne);
  text-decoration: none;
}
.cth-ways a:hover span:last-child { text-decoration: underline; text-underline-offset: 0.2em; }
.cth-ways a:focus-visible { outline: 3px solid var(--champagne); outline-offset: 4px; }
.cth-ring-ico { flex: none; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; border: 1.5px solid var(--champagne); color: var(--champagne); transition: background-color var(--dur) var(--ease-out-expo); }
.cth-ring-ico svg { width: 1.4rem; height: 1.4rem; }
.cth-ways a:hover .cth-ring-ico { background: rgba(216, 184, 144, 0.14); }

@media (max-width: 79.9375rem) {
  .cth-leaf { width: 16rem; right: -5rem; opacity: 0.35; }
  .cth-ring { display: none; }
}
@media (max-width: 47.9375rem) {
  .cth-leaf { width: 11rem; opacity: 0.3; }
  .cth-shadow { width: 13rem; }
  .page-hero .container.cth-inner { padding-block: 3.5rem; }
  .cth-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cth-ways li, .cth-ways li + li { padding: 0 var(--sp-1); }
  .cth-ways a { flex-direction: column; text-align: center; }
}
@media (min-width: 48rem) {
  .cth-br, .cth-us { display: none; }
}
@media (max-width: 47.9375rem) {
  .cth-num { display: none; }
}

/* ------------------------------------------------------------------------
   Form and details */
.ctm { position: relative; }
.ctm-leaf { position: absolute; z-index: 0; pointer-events: none; opacity: 0.6; background: no-repeat center / contain; }
.ctm-leaf-left {
  left: -3rem;
  top: 50%;
  width: 14rem;
  aspect-ratio: 680 / 1178;
  transform: translateY(-50%);
  background-image: url("../img/level-1-left-background-1x.webp");
  background-image: image-set(url("../img/level-1-left-background-1x.avif") type("image/avif") 1x, url("../img/level-1-left-background-2x.avif") type("image/avif") 2x, url("../img/level-1-left-background-1x.webp") type("image/webp") 1x, url("../img/level-1-left-background-2x.webp") type("image/webp") 2x);
}
.ctm-leaf-right {
  right: -1.5rem;
  bottom: 1rem;
  width: 10rem;
  aspect-ratio: 600 / 955;
  background-image: url("../img/getting-started-background-1x.webp");
  background-image: image-set(url("../img/getting-started-background-1x.avif") type("image/avif") 1x, url("../img/getting-started-background-2x.avif") type("image/avif") 2x, url("../img/getting-started-background-1x.webp") type("image/webp") 1x, url("../img/getting-started-background-2x.webp") type("image/webp") 2x);
}
.ctm-ring { position: absolute; z-index: 0; right: -30rem; top: -8rem; width: 44rem; aspect-ratio: 1; border: 1.5px solid rgba(168, 134, 63, 0.5); border-radius: 50%; pointer-events: none; }

.ctm .container.ctm-inner {
  position: relative;
  z-index: 1;
  max-width: none;
  padding-inline: clamp(1.5rem, 16vw - 5rem, 16rem) clamp(1.5rem, 5vw, 6rem);
  display: grid;
  gap: var(--sp-7);
  align-items: start;
}
@media (min-width: 64rem) {
  .ctm .container.ctm-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 2.5rem; }
}
.ctm-chip { grid-column: 1 / -1; margin: 0 0 calc(var(--sp-2) - var(--sp-7)); }
@media (min-width: 64rem) { .ctm-chip { margin-bottom: calc(var(--sp-2) - 2.5rem); } }
.ct-form label.is-req::after { content: " *"; color: #8C2B2B; }

.ct-card {
  position: relative;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(16, 27, 55, 0.07);
  border-radius: 1.25rem;
  box-shadow: 0 12px 34px rgba(16, 27, 55, 0.08);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.ct-kicker { margin: 0; font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.3; color: var(--accent-strong); }

/* The form card */
.ct-form-card { overflow: hidden; padding: 2.25rem 2.25rem 0; }
.ct-form-card > :not(.ct-form-leaf) { position: relative; z-index: 1; }
.ct-form-leaf {
  position: absolute;
  top: 0;
  right: 0;
  width: 10rem;
  aspect-ratio: 680 / 766;
  pointer-events: none;
  opacity: 0.8;
  background: no-repeat right top / contain;
  background-image: url("../img/level-1-right-background-1x.webp");
  background-image: image-set(url("../img/level-1-right-background-1x.avif") type("image/avif") 1x, url("../img/level-1-right-background-2x.avif") type("image/avif") 2x, url("../img/level-1-right-background-1x.webp") type("image/webp") 1x, url("../img/level-1-right-background-2x.webp") type("image/webp") 2x);
}
.ct-form-head { margin-bottom: var(--sp-5); padding-right: 6rem; }
.ct-form-head h2 { margin: var(--sp-2) 0 var(--sp-2); font-size: clamp(1.75rem, 2.4vw, 2.25rem); line-height: 1.15; }
.ct-req { margin: 0; font-size: var(--fs-0); color: var(--slate); }

.ct-form.form { max-width: none; gap: var(--sp-5); }
@media (min-width: 40rem) {
  .ct-form.form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-form .ct-span-2, .ct-form .ct-form-foot, .ct-form .form-error { grid-column: 1 / -1; }
}
.ct-form .form-field { align-content: start; }
.ct-form .form-field input,
.ct-form .form-field textarea {
  min-height: 3.25rem;
  padding: var(--sp-3) var(--sp-4);
  background: var(--white);
  border: 1.5px solid rgba(16, 27, 55, 0.16);
  border-radius: 0.75rem;
  box-shadow: inset 0 1px 2px rgba(16, 27, 55, 0.04);
  transition: border-color var(--dur) var(--ease-out-expo), box-shadow var(--dur) var(--ease-out-expo);
}
.ct-form .form-field textarea { min-height: 8rem; resize: vertical; }
.ct-form .form-field input:hover,
.ct-form .form-field textarea:hover { border-color: rgba(168, 134, 63, 0.6); }
.ct-form .form-field input:focus-visible,
.ct-form .form-field textarea:focus-visible { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(168, 134, 63, 0.35); }

.ct-form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin: var(--sp-2) -2.25rem 0;
  padding: var(--sp-5) 2.25rem;
  border-top: 1px solid rgba(16, 27, 55, 0.08);
  background: rgba(247, 243, 238, 0.7);
}
.ct-form-call { display: flex; align-items: center; gap: var(--sp-3); margin: 0; font-size: var(--fs-0); color: var(--text-strong); }
.ct-form-call a { font-weight: 600; color: inherit; text-decoration-color: var(--brass); text-underline-offset: 0.2em; white-space: nowrap; }
.ct-ico-sm { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #EEE7DC; color: var(--ink); }
.ct-ico-sm svg { width: 1.25rem; height: 1.25rem; }
.ct-submit { min-height: 3.25rem; padding-inline: var(--sp-6); box-shadow: 0 8px 18px rgba(8, 24, 48, 0.18); }
.ct-submit::after {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 6 6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 6 6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* The thank you, in the card, after sending */
.ct-form-card:has(.form-sent) .ct-form-head .ct-req { display: none; }
.ct-form-card .form-sent { position: relative; margin-bottom: 2.25rem; padding: var(--sp-2) 0 0 4rem; border: 0; background: none; }
.ct-form-card .form-sent::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--brass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 1.5rem;
}
.ct-form-card .form-sent h3 { font-family: var(--font-display); font-size: var(--fs-2); font-weight: 600; color: var(--text-strong); }
.ct-form-card .form-sent a { white-space: nowrap; }

/* The details card */
.ct-info { padding: 2rem 2rem 1.75rem; }
.ct-kicker-rule { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.ct-kicker-rule::after { content: ""; flex: 1 1 auto; min-width: 2rem; height: 1px; background: rgba(168, 134, 63, 0.55); }
.ct-info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ct-info-list li { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-4) 0; font-size: var(--fs-0); line-height: 1.45; color: var(--text); }
.ct-info-list li:first-child { padding-top: 0; }
.ct-info-list li + li { border-top: 1px solid rgba(16, 27, 55, 0.08); }
.ct-info-list strong { display: block; margin-bottom: 0.15rem; font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600; color: var(--text-strong); }
.ct-info-list a { font-weight: 600; color: var(--text-strong); text-decoration-color: var(--brass); text-underline-offset: 0.2em; }
.ct-sub { display: block; margin-top: var(--sp-1); color: var(--slate); }
.ct-ico { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 1.5px solid var(--brass); background: rgba(244, 230, 204, 0.5); color: #8E6F30; }
.ct-ico svg { width: 1.4rem; height: 1.4rem; }
.ct-note {
  margin: var(--sp-4) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(168, 134, 63, 0.4);
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.35;
  color: #7C6128; /* deepened brass, AA on the card */
  text-wrap: balance;
}

@media (max-width: 89.9375rem) {
  .ct-form-foot { flex-direction: column; align-items: stretch; }
  .ct-submit { width: 100%; }
}
@media (max-width: 71.9375rem) {
  .ctm-ring, .ctm-leaf-right { display: none; }
  .ctm-leaf-left { width: 9rem; opacity: 0.4; }
}
@media (max-width: 47.9375rem) {
  .ctm-leaf-left { display: none; }
  .ct-form-card { padding: 1.5rem 1.25rem 0; }
  .ct-form-head { padding-right: 3rem; }
  .ct-form-leaf { width: 6rem; opacity: 0.6; }
  .ct-form-foot { margin-inline: -1.25rem; padding: var(--sp-5) 1.25rem; }
  .ct-info { padding: 1.5rem 1.25rem; }
}
#contact-form { scroll-margin-top: 7rem; }