/* ===========================================================================
   contact.css · Contact
   Structural clone of bond.krd/contact
   Spec: docs/research/pages/contact/ (TOPOLOGY, tokens, BEHAVIORS,
   components/Hero, components/ContactBody, components/ContactForm).
   Everything is scoped under main.p-contact.

   The source drives its whole layout off a fluid root font-size
   (16*100vw/1440 at >=1024, 16*100vw/768 at 640-1023, 16*100vw/412 below)
   with --spacing:.0625rem, so every "px-15 / pt-160 / fs-46" utility is a
   design-artboard pixel. styles.css owns :root, so this page carries its own
   unit token --u and writes every dimension as calc(N * var(--u)).
   At 1440 --u = 1px, the source design width. Like css/compliance.css, the
   640-1023 band is held at a flat 1px instead of the source's 768 artboard.
   =========================================================================== */

main.p-contact{
  --u: 1px;
  --err: #C41230;
  display: block;
  background: var(--paper);
  color: var(--teal);
  overflow-x: clip;
}
@media (max-width: 411px){ main.p-contact{ --u: 0.242718vw; } }   /* 100vw/412 */
@media (min-width: 1024px){ main.p-contact{ --u: 0.069444vw; } }  /* 100vw/1440 */

main.p-contact section{ padding: 0; }
.p-contact p{ margin: 0; }
.p-contact a{ color: inherit; }

/* --- grid + page gutter (source .my-grid / px-15) ----------------------- */
.p-contact .g{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: calc(10 * var(--u));
}
@media (min-width: 640px){ .p-contact .g{ column-gap: calc(12.5 * var(--u)); } }
@media (min-width: 1024px){
  .p-contact .g{ grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: calc(15 * var(--u)); }
}
.p-contact .px{ padding-left: calc(15 * var(--u)); padding-right: calc(15 * var(--u)); }

/* --- type roles --------------------------------------------------------- */
.p-contact .mono{
  font-family: var(--mono); font-weight: 400;
  font-size: calc(12 * var(--u)); line-height: 1;
  letter-spacing: 0; text-transform: uppercase;
}
.p-contact .ct-text{
  font-family: var(--sans); font-weight: 400;
  font-size: calc(22 * var(--u)); line-height: 1.5;
}
@media (min-width: 1024px){ .p-contact .ct-text{ font-size: calc(16 * var(--u)); } }

/* line-mask reveal wrapper (SplitText mask:'lines' writes the inner spans) */
.p-contact .ct-mask{ overflow: hidden; display: block; }

/* ===========================================================================
   1 · HERO / source section.px-15.flex.justify-center.bg-blue
   pt 192 / pb 20 below 1024, pt 312 / pb 50 at >=1024. Flat band, no image.
   =========================================================================== */
.p-contact .ct-hero{
  background: var(--teal-deep);
  color: var(--paper);
  padding: calc(192 * var(--u)) calc(15 * var(--u)) calc(20 * var(--u));
  text-align: center;
}
@media (min-width: 1024px){
  .p-contact .ct-hero{ padding: calc(312 * var(--u)) calc(15 * var(--u)) calc(50 * var(--u)); }
}
.p-contact .ct-title{
  font-family: var(--sans); font-weight: 400;
  font-size: calc(52 * var(--u)); line-height: 1;
  letter-spacing: -.025em;   /* Instrument Sans runs wider than PP Neue Montreal */
  margin: 0 auto;
}
@media (min-width: 1024px){
  .p-contact .ct-title{ font-weight: 500; font-size: calc(160 * var(--u)); line-height: .9375; }
}
.p-contact .ct-lede{
  font-family: var(--sans); font-weight: 400;
  font-size: calc(20 * var(--u)); line-height: 1.4;
  max-width: calc(620 * var(--u));
  margin: calc(32 * var(--u)) auto 0;
}
@media (min-width: 1024px){
  .p-contact .ct-lede{ font-size: calc(24 * var(--u)); max-width: calc(780 * var(--u)); margin-top: calc(40 * var(--u)); }
}

/* the source wraps main's sections in div.pb-100 */
.p-contact .ct-wrap{ padding-bottom: calc(100 * var(--u)); }

/* ===========================================================================
   2 · CONTACT BODY / source section.js-contact-page-content
   =========================================================================== */
.p-contact .ct-body{ position: relative; }
@media (min-width: 1024px){
  .p-contact .ct-body{ border-bottom: 1px solid var(--teal); }
}

/* 2a · label row: in flow below 1024, absolute over the columns at >=1024 */
.p-contact .ct-lab{
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-top: calc(20 * var(--u));
}
@media (min-width: 1024px){
  .p-contact .ct-lab{
    position: absolute; top: 0;
    left: calc(15 * var(--u)); right: calc(15 * var(--u));
  }
}

