/* ============================================================
   PUSH Holding — BETA 3 motion & living-brand layer
   Additive on top of site.css — prod styles untouched.
   Rules: brand palette only (navy/burgundy/ivory + division
   accents), soft rounded edges, NO moving shine on buttons.
   ============================================================ */

/* —— branded intro (once per session) ——
   html.p3-intro::before is a pure-CSS anti-flash cover that
   self-dismisses even if JS never runs. The real animated
   sequence (#p3intro) is built by beta3.js on top of it. */
html.p3-intro::before{content:"";position:fixed;inset:0;background:#070D17;z-index:9998;animation:p3cov .8s ease 2.2s forwards}
@keyframes p3cov{to{opacity:0;visibility:hidden}}
#p3intro{position:fixed;inset:0;background:#070D17;z-index:9999;display:flex;align-items:center;justify-content:center;overflow:hidden}
#p3intro.out{transition:transform .78s cubic-bezier(.72,0,.18,1);transform:translateY(-101%)}
#p3intro .p3i-glow{position:absolute;width:620px;height:620px;left:50%;top:58%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(122,44,57,.34),rgba(122,44,57,0) 66%);filter:blur(18px);opacity:0;animation:p3glow 1.1s ease .3s forwards}
@keyframes p3glow{to{opacity:1}}
.p3i-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:24px}
.p3i-mark{height:96px;width:auto;clip-path:inset(101% 0 0 0);transform:translateY(14px);animation:p3mark 1s cubic-bezier(.22,1,.36,1) .18s forwards}
@keyframes p3mark{to{clip-path:inset(0 0 0 0);transform:translateY(0)}}
.p3i-line{width:128px;height:1px;background:linear-gradient(90deg,transparent,#A6404E,transparent);transform:scaleX(0);animation:p3line .75s cubic-bezier(.22,1,.36,1) .72s forwards}
@keyframes p3line{to{transform:scaleX(1)}}
.p3i-word{font-family:Inter,system-ui,sans-serif;font-size:.74rem;font-weight:600;letter-spacing:.6em;text-indent:.6em;color:#94A0B2;opacity:0;animation:p3word .9s ease .92s forwards}
@keyframes p3word{to{opacity:1;letter-spacing:.36em;text-indent:.36em}}

/* —— page transitions (veil out / veil in) —— */
#p3veil{position:fixed;inset:0;background:#070D17;z-index:9990;opacity:0;pointer-events:none;transition:opacity .26s ease}
#p3veil.on{opacity:1;pointer-events:auto}
html.p3-from::after{content:"";position:fixed;inset:0;background:#070D17;z-index:9991;pointer-events:none;transition:opacity .55s ease .06s;animation:p3cov .6s ease 1.6s forwards}
html.p3-from.p3-in::after{opacity:0}

/* —— scroll progress hairline —— */
#p3prog{position:fixed;top:0;left:0;height:2px;width:100%;z-index:120;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#7A2C39,var(--p3ac,#A6404E));border-radius:0 2px 2px 0;pointer-events:none;opacity:.95}

/* —— living-brand flow canvases —— */
.p3-flow{position:absolute;inset:0;pointer-events:none}
.hero .p3-flow{z-index:1}
.shero .p3-flow{z-index:1;opacity:.85}
.phero .p3-flow{z-index:0;opacity:.6}

/* hero text parallax is transform-only on .wrap (JS) — no rules needed */

/* —— "In motion" capability reels on division pages —— */
.p3-cap-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,90px);align-items:center}
.p3-cap-h2{font-size:clamp(2rem,3.8vw,3rem);font-weight:300;max-width:14ch}
.p3-cap-h2 em{font-style:italic;color:var(--dac,#EAD7DA)}
.p3-cap-lead{max-width:46ch;margin-top:18px;font-weight:300}
.p3-cap-cta{margin-top:30px}
.p3-cap-side{position:relative;justify-self:center}
.p3-cap-glow{position:absolute;width:130%;height:130%;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,var(--dac,#7A2C39) 0%,transparent 66%);opacity:.16;filter:blur(30px);pointer-events:none}
.p3-cap-frame{position:relative;width:min(330px,76vw);aspect-ratio:9/16;border-radius:20px;overflow:hidden;border:1px solid var(--line-d2);background:#0E1A2D;box-shadow:0 36px 90px -34px rgba(0,0,0,.75)}
.p3-cap-video{width:100%;height:100%;object-fit:cover;display:block;background:#0E1A2D}
@media(max-width:860px){
  .p3-cap-grid{grid-template-columns:1fr;gap:44px}
  .p3-cap-side{justify-self:start}
}

/* ============================================================
   WAVE 5 — editorial cadence (impeccable design pass)
   ============================================================ */

/* 1. The whisper kicker — the uppercase tracked eyebrow becomes a
   Cormorant italic kicker. A named brand system, not section scaffolding.
   (The hero/phero location label stays uppercase: the one deliberate
   tracked label on the page.) */
.eyebrow{font-family:var(--serif);font-style:italic;font-weight:500;text-transform:none;
  letter-spacing:.02em;font-size:1.35rem;color:#EAD7DA}
.s-light .eyebrow{color:var(--dact,var(--burg))}

/* 2. typography polish */
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.statement .hl,.pull .hl{background-image:linear-gradient(0deg,rgba(122,44,57,.20),rgba(122,44,57,.20));
  background-size:100% .3em;background-position:0 90%;background-repeat:no-repeat}

/* 3. "Why PUSH" props: serif voice, tighter kinship with the values rows */
.prop h3{font-family:var(--serif);font-weight:500;font-size:1.72rem;letter-spacing:0}

/* 4. sectors: the diamond glyph becomes a burgundy hairline that reaches
   toward the sector on hover */
.sectors .se .sn{font-size:0;width:22px;height:1px;background:var(--burg-bright);
  transform:none;align-self:center;transition:width .45s var(--ez);border-radius:1px}
.sectors .se:hover .sn{width:38px}

/* 5. divisions index: italic numerals */
.dx .num{font-style:italic}

/* 5b. divisions stage: the capability reel plays over the still on hover */
.dv-stage .frame .dv-reel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .6s var(--ez);z-index:1;pointer-events:none}
.dv-stage .frame .dv-reel.on{opacity:.66}

/* 6. light sections: a whisper of depth at the seam */
.s-light{box-shadow:inset 0 1px 0 rgba(12,20,36,.05)}

/* 7. footer brand strip — breathing room on phones. The last row (Bids +
   Coming soon) sat cramped against the divider/copyright; give the rows more
   vertical gap and a clear gap before the rule. */
@media(max-width:760px){
  .ffamily{row-gap:36px;padding-bottom:56px}
  .fbar{padding-top:34px}
}
@media(max-width:440px){
  .ffamily{row-gap:40px;padding-bottom:64px}
  .ff-soon{padding-top:7px;padding-bottom:7px}
}

/* —— reduce-motion: the layer disappears entirely —— */
@media (prefers-reduced-motion:reduce){
  #p3intro,#p3veil,#p3prog,.p3-flow{display:none!important}
  html.p3-intro::before,html.p3-from::after{display:none!important}
}