/* /contact. Figma "contact-us" 3745:21779 (desktop, 1512) and
   "Contact Us, Mobile" 3947:30964 (375), file WmKUes42Xq4m4lJ956wuwe,
   confirmed by Isabel (More Better) 2026-10-01.

   One Carbon hero holds the whole page: breadcrumb, title and lede over a
   Neutral-700 "Direct Contacts" card on the left, the white form card on
   the right. Hero 144px block / 112px inline padding, 96px column gap, two
   equal columns; the left column is centred against the form card. Both
   cards carry the hand-drawn ring (.wavy-edge, #sh-wavy in the footer). */

.ct-hero.d-hero {
  background: var(--carbon, #28201C);
  /* The nav is fixed and overlays the hero; the frame's navbar floats over
     the same 144px, so the padding needs no extra nav allowance. */
  padding: 144px clamp(24px, 100vw * 112 / 1512, 112px);
  border-radius: 0; overflow: visible; /* flat into the footer, as framed */
  /* Markup order is intro, form, Direct Contacts: the order the stacked
     layout draws them, so Tab follows what is on screen. At desktop a grid
     puts the intro and Direct Contacts in the left column, centred as a pair
     against the form card (the 1fr rows above and below them), 32px apart. */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto 1fr; column-gap: 96px; align-items: start;
  box-sizing: border-box;
}
.ct-hero > * { width: auto; }
.ct-hero > .ct-intro { grid-column: 1; grid-row: 2; }
.ct-hero > .ct-channels { grid-column: 1; grid-row: 3; margin-top: 32px; }
.ct-hero > .ct-form-card { grid-column: 2; grid-row: 1 / -1; }
.ct-intro { display: flex; flex-direction: column; gap: 32px; }
.ct-intro-text { display: flex; flex-direction: column; gap: 16px; }

/* Breadcrumb */
.ct-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 14px; line-height: 1.6;
  color: var(--neutral-200, #F1EDE5);
}
.ct-crumb a { color: inherit; }
.ct-crumb a:hover { color: var(--white, #fff); text-decoration: underline; text-underline-offset: 3px; }
.ct-crumb a:focus-visible { outline: 2px solid var(--grass-400, #BDD267); outline-offset: 2px; border-radius: 2px; }
.ct-crumb-here { font-weight: 600; color: var(--white, #fff); }

/* Typography/H1 (80px) and Typography/H6 (22px Fredoka Medium) on Magnolia. */
.ct-title {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-size: clamp(36px, 5.3vw, 80px); font-weight: 600;
  line-height: 1.1; letter-spacing: -1px;
  color: var(--magnolia, #FDF9F1); margin: 0;
}
.ct-sub {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-size: 22px; font-weight: 500; line-height: 1.3;
  color: var(--magnolia, #FDF9F1);
  max-width: 540px; margin: 0;
}

/* Cards */
.ct-card {
  border: 3px solid; border-radius: 24px;
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
}
/* The ring is drawn from the padding box, so on a 3px-bordered card it has
   to reach past the border: 8px ring, 6px outside the padding box. */
.ct-card.wavy-edge::after { inset: -6px; border-width: 8px; border-radius: 28px; }

/* Direct Contacts */
.ct-channels {
  background: var(--neutral-700, #3D342F);
  border-color: var(--neutral-700, #3D342F);
  --wavy-color: var(--neutral-700, #3D342F);
  padding: 32px;
  display: flex; flex-direction: column; gap: 24px;
}
.ct-channels-title {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-size: 28px; font-weight: 500; line-height: 1.25;
  color: var(--white, #fff); margin: 0;
}
.ct-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.ct-list li { display: flex; align-items: center; gap: 12px; }
.ct-ico {
  flex: none; width: 40px; height: 40px; border-radius: 9999px;
  background: var(--sunny-50, #FBF7E7);
  display: flex; align-items: center; justify-content: center;
}
.ct-ico img { width: 24px; height: 24px; }
.ct-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ct-cap {
  font-size: 14px; font-weight: 500; line-height: 1.5;
  text-transform: uppercase;
  color: var(--neutral-400, #D0C4B8);
}
.ct-item > :not(.ct-cap) {
  font-size: 16px; font-weight: 600; line-height: 1.6;
  color: var(--white, #fff);
  overflow-wrap: anywhere;
}
.ct-item a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ct-item a:focus-visible { outline: 2px solid var(--grass-400, #BDD267); outline-offset: 2px; border-radius: 2px; }

/* Form card */
.ct-form-card {
  flex: 1 1 0; min-width: 0;
  background: var(--white, #fff);
  border-color: var(--white, #fff);
  --wavy-color: var(--white, #fff);
  padding: 40px;
  display: flex; flex-direction: column; gap: 24px;
}
.ct-form-head { display: flex; flex-direction: column; gap: 24px; }
/* Typography/H6: 22px Fredoka Medium in the frame, not the 40px H4. */
.ct-form-head .ty-h4 { font-size: 22px; font-weight: 500; line-height: 1.3; letter-spacing: 0; }
.ct-form-head p { font-size: 18px; line-height: 1.6; color: var(--neutral-600, #5C534D); margin: 0; }

.ct-form { display: flex; flex-direction: column; gap: 16px; }
.ct-field { display: flex; flex-direction: column; gap: 4px; }
.ct-label {
  font-size: 14px; font-weight: 500; line-height: 1.5;
  text-transform: uppercase;
  color: var(--carbon, #28201C);
}
.ct-req { color: var(--error, #EF4444); font-weight: 600; }

.ct-input {
  display: flex; align-items: center; gap: 8px;
  background: var(--white, #fff);
  border: 1px solid var(--neutral-400, #D0C4B8);
  border-radius: 9999px;
  padding: 0 16px;
  position: relative;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.ct-input > img { flex: none; width: 24px; height: 24px; }
.ct-input > img.ct-ico-20 { width: 20px; height: 20px; margin: 2px; }
.ct-input input, .ct-input select {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: transparent; outline: none;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 16px; line-height: 24px;
  color: var(--carbon, #28201C);
  padding: 13px 0; /* 52px rows: 14px block padding on a 24px line */
}
.ct-input input::placeholder, .ct-form textarea::placeholder { color: var(--charcoal-soft, #6F6762); opacity: 1; }
.ct-input--select select {
  appearance: none; -webkit-appearance: none;
  cursor: pointer; padding-right: 32px;
}
.ct-input--select select.is-empty { color: var(--charcoal-soft, #6F6762); }
.ct-input--select option { color: var(--carbon, #28201C); }
.ct-chevron { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.ct-input:focus-within, .ct-form textarea:focus {
  border-color: var(--carbon, #28201C);
  box-shadow: 0 0 0 2px var(--white, #fff), 0 0 0 4px var(--grass-600, #859B2B);
}

.ct-form textarea {
  display: block; width: 100%; box-sizing: border-box;
  height: 140px; min-height: 140px; resize: vertical; /* 140px in the frame; resize kept for long messages */
  background: var(--white, #fff);
  border: 1px solid var(--neutral-400, #D0C4B8);
  border-radius: 12px;
  padding: 14px 16px;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 16px; line-height: 1.6;
  color: var(--carbon, #28201C);
  outline: none;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.ct-bottom {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 14px; font-weight: 500; line-height: 1.5;
  color: var(--charcoal-soft, #6F6762);
}
.ct-count { flex: none; }
.ct-err { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--error-text, #B42318); }
.ct-field.is-invalid .ct-input,
.ct-field.is-invalid textarea { border-color: var(--error, #EF4444); }

.ct-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Full-width Sunny button under the fields (24px above it, like the frame). */
.ct-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding-top: 8px; }
.ct-status { margin: 0; font-size: 14px; line-height: 1.5; color: var(--error-text, #B42318); }
.ct-status:empty { display: none; }
.ct-submit { width: 100%; min-height: 56px; padding: 12px 16px; font-size: 16px; font-weight: 600; gap: 8px; }
.ct-submit img { width: 20px; height: 20px; }

.ct-success {
  background: var(--magnolia, #FDF9F1);
  border: 1px solid var(--neutral-200, #F1EDE5);
  border-radius: 16px;
  padding: 24px;
  display: flex; flex-direction: column; gap: 8px;
}
.ct-success:focus { outline: none; }
/* display:flex above would otherwise beat the hidden attribute. */
.ct-form[hidden], .ct-success[hidden], .ct-err[hidden] { display: none; }
.ct-success p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--neutral-600, #5C534D); }
.ct-success a { color: var(--carbon, #28201C); text-decoration: underline; text-underline-offset: 3px; }

/* Stacked (the mobile frame): intro, form, then Direct Contacts.
   The copy wrapper dissolves so the form card can sit between them. */
@media (max-width: 1100px) {
  .ct-hero.d-hero { display: flex; flex-direction: column; align-items: stretch; gap: 24px; padding: 160px 40px 56px; }
  .ct-intro { gap: 12px; }
  .ct-form-card { flex: none; width: 100%; }
  .ct-hero > .ct-channels { margin-top: 0; }
  .ct-sub { max-width: none; }
}
@media (max-width: 720px) {
  .ct-hero.d-hero { padding: 160px 24px 56px; }
  .ct-title { font-size: 36px; line-height: 1.2; letter-spacing: -0.5px; }
  .ct-form-card { padding: 24px; }
  .ct-form-head { gap: 8px; }
  .ct-form-head p { font-size: 16px; }
  .ct-input { padding: 0 20px; }
  .ct-input > img { width: 20px; height: 20px; }
  .ct-input > img.ct-ico-20 { margin: 0; }
  .ct-input input, .ct-input select { font-size: 14px; line-height: 22px; padding: 15px 0; }
  .ct-form textarea { height: 120px; min-height: 120px; padding: 16px 20px; font-size: 14px; }
  .ct-chevron { right: 20px; }
  .ct-bottom { flex-direction: column; gap: 2px; }
  .ct-channels { padding: 24px; }
  /* Phone frame (3947:30964): both cards are clean rounded rectangles, the
     form card with a 3px Neutral 200 border; the hand-drawn ring is desktop only. */
  .ct-card.wavy-edge::after { content: none; }
  .ct-form-card { border-color: var(--neutral-200, #F1EDE5); }
  /* The placeholder no longer runs under the dropdown arrow. */
  .ct-input--select select { padding-right: 44px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
  /* Icons sit on the first line of their row (label plus first value line). */
  .ct-list li { align-items: flex-start; }
  .ct-ico { margin-top: 4px; }
}