/*
 * cnt2.css — Contact page, 2026 rebuild.
 *
 * Everything is scoped to body.apex-cnt2 so nothing here can leak onto other
 * pages. Two jobs: (1) the page body, (2) a page-only re-skin of the shared
 * nx-footer so it sits under the ice-shelf plate.
 *
 * Type scale: 50/40 display · 30 form title · 19 question · 17 field · 16 body
 *             · 15 small · 14.5 footer · 12.5 legal · 11 footer heading
 */

body.apex-cnt2 {
  --cnt2-navy: #0a1730;
  --cnt2-accent: #22458a;
  --cnt2-body: #46536e;
  --cnt2-muted: #5b6884;
  --cnt2-line: rgba(13, 35, 80, .26);
  --cnt2-field: #b6c6dc;
  --cnt2-night: #02122f;
  --cnt2-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #fff;
}

body.apex-cnt2 .site-main {
  position: relative;
  z-index: 1;
  overflow: clip;
  background: linear-gradient(180deg,
    rgba(251, 253, 255, 0) 0%,
    rgba(240, 247, 253, .5) 32%,
    rgba(226, 239, 250, .68) 60%,
    rgba(230, 240, 248, .86) 84%,
    rgba(235, 242, 248, .96) 100%);
}

body.apex-cnt2 .cnt2-hero,
body.apex-cnt2 .cnt2-topics {
  font-family: var(--cnt2-sans);
  color: var(--cnt2-body);
  -webkit-font-smoothing: antialiased;
}

/* ---------- hero ---------- */

/* Contact ran two different edges on one page: the hero opened at x=58 and the
   topics block below it at x=188. Both are the shell now. */
.cnt2-hero {
  position: relative;
  /* its own stacking context: the ridge sits on a negative layer inside it */
  isolation: isolate;
  overflow: hidden;
}

.cnt2-hero__grid {
  position: relative;
  z-index: 1;
  width: var(--a-shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.06fr 1fr;
  gap: clamp(48px, 5.5vw, 96px);
  align-items: start;
  padding-block: var(--a-hero-pt) var(--a-hero-pb);
}

/* The ridge is the shared component now. This page's own copy sat flush at
   100% (no bleed, no drop, no lift) and at .55 it read as a smudge. It also
   pointed at assets/media/contact/peaks-soft.webp, a byte-identical duplicate
   of the fx strip every other page uses, now in _archive/ridge-rollout-2026-09-04/. */

.cnt2-snow {
  position: absolute;
  left: 0;
  right: 0;
  top: -340px;
  height: calc(100% + 340px);
  pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 60px 90px, rgba(110, 150, 205, .5), transparent),
    radial-gradient(1.3px 1.3px at 250px 220px, rgba(110, 150, 205, .42), transparent),
    radial-gradient(1.8px 1.8px at 150px 310px, rgba(110, 150, 205, .32), transparent);
  background-size: 340px 340px;
  animation: cnt2SnowA 17s linear infinite;
  transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}

.cnt2-snow--far {
  top: -240px;
  height: calc(100% + 240px);
  background-image:
    radial-gradient(1.1px 1.1px at 130px 40px, rgba(110, 150, 205, .38), transparent),
    radial-gradient(1px 1px at 30px 170px, rgba(110, 150, 205, .3), transparent);
  background-size: 240px 240px;
  animation: cnt2SnowB 26s linear infinite;
  transition: transform 1.3s cubic-bezier(.22, 1, .36, 1);
}

@keyframes cnt2SnowA { from { transform: translateY(0) } to { transform: translateY(340px) } }
@keyframes cnt2SnowB { from { transform: translateY(0) } to { transform: translateY(240px) } }

.cnt2-title {
  margin: 0 0 24px;
  font: 600 var(--a-t-h1)/1.12 var(--cnt2-sans);
  letter-spacing: -.024em;
  color: var(--cnt2-navy);
}

.cnt2-title__line {
  display: block;
  overflow: hidden;
  padding-bottom: .16em;
  margin-bottom: -.16em;
}

.cnt2-title__line > span {
  display: block;
  transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}

