/* =====================================================================
   ZipLane Dispatch — Apple "Business" (v3)
   In the style of apple.com/business. A centred hero with no single
   picture — instead an endless ribbon of photos and live clips glides
   beneath it ("ribbon"); the services are a calm icon grid with what's
   included; "Who we help"; the 24/7 desk on video; the reviews as large
   quote tiles; then how it works, FAQ and the quote form.
   ===================================================================== */
@import url("apple-v3.css?v=1") layer(v3);
@view-transition { navigation: auto; }
:root { --motion: split reveal draw smartnav ring video quotepick ribbon;   /* "magnetic" removed 2026-11-08: buttons stay in place on hover */ --hero-video: "none"; }

::view-transition-old(root) { animation: bizOut .4s var(--ease) both; }
::view-transition-new(root) { animation: bizIn .7s var(--ease-out) both; }
@keyframes bizOut { to { opacity: 0; } }
@keyframes bizIn { from { opacity: 0; transform: translateY(18px); } }

/* ---------- Order ---------- */
#ribbon, #audience, #desk { display: block; }
#why, #equipment { display: none; }
body.v3 > #ribbon { order: 4; }
body.v3 > #numbers { order: 10; }
body.v3 > #services { order: 11; }
body.v3 > #team-augmentation { order: 11; }
body.v3 > #how { order: 12; }
body.v3 > #audience { order: 13; }
body.v3 > #desk { order: 15; }
body.v3 > #testimonials { order: 16; }
body.v3 > #faq { order: 17; }
body.v3 > #blog { order: 18; }
body.v3 > #quote { order: 19; }

/* ---------- Hero + ribbon ---------- */
.hero { padding: calc(var(--nav-h) + clamp(64px, 9vw, 136px)) 0 clamp(28px, 3vw, 44px); }
.hero h1 { font-size: clamp(3rem, 7.8vw, 7rem); }
#ribbon { padding-block: 8px clamp(56px, 7vw, 96px); }
.rb { width: clamp(240px, 24vw, 360px); border-radius: 28px; }
.rb:nth-child(even) { width: clamp(300px, 30vw, 440px); }

/* ---------- Services: an icon grid ---------- */
.svc-grid { gap: 0; border-top: 1px solid var(--border); }
.svc { padding: clamp(32px, 3.4vw, 48px) clamp(20px, 2.4vw, 36px); background: none; border-radius: 0; border-bottom: 1px solid var(--border); }
.svc:not(:nth-child(3n + 1)) { border-left: 1px solid var(--border); }
.svc:hover { translate: none; box-shadow: none; background: var(--bg-soft); }
.svc .icon-chip { width: 56px; height: 56px; border-radius: 16px; background: var(--surface); }
.svc .svc-desc { display: none; }
.svc-list { display: grid; margin-bottom: 4px; }

/* ---------- Reviews: large quote tiles ---------- */
#testimonials .testi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
#testimonials .testi { padding: clamp(32px, 3vw, 44px); border-radius: 32px; }
#testimonials .testi blockquote { font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.45; letter-spacing: -.015em; font-weight: 500; }
#testimonials .testi:first-child { background: #000; }
#testimonials .testi:first-child :is(blockquote, .who b) { color: #f5f5f7; }
#testimonials .testi:first-child .who span { color: #86868b; }
#testimonials .testi:first-child .ava { background: #2c2c2e; color: #f5f5f7; }

#audience { background: var(--bg-soft); }
#audience .aud { background: var(--tile-alt); }

@media (max-width: 980px) {
  .svc:not(:nth-child(3n + 1)) { border-left: 0; }
  .svc:nth-child(even) { border-left: 1px solid var(--border); }
  #testimonials .testi-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero h1 { font-size: clamp(2.9rem, 14vw, 4rem); }
  .svc:nth-child(even) { border-left: 0; }
}

/* ---------- Device audit, Nov 2026 ---------- */
/* This design has no hero clip: hide its box from the first paint, so the page doesn't jump when the motion script loads */
.hero-bg { display: none; }

/* Touch screens: finger-sized buttons (44px, Apple's guideline) */
@media (max-width: 1024px) {
  .nav-cta .btn-light { width: 44px; height: 44px; }
}
@media (pointer: coarse) {
  .svc > .svc-plus { width: 44px; height: 44px; }
  .quote-points a { display: inline-block; padding-block: 10px; }   /* phone and email under the quote form */
}

/* Phone menu: a menu-link rule removed the bottom border of the outlined "Get a free quote" button */
.mobile-menu .mm-actions .btn { border-bottom-width: 1px; border-bottom-style: solid; }

/* Phones: the four numbers as 2 x 2 instead of one long column */
@media (max-width: 640px) {
  .grid-4:has(> .stat-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
}

/* Quote form: the optional text message box sits right under the required consent box */
.form-consent:has(+ .form-consent-sms) { margin-bottom: 10px; }

/* Phones: a shorter home page. "Add to your team" repeats the services above it and the desk section repeats
   the 24/7 message, so both are left out; the FAQ shows its first four questions, and "See all questions" opens the rest */
@media (max-width: 640px) {
  body.v3:not(.v3page) > :is(#team-augmentation, #desk) { display: none; }
  body.v3:not(.v3page) > #faq .faq-item:nth-child(n + 5) { display: none; }
}

/* Phones held sideways: headline, text and buttons fit on the first screen */
@media (orientation: landscape) and (max-height: 500px) {
  .hero { padding: calc(var(--nav-h) + 18px) 0 18px; }
  .hero h1 { font-size: clamp(2rem, 10vh, 2.75rem); }
  .hero .hero-lead { margin-top: 10px; font-size: .95rem; line-height: 1.4; }
  .hero .hero-actions { margin-top: 16px; }
  .hero .eyebrow { margin-bottom: 6px; }
}