/* ==========================================================================
   ReThink — a horizontal "deck" instead of a scrolling page.
   Five full-screen cards snapped edge to edge: Cover, Signal, What We Do,
   Proof, Let's Talk. Navigate by scroll/swipe, the bottom rail, or arrows.
   One shared engine across every niche — only --accent/--accent-2 and the
   copy change per business type.
   ========================================================================== */

:root {
  --bg: #09090b;
  --fg: #f5f5f4;
  --muted: rgba(245,245,244,0.62);
  --muted-2: rgba(245,245,244,0.4);
  --line: rgba(245,245,244,0.14);
  --accent: #ff4d2e;
  --accent-2: #ffb800;
  --radius: 22px;
  --shadow: 0 40px 90px -30px rgba(0,0,0,0.65);
  --serif: 'Unbounded', 'Inter', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
body { height: 100vh; height: 100dvh; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.05; margin: 0; letter-spacing: -0.01em; }
a { color: inherit; }
button { font-family: inherit; }
.muted { color: var(--muted); }
.rt-eyebrow {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem;
}
.rt-eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--accent); display: inline-block; }

/* ---------- persistent chrome (outside the deck) ---------- */
.rt-top-scrim {
  position: fixed; top: 0; left: 0; right: 0; height: 140px; z-index: 35;
  background: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 55%, transparent 100%);
  pointer-events: none;
}
.rt-brand {
  position: fixed; top: 1.5rem; left: 1.75rem; z-index: 40;
  display: flex; align-items: center; gap: 0.6rem;
  text-decoration: none; color: var(--fg);
}
.rt-brand-mark {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
}
.rt-brand-name { font-family: var(--serif); font-size: 0.95rem; font-weight: 600; }

.rt-fab {
  position: fixed; top: 1.5rem; right: 1.5rem; z-index: 40;
  display: flex; gap: 0.5rem;
  background: rgba(10,10,12,0.55);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.4rem; box-shadow: 0 8px 24px -10px rgba(0,0,0,0.5);
}
.rt-fab a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  text-decoration: none; font-size: 0.82rem; font-weight: 600;
  padding: 0.55rem 1rem; border-radius: 999px; white-space: nowrap;
}
.rt-fab .rt-fab-call { background: var(--fg); color: var(--bg); }
.rt-fab .rt-fab-quote { color: var(--fg); }
.rt-fab .rt-fab-quote:hover { background: rgba(255,255,255,0.08); }

.rt-rail {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 40;
  display: flex; align-items: center; gap: 0.35rem;
  background: rgba(10,10,12,0.55);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.4rem; box-shadow: 0 8px 24px -10px rgba(0,0,0,0.5);
}
.rt-rail-btn {
  border: none; background: none; cursor: pointer; color: var(--muted);
  font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 0.5rem 0.65rem; border-radius: 999px; display: flex; align-items: center; gap: 0.45rem;
  transition: color 0.2s ease, background 0.2s ease;
}
.rt-rail-btn .rt-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.5; transition: all 0.25s ease; }
.rt-rail-btn:hover { color: var(--fg); }
.rt-rail-btn.is-active { color: var(--bg); background: var(--fg); }
.rt-rail-btn.is-active .rt-dot { background: var(--accent); opacity: 1; width: 8px; height: 8px; }
.rt-rail-label { display: none; }
@media (min-width: 720px) {
  .rt-rail-label { display: inline; }
}
@media (max-width: 560px) {
  .rt-brand-name { display: none; }
  .rt-fab .rt-fab-quote { display: none; }
  .rt-fab { padding: 0.3rem; }
  .rt-fab a { padding: 0.5rem 0.75rem; font-size: 0.78rem; }
}

