/* ==========================================================================
   Contact / Careers (.contact-*) and the 404 page (.contact-404*)
   ========================================================================== */

@media (min-width: 600px) { .contact-nowrap { white-space: nowrap; } }

/* ---------- Hero: copy left, ember globe right (deck-08) ---------- */
.contact-hero {
  display: flex; flex-direction: column;
  min-height: clamp(640px, 94vh, 900px);
  padding-bottom: 0;
  /* Copy column width, shared by the globe geometry and the fact strip. The nowrap line
     "healthier tomorrow." is ~9.55em of the h1 size, so it outgrows 600px at the 68px h1. */
  --copy-min: 600px;
  --copy: max(var(--copy-min), calc(var(--fs-h1) * 9.6));
}
.contact-hero__main { flex: 1; display: flex; align-items: center; }
.contact-hero__copy { max-width: 600px; }
.contact-hero h1 { max-width: none; }
.contact-hero .lede { max-width: 30em; }

/* Globe (desktop): site.js draws a canvas wider than 860px with its centre 74% across and 52% down,
   radius min(42% W, 62% H). Here the canvas is W = R / 0.42 wide and as tall as the hero, so the radius
   is --R (not the hero height), and it is placed so the centre sits --gap + R right of the copy column
   (the limb never reaches the text), or further right on wide screens so the canvas edge is never visible.
   The planet still bleeds off the top, bottom and right like the concept. A warm rim light, drawn with
   container units on the same geometry, lights the lower limb. */
.contact-hero__globe {
  overflow: hidden; container-type: size;
  --gap: 64px;
  --R: clamp(364px, 30cqw, 460px);
  --Wc: max(868px, calc(var(--R) / 0.42));
  --cl: calc((100cqw - min(100cqw, var(--container) + var(--gutter) * 2)) / 2 + var(--gutter));
  --gx: max(calc(var(--cl) + var(--copy) + var(--gap) + var(--R)), calc(100cqw - 0.26 * var(--Wc)));
}
.contact-hero__globe .ember-canvas {
  left: calc(var(--gx) - 0.74 * var(--Wc)); width: var(--Wc); max-width: none;
  filter: saturate(1.15);
}
.contact-hero__tone { position: absolute; width: 0; height: 0; overflow: hidden; }
.contact-hero__globe::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  --gy: 52cqh; --gr: min(0.42 * var(--Wc), 62cqh);
  background: radial-gradient(circle at var(--gx) var(--gy),
    transparent calc(var(--gr) - 2px), rgba(255, 211, 161, 0.6) var(--gr), rgba(242, 161, 91, 0.22) calc(var(--gr) + 10px),
    rgba(199, 102, 44, 0.06) calc(var(--gr) + 48px), transparent calc(var(--gr) + 110px));
  -webkit-mask-image: radial-gradient(55% 70% at 62% 100%, #000 10%, transparent 75%);
  mask-image: radial-gradient(55% 70% at 62% 100%, #000 10%, transparent 75%);
}
.contact-hero .page-hero__media--canvas::after {
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(7, 9, 12, 0.82) 30%, rgba(7, 9, 12, 0.25) 52%, transparent 66%),
    linear-gradient(0deg, var(--bg) 0%, rgba(7, 9, 12, 0.6) 12%, transparent 30%);
}
/* Keep the crown of the planet clear of the fixed header. The canvas centres the globe 52% down
   its own height, so on most screens the top of the disc landed a few pixels below y = 0 and its
   rim ran straight through the "Let's Build" pill (or the menu button under 1080px). Make the canvas
   taller than the hero (it still starts at the top, so its halo stays seamless) until the crown sits
   --crown below the header; the extra height, and the bottom of the planet, bleed off the hero. */
@media (min-width: 861px) {
  .contact-hero__globe {
    --crown: 44px;
    --ch: max(100cqh, calc((var(--header-h) + var(--crown) + var(--R)) / 0.52));
  }
  .contact-hero__globe .ember-canvas { height: var(--ch); }
  .contact-hero__globe::before { --gy: calc(0.52 * var(--ch)); --gr: min(0.42 * var(--Wc), 0.62 * var(--ch)); }
}

