/* About and Contact share the landing page's visual language without loading
   the full landing scene bundle. */
body.public-site-page {
  /* Aligned to the landing page's depth theme: deep near-black navy base,
     signal-green accent, cool blue-gray lines. */
  --public-bg: #03070d;
  --public-panel: #0d1a24;
  --public-panel-strong: #102230;
  --public-text: #eef5f1;
  --public-copy: #b8c5c0;
  --public-muted: #7f8d89;
  --public-line: rgba(220, 232, 229, 0.12);
  --public-green: #23d18b;
  --public-green-bright: #2fe0a0;
  min-height: 100vh;
  color: var(--public-text);
  background: var(--public-bg);
  font-family: "Inter", system-ui, sans-serif;
}

/* Landing-style atmosphere: a faint green ambient grid at the landing's 82px
   pitch, with quiet green + cool blue-gray depth radials over the deep base. */
body.public-site-page::before {
  background:
    linear-gradient(rgba(15, 168, 110, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 168, 110, 0.028) 1px, transparent 1px),
    radial-gradient(circle at 16% 14%, rgba(35, 209, 139, 0.06), transparent 32rem),
    radial-gradient(circle at 84% 82%, rgba(70, 108, 150, 0.05), transparent 34rem);
  background-size: 82px 82px, 82px 82px, auto, auto;
}

body.public-site-page::after {
  content: none;
}

body.public-site-page .navbar {
  padding: 0;
  border-bottom: 1px solid rgba(220, 232, 229, 0.08);
  background: #061116;
}

body.public-site-page .navbar.scrolled {
  background: #081822;
  border-bottom-color: rgba(220, 232, 229, 0.12);
}

body.public-site-page .nav-inner {
  width: 100%;
  max-width: none;
  padding: 14px clamp(20px, 5vw, 88px);
}

body.public-site-page .nav-center-empty {
  width: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  visibility: hidden;
}

@media (min-width: 901px) {
  /* Match the landing banner's edge alignment while leaving its discovery-link
     column intentionally empty on focused About and Contact pages. */
  body.public-site-page .nav-inner {
    padding-inline: clamp(24px, 4vw, 72px);
  }

  body.public-site-page .nav-logo {
    grid-column: 1;
    justify-self: start;
    align-items: flex-start;
  }

  body.public-site-page .nav-center-empty {
    grid-column: 2;
    justify-self: center;
  }

  body.public-site-page .nav-right {
    grid-column: 3;
    justify-self: end;
    justify-content: flex-end;
    gap: 8px;
  }
}