.rt-hint {
  position: fixed; bottom: 5.5rem; left: 50%; transform: translateX(-50%); z-index: 39;
  font-family: var(--mono); font-size: 0.75rem; color: var(--muted);
  display: flex; align-items: center; gap: 0.6rem; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.5s ease;
}
.rt-hint.is-visible { opacity: 1; }
.rt-hint-arrow { display: inline-block; animation: rtNudge 1.6s ease-in-out infinite; }
@keyframes rtNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

.rt-arrow {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 38;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(10,10,12,0.55); backdrop-filter: blur(10px);
  color: var(--fg); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.2s ease, opacity 0.2s ease;
  opacity: 0.7;
}
.rt-arrow:hover { background: rgba(255,255,255,0.12); opacity: 1; }
.rt-arrow[disabled] { opacity: 0; pointer-events: none; }
.rt-arrow-prev { left: 1.25rem; }
.rt-arrow-next { right: 1.25rem; }
@media (max-width: 720px) { .rt-arrow { display: none; } }

/* ---------- the deck ---------- */
.rt-deck {
  display: flex; width: 100%; height: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none; scrollbar-width: none;
}
.rt-deck::-webkit-scrollbar { display: none; }
.rt-card {
  flex: 0 0 100%; width: 100%; height: 100%;
  scroll-snap-align: start; scroll-snap-stop: always;
  position: relative; overflow-y: auto; overflow-x: hidden;
  display: flex; align-items: center;
}
.rt-card-inner {
  width: 100%; max-width: 1180px; margin: 0 auto;
  padding: 7rem 2rem 6rem;
}
.rt-index {
  position: absolute; bottom: 1.75rem; left: 2rem; z-index: 2;
  font-family: var(--mono); font-size: 0.75rem; color: var(--muted-2); letter-spacing: 0.08em;
}
@media (max-width: 720px) {
  .rt-card-inner { padding: 6.5rem 1.35rem 7rem; }
  .rt-index { display: none; }
}

/* ---------- card 1: cover ---------- */
/* overflow:hidden (not just the .rt-card default of overflow-y:auto) — the Ken
   Burns zoom below scales .rt-cover-bg via transform, which inflates the ink
   overflow this card's own overflow-y:auto reacts to, making the whole card
   grow and shrink into a scrollable state in sync with the 22s zoom cycle. */
.rt-cover { padding: 0; overflow: hidden; }
/* The zoom lives on an inner div, not the clickable/badge-bearing wrapper —
   a transform:scale() on the SAME element a badge is anchored to drags that
   anchor point along with it, so at full zoom the badge (and the clickable
   hit area) had drifted toward the corner and off past the viewport edge. */
.rt-cover-bg-wrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.rt-cover-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  animation: rtKenBurns 22s ease-in-out infinite alternate;
}
@keyframes rtKenBurns { from { transform: scale(1); } to { transform: scale(1.08); } }
.rt-cover-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(9,9,11,0.96) 0%, rgba(9,9,11,0.82) 42%, rgba(9,9,11,0.4) 75%, rgba(9,9,11,0.55) 100%);
}
/* pointer-events:none here, re-enabled on its direct children — otherwise this
   container's own empty padding (it spans the full card) sits on top of the
   cover photo at z-index:2 and swallows clicks meant for the photo beneath,
   even in areas with no visible text in them. */
.rt-cover .rt-card-inner { position: relative; z-index: 2; pointer-events: none; }
.rt-cover .rt-card-inner > * { pointer-events: auto; }
.rt-cover-tag {
  font-family: var(--mono); font-size: 0.85rem; color: var(--accent-2);
  display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem;
  border: 1px solid var(--line); border-radius: 999px; padding: 0.45rem 1rem;
  background: rgba(255,255,255,0.04);
}
.rt-cover h1 {
  font-size: clamp(2.4rem, 6.5vw, 5.2rem); max-width: 760px;
  background: linear-gradient(100deg, #fff 30%, var(--accent-2) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rt-cover-sub {
  font-family: var(--mono); font-size: 0.95rem; color: var(--muted);
  max-width: 480px; margin-top: 1.5rem; line-height: 1.6;
}
.rt-cover-ctas { display: flex; gap: 1rem; margin-top: 2.5rem; flex-wrap: wrap; }
.rt-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 1rem 1.9rem; border-radius: 999px; font-weight: 700; font-size: 0.98rem;
  text-decoration: none; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #0a0a0a;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 16px 40px -14px color-mix(in srgb, var(--accent) 65%, transparent);
}
.rt-btn:hover { transform: translateY(-2px); }
.rt-btn-ghost {
  background: transparent; color: var(--fg); box-shadow: none;
  border: 1.5px solid var(--line);
}
.rt-btn-ghost:hover { border-color: var(--fg); background: rgba(255,255,255,0.05); }