/* Bottom fact strip, echoing the concept's hairline feature row */
.contact-hero__foot { padding-bottom: clamp(36px, 4.5vw, 56px); margin-top: clamp(40px, 5vw, 64px); }
.contact-hero__facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: min(720px, var(--copy)); margin: 0; border-top: 1px solid var(--line-strong);
}
.contact-hero__facts > div { padding: 20px 24px 0; border-left: 1px solid var(--line); }
.contact-hero__facts > div:first-child { padding-left: 0; border-left: 0; }
.contact-hero__facts dt {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3);
}
.contact-hero__facts dd { margin: 8px 0 0; color: var(--text); font-size: var(--fs-small); line-height: 1.4; text-wrap: balance; }

@media (max-width: 1180px) and (min-width: 861px) {
  .contact-hero { --copy-min: 540px; }
  .contact-hero__globe { --gap: 56px; }
  .contact-hero__copy { max-width: 540px; }
}

/* Phones and small tablets: the globe moves below the copy and rises out of the fold. */
@media (max-width: 860px) {
  .contact-hero { min-height: 0; }
  .contact-hero__main { flex: none; }
  .contact-hero__globe {
    position: relative; inset: auto; z-index: 0;
    height: clamp(260px, 62vw, 440px); margin-top: 8px;
  }
  /* Canvas wider than the box (planet bleeds off both sides) and taller (only the top cap shows). */
  .contact-hero__globe .ember-canvas {
    left: 50%; width: min(140%, 860px); max-width: none; height: 180%; transform: translateX(-50%);
  }
  .contact-hero__globe::before {
    --gx: 50cqw; --gy: 93.6cqh; --gr: min(calc(0.42 * min(140cqw, 860px)), 111.6cqh);
    -webkit-mask-image: radial-gradient(75% 55% at 50% 0%, #000 20%, transparent 80%);
    mask-image: radial-gradient(75% 55% at 50% 0%, #000 20%, transparent 80%);
  }
  .contact-hero .page-hero__media--canvas::after {
    background: linear-gradient(180deg, var(--bg) 0%, transparent 16%, transparent 58%, var(--bg) 100%);
  }
  .contact-hero__foot { margin-top: 0; position: relative; z-index: 1; }
  .contact-hero__facts { max-width: none; }
}
@media (max-width: 560px) {
  /* A little more air between the actions and the globe's glowing rim. */
  .contact-hero__globe { margin-top: 20px; }
  .contact-hero__facts { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .contact-hero__facts > div {
    display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 12px; align-items: baseline;
    padding: 12px 0; border-left: 0; border-top: 1px solid var(--line);
  }
  .contact-hero__facts > div:first-child { border-top-color: var(--line-strong); }
  .contact-hero__facts dd { margin: 0; }
}

/* ---------- Demo request ---------- */
.contact-demo { overflow: clip; }
.contact-demo__grid { gap: clamp(40px, 6vw, 96px); }
.contact-demo__intro h2 { margin-top: 20px; }
/* "Bring a workflow. Leave with a plan.": lines break between the sentences, never inside one.
   The longer sentence is ~8.4em wide, wider than the 315-362px intro column between 861px and
   ~990px at the full h2 size, so the heading also scales down with its column (cqi) until each
   sentence fits on one line. The column is a minmax(0, fr) track, so size containment is safe. */
.contact-demo__intro { container-type: inline-size; }
.contact-demo__intro h2 { font-size: min(var(--fs-h2), 11.6cqi); }
.contact-sentence { display: inline-block; }
.contact-demo__intro .lede { margin-top: 22px; }
@media (min-width: 861px) {
  .contact-demo__intro { position: sticky; top: calc(var(--header-h) + 40px); padding-top: 8px; }
}

/* Numbered promises: outlined number boxes joined by an ember-to-hairline thread */
.contact-steps { list-style: none; margin-top: 44px; display: grid; }
.contact-steps li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px; padding-bottom: 28px; }
.contact-steps li:last-child { padding-bottom: 0; }
.contact-steps li:not(:last-child)::before {
  content: ""; position: absolute; left: 22px; top: 52px; bottom: 8px; width: 1px;
  background: linear-gradient(180deg, rgba(242, 161, 91, 0.55), var(--line));
}
.contact-steps__n {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px;
  border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.02);
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--text);
}
.contact-steps li:first-child .contact-steps__n { border-color: rgba(242, 161, 91, 0.55); color: var(--ember-hot); box-shadow: 0 0 24px -6px rgba(242, 161, 91, 0.45); }
.contact-steps p { padding-top: 9px; color: var(--text-2); line-height: 1.5; }
.contact-steps strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--text); margin-bottom: 4px; }
.contact-steps p span { display: block; }