body.public-site-page .btn-nav {
  min-height: 40px;
  padding-inline: clamp(13px, 1.15vw, 17px);
  border-radius: 6px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(0.72rem, 0.78vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

body.public-site-page .btn-nav-secondary {
  border-color: rgba(220, 232, 229, 0.18);
  background: #0d1a24;
  color: #dce8e5;
}

body.public-site-page .btn-nav-primary {
  border-color: rgba(93, 233, 179, 0.42);
  background: var(--public-green);
  color: #06100c;
  box-shadow: 0 8px 24px rgba(15, 168, 110, 0.16);
}

body.public-site-page .btn-nav-secondary:hover {
  color: #eef5f1;
  border-color: rgba(35, 209, 139, 0.42);
  background: rgba(18, 42, 50, 0.96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

body.public-site-page .btn-nav-primary:hover {
  color: #06100c;
  border-color: var(--public-green-bright);
  background: var(--public-green-bright);
  box-shadow: 0 10px 28px rgba(15, 168, 110, 0.22);
}

body.public-site-page .site-footer {
  border-top: 1px solid var(--public-line);
  background:
    radial-gradient(circle at 22% 0%, rgba(18, 184, 121, 0.07), transparent 26rem),
    var(--public-bg);
}

body.public-site-page .footer-nav a {
  color: rgba(238, 245, 241, 0.6);
}

body.public-site-page .footer-nav a:hover {
  color: var(--public-green);
}

.public-page-main {
  position: relative;
  min-height: calc(100svh - 160px);
  padding: clamp(126px, 14svh, 164px) 0 clamp(72px, 9svh, 110px);
}

.public-page-shell {
  position: relative;
  z-index: 1;
  width: min(calc(100% - clamp(40px, 8vw, 128px)), 1120px);
  margin-inline: auto;
}

/* Green signal pill matching the landing "How it works" tag. */
.public-page-kicker {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  width: fit-content;
  min-height: 30px;
  padding: 0 14px;
  border: 1px solid rgba(35, 209, 139, 0.18);
  border-radius: 999px;
  background: rgba(35, 209, 139, 0.055);
  color: rgba(35, 209, 139, 0.82);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.public-page-kicker::before {
  content: "";
  width: 14px;
  height: 1px;
  background: rgba(35, 209, 139, 0.82);
}

.public-site-page h1 {
  /* Typography now comes from the .t-hero / .t-section utilities each page adopts;
     only the balanced wrap (layout) stays here. */
  text-wrap: balance;
}

.public-site-page h1 em {
  color: var(--public-green);
  font-style: normal;
}

/* Landing-style buttons: title case, softer radius, green gradient fill. */
.public-btn {
  min-height: 52px;
  padding: 12px 22px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.public-btn-primary {
  border-color: transparent;
  color: #05130d;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 38%),
    linear-gradient(135deg, #2ccc91, #16a86f);
  box-shadow: 0 0.5rem 1rem rgba(6, 17, 22, 0.3);
}

.public-btn-primary:hover {
  border-color: transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 38%),
    linear-gradient(135deg, #30d497, #18b074);
}

.public-btn-secondary {
  border-color: rgba(220, 232, 229, 0.2);
  background: var(--public-panel);
  color: var(--public-text);
}

.public-btn-secondary:hover {
  border-color: rgba(18, 184, 121, 0.48);
  background: var(--public-panel-strong);
}

/* ── About ────────────────────────────────────────────────────────────────────
   One quiet, consistently left-aligned column on the shared public atmosphere
   (the ambient grid + green radials from body.public-site-page). Every section
   shares the same left edge and a common vertical rhythm (.about-block); the
   green accent is the shared --public-green so About reads as one system with
   the rest of the site. */
.about-page {
  --about-accent: var(--public-green);
}

.public-page-main.about-page {
  padding: clamp(104px, 12vh, 128px) 0 clamp(88px, 10vh, 112px);
}

.public-page-shell.about-wrap {
  width: min(100%, 1080px);
  max-width: 1080px;
  margin: 0 auto;
  box-sizing: border-box;
  padding-inline: clamp(22px, 4vw, 40px);
}

/* Shared eyebrow: small green label seated above each section heading. */
.about-eyebrow {
  margin: 0 0 16px;
  color: var(--about-accent);
}

/* Shared section rhythm + hairline seam between blocks. */
.about-block {
  padding: clamp(56px, 7vh, 80px) 0;
  border-top: 1px solid var(--public-line);
}

.about-block-title {
  max-width: 24ch;
  margin: 0;
}

.about-block-title span {
  color: var(--about-accent);
}

.about-block-copy {
  max-width: 62ch;
  margin: 24px 0 0;
  color: var(--public-copy);
}

/* Hero — the only section without a top seam; sets the shared left edge. */
.about-hero {
  padding-bottom: clamp(48px, 6vh, 68px);
}

.about-hero-title {
  max-width: 18ch;
  margin: 0;
}

.about-hero-title span {
  color: var(--about-accent);
}

.about-hero-copy {
  max-width: 60ch;
  margin: 28px 0 0;
  color: var(--public-copy);
}

/* Founder — photo beside a top-aligned note. */
.about-founder {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(32px, 4vw, 60px);
  align-items: center;
}

.about-founder-photo-shell {
  padding: 8px;
  border: 1px solid var(--public-line);
  border-radius: 24px;
  background: var(--public-panel);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

/* Inner clip frame: fixed rounded box that crops the portrait so it can be
   zoomed in (transform) without spilling past the frame. */
.about-founder-photo {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  border: 1px solid var(--public-line);
}

.about-founder-photo-shell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Zoom the framed portrait in ~10%. */
  transform: scale(1.1);
}

.about-founder-content .about-block-title {
  margin-top: 6px;
}

.about-founder-copy {
  max-width: 56ch;
  margin: 20px 0 0;
  color: var(--public-copy);
}

.about-founder-attribution {
  margin-top: 28px;
}

.about-founder-name {
  margin: 0;
}

.about-founder-role {
  margin: 4px 0 0;
  color: var(--public-muted);
}

/* Principles — three quiet glass cards. */
.about-principles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(32px, 4vh, 44px);
}

.about-principle-card {
  padding: 28px;
  border: 1px solid var(--public-line);
  border-radius: 20px;
  background: var(--public-panel);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.about-principle-card:hover {
  transform: translateY(-3px);
  border-color: rgba(35, 209, 139, 0.28);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.3);
}

.about-principle-number {
  margin: 0 0 26px;
  color: var(--about-accent);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.about-principle-title {
  margin: 0 0 12px;
}

.about-principle-copy {
  margin: 0;
  color: var(--public-copy);
}

/* CTA — green-tinted glass panel closing the page. */
.about-cta-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(28px, 4vw, 48px);
  margin-top: clamp(56px, 7vh, 80px);
  padding: clamp(36px, 4.5vw, 56px);
  border: 1px solid var(--public-line);
  border-radius: 26px;
  background:
    radial-gradient(circle at 18% 0%, rgba(70, 108, 150, 0.14), transparent 42%),
    linear-gradient(135deg, var(--public-panel-strong), var(--public-panel));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.34);
}

.about-cta-title {
  max-width: 18ch;
  margin: 0;
}

.about-cta-body {
  max-width: 46ch;
  margin: 16px 0 0;
  color: var(--public-copy);
}

.about-cta-actions {
  display: flex;
  flex-shrink: 0;
  gap: 12px;
  align-items: center;
}

.about-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 26px;
  border-radius: 10px;
  white-space: nowrap;
  transition: transform 200ms ease, background 200ms ease, border-color 200ms ease;
}

.about-btn:hover {
  transform: translateY(-1px);
}

.about-btn-primary {
  background: var(--public-green);
  color: #06100c;
  box-shadow: 0 16px 42px rgba(15, 168, 110, 0.24);
}

.about-btn-primary:hover {
  background: var(--public-green-bright);
}

.about-btn-secondary {
  border: 1px solid var(--public-line);
  background: var(--public-panel);
  color: var(--public-text);
}

.about-btn-secondary:hover {
  border-color: rgba(35, 209, 139, 0.42);
  background: var(--public-panel-strong);
}

@media (max-width: 860px) {
  .public-page-main.about-page {
    padding: 88px 0 84px;
  }

  .about-founder {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .about-founder-photo-shell {
    max-width: 260px;
  }

  .about-principles-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .about-cta-panel {
    flex-direction: column;
    align-items: flex-start;
  }

  .about-cta-actions {
    flex-direction: column;
    width: 100%;
  }

  .about-btn {
    width: 100%;
  }
}

/* ── Contact — one composed enquiry section ──────────────────────────────────
   A single centred composition (~1200px) rather than a full-bleed 40/60 split:
   a quiet left content column and a raised dark-glass form panel, top-aligned so
   the two read as one section. Atmosphere (a barely-there grid + a soft radial
   pooled behind the form) lives on the page behind both columns. Everything here
   is scoped to the contact classes so the shared public/auth pages are untouched. */

/* Drop the fixed ambient grid the other public pages carry — contact paints its
   own quiet atmosphere behind the composition. */
body.contact-split-body::before {
  content: none;
}

body.contact-split-body {
  background: #03070d;
}

/* Page = full viewport holding the composition + atmosphere. The card is now
   short enough to centre and still clear 1440×900 / 1512×850 without clipping, so
   the leftover vertical slack splits evenly (composed) instead of pooling at the
   bottom. A firm top padding keeps it from ever riding up under the navbar. */
.contact-split-page {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  overflow: hidden;
  padding:
    clamp(6rem, 8.5vh, 7rem)
    clamp(1.5rem, 5vw, 4rem)
    clamp(3rem, 6vh, 4.25rem);
}

/* Barely-there depth grid — quietened again so it reads as texture, not feature. */
.contact-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(156, 178, 202, 0.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(156, 178, 202, 0.014) 1px, transparent 1px);
  background-size: 84px 84px;
  -webkit-mask-image: radial-gradient(130% 108% at 50% 30%, #000 36%, transparent 88%);
          mask-image: radial-gradient(130% 108% at 50% 30%, #000 36%, transparent 88%);
}

/* A soft dark radial pooled behind the form for depth — cool, never green — with
   a faint counter-light on the left copy and a deeper base vignette so the whole
   composition sits on quiet, expensive darkness. */
.contact-depth {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(54% 60% at 71% 44%, rgba(22, 44, 64, 0.3), transparent 72%),
    radial-gradient(44% 52% at 21% 40%, rgba(26, 66, 78, 0.045), transparent 68%),
    radial-gradient(120% 130% at 50% 114%, rgba(0, 0, 0, 0.45), transparent 58%);
}

/* The composed section: left copy + right form. justify-content keeps the two
   columns packed together as one centred unit, so there's no dead zone between. */
.contact-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 508px);
  align-items: start;
  justify-content: center;
  gap: clamp(2.5rem, 4.4vw, 4.5rem);
  width: 100%;
  max-width: 1120px;
}

/* ── Left content column — the landing hero, quietened ── */
.contact-brand {
  position: relative;
  /* Centre the whole left group vertically within the shell row (whose height is
     set by the taller form card), so the left content's midpoint lines up with
     the card's centre rather than top-aligning with the form header. */
  align-self: center;
}

.contact-brand-inner {
  max-width: 30rem;
}

.contact-brand-title {
  margin: 0;
  font-size: clamp(2.55rem, 3.85vw, 3.4rem);
  line-height: 0.98;
}

.contact-brand-title span {
  color: rgba(39, 200, 137, 0.92);
}

.contact-brand-lede {
  max-width: 24ch;
  margin: clamp(18px, 2.6vh, 26px) 0 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(1.1rem, 1.22vw, 1.22rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.006em;
  /* Softer than near-white so it reads cleanly without halation on the dark bg. */
  color: rgba(209, 220, 232, 0.84);
}

.contact-brand-copy {
  max-width: 34ch;
  margin: clamp(20px, 2.8vh, 28px) 0 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.6;
  /* Standard sub-headline body colour (the .t-body / --t-text-secondary token
     this page resolves to), matching subtext under headlines site-wide. */
  color: var(--t-text-secondary);
}

/* Contact-intent rows — a quiet spec-sheet beneath the copy: hairline-separated,
   purely typographic (no cards, no icons, no glow), kept lighter than the form
   card so it balances the left column without competing for attention. */
.contact-intents {
  margin: clamp(22px, 3vh, 30px) 0 0;
  padding: 0;
  list-style: none;
}

.contact-intent {
  display: grid;
  gap: 3px;
  padding: clamp(12px, 1.5vh, 15px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.045);
}

.contact-intent-title {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: -0.005em;
  /* Readable but quiet — off-white eased down so the titles support, not shout. */
  color: rgba(205, 217, 230, 0.78);
}

.contact-intent-desc {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.87rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(166, 183, 201, 0.64);
}

/* Response-time note — the quiet footer of the same hairline system, carrying the
   left column's single restrained emerald accent. */
.contact-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  padding-top: clamp(14px, 1.8vh, 17px);
  border-top: 1px solid rgba(255, 255, 255, 0.045);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.004em;
  color: rgba(178, 194, 211, 0.68);
}

.contact-meta-dot {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(35, 209, 139, 0.55);
  box-shadow: 0 0 0 3px rgba(35, 209, 139, 0.05);
}

/* ── Right column — carries only the glass panel (no full-height panel/seam) ── */
.contact-access {
  position: relative;
  /* Centre the card within the shell row. In the default state the form is the
     taller column so this is a no-op; in the success state the card shrinks and
     centring keeps it optically middled against the taller left copy instead of
     leaning to the top. */
  align-self: center;
}

/* The instrument: a raised dark glass / metal panel — quiet, single hairline. */
.contact-access-inner {
  width: 100%;
  padding: clamp(20px, 2vw, 24px) clamp(22px, 2.5vw, 34px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.016), rgba(255, 255, 255, 0) 42%),
    rgba(7, 17, 27, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 24px 70px rgba(0, 0, 0, 0.34);
  -webkit-backdrop-filter: blur(7px);
          backdrop-filter: blur(7px);
}

.contact-access-head {
  display: grid;
  gap: 11px;
  margin-bottom: clamp(16px, 2vh, 20px);
}

.contact-access-kicker {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(120, 210, 170, 0.7);
}

.contact-access-title {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  /* 34 → 36px: clear and premium, but deliberately secondary to "Let's talk." */
  font-size: clamp(2rem, 2.45vw, 2.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  /* Cool off-white, deliberately shy of pure white. */
  color: rgba(228, 237, 247, 0.94);
}

.contact-alerts {
  margin-bottom: 16px;
}

.contact-form {
  display: grid;
  gap: 11px;
}

/* ── Fields — quiet dark glass, refined Inter labels (scoped to contact) ── */
.contact-form .form-group {
  gap: 8px;
}

.contact-form .form-label {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(210, 220, 232, 0.72);
}

.contact-form .form-input,
.contact-form .form-textarea {
  min-height: 53px;
  padding: 13px 16px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 15px;
  background: rgba(3, 10, 17, 0.72);
  color: #dce6f2;
  font-size: 0.95rem;
}

.contact-form .form-textarea {
  min-height: 108px;
  padding-top: 13px;
  line-height: 1.55;
  resize: vertical;
}

.contact-form .form-input::placeholder,
.contact-form .form-textarea::placeholder {
  color: #64748b;
}

.contact-form .form-input:focus,
.contact-form .form-textarea:focus {
  border-color: rgba(34, 201, 133, 0.48);
  background: rgba(4, 13, 20, 0.85);
  box-shadow: 0 0 0 3px rgba(34, 201, 133, 0.08);
}

/* ── CTA — a deeper emerald key: quiet top highlight + soft shadow, no neon ── */
.contact-submit {
  width: 100%;
  min-height: 51px;
  margin-top: 5px;
  padding: 0 20px;
  border: 0;
  border-radius: 15px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0.002em;
  text-transform: none;
  color: #03130d;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 48%),
    linear-gradient(135deg, #22c985 0%, #0f9f6f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 26px rgba(6, 74, 52, 0.3);
  transition: transform var(--ease), box-shadow var(--ease), filter var(--ease);
}

.contact-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.035);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 13px 32px rgba(6, 74, 52, 0.36);
}

.contact-submit:active {
  transform: translateY(0);
  filter: brightness(0.99);
}

/* ── Privacy line — an understated quiet trust note, small refined lock ── */
.contact-secure-note {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: clamp(12px, 1.6vh, 16px);
  padding-top: clamp(12px, 1.6vh, 15px);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(170, 186, 204, 0.58);
}

.contact-secure-note svg {
  flex: 0 0 auto;
  width: 0.9rem;
  height: 0.9rem;
  fill: none;
  stroke: rgba(120, 210, 170, 0.58);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Elements below set an explicit `display`, which would otherwise win over the
   UA `[hidden]{display:none}` rule (equal specificity, author wins). Restore
   hiding so contact.js can toggle the `hidden` attribute reliably. */
.contact-form[hidden],
.contact-access-head[hidden],
.contact-alerts[hidden],
.contact-field-error[hidden],
.contact-secure-note[hidden],
.contact-success[hidden] {
  display: none;
}

/* ── Honeypot — visually and assistively hidden, still submittable by bots. ── */
.contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Inline field-level validation errors ─────────────────────────────────── */
.contact-field-error {
  margin: 2px 0 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #ffb0b6;
}

.contact-form .form-input.is-invalid,
.contact-form .form-textarea.is-invalid {
  border-color: rgba(255, 99, 112, 0.5);
  background: rgba(24, 10, 13, 0.72);
}

.contact-form .form-input.is-invalid:focus,
.contact-form .form-textarea.is-invalid:focus {
  border-color: rgba(255, 99, 112, 0.62);
  box-shadow: 0 0 0 3px rgba(255, 99, 112, 0.1);
}

/* ── Inline success state — dark surface, restrained emerald, no neon ─────── */
.contact-success {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: clamp(6px, 1.5vh, 14px) 0 clamp(4px, 1vh, 8px);
}

.contact-success-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  border: 1px solid rgba(35, 209, 139, 0.32);
  border-radius: 13px;
  background: rgba(35, 209, 139, 0.08);
}

.contact-success-mark svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #23d18b;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-success-eyebrow {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(35, 209, 139, 0.82);
}

.contact-success-title {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(1.5rem, 2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: rgba(238, 244, 255, 0.96);
}

.contact-success-copy {
  margin: 0;
  max-width: 30rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #aab7c8;
}

/* Contact composition → single stacked column (mirrors the login collapse). */
@media (max-width: 920px) {
  .contact-split-page {
    place-items: stretch;
    padding:
      clamp(5.5rem, 12vh, 7rem)
      clamp(1.35rem, 6vw, 3rem)
      clamp(2.75rem, 6vh, 3.75rem);
  }

  .contact-shell {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    justify-content: stretch;
    gap: clamp(1.75rem, 5vh, 2.5rem);
    max-width: 33rem;
    margin-inline: auto;
  }

  .contact-brand {
    padding-top: 0;
  }

  .contact-brand-inner {
    max-width: none;
  }

  .contact-brand-title,
  .contact-brand-copy {
    text-align: center;
  }

  .contact-brand-copy {
    margin-inline: auto;
  }

  /* After a successful send the card collapses to just the confirmation panel, so
     the stacked column no longer fills the viewport. The shell is stretched to
     100svh here, so that short content would otherwise float centred and low —
     pack the rows to the top so the confirmation sits just beneath the headline
     copy, spaced by the normal shell gap. (Desktop keeps the side-by-side centring
     that .contact-access documents.) */
  .contact-shell:has(.contact-access-inner.is-sent) {
    align-content: start;
  }

  .contact-shell:has(.contact-access-inner.is-sent) .contact-access {
    align-self: start;
  }
}

@media (max-width: 560px) {
  .contact-split-page {
    padding-top: clamp(5.25rem, 11vh, 6.5rem);
  }

  .contact-brand-title {
    font-size: clamp(2.3rem, 9.5vw, 2.8rem);
  }

  /* On phones the left column stacks above the form; drop the intent spec-sheet
     so the message form is reached sooner. Desktop keeps it. */
  .contact-intents {
    display: none;
  }

  /* Phones show only the heading + copy in the left column, then the form. Drop the
     response note here too (it stays on desktop); with it gone the copy is the last
     thing above the form, so the shell keeps its default gap for breathing room. */
  .contact-meta {
    display: none;
  }

  .contact-access-inner {
    padding: 22px 20px;
    border-radius: 24px;
  }
}

@media (max-width: 860px) {
  body.public-site-page .navbar,
  body.public-site-page .navbar.scrolled {
    padding: 0;
    background: rgba(6, 17, 22, 0.94);
  }

  body.public-site-page .nav-inner {
    padding: 8px 14px;
  }

  .public-page-main {
    min-height: auto;
    padding: 92px 0 62px;
  }

  .public-page-shell {
    width: min(calc(100% - 48px), 560px);
  }

  body.public-site-page .footer-inner {
    width: min(calc(100% - 48px), 560px);
  }
}

@media (max-width: 380px) {
  .public-page-shell,
  body.public-site-page .footer-inner {
    width: calc(100% - 40px);
  }
}