/* 2b/2d · the heading. Two copies, one per breakpoint, as in the source. */
.p-contact .ct-h-m,
.p-contact .ct-h-d{
  font-family: var(--sans); font-weight: 400;
  font-size: calc(30 * var(--u)); line-height: 1.15;
  letter-spacing: -.015em;
}
.p-contact .ct-h-m{ grid-column: 1 / -1; margin-top: calc(50 * var(--u)); }
.p-contact .ct-h-d{ display: none; }
@media (min-width: 1024px){
  .p-contact .ct-h-m{ display: none; }
  .p-contact .ct-h-d{ display: block; grid-column: 1 / -1; }
}

/* ===========================================================================
   2c · FORM COLUMN / source div.grid-subgrid.lg:col-start-5.lg:-col-end-1
   =========================================================================== */
.p-contact .ct-form-col{
  grid-column: 1 / -1;
  margin-top: calc(86 * var(--u));
}
@media (min-width: 1024px){
  .p-contact .ct-form-col{
    grid-column: 5 / -1;
    grid-row: 1;
    display: grid;
    grid-template-columns: subgrid;
    margin-top: 0;
    border-left: 1px solid var(--teal);
    padding: calc(160 * var(--u)) 0 calc(140 * var(--u));
  }
  .p-contact .ct-tabs,
  .p-contact .ct-form,
  .p-contact .ct-confid{ grid-column: 2 / -2; }
}

/* tabs */
.p-contact .ct-tabs{ display: flex; }
.p-contact .ct-tabw{ flex: 1; display: flex; justify-content: center; }
@media (min-width: 1024px){
  .p-contact .ct-tabs{ column-gap: calc(56 * var(--u)); }
  .p-contact .ct-tabw{ flex: none; }
}
.p-contact .ct-tab{
  font-family: var(--sans); font-weight: 400;
  font-size: calc(36 * var(--u)); line-height: 1;
  letter-spacing: -.015em;
  color: var(--teal);
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 0 0 calc(6 * var(--u));
  opacity: .25;
  cursor: pointer;
  transition: opacity .3s cubic-bezier(.4,0,.2,1), border-bottom-color .3s cubic-bezier(.4,0,.2,1);
}
@media (min-width: 1024px){ .p-contact .ct-tab{ font-size: calc(46 * var(--u)); } }
.p-contact .ct-tab.is-active{ opacity: 1; border-bottom-color: var(--teal); }
.p-contact .ct-tab:focus-visible{ outline: 2px solid var(--teal); outline-offset: calc(4 * var(--u)); }

/* form */
.p-contact .ct-form{
  display: flex; flex-direction: column;
  row-gap: calc(50 * var(--u));
  margin-top: calc(72 * var(--u));
}
@media (min-width: 1024px){
  .p-contact .ct-form{ row-gap: calc(30 * var(--u)); margin-top: calc(110 * var(--u)); }
}
.p-contact .ct-row{ display: flex; flex-direction: column; row-gap: calc(50 * var(--u)); }
@media (min-width: 1024px){
  .p-contact .ct-row{ flex-direction: row; column-gap: calc(15 * var(--u)); row-gap: 0; }
  .p-contact .ct-row .ct-field{ flex: 1; min-width: 0; }
}

.p-contact .ct-field{
  position: relative;
  display: flex; flex-direction: column;
  row-gap: calc(12 * var(--u));
}
.p-contact .ct-label{
  font-family: var(--sans); font-weight: 400;
  font-size: calc(14 * var(--u)); line-height: 1.5;
  color: var(--teal);
}
.p-contact .ct-input{
  font-family: var(--sans); font-weight: 400;
  font-size: calc(22 * var(--u)); line-height: 1.2;
  color: var(--teal);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--teal);
  border-radius: 0;
  padding: 0 0 calc(8 * var(--u));
  width: 100%;
  outline: none;
  transition: border-bottom-color .2s cubic-bezier(.4,0,.2,1), color .2s cubic-bezier(.4,0,.2,1);
}
.p-contact .ct-input::placeholder{ color: var(--teal); opacity: .3; font-weight: 500; }
/* the source has no visible focus state; that is an accessibility defect,
   so this rebuild adds one instead of copying it (spec: ContactForm APPROX) */
.p-contact .ct-input:focus-visible{ outline: 2px solid var(--teal); outline-offset: calc(4 * var(--u)); }
.p-contact .ct-area{ resize: vertical; min-height: calc(84 * var(--u)); line-height: 1.4; }
.p-contact .ct-input:-webkit-autofill{
  -webkit-text-fill-color: var(--teal);
  box-shadow: transparent 0 0 0 1000px inset !important;
  transition: background-color 5000s ease-in-out;
}
.p-contact .ct-input.has-error{ color: var(--err); border-bottom-color: var(--err); }
.p-contact .ct-alert{
  position: absolute; top: 100%; left: 0;
  margin-top: calc(9 * var(--u));
  font-family: var(--sans); font-weight: 400;
  font-size: calc(12 * var(--u)); line-height: 1;
  color: var(--err);
}

