/*
 * Jurisio Request Demo / Contact — mobile production layer.
 * Source truth: supplied contact-mobile.css. Preview-device chrome is omitted.
 */

@media not all and (min-width: 540px) {
/* ============================================================
   JURISIO — Request a Demo, MOBILE
   Tall single-column port of the desktop contact page.
   Dark ice hero holds the live Nexus demo (glass cards over the
   painting); a clean cream section below carries the request form.
   Reuses the gm- header / menu / footer chrome from garden-mobile.css;
   contact-specific pieces are scoped under .ctm-.
   ============================================================ */

/* Bring the design-system cream tokens onto the phone screen so the
   form section + ContactDemo read exactly like desktop. */
:root {
  --bg:        oklch(0.965 0.012 85);
  --bg-warm:   oklch(0.945 0.018 80);
  --surface:   oklch(0.99 0.005 85);
  --surface-2: oklch(0.975 0.008 80);
  --ink:       oklch(0.22 0.015 60);
  --ink-2:     oklch(0.36 0.014 65);
  --muted:     oklch(0.55 0.012 70);
  --muted-2:   oklch(0.68 0.010 75);
  --border:    oklch(0.88 0.012 75);
  --border-strong: oklch(0.78 0.014 75);
  --accent:      oklch(0.42 0.07 160);
  --accent-ink:  oklch(0.32 0.07 160);
  --accent-tint: oklch(0.94 0.03 160);
  --accent-on:   #fdfbf6;
  --cream:       #f6ddb0;
  --shadow-md: 0 1px 0 oklch(0.78 0.014 75 / 0.4), 0 8px 28px oklch(0.22 0.015 60 / 0.07);

  --font-display: "Newsreader", "Source Serif 4", Georgia, serif;
  --font-sans:    "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, monospace;
}
#app { background: #0b1620; }
.ctm-app {
  min-height: 100%;
  background: var(--bg);
  font-family: var(--gm-font-sans);
  color: var(--gm-ink);
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Match the landing header behaviour (floating pill → solid top bar on scroll).
   overflow-anchor:none stops the browser from re-adjusting scrollTop when the
   header changes height, which is what caused the earlier snap-loop. */
.ctm-app .gm-scroll-area { overflow-anchor: none; }

/* ============================================================
   HERO — full-bleed ice painting with copy pinned to the bottom
   ============================================================ */
.ctm-hero {
  position: relative;
  margin-top: calc(-1 * (var(--safe-top, 0px) + 64px)); /* slide under floating header + status bar */
  overflow: hidden; isolation: isolate;
  background: #0b1620;
  min-height: 100%;
  display: flex; align-items: flex-start;
  padding: calc(var(--safe-top, 0px) + 88px) 16px calc(var(--safe-bottom, 0px) + 36px);
}
@media (min-width: 540px) { .ctm-hero { min-height: 874px; } }
@media (max-width: 539.98px) { .ctm-hero { min-height: 100svh; } }
.ctm-hero-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 28%;
  opacity: 0; transition: opacity 1000ms ease;
}
.ctm-app.ready .ctm-hero-photo { opacity: 1; }
.ctm-hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(9,16,24,.30) 0%, rgba(9,16,24,.58) 48%, rgba(9,16,24,.78) 100%);
}
.ctm-hero-inner { position: relative; z-index: 3; width: 100%; }

/* ============================================================
   REQUEST FORM — cream card floating on the ice hero
   ============================================================ */
.ctm-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 22px;
  padding: 26px 22px 24px;
  box-shadow: 0 30px 70px -28px rgba(6,14,24,.7), var(--shadow-md);
  opacity: 0; transform: translateY(16px);
  transition: opacity 700ms ease 160ms, transform 700ms cubic-bezier(.2,.7,.3,1) 160ms;
}
.ctm-app.ready .ctm-card { opacity: 1; transform: none; }
.ctm-card-head { margin-bottom: 16px; }
.ctm-card-eyebrow {
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.ctm-card-eyebrow .dot { width: 4px; height: 4px; border-radius: 999px; background: var(--accent); }
.ctm-card-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(24px, 6.6vw, 28px); line-height: 1.02;
  letter-spacing: -0.025em; color: var(--ink); margin: 0;
}
.ctm-card-sub {
  font-size: 13px; line-height: 1.45; color: var(--ink-2); margin: 8px 0 0; text-wrap: pretty;
}

.ctm-form { display: flex; flex-direction: column; gap: 13px; }
.ctm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ctm-field { display: flex; flex-direction: column; gap: 5px; }
.ctm-label {
  font-family: var(--font-sans); font-size: 11px; color: var(--ink-2); font-weight: 600;
}
.ctm-input, .ctm-textarea {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  color: var(--ink); font-family: var(--font-sans); font-size: 13.5px;
  padding: 9px 11px; outline: none; width: 100%; box-sizing: border-box;
  transition: border-color 180ms, box-shadow 180ms;
  -webkit-appearance: none; appearance: none;
}
.ctm-input::placeholder, .ctm-textarea::placeholder { color: var(--muted-2); }
.ctm-input:focus, .ctm-textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint);
}
.ctm-textarea { resize: vertical; min-height: 84px; line-height: 1.5; }

.ctm-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px 22px; border-radius: 11px; margin-top: 3px;
  background: var(--ink); color: var(--bg);
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  border: none; cursor: pointer; transition: opacity 160ms;
}
.ctm-submit:active { opacity: .85; }
.ctm-submit:disabled { opacity: 0.55; cursor: progress; }
.ctm-fineprint {
  font-family: var(--font-sans); font-size: 12px; color: var(--muted); line-height: 1.5;
  margin: 0; text-align: center;
}

/* Sent state */
.ctm-sent { animation: ctm-in 360ms ease; }
@keyframes ctm-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ctm-sent-icon {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--accent-tint); color: var(--accent-ink); margin-bottom: 16px;
}
.ctm-sent-title {
  font-family: var(--font-display); font-size: clamp(24px, 6.5vw, 28px); line-height: 1.1;
  letter-spacing: -0.02em; color: var(--ink); margin: 0 0 12px; font-weight: 500;
}
.ctm-sent-sub {
  font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 20px; text-wrap: pretty;
}
.ctm-sent-ref {
  font-family: var(--font-sans); font-size: 13px; color: var(--muted);
  padding: 13px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.ctm-sent-ref b { color: var(--ink); font-weight: 600; }
.ctm-link-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 14px 22px; border-radius: 12px;
  background: transparent; color: var(--ink);
  font-family: var(--font-sans); font-size: 15px; font-weight: 500;
  border: 1px solid var(--border-strong); cursor: pointer; transition: background 160ms;
}
.ctm-link-btn:active { background: var(--surface-2); }

/* Directory rows under the form */
.ctm-dir {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px;
  margin-top: 18px; padding-top: 4px; border-top: 1px solid var(--border);
}
.ctm-dir .row {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.ctm-dir .row:nth-last-child(-n+2):nth-child(odd) { border-bottom: none; }
.ctm-dir .row:last-child { border-bottom: none; }
.ctm-dir .k {
  font-family: var(--font-sans); font-size: 9.5px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.ctm-dir .v {
  font-family: var(--font-sans); font-size: 12.5px; color: var(--ink); font-weight: 500;
}

}