/* ============================================================
   Montani Dynamics — homepage prototype
   Review build. Not linked from production.

   Surfaces
     Spruce Charcoal  masthead + opening, and the closing section
     White            the services sequence
     Ridge Forest     the independence section
     Quartzite        small supporting areas
     Amber            primary actions and one emphasis in the H1
   ============================================================ */

:root {
  --charcoal:   #2C2C2A;
  --forest:     #2D4A3E;
  --amber:      #C17A2A;
  --amber-deep: #A46724;   /* white label measures 4.62:1 */
  --amber-ink:  #9B6222;
  --amber-lt:   #DEA769;   /* 6.55:1 on charcoal, 4.55:1 on forest */
  --slate:      #4A4A47;
  --quartzite:  #F5F2EC;
  --white:      #FFFFFF;

  --hair:       rgba(44, 44, 42, 0.14);
  --hair-mid:   rgba(44, 44, 42, 0.22);
  --hair-field: rgba(44, 44, 42, 0.32);
  --hair-lt:    rgba(245, 242, 236, 0.16);
  --hair-lt2:   rgba(245, 242, 236, 0.34);

  --ui:    'Hanken Grotesk', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --logo:  'Playfair Display', Georgia, serif;

  --sec-pad:    clamp(3rem, 5.5vw, 5rem);
  --sec-pad-lg: clamp(3.5rem, 6.5vw, 6rem);

  --shell: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--charcoal); }

body {
  margin: 0;
  font-family: var(--ui);
  font-size: 1.125rem;
  line-height: 1.62;
  color: var(--charcoal);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  padding: 0.75rem 1.25rem;
  background: var(--white); color: var(--charcoal);
  font-size: 0.9375rem; font-weight: 600;
}
.skip:focus { left: 0; }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.shell { max-width: var(--shell); margin: 0 auto; padding-inline: var(--gutter); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 1.9rem;
  background: var(--amber-deep); color: var(--white);
  font-family: var(--ui); font-size: 1rem; font-weight: 600; letter-spacing: 0.02em;
  border: 1px solid transparent; border-radius: 2px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: #8E5A20; }

.tlink {
  display: inline-flex; align-items: center; min-height: 52px;
  font-size: 1rem; font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}

/* ── masthead ─────────────────────────────────────────────── */

.mast { background: var(--charcoal); color: var(--quartzite); }
.mast__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.5rem, 3vw, 3rem);
  min-height: 108px;
  border-bottom: 1px solid var(--hair-lt);
}

/* The shipped montani-main-reversed.svg, inlined unchanged. Its own
   viewBox carries wide internal padding; this window shows exactly the
   artwork (x 24.9–335.8, y 48.5–121.6 of 360x150) at a 280px lockup. */
.brand { display: block; width: 283px; height: 67px; overflow: hidden; flex: none; }
.brand svg { width: 325px; max-width: none; height: auto; margin: -43px 0 0 -22px; }
.brand text, .brand tspan { font-family: var(--logo); }

.nav { display: flex; align-items: center; gap: clamp(1.4rem, 2.5vw, 2.5rem); }
.nav__link, .nav__top {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 48px;
  font-family: inherit; font-size: 1rem; font-weight: 500; letter-spacing: 0.01em;
  color: rgba(245, 242, 236, 0.9); text-decoration: none;
  background: none; border: 0; padding: 0; cursor: pointer;
  border-bottom: 2px solid transparent;
}
.nav__link:hover, .nav__top:hover,
.nav__link:focus-visible, .nav__top[aria-expanded="true"],
.nav__link.is-here, .nav__top.is-here {
  color: var(--quartzite); border-bottom-color: var(--amber-lt);
}
.drawer a[aria-current="page"] { color: var(--amber-lt); }
.nav__menu a[aria-current="page"] { color: var(--forest); background: var(--quartzite); }
.nav__caret { width: 9px; height: 6px; fill: rgba(245, 242, 236, 0.6); transition: transform 140ms ease; }
.nav__top[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.nav__cta {
  margin-left: clamp(0.25rem, 1vw, 0.75rem);
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 1.35rem;
  font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--quartzite); text-decoration: none;
  border: 1px solid var(--hair-lt2); border-radius: 2px;
}
.nav__cta:hover { border-color: var(--amber-lt); color: var(--white); }

