/* ============================================================================
   c3.css — THE contact page layer (contact-v3.html, 2026-06-10).
   2026-07-25 reorder: r7 navy hero → the form → the other ways in.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   HERO — the r7 service-page band (same as .cf21-hero on the seven service
   pages). The old .c3-hero grid used --sec padding, which is SHORTER than the
   153px fixed two-row header at desktop, so the headline rendered under it.
   The clamp below is the one company-formation carries, and it clears the bar.
   Selectors are compound (.p21-hero.c3-hero) on purpose: c3.css loads BEFORE
   p21.css, so a plain .c3-hero h1 would tie on specificity and lose.
---------------------------------------------------------------------------- */
.p21-hero.c3-hero{background:var(--navy);
  padding-top:var(--chrome-clear,clamp(12rem,17vw,15.5rem));padding-bottom:var(--band)}
.p21-hero.c3-hero h1{font-size:clamp(2.8rem,8.4vw,6.875rem);line-height:1.0;
  letter-spacing:-.012em;max-width:20ch;color:#fff}
/* client call 2026-09-29: "you!" sat alone on a second line and made the navy band heavy on
   her 13" screen. From 1024 up the heading is one line (1018px of text against a 1152px
   container at 1440), which takes a whole line off the band. Phones keep their two lines. */
@media (min-width:1024px){ .p21-hero.c3-hero h1{max-width:none} }
/* the lede is one 79-character sentence: 44rem keeps it on one desktop line
   instead of orphaning "attention." — 58ch (the stock rule) breaks too early. */
.p21-hero.c3-hero .p21-lede{font-size:1.125rem;line-height:1.55;letter-spacing:.03em;
  color:rgba(255,255,255,.92);margin-top:1.5rem;max-width:44rem}

/* ----------------------------------------------------------------------------
   THE FORM BAND — white, between the navy hero and the tint ways band.
   Overrides the var(--sec) padding .madlibs/.v16-cta carry (up to 10rem here,
   because contact does not load v21.css and so does not get --sec:80px).
---------------------------------------------------------------------------- */
.v17form.c3-form{background:var(--paper);padding-block:var(--band)}

/* other ways in — the band under the form */
.c3-ways{background:var(--tint);padding-block:var(--band)}
.c3-ways .wayshead{display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;gap:1.2rem 2.5rem;margin-bottom:clamp(2rem,4vw,3rem)}
.c3-ways .wayshead h2{font-size:clamp(2rem,4.2vw,3.2rem);color:var(--blue);margin:0}
.c3-ways .clock{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,4.4vw,3rem);
  line-height:1;color:var(--blue);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.c3-ways .nowline{margin-top:.3rem;color:var(--muted);font-size:.95rem;line-height:1.5}
@media (min-width:760px){ .c3-ways .hclock{text-align:right} }
.c3-ways .wgrid{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,3vw,2.4rem)}
.c3-ways .way{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  padding:clamp(1.5rem,2.6vw,2.2rem);transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.c3-ways .way .zic{width:24px;height:24px;color:var(--blue)}
.c3-ways .way .zwa{fill:var(--blue)}
.c3-ways .way h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.4rem,2vw,1.7rem);color:var(--blue);margin-top:1rem}
.c3-ways .way p{margin-top:.55rem;color:var(--muted);line-height:1.6;font-size:.95rem}
.c3-ways .way:hover{border-color:var(--blue);box-shadow:0 14px 34px -16px rgba(13,31,60,.32);transform:translateY(-3px)}
@media (min-width:700px){ .c3-ways .wgrid{grid-template-columns:1fr 1fr} }
@media (min-width:1080px){ .c3-ways .wgrid{grid-template-columns:repeat(4,1fr)} }

/* premium contact form — mirrors the homepage bottom-CTA (.v17form), copied here so
   the contact page styles it without pulling in v17.css's other homepage-only rules. */
.v17form .formhead{max-width:680px;margin:0 auto clamp(2.4rem,5vw,3.4rem);text-align:center}
.v17form .ctahead{font-size:clamp(2rem,4.2vw,3.2rem);margin:0 0 1rem}
.v17form .formlede{color:var(--muted);font-size:1.05rem;line-height:1.6;max-width:54ch;margin:0 auto}
.v17form .zform{max-width:780px;margin:0 auto}
.v17form .fgrid{display:grid;grid-template-columns:1fr;gap:clamp(1.4rem,3vw,2.1rem)}
@media (min-width:680px){ .v17form .fgrid{grid-template-columns:1fr 1fr} }
.v17form .fld{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.v17form .fld-wide{grid-column:1/-1}
.v17form .fld label{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:400}
.v17form .fld input,.v17form .fld select,.v17form .fld textarea{
  width:100%;border:1px solid rgba(1,30,147,.3);background:#fff;
  padding:.85rem 1rem;font-family:var(--sans);font-weight:300;color:var(--blue);
  font-size:1.05rem;line-height:1.4;border-radius:0;transition:border-color .15s ease,box-shadow .15s ease}
.v17form .fld input::placeholder,.v17form .fld textarea::placeholder{color:#66728C}  /* was #9aa4bd = 2.4:1; now 4.8:1 */
.v17form .fld input:focus,.v17form .fld select:focus,.v17form .fld textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.v17form .fld textarea{resize:vertical;min-height:5em}
.v17form .fld select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.6em;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23011E93' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right .9em center}