/* Form panel */
.contact-formwrap { position: relative; isolation: isolate; }
.contact-formwrap::before {
  content: ""; position: absolute; inset: 6% -10% -14% 18%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(242, 161, 91, 0.16), rgba(199, 102, 44, 0.05) 55%, transparent);
  filter: blur(24px);
}
.contact-formwrap--quiet::before { opacity: 0.45; }
@media (max-width: 860px) { .contact-formwrap::before { inset: 4% 0 -8% 8%; } }
.contact-panel { padding: clamp(22px, 3vw, 40px); border-radius: var(--radius-lg); }
.contact-panel::after {
  content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 211, 161, 0.55), transparent);
}
.contact-panel--careers { background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)), var(--bg); }
.contact-panel--careers::after { background: linear-gradient(90deg, transparent, rgba(214, 226, 240, 0.28), transparent); }
.contact-panel__head { padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.contact-panel__head h3 { font-size: 1.3rem; font-weight: 400; letter-spacing: -0.02em; }
.contact-panel__head p { margin-top: 6px; font-size: var(--fs-small); color: var(--text-2); }

.contact-form { container-type: inline-size; }
.contact-form .form-grid { gap: 22px 18px; }
/* Side-by-side fields only when each column can hold a real value: between 861px and ~1180px the
   form column is 310-430px wide, which left ~120px inputs that cut off emails and placeholders. */
@container (max-width: 479px) {
  .contact-form .form-grid { grid-template-columns: minmax(0, 1fr); }
}
.contact-form .field { align-content: start; }
.contact-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.contact-label label { font-size: 0.8125rem; color: var(--text); font-weight: 500; }
.contact-flag {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
}
.contact-hint { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.45; }
.contact-form .textarea { min-height: 148px; }
.contact-form [aria-invalid="true"] { border-color: rgba(255, 122, 107, 0.75); }
.contact-form [aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(255, 122, 107, 0.2); }
/* js/pages/contact.js: a copy of the form's status message, directly under the field it is about,
   so it is on screen next to the focused field on one-column layouts. */
.contact-field-error {
  display: flex; align-items: baseline; gap: 8px;
  font-size: var(--fs-xs); line-height: 1.45; color: var(--bad);
}
.contact-field-error::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; translate: 0 -1px;
}

.contact-submit {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
  margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line);
}
.contact-submit__btn { min-height: 52px; padding-inline: 24px; }
.contact-submit .form-note { flex: 1 1 220px; max-width: 30em; line-height: 1.5; }
.contact-form .form-status { margin-top: 18px; }
@media (max-width: 480px) {
  .contact-submit__btn { width: 100%; }
}

/* ---------- Careers ---------- */
.contact-careers { overflow: clip; }
.contact-careers__grid { gap: clamp(40px, 6vw, 96px); }
.contact-careers__intro h2 { margin-top: 20px; }
.contact-careers__intro .lede { margin-top: 22px; }
.contact-careers__body { margin-top: 18px; max-width: 36em; }
.contact-facts { margin: 40px 0 0; border-top: 1px solid var(--line-strong); }
.contact-facts > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.contact-facts dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); padding-top: 4px; }
.contact-facts dd { margin: 0; color: var(--text); font-size: var(--fs-small); line-height: 1.5; text-wrap: pretty; }
@media (max-width: 560px) {
  .contact-facts > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .contact-facts dt { padding-top: 0; }
}