.nav__item { position: relative; }
.nav__menu {
  position: absolute; top: calc(100% + 1px); left: -1.5rem; z-index: 40;
  min-width: 23rem; padding: 0.6rem 0;
  background: var(--white); color: var(--charcoal);
  border-top: 2px solid var(--amber);
  box-shadow: 0 20px 44px rgba(20, 20, 19, 0.26);
}
.nav__menu[hidden] { display: none; }
.nav__menu a {
  display: block; padding: 0.7rem 1.5rem;
  font-size: 1rem; font-weight: 500; color: var(--charcoal); text-decoration: none;
}
.nav__menu a:hover { background: var(--quartzite); color: var(--forest); }

.burger {
  display: none;
  min-width: 48px; min-height: 48px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--hair-lt2); border-radius: 2px;
  color: var(--quartzite); cursor: pointer;
}

.drawer { display: none; }

/* ── opening ──────────────────────────────────────────────── */

.opening { background: var(--charcoal); color: var(--quartzite); }
.opening__in { padding-block: clamp(2.75rem, 5vw, 4.5rem) clamp(2.75rem, 5vw, 4.25rem); }

.opening h1 {
  max-width: min(100%, 860px);
  font-size: clamp(1.875rem, 3.65vw, 3.25rem);
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: -0.021em;
}
.opening h1 .em { color: var(--amber-lt); }

.opening__copy { margin-top: clamp(1.5rem, 2.2vw, 1.875rem); max-width: 43rem; }
.opening__copy p { color: rgba(245, 242, 236, 0.84); }
.opening__copy p + p { margin-top: 1rem; }

.opening__act {
  display: flex; align-items: center; gap: clamp(1.5rem, 2.6vw, 2.5rem);
  flex-wrap: wrap;
  margin-top: clamp(1.75rem, 2.8vw, 2.5rem);
}
.opening__act .tlink { color: var(--quartzite); border-bottom-color: var(--hair-lt2); }
.opening__act .tlink:hover { border-bottom-color: var(--quartzite); }

/* ── why senior technology leadership ─────────────────────── */

.edu { background: var(--quartzite); }
.edu__in {
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  padding-block: var(--sec-pad);
}
.edu h2 { max-width: 24ch; }
.edu__copy p { max-width: 38rem; color: var(--slate); }
.edu__copy p + p { margin-top: 1.1rem; }

/* ── services ─────────────────────────────────────────────── */

.services { background: var(--white); }
.services__in { padding-block: var(--sec-pad); }

.services__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 2rem;
  align-items: baseline;
  padding-bottom: clamp(2rem, 3.6vw, 3rem);
}
/* every section heading sets identically: Spectral 500, 36px at 1440 */
.edu h2, .services__head h2, .indep h2, .contact h2, .band h2 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.012em;
}
.services__head h2 { grid-column: 1; max-width: min(100%, 880px); }
.services__all {
  grid-column: 2; justify-self: end;
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 1rem; font-weight: 600; color: var(--charcoal);
  text-decoration: none; border-bottom: 1px solid var(--hair-mid); padding-bottom: 2px;
  white-space: nowrap;
}
.services__all:hover { color: var(--forest); border-bottom-color: var(--forest); }
.services__intro {
  grid-column: 1; grid-row: 2;
  margin-top: 1rem;
  max-width: 42rem;
  color: var(--slate);
}

/* the ongoing executive role, set apart by scale and space rather
   than by a card. The heavier rule is the break before it. */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr) 1.75rem;
  column-gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  padding-block: clamp(2rem, 3.4vw, 3rem) clamp(2.25rem, 3.8vw, 3.25rem);
  border-top: 2px solid var(--charcoal);
  text-decoration: none;
}
.feature__name {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  font-weight: 500; line-height: 1.18; letter-spacing: -0.01em;
}
.feature__desc {
  font-size: 1.125rem; line-height: 1.55;
  color: var(--slate);
  max-width: 40rem;
  padding-top: 0.3rem;
}
.feature__go { justify-self: end; padding-top: 0.75rem; }
.feature__go svg {
  width: 10px; height: 16px;
  fill: none; stroke: var(--hair-mid); stroke-width: 1.5;
  transition: stroke 140ms ease, transform 140ms ease;
}
.feature:hover .feature__name, .feature:focus-visible .feature__name { color: var(--forest); }
.feature:hover .feature__desc { color: var(--charcoal); }
.feature:hover .feature__go svg { stroke: var(--forest); transform: translateX(3px); }

