/* ============================================================
   WEB VENTURES — SHOWROOM · THE SPACIOUS EDITION (additive layer)
   Owner direction: the showroom felt cramped — "a tech expo
   booth packed with cool gadgets." This layer changes ONLY the
   space around the work: one spectacular centerpiece per
   section, everything else quiet supporting cast, generous
   negative space, room-to-room pacing. Nothing shrinks — type,
   demo sizes and tap targets are untouched; copy, mechanics,
   the frozen hero, and the corrections layer (loaded after
   this file) are untouched. The page gets LONGER on purpose:
   height is reported, never targeted.
   ============================================================ */

/* ---------- the spacing rhythm: quiet zones between rooms ---------- */
.p2-section{padding:150px 0}
.p2-section .p2-head{margin-bottom:72px}
.mc-chapter{margin-bottom:34px}
.p2-section .p2-head p.p2-lede{margin-top:20px}
.p2-next{margin-top:54px}
.p2-partner{padding:120px 0}
section.cta{padding:150px 0}
footer{padding-top:64px}

/* ---------- room separation: deepen the darkest room a touch ---------- */
.p2-section.p2-e{background-color:#030409}

/* ---------- pacing: slower, softer chapter entrances ---------- */
.p2-reveal{transform:translateY(26px);transition:opacity 1s ease,transform 1s ease}
.reveal{transition:opacity 1s ease,transform 1s ease}
@media(prefers-reduced-motion:reduce){
  .p2-reveal,.reveal{transition:none}
}

/* ============================================================
   A · AI EMPLOYEES — the console is the room; the rest is orbit
   ============================================================ */
.p2-call-grid{grid-template-columns:1fr;gap:0}
#callConsole{order:-1;width:100%;max-width:940px;margin:0 auto}

/* the supporting cast, restacked beneath the console */
.sp-orbit{display:flex;flex-direction:column;width:100%;max-width:940px;margin:76px auto 0}
.sp-orbit .mc-trio{order:1;margin-top:0;border-top:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0 44px}
.sp-orbit .mc-emp{border-bottom:none;padding:8px 0}
.sp-orbit > h3{order:2;margin-top:76px}
.sp-orbit > p{order:3}
.sp-orbit .p2-demo-call{order:4;margin-top:26px;background:transparent;border:1px solid var(--line);padding:26px 28px}
.sp-orbit .p2-next{order:5;margin-top:48px}

/* ---------- footer: two quiet columns (product listing removed) ---------- */
.foot{grid-template-columns:1.4fr 1fr}
@media(max-width:800px){.foot{grid-template-columns:1fr}}

/* ============================================================
   B · SMART WEBSITES — the showcase is the room; the chat whispers
   ============================================================ */
.p2-devices{margin-top:28px}
.p2-device-cap{margin-top:56px}
.p2-site-chips{margin-top:26px}

/* the ask-a-question demo, demoted to a footnote glimpse:
   no panel, no chrome — a hairline, a caption-weight head,
   one exchange hugged tight. Fully functional, quietly dressed. */
.sr-chat{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;max-width:620px;margin:80px auto 0;padding:30px 6px 0}
.sr-chat .p2-chat-head{border-bottom:none;padding-bottom:6px}
.sr-chat .p2-chat-head b{font-family:var(--font-m);font-weight:500;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sr-chat .p2-bubbles{min-height:0}

/* ============================================================
   C · SEARCH VISIBILITY — the demo is the room; the steps whisper
   ============================================================ */
.p2-search-grid{gap:44px}
.p2-progress{border:none;background:transparent;margin-top:52px}
#searchProgress{margin-top:52px}
.p2-progress div{background:transparent;border-right:none}
.p2-progress div.on{background:transparent;box-shadow:inset 0 -2px 0 var(--accent)}

/* ============================================================
   D · MANAGED MARKETING — the approval board is the room
   ============================================================ */
.p2-board{gap:30px}
.p2-effort{background:transparent;border-color:transparent;box-shadow:none;justify-content:center;margin-top:64px;padding:10px 0}

/* ============================================================
   E · WHOLE-BUSINESS SYSTEMS — the node visual is the room
   ============================================================ */
.p2-diagram-wrap{max-width:1040px;margin:0 auto}
.p2-caption{margin-top:40px}

/* ---------- partnership + closing: the quiet final rooms ---------- */
.p2-partner .p2-partner-in{gap:64px}

/* ---------- tablet ---------- */
@media(max-width:900px){
  .p2-section{padding:124px 0}
  .p2-section .p2-head{margin-bottom:60px}
  section.cta{padding:130px 0}
}
@media(max-width:920px){
  .p2-board{gap:30px}
}
@media(max-width:860px){
  .p2-partner .p2-partner-in{gap:40px}
}

/* ---------- mobile: one exhibit per viewport, air everywhere ---------- */
@media(max-width:720px){
  .sp-orbit{margin-top:60px}
  .sp-orbit .mc-trio{grid-template-columns:1fr;gap:0}
  .sp-orbit .mc-emp{border-bottom:1px solid var(--line);padding:18px 2px}
  .sp-orbit .mc-emp:last-child{border-bottom:none}
  .sp-orbit > h3{margin-top:60px}
  .p2-search-grid{gap:32px}
  .p2-progress div{border-bottom:none}
  .p2-node-chips{margin-top:26px}
}
@media(max-width:640px){
  .p2-section{padding:88px 0}
  .p2-section .p2-head{margin-bottom:48px}
  .mc-chapter{margin-bottom:26px}
  .p2-next{margin-top:44px}
  .p2-partner{padding:88px 0}
  section.cta{padding:104px 0}
  footer{padding-top:56px}
  .sr-chat{margin-top:60px}
  .p2-effort{margin-top:48px}
  .p2-caption{margin-top:32px}
  .p2-device-cap{margin-top:52px}
}