/* Hidden states are gated on html.cnt2-anim, which page-contact.php adds in
   the head only when scripts run and motion is allowed. Without it the h1
   sat clipped out of its line box and every block at opacity 0, so a visitor
   whose scripts failed got a contact page with no heading and no words. */
html.cnt2-anim .cnt2-title__line > span { transform: translateY(110%) }
.cnt2-title__line:nth-child(2) > span { transition-delay: .09s }
html.cnt2-anim .cnt2-title.is-in .cnt2-title__line > span { transform: translateY(0) }

.cnt2-lead {
  margin: 0 0 40px;
  max-width: 31rem;
  font: 400 var(--a-t-lede)/1.6 var(--cnt2-sans);
  color: var(--cnt2-body);
  text-wrap: pretty;
}

.cnt2-person {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 32px;
}

.cnt2-person__portrait {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  object-fit: cover;
  object-position: 50% 22%;
  flex: none;
}

.cnt2-facts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 31rem;
}

.cnt2-facts p {
  margin: 0;
  font: 400 16px/1.5 var(--cnt2-sans);
  color: var(--cnt2-body);
}

.cnt2-facts a {
  font-weight: 600;
  color: var(--cnt2-accent);
  text-decoration: none;
}

.cnt2-facts a:hover { text-decoration: underline }

/* ---------- form ---------- */

.cnt2-form { position: relative }

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

.cnt2-notice {
  margin: 0 0 22px;
  padding: 14px 16px;
  border: 1px solid var(--a-line);
  border-radius: var(--a-r-sm);
  background: var(--a-paper);
  font: 500 15px/1.5 var(--cnt2-sans);
  color: var(--a-ink);
}

/* One look for every outcome: the words say what happened. The green, amber
   and red versions read as verdict colour (archived in
   _archive/form-notices-2026-10-30/). */
.cnt2-notice a { color: var(--a-brand); text-decoration: underline; text-underline-offset: .15em }