/* the four, at equal weight, in two rows of two */
.four {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(2rem, 4vw, 4rem);
}
.four > li { border-top: 1px solid var(--hair-mid); }
.four > li:nth-last-child(-n+2) { border-bottom: 1px solid var(--hair-mid); }
.four__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.25rem;
  column-gap: 1rem;
  padding-block: clamp(1.5rem, 2.2vw, 2rem) clamp(1.75rem, 2.4vw, 2.25rem);
  text-decoration: none;
}
.four__name {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.6vw, 1.375rem);
  font-weight: 500; line-height: 1.24; letter-spacing: -0.006em;
}
.four__desc {
  grid-column: 1 / -1;
  margin-top: 0.45rem;
  font-size: 1.0625rem; line-height: 1.55;
  color: var(--slate);
  max-width: 30rem;
}
.four__go { grid-column: 2; grid-row: 1; justify-self: end; padding-top: 0.4rem; }
.four__go svg {
  width: 8px; height: 13px;
  fill: none; stroke: var(--hair-mid); stroke-width: 1.5;
  transition: stroke 140ms ease, transform 140ms ease;
}
.four__link:hover .four__name, .four__link:focus-visible .four__name { color: var(--forest); }
.four__link:hover .four__desc { color: var(--charcoal); }
.four__link:hover .four__go svg { stroke: var(--forest); transform: translateX(3px); }

/* ── independence ─────────────────────────────────────────── */

.indep { background: var(--forest); color: var(--quartzite); }
.indep__in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  padding-block: var(--sec-pad-lg);
}
.indep h2 { max-width: 15ch; }
.indep__copy p { color: rgba(245, 242, 236, 0.88); max-width: 38rem; }
.indep__copy p + p { margin-top: 1rem; }
.indep__copy .tlink {
  margin-top: 1.25rem;
  color: var(--quartzite);
  border-bottom-color: var(--hair-lt2);
}
.indep__copy .tlink:hover { border-bottom-color: var(--quartzite); }

/* ── contact ──────────────────────────────────────────────── */

.contact { background: var(--charcoal); color: var(--quartzite); }
.contact__in {
  padding-block: var(--sec-pad);
  border-bottom: 1px solid var(--hair-lt);
}
.contact h2 { max-width: min(100%, 640px); }
.contact p {
  margin-top: 1.25rem; max-width: 40rem;
  color: rgba(245, 242, 236, 0.84);
}
.contact__act {
  display: flex; align-items: center; gap: clamp(1.5rem, 2.6vw, 2.5rem);
  flex-wrap: wrap;
  margin-top: clamp(1.75rem, 2.8vw, 2.25rem);
}
.contact__detail {
  font-size: 1rem; color: rgba(245, 242, 236, 0.78);
}
.contact__detail a {
  display: inline-block; padding-block: 0.55rem;
  color: var(--quartzite); text-decoration: none; border-bottom: 1px solid var(--hair-lt2);
}
.contact__detail a:hover { border-bottom-color: var(--amber-lt); }

/* ── footer ───────────────────────────────────────────────── */

.foot { background: var(--charcoal); color: rgba(245, 242, 236, 0.72); }
.foot__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 2.5rem; flex-wrap: wrap;
  padding-block: 1.75rem 2.25rem;
  font-size: 0.9375rem;
}
.foot__nav { display: flex; gap: clamp(1.25rem, 2.2vw, 2rem); flex-wrap: wrap; }
.foot__nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none; border-bottom: 1px solid transparent;
}
.foot__nav a:hover { color: var(--quartzite); border-bottom-color: var(--hair-lt2); }

/* ── 1024 and below ───────────────────────────────────────── */

@media (max-width: 1024px) {
  .brand { width: 242px; height: 58px; }
  .brand svg { width: 278px; margin: -37px 0 0 -19px; }
  .mast__in { min-height: 96px; }
  .nav { gap: 1.25rem; }
  .nav__link, .nav__top { font-size: 0.9375rem; }
  .opening h1 { max-width: min(100%, 760px); }
  .indep__in { grid-template-columns: 1fr; row-gap: 1.5rem; }
  .indep h2 { max-width: 20ch; }
  .feature { grid-template-columns: minmax(0, 40%) minmax(0, 1fr) 1.5rem; }
}

/* ── 860 and below: drawer navigation ─────────────────────── */

