/* Contact page (owner: pages).
   Hero on sand (copy left, the three steps right), the form on cream with the email preview beside it
   (sticky on desktop), the contact details on ink, then the shared FAQ (sand). No free call anywhere. */

/* ---------- Hero: sand ---------- */
.chero {
  position: relative; overflow: hidden; overflow: clip;
  padding: var(--hero-top) var(--gutter) clamp(80px, 9vw, 120px);
  background: var(--sand); color: var(--ink);
}
.chero__bloom {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(45% 55% at 78% 55%, rgba(215, 55, 43, .13), transparent 70%);
}
.js .chero__bloom { animation: cFade .6s var(--ease) both; }
@keyframes cFade { from { opacity: 0; } }

.chero__grid {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: clamp(48px, 6.4vw, 104px); row-gap: 48px; align-items: end;
}
.chero__copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.chero__copy .eyebrow { margin-bottom: 22px; }
.chero__title { font-size: clamp(42px, 5.6vw, 84px); font-weight: 500; line-height: 1; letter-spacing: -.048em; color: var(--ink); text-wrap: balance; }
.chero__title .serif { letter-spacing: -.02em; }
.chero__lede { max-width: 32em; margin-top: 26px; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.6; color: var(--body-on-light); text-wrap: pretty; }
.chero__chosen {
  display: flex; align-items: flex-start; gap: 12px; max-width: 34em; margin-top: 20px; padding: 14px 18px;
  border-radius: var(--r-sm); background: var(--paper); border: 1px solid rgba(215, 55, 43, .3);
  font-size: 16px; line-height: 1.5; color: var(--ink);
}
.chero__chosen[hidden] { display: none; }
.chero__chosen b { font-weight: 600; }
.chero__tick {
  flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%;
  background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.chero__cta { margin-top: 32px; }
.js .chero__lede { animation: fadeUp 1s var(--ease) .5s both; }
.js .chero__chosen { animation: fadeUp 1s var(--ease) .6s both; }
.js .chero__cta { animation: fadeUp 1s var(--ease) .7s backwards, spin 3s linear infinite; }

/* The three steps: a vertical rail of light cards, the last one red */
.csteps { position: relative; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.csteps::before {
  content: ''; position: absolute; left: 37px; top: 30px; bottom: 30px; width: 1px;
  background: linear-gradient(var(--line-l2), rgba(215, 55, 43, .55));
}
.cstep {
  position: relative; display: flex; align-items: flex-start; gap: 18px; padding: 20px 22px 22px 18px;
  border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--line-l); box-shadow: var(--sh-card-l);
}
.js .cstep { animation: fadeUp .9s var(--ease) calc(.45s + var(--i, 0) * 110ms) both; }
.cstep__n {
  flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--sand); font: 500 12px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .06em; color: var(--red-deep);
}
.cstep__t { font-size: 19px; font-weight: 500; line-height: 1.25; letter-spacing: -.02em; }
.cstep__d { margin-top: 6px; font-size: 15.5px; line-height: 1.55; color: var(--body-on-light); text-wrap: pretty; }
.cstep--red { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 24px 50px -28px rgba(184, 41, 31, .8); }
.cstep--red .cstep__n { background: rgba(255, 255, 255, .16); color: #fff; }
.cstep--red .cstep__d { color: #fff; }

/* ---------- The form: cream ---------- */
.cform { padding: var(--section-y) var(--gutter); background: var(--cream); color: var(--ink); }
.cform__wrap { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); }
.cform .sec-head__aside { color: var(--body-on-light); }
.cform__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: start; }

