/* ==========================================================================
   ADNAN KABIR — contact.css
   Loaded ONLY by contact.html. Every selector here is new or scoped to this
   page's own blocks, so neither index.html nor about.html can be affected.

   The page is assembled from existing components — .hero, .step / .step--cta,
   .steps-list, .briefing__form, .field, .btn, .kicker, .footer — so only the
   pieces with no equivalent elsewhere are defined below.
   ========================================================================== */

/* ---------- Generic section wrapper --------------------------------------
   Same padding/border as .audit, .cases, .resources and .notes, so the
   vertical rhythm matches the other pages. (Duplicated from about.css rather
   than shared, to keep each page's stylesheet independent.) */

.page-section {
  padding: var(--section-y) 0;
  border-bottom: 1px solid var(--rule);
}
.section-head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.section-head .h2 { margin-bottom: .2em; }

/* ---------- Contact page header -------------------------------------------
   The homepage hero is a full-height two-column split built around a portrait.
   This page is a compact header instead: one column, no image slot, height
   driven by its own content. */

.hero--plain {
  /* Height comes from content. The portrait spiral is sized to the grid, not
     the other way round, so the hero no longer has to be stretched to fit it. */
  min-height: 0;
  padding: clamp(9rem, 20vh, 12rem) 0 clamp(3.5rem, 8vw, 6rem);
}
/* Stacked until there is room to sit the note beside the copy. */
.hero--plain .hero__inner { grid-template-columns: minmax(0, 1fr); }
/* Keeps the measured 4-line rag of the headline intact while single-column. */
.hero--plain .hero__copy { max-width: 46rem; }
.hero--plain .hero__lede { max-width: 54ch; }

@media (min-width: 1024px) {
  /* 60/40 with no column gap puts the note's left edge exactly on the column-4
     blueprint rule. The copy carries padding instead of a gap, so the two never
     touch without knocking the note off the grid. */
  .hero--plain .hero__inner {
    grid-template-columns: 60% 40%;
    column-gap: 0;
  }
  .hero--plain .hero__copy {
    max-width: none;
    padding-right: clamp(2rem, 4vw, 4rem);
  }
  /* .hero__visual centres its child by default (it held the portrait); the note
     should fill the column instead. */
  .hero--plain .hero__visual { place-items: center stretch; }
}

/* The animated fill is a gradient clipped to the glyphs (background-clip:text),
   so it can only paint inside the element's own box. .display sets
   line-height .96, which makes that box shorter than the font's full
   ascent+descent — at 64px the "g" tail in "understanding" drops 3.78px
   (~0.06em) past the bottom edge and renders outlined but unfilled.
   The padding extends the paintable area; the matching negative margin keeps
   the layout, the line box and the 4-line rag exactly where they were. */
.hero--plain .stroke-word {
  padding-block: .12em;
  margin-block: -.12em;
}

/* ---------- The signed note ------------------------------------------------
   Same accent-soft + left-rule language as .case__block--result on the
   homepage, scaled up to carry a signature. */

