/* Two Lane — the inner pages.
 *
 * Features, Why us, About, Contact. They share a quieter opening than the
 * homepage: no photograph, no full-viewport hero, because someone arriving
 * here has already decided to read. The device component and the tokens come
 * from base.css.
 */

.phead {
  padding: clamp(64px, 10vh, 108px) 0 clamp(34px, 5vh, 56px);
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(120% 140% at 82% -20%, var(--action-wash) 0%, transparent 58%),
    var(--ground);
}
.phead h1 { max-width: 17ch; font-size: clamp(38px, 6.5vw, 66px); }
.phead .lede { margin-top: 20px; }
.phead .cta { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }

/* --------------------------------------------------------- feature rows */

.frow { padding: clamp(66px, 10vh, 108px) 0; border-bottom: 1px solid var(--border); scroll-margin-top: 80px; }
.frow:nth-child(even) { background: var(--surface); }
.frow .grid {
  display: grid; gap: 46px; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
}
.frow:nth-child(even) .grid { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); }
.frow:nth-child(even) .copy { order: 2; }
@media (max-width: 880px) {
  .frow .grid, .frow:nth-child(even) .grid { grid-template-columns: 1fr; gap: 32px; }
  .frow:nth-child(even) .copy { order: 0; }
}
.frow h2 { max-width: 15ch; }
.frow .copy > p { margin-top: 18px; max-width: 48ch; color: var(--ink-2); font-size: 17.5px; }
.frow ul { margin: 20px 0 0; padding-left: 18px; color: var(--muted); font-size: 15.5px; max-width: 46ch; }
.frow li { margin-bottom: 8px; }
.frow li b { color: var(--ink); font-weight: 700; }

.stage { display: grid; place-items: center; perspective: 1400px; }
.stage .pair { display: flex; gap: 18px; align-items: flex-start; }
.stage .tilt {
  transform-style: preserve-3d;
  transform: rotateY(var(--ry, -11deg)) rotateX(4deg);
  filter: drop-shadow(0 30px 50px rgba(23,23,28,0.20));
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.stage .tilt:hover { transform: rotateY(0deg) rotateX(0deg) translateY(-6px); }
.stage .tilt .phone { max-width: 218px; }
.stage .pair .tilt .phone { max-width: 186px; }
@media (max-width: 520px) { .stage .pair { flex-direction: column; align-items: center; } }

/* ------------------------------------------------------------ contrast */

.versus { padding: clamp(66px, 10vh, 108px) 0; }
.vgrid { margin-top: 38px; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.vcard { border-radius: 18px; padding: 26px; border: 1px solid var(--border); background: var(--surface); }
.vcard.ours { background: var(--deep); border-color: transparent; color: #F6F2EA; }
.vcard .tag {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px; display: block;
}
.vcard.ours .tag { color: var(--gold); }
.vcard h3 { margin-bottom: 10px; }
.vcard.ours h3 { color: #F6F2EA; }
.vcard p { margin: 0; color: var(--muted); font-size: 15.5px; }
.vcard.ours p { color: #C9D4F2; }

.claims { margin-top: 26px; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface); }
.claims .r { display: grid; grid-template-columns: 1fr 120px 120px; gap: 12px; padding: 15px 22px; border-bottom: 1px solid var(--border); align-items: center; font-size: 15.5px; }
.claims .r:last-child { border-bottom: 0; }
.claims .r.hd { font-size: 11.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); background: var(--sunken); }
.claims .c { text-align: center; font-weight: 700; }
.claims .c.y { color: var(--green); }
.claims .c.n { color: var(--muted); }
@media (max-width: 660px) { .claims .r { grid-template-columns: 1fr 78px 78px; padding: 13px 14px; font-size: 14px; } }

/* --------------------------------------------------------------- prose */

.prose { padding: clamp(60px, 9vh, 96px) 0; }
.prose .col { max-width: 64ch; }
.prose h2 { margin-top: 46px; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-top: 16px; font-size: 17.5px; color: var(--ink-2); }
.prose .pull {
  margin: 34px 0; padding: 24px 26px; border-left: 3px solid var(--action);
  background: var(--surface); border-radius: 0 14px 14px 0;
  font-family: var(--display); font-size: 24px; line-height: 1.25; color: var(--ink);
}
.prose figure { margin: 34px 0 0; }
.prose figure img { width: 100%; height: auto; border-radius: 16px; display: block; }
.prose figcaption { margin-top: 12px; font-size: 13.5px; color: var(--muted); }

/* ------------------------------------------------------------- contact */

.contact { padding: clamp(56px, 8vh, 90px) 0 clamp(70px, 11vh, 120px); }
.cgrid { display: grid; gap: 44px; grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr); align-items: start; }
@media (max-width: 900px) { .cgrid { grid-template-columns: 1fr; gap: 34px; } }

.form { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--body); font-size: 16px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-firm); border-radius: 12px;
  padding: 13px 15px; min-height: 48px;
}
.field textarea { min-height: 148px; resize: vertical; line-height: 1.55; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: 2px solid var(--action); outline-offset: 1px; border-color: var(--action);
}
.field .help { font-size: 13px; color: var(--muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formnote { font-size: 13.5px; color: var(--muted); }
.status { border-radius: 12px; padding: 14px 16px; font-size: 15px; display: none; }
.status.show { display: block; }
.status.ok { background: rgba(20,120,60,0.10); color: var(--green); border: 1px solid rgba(20,120,60,0.25); }
.status.bad { background: rgba(198,40,40,0.08); color: var(--cherry); border: 1px solid rgba(198,40,40,0.24); }

.aside { border-radius: 18px; border: 1px solid var(--border); background: var(--surface); padding: 26px; }
.aside h3 { margin-bottom: 10px; }
.aside p { color: var(--muted); font-size: 15px; }
.aside .direct { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.aside .direct a { font-weight: 700; text-decoration: none; }

/* ------------------------------------------------------------- motion */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .stage .tilt {
      animation: stageIn linear both;
      animation-timeline: view(block);
      animation-range: entry 0% cover 42%;
    }
    @keyframes stageIn {
      from { transform: rotateY(var(--ry, -11deg)) rotateX(12deg) translateY(36px); }
      to   { transform: rotateY(var(--ry, -11deg)) rotateX(4deg) translateY(0); }
    }
  }
}

/* The map row runs full width instead of the usual copy | stage split —
   a map squeezed into the 0.82fr column is a thumbnail, not a map. */
.frow.mapfull .shell { display: block; }
.frow.mapfull .copy { max-width: none; }
.frow.mapfull .mapwrap { margin-top: 30px; }