/* ---------- card 2: signal (stats) ---------- */
.rt-signal-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
  margin-top: 3rem;
}
.rt-signal-item { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.rt-signal-num {
  font-family: var(--serif); font-weight: 600; font-size: clamp(2.6rem, 8vw, 5.5rem);
  line-height: 1; background: linear-gradient(135deg, #fff, var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rt-signal-label { font-family: var(--mono); font-size: 0.85rem; color: var(--muted); margin-top: 0.85rem; display: block; }
@media (max-width: 820px) {
  .rt-signal-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ---------- card 3: services (accordion) ---------- */
.rt-services-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 2rem; }
.rt-services-list { border-top: 1px solid var(--line); }
.rt-service {
  border-bottom: 1px solid var(--line);
}
.rt-service-row { display: flex; align-items: center; gap: 0.75rem; }
.rt-service-btn {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 1.1rem;
  background: none; border: none; color: var(--fg); cursor: pointer;
  padding: 1.4rem 0; text-align: left;
}
.rt-service-icon {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease;
}
.rt-service.is-open .rt-service-icon { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.rt-service-icon svg { width: 20px; height: 20px; stroke: var(--fg); }
.rt-service.is-open .rt-service-icon svg { stroke: #0a0a0a; }
.rt-service-name { font-family: var(--serif); font-size: 1.15rem; font-weight: 500; flex: 1; }
.rt-service-chevron { color: var(--muted); transition: transform 0.25s ease; flex-shrink: 0; }
.rt-service.is-open .rt-service-chevron { transform: rotate(180deg); color: var(--accent-2); }
.rt-service-panel {
  max-height: 0; overflow: hidden; transition: max-height 0.35s ease;
}
.rt-service.is-open .rt-service-panel { max-height: 200px; }
.rt-service-panel p {
  margin: 0 0 1.5rem 3.65rem; color: var(--muted); max-width: 560px; font-size: 0.98rem; line-height: 1.6;
}
@media (max-width: 560px) {
  .rt-service-panel p { margin-left: 0; }
}

/* ---------- card 4: proof (fanned gallery) ---------- */
.rt-proof-stage {
  position: relative; height: 440px; max-width: 800px; margin: 3.5rem auto 0;
}
.rt-proof-card {
  --i: 0; --step: 155px; --w: 250px; --h: 330px;
  position: absolute; top: 50%; left: 50%; width: var(--w); height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow); cursor: pointer;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
  z-index: calc(var(--i) + 1);
  transform: translateX(calc((var(--i) - 1.5) * var(--step))) rotate(calc((var(--i) - 1.5) * 6deg)) translateY(10px);
}
.rt-proof-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rt-proof-card figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem 1.25rem;
  background: linear-gradient(0deg, rgba(0,0,0,0.75), transparent);
  font-family: var(--mono); font-size: 0.8rem; opacity: 0; transition: opacity 0.2s ease;
}
.rt-proof-card.is-front {
  transform: translateX(calc((var(--i) - 1.5) * var(--step))) translateY(-18px) scale(1.06);
  z-index: 20;
}
.rt-proof-card.is-front figcaption { opacity: 1; }
.rt-proof-card:hover { z-index: 25; }
.rt-proof-card:not(.is-front):hover {
  transform: translateX(calc((var(--i) - 1.5) * var(--step))) rotate(calc((var(--i) - 1.5) * 6deg)) translateY(-12px);
}
.rt-proof-hint { text-align: center; font-family: var(--mono); font-size: 0.78rem; color: var(--muted-2); margin-top: 1.5rem; }
@media (max-width: 720px) {
  .rt-proof-stage { height: 320px; max-width: 340px; }
  .rt-proof-card { --step: 66px; --w: 130px; --h: 175px; }
}

/* ---------- card 5: let's talk ---------- */
.rt-contact-top { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: start; }
.rt-contact-city { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-top: 0.5rem; }
.rt-phone-cta {
  display: inline-flex; flex-direction: column; gap: 0.35rem;
  text-decoration: none; color: var(--fg); margin-top: 2rem;
}
.rt-phone-cta-label { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.rt-phone-cta-num {
  font-family: var(--serif); font-weight: 600; font-size: clamp(2.1rem, 6vw, 3.4rem);
  background: linear-gradient(135deg, #fff, var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: transform 0.2s ease;
}
.rt-phone-cta:hover .rt-phone-cta-num { transform: translateX(6px); }
.rt-address { margin-top: 1.75rem; font-size: 0.92rem; color: var(--muted-2); max-width: 320px; }

.rt-form-toggle {
  background: none; border: 1.5px solid var(--line); color: var(--fg); cursor: pointer;
  border-radius: 999px; padding: 0.7rem 1.35rem; font-size: 0.88rem; font-weight: 600;
  margin-top: 2.25rem; display: inline-flex; align-items: center; gap: 0.5rem;
}
.rt-form-toggle:hover { border-color: var(--fg); }
.rt-form-wrap { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.rt-form-wrap.is-open { max-height: 900px; }
.rt-quote-form {
  background: var(--fg); color: #0a0a0a; border-radius: var(--radius);
  padding: 2rem; margin-top: 1.5rem; box-shadow: var(--shadow);
}
.rt-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.rt-field { margin-bottom: 1.1rem; }
.rt-field label { display: block; font-weight: 700; font-size: 0.82rem; margin-bottom: 0.4rem; }
.rt-field input, .rt-field select, .rt-field textarea {
  width: 100%; padding: 0.75rem 0.9rem; border: 1.5px solid rgba(10,10,10,0.15); border-radius: 10px;
  font-size: 0.95rem; font-family: inherit; background: #fff; color: #0a0a0a;
}
.rt-field input:focus, .rt-field select:focus, .rt-field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent);
}
.rt-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.5rem; }
.rt-check-pill {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.75rem;
  border: 1.5px solid rgba(10,10,10,0.15); border-radius: 10px; font-size: 0.85rem; cursor: pointer;
}
.rt-check-pill:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.rt-submit {
  width: 100%; padding: 1rem; border-radius: 999px; border: none; cursor: pointer;
  background: #0a0a0a; color: #fff; font-weight: 700; font-size: 1rem; margin-top: 0.5rem;
}
.rt-credit { margin-top: 3rem; font-size: 0.78rem; color: var(--muted-2); }
.rt-credit a { color: var(--muted); text-decoration: underline; }

@media (max-width: 820px) {
  .rt-contact-top { grid-template-columns: 1fr; gap: 2rem; }
  .rt-form-row { grid-template-columns: 1fr; }
  .rt-form-decor { display: none; }
}

/* ---------- reduced motion / accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .rt-deck { scroll-behavior: auto; }
  .rt-cover-bg { animation: none; }
  .rt-hint-arrow { animation: none; }
}

/* Editor mode: keep the sticky brand/FAB/scrim clear of the fixed toolbar above them. */
body.is-editable .rt-brand, body.is-editable .rt-fab { top: calc(1.5rem + 44px); }
body.is-editable .rt-top-scrim { top: 44px; }