@media (max-width: 860px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .mast__in { min-height: 84px; }
  .brand { width: 208px; height: 50px; }
  .brand svg { width: 239px; margin: -32px 0 0 -16px; }

  .drawer {
    display: block;
    background: var(--charcoal);
    border-bottom: 1px solid var(--hair-lt);
  }
  .drawer[hidden] { display: none; }
  .drawer ul { padding-block: 0.5rem 1.25rem; }
  .drawer a {
    display: block; padding: 0.85rem 0;
    font-size: 1.0625rem; font-weight: 500;
    color: var(--quartzite); text-decoration: none;
    border-bottom: 1px solid var(--hair-lt);
  }
  .drawer .drawer__cta { margin-top: 1.25rem; width: 100%; }

  .edu__in { grid-template-columns: 1fr; row-gap: 1.25rem; }
  .edu h2 { max-width: none; }
  .edu__copy p { max-width: none; }

  .services__head { grid-template-columns: 1fr; }
  .services__all { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 1rem; }
  .services__intro { grid-row: 2; }

  .feature {
    grid-template-columns: minmax(0, 1fr) 1.5rem;
    padding-block: 1.75rem 2rem;
  }
  .feature__name { grid-column: 1; }
  .feature__desc { grid-column: 1 / -1; max-width: none; margin-top: 0.55rem; padding-top: 0; }
  .feature__go { grid-column: 2; grid-row: 1; padding-top: 0.5rem; }

  .four { grid-template-columns: 1fr; }
  .four__desc { max-width: none; }


  .services__head { align-items: flex-start; }
}

/* ── phone ────────────────────────────────────────────────── */