.cnt2-send {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* the site's button */
.cnt2-send button {
  padding: var(--a-btn-pad);
  border: 1px solid var(--a-brand);
  border-radius: var(--a-btn-r);
  background: var(--a-brand);
  box-shadow: var(--a-btn-glow);
  color: #fff;
  font: var(--a-btn-font);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  transition: background .25s, transform .25s;
}

.cnt2-send button svg { width: 15px; height: 15px }
.cnt2-send button:hover {
  background: var(--a-brand-deep); border-color: var(--a-brand-deep);
  transform: translateY(-2px);
}

.cnt2-send p {
  margin: 0;
  flex: 1 1 13rem;
  font: 400 15px/1.55 var(--cnt2-sans);
  color: #4a5872;
}


/* ---------- reveals ---------- */

html.cnt2-anim body.apex-cnt2 [data-cnt2-reveal] {
  opacity: 0;
  transform: translateY(var(--a-rev-y));
  filter: blur(var(--a-rev-blur));
  transition: opacity var(--a-rev-fade) var(--a-ease), transform var(--a-rev-move) var(--a-ease),
              filter var(--a-rev-fade) var(--a-ease);
  transition-delay: calc(var(--i, 0) * var(--a-rev-step));
}

html.cnt2-anim body.apex-cnt2 [data-cnt2-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ---------- the shared footer, re-skinned for this page only ---------- */

body.apex-cnt2 .nx-footer {
  position: relative;
  background: linear-gradient(to bottom, var(--footer-fade, #fff) 0, var(--footer-fade, #fff) 4px, var(--cnt2-night) 4px); /* the top 4px match the page, so a fractional footer edge never shows a grey seam */
  padding-top: 0;
  overflow: hidden;
}

body.apex-cnt2 .nx-footer__ridge { display: none }

body.apex-cnt2 .nx-footer::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 2172 / 374;
  /* the top of the shelf dissolves into the page above (Lachlan, 29 Oct:
       the hard top edge read as cut off); the ledge and icicles stay crisp */
    background:
        linear-gradient(to bottom, var(--footer-fade, #fff) 0%, var(--footer-fade, #fff) 4%, rgba(255, 255, 255, 0) 55%) top center / 100% 100% no-repeat,
        url("../media/contact/ice-shelf.webp") top center / 100% auto no-repeat;
}

/* the footer's own shell rule owns position, z-index, padding and font now

   The fourteen declarations that stood here are gone. They re-stated the whole
   shared footer in this page's own numbers: a flex row instead of the five
   column grid, a 30px logo instead of 38, and eight type specs that each missed
   the shared one by a fraction (11/700/.18em against 11.52/600/.14em on the
   place line, 14.5px against 14.08 on the links). One footer on thirteen pages
   and a near-copy on the fourteenth is the drift this pass exists to remove.
   Archived at _archive/align-pass3-2026-09-01/css/cnt2.css. */

/* ---------- responsive ---------- */

@media (max-width: 1040px) {
  /* Site sweep 2026-09-05: under 1040 the top edge was its own clamp (86 to 118px),
     which at 768 and 390 put the h1 about 10px under the fixed header pill. Every
     other hero opens on the shared token, so this one does too. */
  .cnt2-hero__grid { grid-template-columns: 1fr; gap: 52px; padding-block: var(--a-hero-pt) 68px }
  body.apex-cnt2 .nx-footer__main { gap: 32px }
}

@media (max-width: 620px) {
  .cnt2-hero { padding-inline: 0 }

}

@media (prefers-reduced-motion: reduce) {
  body.apex-cnt2 *,
  body.apex-cnt2 *::before,
  body.apex-cnt2 *::after { animation: none !important; transition: none !important }
  body.apex-cnt2 [data-cnt2-reveal] { opacity: 1; transform: none; filter: none }
  .cnt2-title__line > span { transform: none }
}

/* ════════ 4 NOV: THE FORM IS A LETTER ═══════════════════════════════════════ */
body.apex-cnt2 .cnt2-pen { margin: 0; font: 400 2.05rem/1.05 "Apex Hand", cursive; color: #1f5fd6; text-wrap: balance; transform: rotate(-1.5deg) }

body.apex-cnt2 .cnt2-person { display: flex; align-items: center; gap: 1.2rem; margin: 1.6rem 0 }
body.apex-cnt2 .cnt2-person__portrait { width: 9.5rem; height: 9.5rem; max-width: none; flex: none; object-fit: cover; object-position: 50% 22%; border-radius: 18px; box-shadow: var(--a-card-shadow) }

.cnt2-deal { margin: 0 0 1.5rem; max-width: 30rem }
.cnt2-deal__tag { display: inline-block; margin: 0; padding: .3rem .7rem .55rem; font-size: .84rem; font-weight: 600; color: #fff; background: #c8352c; border-radius: 8px 8px 0 0 }
.cnt2-deal__body { margin-top: -.3rem; padding: .85rem 1.05rem .95rem; background: #fff; border: 1px solid var(--a-card-line); border-radius: 0 10px 10px 10px; box-shadow: var(--a-card-shadow) }
.cnt2-deal__what { margin: 0 0 .2rem; font-size: 1.13rem; font-weight: 600; line-height: 1.25; letter-spacing: -.012em; color: var(--a-ink, #0a1730) }
.cnt2-deal__how { margin: 0; font-size: .98rem; line-height: 1.4; color: #33415e }

.cnt2-letter {
    padding: clamp(1.5rem, 3.4vw, 2.6rem) clamp(1.3rem, 3.4vw, 2.6rem) clamp(1.4rem, 3vw, 2.2rem);
    background: #fffefb; border: 1px solid #e8e5da; border-radius: 4px; box-shadow: var(--a-card-shadow-2, var(--a-card-shadow));
}
.cnt2-letter__hi { margin: 0 0 .9rem; font: 400 2.6rem/1 "Apex Hand", cursive; color: #1f5fd6;}
.cnt2-letter__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; margin: 0 0 .75rem; font-size: 1.14rem; line-height: 1.5; color: #0a1730 }
body.apex-cnt2 .cnt2-letter input:not([type="hidden"]) {
    flex: 1 1 9rem; min-width: 0; width: auto; height: auto; padding: 0 .3rem; margin: 0;
    font: 400 1.75rem/1.25 "Apex Hand", cursive; color: #1d3f91;
    background: none; border: 0; border-bottom: 1.5px solid #a8b6cf; border-radius: 0; box-shadow: none; outline: 0;
    transition: border-color .2s;
}
body.apex-cnt2 .cnt2-letter input[name="apex_name"] { flex: 1 1 5rem }
body.apex-cnt2 .cnt2-letter input[name="apex_company"] { flex: 3 1 9rem }
body.apex-cnt2 .cnt2-letter :is(input, textarea)::placeholder { color: #7f8da6; opacity: 1 }
body.apex-cnt2 .cnt2-letter input:not([type="hidden"]):focus { border-bottom-color: #1f5fd6 }
.cnt2-letter__job { display: block; margin: 1.1rem 0 0 }
.cnt2-letter__job > span { display: block; margin-bottom: .2rem; font-size: 1.14rem; color: #0a1730 }
body.apex-cnt2 .cnt2-letter textarea {
    display: block; width: 100%; min-height: 6.5rem; padding: 0 .3rem; resize: vertical;
    font: 400 1.75rem/2.2rem "Apex Hand", cursive; color: #1d3f91;
    background: repeating-linear-gradient(180deg, transparent 0 calc(2.2rem - 1px), #c4cfe2 calc(2.2rem - 1px) 2.2rem) local;
    border: 0; border-radius: 0; box-shadow: none; outline: 0;
}
body.apex-cnt2 .cnt2-letter textarea:focus-visible { outline: 2px solid rgba(31, 95, 214, .35); outline-offset: 4px }
.cnt2-taps { margin-top: 1.1rem }
.cnt2-taps__ask { margin: 0 0 .35rem; font-size: 1rem; color: #33415e }
.cnt2-taps__list { display: flex; flex-wrap: wrap; gap: .15rem 1.2rem }
.cnt2-tap {
    padding: .15rem 0; cursor: pointer; text-align: left; font: 400 1.55rem/1.2 "Apex Hand", cursive; color: #1f5fd6;
    background: none; border: 0; border-radius: 0; text-decoration: underline; text-decoration-color: rgba(31, 95, 214, .35); text-underline-offset: .18em;
}
.cnt2-tap:hover { text-decoration-color: currentColor }
.cnt2-tap:focus-visible { outline: 2px solid #1f5fd6; outline-offset: 2px }
.cnt2-tap[aria-pressed="true"] { color: #cf2a27; text-decoration: line-through; text-decoration-color: currentColor }
/* marketing email consent: must stay unticked by default */
body.apex-cnt2 .cnt2-letter .cnt2-opt {
  display: flex; align-items: center; gap: .6rem; min-height: 44px; margin-top: 1rem;
  color: #4a5872; font-size: .95rem; line-height: 1.4; cursor: pointer;
}
body.apex-cnt2 .cnt2-letter .cnt2-opt input {
  flex: none; width: 1.15rem; height: 1.15rem; min-width: 0; margin: 0; padding: 0;
  border: 0; accent-color: #1f5fd6;
}
body.apex-cnt2 .cnt2-letter .cnt2-send { display: block; margin-top: 1.4rem; padding: 0; border: 0 }
body.apex-cnt2 .cnt2-letter .cnt2-send button { width: 100%; justify-content: center }
body.apex-cnt2 .cnt2-letter .cnt2-send p { margin: .75rem 0 0; max-width: none; font-size: .92rem; text-align: center }
body.apex-cnt2 .cnt2-notice { margin-bottom: 1rem }

@media (max-width: 620px) {
    body.apex-cnt2 .cnt2-person__portrait { width: 7rem; height: 7rem }
    body.apex-cnt2 .cnt2-letter input[name="apex_name"] { flex: 1 1 12rem }
    body.apex-cnt2 .cnt2-letter input[name="apex_company"] { flex: 1 1 8rem }
}

/* ══ 6 NOV: THE LETTER ANSWERS BACK ══ */
body.apex-cnt2 .cnt2-letter .cnt2-letter__say { min-height: 0; margin: 1rem 0 0 auto; max-width: 26rem; font-size: 1.85rem; text-align: right; transform: rotate(-2deg); transform-origin: right }
body.apex-cnt2 .cnt2-letter .cnt2-letter__say:empty { display: none }
.cnt2-letter__sign { margin: 1.2rem 0 0; font-size: 1.14rem; color: #0a1730 }
.cnt2-letter__sign[hidden] { display: none }
.cnt2-letter__sign span { display: block; margin-top: .1rem; font: 400 2.3rem/1.1 "Apex Hand", cursive; color: #1d3f91 }
.cnt2-letter__fix { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .9rem; margin: -.3rem 0 .8rem }
.cnt2-letter__fix[hidden] { display: none }
body.apex-cnt2 .cnt2-letter__fix .cnt2-pen { font-size: 1.7rem; color: #cf2a27; transform: none; overflow-wrap: anywhere }
.cnt2-letter__fix button { padding: .35rem .8rem; cursor: pointer; font: 600 .92rem/1.2 var(--cnt2-sans); color: #fff; background: #cf2a27; border: 0; border-radius: 8px }
.cnt2-letter__fix button:focus-visible { outline: 2px solid #1f5fd6; outline-offset: 2px }
body.apex-cnt2 .cnt2-facts .cnt2-clock { margin-top: .2rem; font: 400 1.9rem/1.1 "Apex Hand", cursive; color: #1f5fd6; transform: rotate(-1deg); transform-origin: left }
body.apex-cnt2 .cnt2-facts .cnt2-clock:empty { display: none }
/* keyboard focus reads as a thicker blue rule, not just a colour change (8 Nov) */
body.apex-cnt2 .cnt2-letter input:not([type="hidden"]):focus-visible { box-shadow: 0 1.5px 0 #1f5fd6 }

/* ══ 10 NOV AUDIT ══
   The facts follow the letter in the markup, so a phone reaches the form first.
   On a wide screen they still sit under the intro, beside the letter. */
.cnt2-intro { grid-area: intro }
.cnt2-form { grid-area: form }
.cnt2-hero__grid > .cnt2-facts { grid-area: facts }
@media (min-width: 1041px) {
    .cnt2-hero__grid { grid-template-areas: "intro form" "facts form"; grid-template-rows: auto 1fr; row-gap: 0 }
}
@media (max-width: 1040px) {
    .cnt2-hero__grid { grid-template-areas: "intro" "form" "facts" }
}
.cnt2-deal__tag { text-wrap: balance; max-width: 100% }

/* the audit email box: red and required once a business or website asks for the audit */
body.apex-cnt2 .cnt2-letter .cnt2-opt { padding: .35rem .6rem; margin-inline: -.6rem; border: 1.5px solid transparent; border-radius: 12px; transition: background .25s, border-color .25s }
body.apex-cnt2 .cnt2-letter .cnt2-opt span { display: grid; gap: .2rem }
.cnt2-opt__need { display: none; font-style: normal; font-weight: 600; color: #8f1d10 }
body.apex-cnt2 .cnt2-letter .cnt2-opt.is-need:not(:has(input:checked)) { border-color: #c4321f; background: #fdecea; color: #0a1730 }
body.apex-cnt2 .cnt2-letter .cnt2-opt.is-need:not(:has(input:checked)) .cnt2-opt__need { display: block }
body.apex-cnt2 .cnt2-letter .cnt2-opt.is-need input { accent-color: #c4321f }

/* sent: the letter is replaced by his reply */
.cnt2-sent .cnt2-letter__hi { margin-bottom: .6rem }
.cnt2-sent__text { margin: 0; font-size: 1.14rem; line-height: 1.55; color: #0a1730; max-width: 34rem }
.cnt2-sent .cnt2-letter__sign { margin-top: 1.4rem }
.cnt2-sent__again { display: inline-block; margin-top: 1.4rem; font-weight: 600; color: #1f5fd6; text-decoration: underline; text-underline-offset: .18em }