.note-card {
  max-width: 62ch;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.note-card__title {
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  font-weight: 700;
  margin-bottom: .6rem;
}
.note-card__body {
  color: var(--ink-2);
  font-size: 1.0625rem;
  text-wrap: pretty;
}
.note-card__sig {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.note-card__role {
  margin-top: .5rem;
  color: var(--ink-3);
  line-height: 1.7;
  max-width: 46ch;
}

/* ---------- How would you like to begin? ---------------------------------
   Two .step cards with an "Or" rule between them. The rule sits in the grid
   flow so it reads as a divider at every width — horizontal on desktop,
   vertical stack on mobile. */

.begin__grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: stretch;
}
@media (min-width: 860px) {
  .begin__grid { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
}

.begin__card {
  display: grid;
  align-content: start;
  gap: .5rem;
}
.begin__card .step__num { margin-bottom: 1rem; }
.begin__card .step__glyph { margin-bottom: .75rem; }
.begin__card .btn { margin-top: 1.25rem; justify-self: start; }
@media (max-width: 420px) { .begin__card .btn { width: 100%; } }

/* "Or" divider — a hairline with the word centred on it. */
.begin__or {
  display: grid;
  place-items: center;
  color: var(--ink-3);
  position: relative;
}
.begin__or span {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--rule-2);
  border-radius: 50%;
  background: var(--bg);
  font-size: .625rem;
}
.begin__or::before {
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: var(--rule-2);
  transform: translateX(-50%);
  z-index: -1;
}
@media (max-width: 859px) {
  .begin__or::before { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1px; transform: none; }
}

/* ---------- The message form --------------------------------------------- */

.form__layout { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
@media (min-width: 1024px) {
  .form__layout { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(3rem, 6vw, 5rem); }
}
.form__copy .h2 { margin-bottom: .25em; }
.form__aside {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  color: var(--ink-3);
  font-size: .9375rem;
  max-width: 42ch;
  text-wrap: pretty;
}

/* ---------- Request-type tabs --------------------------------------------
   Visually a two-up tab strip; underneath it is a plain radio group, so arrow
   keys, focus and the submitted value need no JavaScript. */

.intent {
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
}
.intent > legend { padding: 0; margin-bottom: .6rem; color: var(--ink-3); }

.intent__tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

.intent__tab {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 3.25rem;
  padding: .75rem 1rem;
  background: var(--elev);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-md);
  color: var(--ink-2);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: background-color var(--t-fast) linear,
              border-color var(--t-fast) linear,
              color var(--t-fast) linear;
}
.intent__tab svg {
  width: 1.15rem; height: 1.15rem; flex: none;
  color: var(--ink-3);
  transition: color var(--t-fast) linear;
}
.intent__tab:hover { border-color: var(--accent-line); color: var(--ink); }

.intent__radio:checked + .intent__tab {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--ink);
}
.intent__radio:checked + .intent__tab svg { color: var(--accent-text); }

/* The radio itself is .sr-only, so the focus ring has to be drawn on the label. */
.intent__radio:focus-visible + .intent__tab {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.intent__hint { margin-top: .7rem; color: var(--ink-3); }

@media (max-width: 420px) {
  .intent__tabs { grid-template-columns: minmax(0, 1fr); }
}

/* The four "Before You Send" items, absorbed into the copy column so the
   expectations sit beside the form rather than in a section of their own. */
.form__expect { margin-top: clamp(2rem, 4vw, 2.75rem); }
.form__expect .steps-list li { padding-block: clamp(.85rem, 1.8vw, 1.1rem); }
.form__expect .steps-list h3 { font-size: 1rem; }

.form__fields { display: grid; gap: 1.25rem; margin-bottom: 1.25rem; }

/* .field__input is a pill built for the single-line newsletter row; a
   multi-line box needs the panel radius instead. */
.field__area {
  width: 100%;
  min-height: 8.5rem;
  padding: .9rem 1.15rem;
  background: var(--elev);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  resize: vertical;
  transition: border-color var(--t-fast) linear, box-shadow var(--t-fast) linear;
}
.field__area::placeholder { color: var(--ink-3); }
.field__area:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.contact-form .field__label span { color: var(--accent-text); }
.form__status:empty { display: none; }
.form__status { margin-top: .85rem; }

/* ---------- Error state, corrected for the light ground -------------------
   base.css sets .field__msg.is-error to #FF8B8B and the invalid border to
   #FF6B6B. Both were chosen while dark was the default theme; on paper they
   measure 2.25:1 (text) and 2.53:1 (border). Scoped to this form so the
   homepage's newsletter styling is left exactly as it is. */

.contact-form .field__msg.is-error { color: #B3261E; }              /* 5.97:1 on paper */
.contact-form .field__input[aria-invalid='true'],
.contact-form .field__area[aria-invalid='true'] { border-color: #B3261E; }

[data-theme='dark'] .contact-form .field__msg.is-error { color: #FF8B8B; }
[data-theme='dark'] .contact-form .field__input[aria-invalid='true'],
[data-theme='dark'] .contact-form .field__area[aria-invalid='true'] { border-color: #FF6B6B; }