.cf { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.cf__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
.cf__field { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cf__label { display: block; padding: 0; font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; color: var(--ink); }
.cf__opt { margin-left: 6px; font: 500 11px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--label-on-light); }
.cf__hint { margin-top: -4px; font-size: 14.5px; line-height: 1.5; color: var(--body-on-light); }
.cf__input {
  width: 100%; min-height: 52px; padding: 13px 16px; border-radius: var(--r-sm);
  border: 1px solid var(--line-l2); background: var(--paper); color: var(--ink);
  font: 400 16px/1.5 Geist, system-ui, sans-serif; letter-spacing: -.005em;
  box-shadow: inset 0 1px 2px rgba(20, 17, 16, .05);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.cf__input::placeholder { color: #8a8077; }
.cf__area { min-height: 120px; resize: vertical; }
.cf__input:hover { border-color: rgba(20, 17, 16, .3); }
.cf__input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 4px rgba(215, 55, 43, .16); }
.cf.is-tried .cf__input:invalid { border-color: var(--red-deep); }

/* Which way: four radio cards */
.cf__ways { margin: 0; padding: 0; border: 0; min-width: 0; }
.cf__ways legend { margin-bottom: 12px; }
.cf__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.way { position: relative; display: flex; cursor: pointer; }
.way__in { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.way__box {
  position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%; min-height: 44px; padding: 18px 18px 20px 52px;
  border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--line-l2);
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.way__dot {
  position: absolute; left: 18px; top: 20px; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid rgba(20, 17, 16, .35); background: #fff;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.way__t { font-size: 18px; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.way__t .serif { font-size: 1.1em; color: var(--red-deep); }
.way__d { font-size: 14.5px; line-height: 1.5; color: var(--body-on-light); text-wrap: pretty; }
.way:hover .way__box { border-color: rgba(20, 17, 16, .32); }
.way__in:checked + .way__box { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 18px 36px -26px rgba(184, 41, 31, .6); }
.way__in:checked + .way__box .way__dot { border-color: var(--red); box-shadow: inset 0 0 0 5px var(--red); }
.way__in:focus-visible + .way__box { outline: 2px solid var(--red); outline-offset: 3px; }

/* Send */
.cf__send { display: flex; align-items: center; gap: 18px 28px; flex-wrap: wrap; padding-top: 6px; }
.cf__btn { border: 0; cursor: pointer; }
.cf__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.cf__note { flex: 1 1 260px; max-width: 34em; font-size: 14.5px; line-height: 1.55; color: var(--body-on-light); }
.cf__mail { color: var(--ink); font-weight: 600; border-bottom: 1.5px solid var(--red); overflow-wrap: anywhere; }
.cf__mail:hover { color: var(--red-deep); }
.cf__status {
  display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap;
  padding: 16px 18px; border-radius: var(--r-sm); background: var(--paper); border: 1px solid var(--line-l2);
  font-size: 15px; line-height: 1.5; color: var(--ink);
}
.cf__status[hidden] { display: none; }
.cf__status p { flex: 1 1 280px; }
.cf__copy {
  min-height: 44px; padding: 10px 18px; border-radius: var(--r-pill); border: 1px solid var(--ink);
  background: transparent; font-size: 14.5px; font-weight: 600; cursor: pointer;
  transition: background-color var(--dur-1), color var(--dur-1);
}
.cf__copy:hover { background: var(--ink); color: var(--cream); }

/* The email preview (needs JavaScript) */
.cmail { display: none; min-width: 0; }
.js .cmail { display: block; position: sticky; top: 110px; }
.cmail__card {
  overflow: hidden; border-radius: var(--r-lg); background: var(--ink); color: var(--cream);
  box-shadow: var(--sh-float-d);
}
.cmail__bar { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid var(--line-d); }
.cmail__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(245, 239, 230, .18); }
.cmail__bar i:first-child { background: var(--red); }
.cmail__k { margin-left: 8px; font: 500 11px/1.2 'Geist Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-light); }
.cmail__head { margin: 0; padding: 6px 20px; border-bottom: 1px solid var(--line-d); }
.cmail__head div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; padding: 10px 0; }
.cmail__head div + div { border-top: 1px solid var(--line-d); }
.cmail__head dt { font: 500 11px/1.6 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cmail__head dd { margin: 0; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
[data-mail-subject] { font-weight: 600; transition: color var(--dur-3) var(--ease); }
.cmail__body {
  margin: 0; padding: 18px 20px 24px; max-height: 420px; overflow: auto;
  font: 400 14.5px/1.65 Geist, system-ui, sans-serif; color: var(--muted-light);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.cmail.is-pulse [data-mail-subject] { color: var(--red-bright); }

/* ---------- Contact details: ink ---------- */
.cdirect {
  position: relative; overflow: hidden; padding: var(--section-y) var(--gutter);
  background: radial-gradient(42% 60% at 88% 78%, rgba(215, 55, 43, .13), transparent 70%), var(--ink); color: var(--cream);
}
.cdirect__wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px clamp(48px, 7vw, 112px); align-items: center; }
.cdirect__head { display: flex; flex-direction: column; gap: 22px; }
.cdirect__aside { max-width: 30em; font-size: 16px; line-height: 1.6; color: var(--muted-light); }
.creach__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.crow {
  display: flex; align-items: center; gap: 16px; min-height: 68px; padding: 12px 22px 12px 14px;
  border-radius: var(--r-md); background: var(--ink-raised); border: 1px solid var(--line-d);
  box-shadow: var(--sh-raise);
  transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.crow__ic {
  flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(245, 239, 230, .08); color: var(--cream); transition: background-color .35s var(--ease), color .35s var(--ease);
}
.crow__ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.crow__ic--fill svg { fill: currentColor; stroke: none; }
.crow__dot { fill: currentColor; stroke: none; }
.crow__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.crow__k { font: 500 10.5px/1.2 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.crow__v { font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; color: var(--cream); overflow-wrap: anywhere; }
.crow__go { flex: none; margin-left: auto; font-size: 17px; color: var(--red-bright); transition: transform .35s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .crow:hover { transform: translateY(-2px); border-color: rgba(239, 90, 76, .5); box-shadow: var(--sh-raise), 0 18px 40px -24px rgba(0, 0, 0, .8); }
  .crow:hover .crow__ic { background: var(--red); color: #fff; }
  .crow:hover .crow__go { transform: translate(3px, -3px); }
}
.crow:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 3px; }

/* ---------- Tablet and phone ---------- */
@media (max-width: 959px) {
  .chero__grid { grid-template-columns: minmax(0, 1fr); }
  .csteps { max-width: 620px; }
  .cform__grid { grid-template-columns: minmax(0, 1fr); }
  .js .cmail { display: none; }
  .cdirect__wrap { grid-template-columns: minmax(0, 1fr); }
  .creach__list { max-width: 620px; }
}
@media (max-width: 599px) {
  .chero__lede { margin-top: 22px; }
  .chero__cta { align-self: stretch; }
  .chero__cta .cta-spin__inner, .cf__btn .cta-spin__inner { width: 100%; justify-content: center; }
  .cf__row, .cf__choices { grid-template-columns: minmax(0, 1fr); }
  .cf__btn { width: 100%; }
  .cstep { padding: 18px 18px 20px 14px; gap: 14px; }
  .csteps::before { left: 32px; }
  .crow { padding-right: 16px; gap: 14px; }
  .crow__v { font-size: 15px; }
}
@media (max-width: 359px) {
  .crow__v { font-size: 14px; }
  .cmail__head div { grid-template-columns: 62px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .way__box, .way__dot, .cf__input, [data-mail-subject] { transition: none; }
}
/* the preview on phones: a smaller address line, never broken mid-word */
@media (max-width: 599px) {
  .cmail__head div { grid-template-columns: 60px minmax(0, 1fr); }
  .cmail__head dd { font-size: 13.5px; overflow-wrap: normal; }
}