@media (max-width: 560px) {
  body { font-size: 1.0625rem; }
  .brand { width: 182px; height: 44px; }
  .brand svg { width: 209px; margin: -28px 0 0 -14px; }

  .opening h1 { font-size: clamp(1.875rem, 8.2vw, 2.25rem); max-width: none; }
  .opening__act, .contact__act { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .opening__act .btn, .contact__act .btn { width: 100%; }
  .opening__act .tlink, .contact__act .tlink { align-self: center; justify-content: center; }
  .feature__desc, .four__desc, .services__intro, .edu__copy p { font-size: 1rem; }
  .feature__name { font-size: clamp(1.4rem, 7.4vw, 1.875rem); }
  .four__name { font-size: clamp(1.0625rem, 4.9vw, 1.25rem); }
  .foot__in { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
}

/* ============================================================
   Supporting pages — extends the V6 system, adds no new one.
   Same shell, rhythm tokens, type scale, link rules and colours.
   ============================================================ */

/* ── compact page opening ─────────────────────────────────── */

.phead { background: var(--charcoal); color: var(--quartzite); }
.phead__in { padding-block: clamp(2.25rem, 4vw, 3.5rem) clamp(2.5rem, 4.5vw, 3.75rem); }
.phead h1 {
  max-width: min(100%, 860px);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.phead__sub {
  margin-top: clamp(0.75rem, 1.2vw, 1rem);
  max-width: 40rem;
  font-family: var(--serif);
  font-size: clamp(1.1875rem, 1.75vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: var(--amber-lt);
}
.phead__copy { margin-top: clamp(1.25rem, 2vw, 1.625rem); max-width: 43rem; }
.phead__copy p { color: rgba(245, 242, 236, 0.84); }
.phead__copy p + p { margin-top: 0.9rem; }
.phead__act {
  display: flex; align-items: center; gap: clamp(1.5rem, 2.6vw, 2.5rem);
  flex-wrap: wrap;
  margin-top: clamp(1.5rem, 2.4vw, 2rem);
}
.phead__act .tlink { color: var(--quartzite); border-bottom-color: var(--hair-lt2); }
.phead__act .tlink:hover { border-bottom-color: var(--quartzite); }

/* a short notice page still needs the opening to carry the screen */
.phead--notice .phead__in { padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 8vw, 7rem); }

/* ── bands ────────────────────────────────────────────────── */

.band { padding-block: var(--sec-pad); }
.band--white  { background: var(--white); }
.band--quartz { background: var(--quartzite); }
.band--forest { background: var(--forest); color: var(--quartzite); padding-block: var(--sec-pad-lg); }

/* heading left, copy right: the composition the homepage's
   explanatory section already uses */
.two {
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.two > h2 { max-width: 24ch; }
.two__copy p { max-width: 38rem; color: var(--slate); }
.two__copy p + p { margin-top: 1.1rem; }
.band--forest .two__copy p { color: rgba(245, 242, 236, 0.88); }

/* full-width heading with a lead beneath it */
.lede { max-width: min(100%, 880px); }
.lede p {
  margin-top: 1rem;
  max-width: 40rem;
  color: var(--slate);
}
.band--forest .lede p { color: rgba(245, 242, 236, 0.88); }

/* ── responsibilities, as one role rather than a menu ─────── */

.resp { margin-top: clamp(2rem, 3.4vw, 2.75rem); }
.resp > li {
  display: grid;
  grid-template-columns: minmax(0, 32%) minmax(0, 1fr);
  column-gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  padding-block: clamp(1.25rem, 2vw, 1.75rem);
  border-top: 1px solid var(--hair-mid);
}
.resp > li:last-child { border-bottom: 1px solid var(--hair-mid); }
.resp h3 {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.45vw, 1.25rem);
  font-weight: 500; line-height: 1.26; letter-spacing: -0.006em;
}
.resp p { font-size: 1.0625rem; line-height: 1.58; color: var(--slate); max-width: 40rem; }

.resp__after {
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  max-width: 44rem;
  color: var(--slate);
}

/* ── 1024 and below ───────────────────────────────────────── */

@media (max-width: 1024px) {
  .two { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
  .resp > li { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); }
}

/* ── 860 and below ────────────────────────────────────────── */

@media (max-width: 860px) {
  .two { grid-template-columns: 1fr; row-gap: 1.25rem; }
  .two > h2 { max-width: none; }
  .two__copy p { max-width: none; }
  .resp > li { grid-template-columns: 1fr; row-gap: 0.5rem; }
  .resp p { max-width: none; }

}

@media (max-width: 560px) {
  .phead h1 { font-size: clamp(1.625rem, 7.4vw, 2rem); }
  .phead__copy p, .resp p, .two__copy p, .lede p { font-size: 1rem; }
  .phead__act { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .phead__act .btn { width: 100%; }
  .phead__act .tlink { align-self: center; justify-content: center; }
}


/* ── contact form ─────────────────────────────────────────────
   Same editorial language as the rest of the site: hairline
   fields on white, no card, no shadow, no new control sizes. */

.cwrap {
  display: grid;
  grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.cwrap__aside { grid-column: 1; grid-row: 1; }
.cwrap__aside p { color: var(--slate); max-width: 22rem; }
.cwrap__aside a { color: var(--charcoal); text-decoration: none; border-bottom: 1px solid var(--hair-mid); }
.cwrap__aside a:hover { color: var(--forest); border-bottom-color: var(--forest); }
/* the number itself never breaks; the sentence around it still wraps */
.cwrap__aside a[href^="tel:"] { white-space: nowrap; }

.cform { grid-column: 2; grid-row: 1; max-width: 38rem; }
.cform__field + .cform__field { margin-top: clamp(1rem, 1.6vw, 1.375rem); }
.cform__field label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.9375rem; font-weight: 500;
}
.cform__optional {
  margin-left: 0.4rem;
  font-size: 0.8125rem; font-weight: 400; color: var(--slate);
}
.cform input, .cform textarea {
  display: block; width: 100%;
  min-height: 48px; padding: 0.7rem 0.85rem;
  font-family: var(--ui); font-size: 1.0625rem; line-height: 1.5;
  color: var(--charcoal); background: var(--white);
  border: 1px solid var(--hair-field); border-radius: 2px;
}
.cform textarea { min-height: 9.5rem; resize: vertical; }
.cform input:hover, .cform textarea:hover { border-color: var(--slate); }
.cform [aria-invalid="true"] { border-color: var(--amber-ink); }

.cform__error {
  margin-top: 0.4rem;
  font-size: 0.875rem; color: var(--amber-ink);
}
.cform__error[hidden] { display: none; }

/* honeypot: off-screen rather than display:none, so bots still fill it */
.cform__gotcha {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.cform__failure {
  margin-top: clamp(1rem, 1.6vw, 1.375rem);
  padding: 0.85rem 1rem;
  background: var(--quartzite);
  border-left: 2px solid var(--amber);
  font-size: 0.9375rem;
}
.cform__failure[hidden] { display: none; }

.cform__act {
  display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem);
  flex-wrap: wrap;
  margin-top: clamp(1.5rem, 2.4vw, 2rem);
}
.cform__status { font-size: 0.9375rem; color: var(--slate); }
.btn[disabled] { opacity: 0.72; cursor: default; }

@media (max-width: 860px) {
  .cwrap { grid-template-columns: 1fr; }
  .cform { grid-column: 1; grid-row: 1; max-width: none; }
  .cwrap__aside {
    grid-column: 1; grid-row: 2;
    margin-top: clamp(1.75rem, 3vw, 2.25rem);
    padding-top: clamp(1.25rem, 2vw, 1.5rem);
    border-top: 1px solid var(--hair-mid);
  }
  .cwrap__aside p { max-width: none; }
}

@media (max-width: 560px) {
  .cform__act { flex-direction: column; align-items: stretch; }
  .cform__act .btn { width: 100%; }
  .cform__status { text-align: center; }
}