/* Portfolio index: every product, grouped by area, in its own color */
.contact-work { margin-top: clamp(64px, 8vw, 112px); }
.contact-work__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line-strong); }
.contact-work__title { font-size: var(--fs-h3); font-weight: 400; letter-spacing: -0.02em; }
.contact-work__row { display: grid; grid-template-columns: 13em minmax(0, 1fr); gap: 12px 24px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-work__group { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); padding-top: 9px; }
.contact-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.contact-chips > li { display: flex; }
/* Each chip links to its product page */
.contact-chip {
  display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 6px 14px 6px 7px;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--p) 24%, var(--line));
  background: color-mix(in srgb, var(--p) 5%, rgba(255, 255, 255, 0.015));
  font-size: 0.875rem; line-height: 1.2; color: var(--text); text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s;
}
.contact-chip:hover { border-color: color-mix(in srgb, var(--p) 70%, var(--line)); background: color-mix(in srgb, var(--p) 12%, rgba(255, 255, 255, 0.02)); }
.contact-chip:focus-visible { border-color: color-mix(in srgb, var(--p) 70%, var(--line)); border-radius: 999px; }
/* Light plate so dark-stroke marks (Salus, Cortex, Forge) read on the near-black chip */
.contact-chip img.pmark {
  padding: 2px; border-radius: 6px;
  background: color-mix(in srgb, var(--p) 22%, #e9eef5);
}
.contact-chip .pmark--fallback { border-radius: 6px; }
.contact-chip .badge { padding: 2px 8px; margin-left: 1px; }
@media (max-width: 760px) {
  .contact-work__row { grid-template-columns: minmax(0, 1fr); }
  .contact-work__group { padding-top: 0; }
}

/* ---------- Other questions (sits under the demo form; everything routes through it) ---------- */
.contact-ways { padding-top: 0; }
.contact-ways__head {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px 40px; align-items: end;
  padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line);
}
.contact-ways__head h2 { margin-top: 16px; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem); }
.contact-ways__note p { max-width: 30em; color: var(--text-2); font-size: var(--fs-small); line-height: 1.55; }
.contact-ways__note .link-arrow { margin-top: 16px; font-size: 0.875rem; }
@media (max-width: 860px) {
  .contact-ways__head { grid-template-columns: minmax(0, 1fr); }
}
.contact-ways__grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.contact-way { display: flex; flex-direction: column; gap: 14px; }
.contact-way h3 { font-size: 1.125rem; margin-top: 6px; }
.contact-way p { font-size: var(--fs-small); color: var(--text-2); }
@media (max-width: 860px) {
  .contact-ways__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .contact-way { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; row-gap: 8px; }
  .contact-way > * { grid-column: 2; }
  .contact-way .icon-ring { grid-column: 1; grid-row: 1 / span 2; }
  .contact-way h3 { margin-top: 8px; }
}

/* Touch: the shared text links are ~30px tall; pad them to a 40px target without moving the underline far */
@media (max-width: 860px) {
  .contact-hero .link-arrow, .contact-work__head .link-arrow, .contact-ways .link-arrow { padding-top: 9px; padding-bottom: 8px; }
}

/* ---------- 404 ---------- */
.contact-404 { min-height: clamp(560px, 86vh, 820px); display: grid; align-items: center; text-align: center; }
.contact-404::before {
  content: ""; position: absolute; left: 50%; top: 42%; width: min(760px, 130vw); aspect-ratio: 1.6 / 1; transform: translate(-50%, -50%); z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(242, 161, 91, 0.2), rgba(199, 102, 44, 0.07) 50%, transparent);
}
.contact-404__inner { display: flex; flex-direction: column; align-items: center; }
.contact-404__mark { position: relative; width: 96px; margin-bottom: 28px; }
.contact-404__mark::before {
  content: ""; position: absolute; left: 50%; top: 34%; width: 180px; height: 180px; transform: translate(-50%, -50%); z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 211, 161, 0.32), rgba(242, 161, 91, 0.1) 55%, transparent);
  animation: contact-flicker 5s ease-in-out infinite;
}
.contact-404__mark img { width: 100%; height: auto; }
/* "This page has moved," is ~10.3em wide: on phones, size the heading so it stays one line
   instead of breaking into three ("This page has / moved, or / never existed."). */
.contact-404 h1 { max-width: 14em; margin-inline: auto; font-size: min(var(--fs-h1), calc((100vw - 2 * var(--gutter)) / 10.6)); }
.contact-404 .lede { margin-inline: auto; }
.contact-404 .actions { justify-content: center; }
@media (max-width: 480px) { .contact-404 .actions .btn { flex-basis: 100%; } }
@keyframes contact-flicker { 0%, 100% { opacity: 0.85; } 45% { opacity: 1; } 70% { opacity: 0.7; } }
@media (prefers-reduced-motion: reduce) { .contact-404__mark::before { animation: none; } }