/* submit / two stacked layers, the fill wipes up on hover.
   The form's own row-gap already supplies 50 (below 1024) / 30 (at >=1024),
   so these deltas land the button at the source's mt-50 / mt-60. */
.p-contact .ct-actions{ margin-top: 0; }
@media (min-width: 1024px){ .p-contact .ct-actions{ margin-top: calc(30 * var(--u)); } }
.p-contact .ct-send{
  position: relative; display: inline-block; overflow: hidden;
  background: var(--teal);
  border: 1px solid var(--teal);
  border-radius: 0;
  padding: 0;
  cursor: pointer;
}
.p-contact .ct-send-a,
.p-contact .ct-send-b{
  display: block;
  font-family: var(--mono); font-weight: 400;
  font-size: calc(14 * var(--u)); line-height: 1;
  letter-spacing: .02em; text-transform: uppercase;
  padding: calc(25 * var(--u)) calc(46 * var(--u));
}
.p-contact .ct-send-a{ color: var(--paper); }
.p-contact .ct-send-b{
  position: absolute; inset: 0;
  background: var(--white); color: var(--teal);
  transform: translateY(101%) scaleX(.5);
  transform-origin: 50% 100%;
}
.p-contact .ct-send:focus-visible{ outline: 2px solid var(--teal); outline-offset: calc(4 * var(--u)); }
/* no-JS and reduced-motion fallback for the wipe */
@media (prefers-reduced-motion: reduce){
  .p-contact .ct-send:hover .ct-send-b{ transform: translateY(0) scaleX(1); }
}

.p-contact .ct-thanks{
  font-family: var(--sans); font-weight: 400;
  font-size: calc(16 * var(--u)); line-height: 1.5;
  color: var(--teal);
}
.p-contact .ct-thanks[hidden]{ display: none; }

/* ===========================================================================
   2e · CONFIDENTIALITY STRIP (Marlo, 2026-08-24; docs/BRAND.md POSITIONING RULES 0a)
   =========================================================================== */
.p-contact .ct-confid{
  margin-top: calc(50 * var(--u));
  padding-top: calc(24 * var(--u));
  border-top: 1px solid var(--teal);
}
@media (min-width: 1024px){
  .p-contact .ct-confid{ margin-top: calc(60 * var(--u)); padding-top: calc(20 * var(--u)); }
}
.p-contact .ct-confid .mono{ display: block; margin-bottom: calc(10 * var(--u)); opacity: .7; }
.p-contact .ct-confid-text{
  font-family: var(--sans); font-weight: 400;
  font-size: calc(15 * var(--u)); line-height: 1.5;
  opacity: .75;
  max-width: calc(460 * var(--u));
}

/* ===========================================================================
   2d · ASIDE / source div.lg:col-start-1.lg:-col-end-10
   =========================================================================== */
.p-contact .ct-aside{
  grid-column: 1 / -1;
  margin-top: calc(80 * var(--u));
}
@media (min-width: 1024px){
  .p-contact .ct-aside{
    grid-column: 1 / 4;
    grid-row: 1;
    display: grid;
    grid-template-columns: subgrid;
    align-content: start;
    margin-top: 0;
    padding-top: calc(160 * var(--u));
  }
}
.p-contact .ct-details{ grid-column: 1 / -1; }
@media (min-width: 1024px){
  .p-contact .ct-details{ grid-column: 1 / 3; margin-top: calc(100 * var(--u)); }
}
.p-contact .ct-addr{ margin-bottom: calc(30 * var(--u)); }
@media (min-width: 1024px){ .p-contact .ct-addr{ margin-bottom: calc(24 * var(--u)); } }
.p-contact .ct-line-row{ overflow: hidden; }
.p-contact .ct-plain,
.p-contact .ct-link{ display: inline-block; text-decoration: underline; text-underline-offset: .18em; }
.p-contact .ct-link{ color: var(--teal); }
.p-contact .ct-link:focus-visible{ outline: 2px solid var(--teal); outline-offset: calc(3 * var(--u)); }

/* dither plate: the source's empty 382:238 image slot */
.p-contact .ct-plate{
  position: relative;
  margin: calc(64 * var(--u)) 0 0;
  aspect-ratio: 382 / 238;
  overflow: hidden;
  background: var(--teal-deep);
}
.p-contact .ct-plate canvas{
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}