/* Phillips360 Modern V2.033 — assets/css/sections/home.css
   Modify component values here; global colors, type, spacing, radii, and motion live in foundation/tokens.css. */

/* Intro/value cards ------------------------------------------------------- */
.p360-intro { background: var(--p360-paper); }
.p360-value-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--p360-line); border-left: 1px solid var(--p360-line); }
.p360-value-card { position: relative; min-height: 360px; padding: clamp(24px, 3vw, 42px); overflow: hidden; border-right: 1px solid var(--p360-line); border-bottom: 1px solid var(--p360-line); background: rgba(255,255,255,.22); transition: background .35s ease, transform .35s var(--p360-ease); }
.p360-value-card::before { position: absolute; right: -90px; bottom: -90px; width: 180px; height: 180px; border-radius: 50%; background: var(--p360-accent); content: ""; transform: scale(0); transition: transform .5s var(--p360-ease); }
.p360-value-card:hover { z-index: 1; background: #fff; transform: translateY(-6px); }
.p360-value-card:hover::before { transform: scale(1); }
.p360-value-card__number { color: var(--p360-muted); font-size: .72rem; font-weight: 750; letter-spacing: .12em; }
.p360-value-card__icon { display: grid; width: 64px; height: 64px; margin: 50px 0 44px; place-items: center; border: 1px solid var(--p360-line); border-radius: 50%; font-size: 1.4rem; }
.p360-value-card h3 { position: relative; z-index: 1; max-width: 260px; margin-bottom: 18px; font-size: clamp(1.45rem, 2vw, 2.1rem); line-height: 1.06; }
.p360-value-card p { position: relative; z-index: 1; margin: 0; color: var(--p360-muted); font-size: .95rem !important; line-height: 1.55; }

/* Client marquee ---------------------------------------------------------- */
.p360-clients { padding-block: 28px 48px; overflow: hidden; background: var(--p360-paper); }
.p360-clients__heading { display: flex; padding-bottom: 22px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--p360-line); }
.p360-clients__heading p { margin: 0; font-size: .86rem !important; font-weight: 650; }
.p360-clients__heading span { color: var(--p360-muted); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.p360-logo-marquee { width: 100%; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.p360-logo-marquee__track { display: flex; width: max-content; animation: p360-marquee 42s linear infinite; }
.p360-logo-marquee:hover .p360-logo-marquee__track { animation-play-state: paused; }
.p360-logo-marquee__group { display: flex; flex-shrink: 0; align-items: center; }
.p360-logo-marquee__item { display: grid; width: clamp(170px, 17vw, 260px); height: 145px; padding: 28px 40px; place-items: center; }
.p360-logo-marquee__item img { max-width: 160px; max-height: 70px; filter: grayscale(1); opacity: .52; object-fit: contain; transition: filter .3s ease, opacity .3s ease, transform .3s var(--p360-ease); }
.p360-logo-marquee__item:hover img { filter: none; opacity: 1; transform: scale(1.06); }
@keyframes p360-marquee { to { transform: translateX(-50%); } }

/* Services ---------------------------------------------------------------- */
.p360-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.p360-service-card { position: relative; min-height: clamp(430px, 48vw, 650px); overflow: hidden; border: 1px solid var(--p360-line-light); border-radius: var(--p360-radius); }
.p360-service-card > a { position: absolute; inset: 0; display: block; color: #fff !important; text-decoration: none !important; }
.p360-service-card__media, .p360-service-card__overlay { position: absolute; inset: 0; }
.p360-service-card__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72); transition: transform .9s var(--p360-ease), filter .5s ease; }
.p360-service-card__overlay { background: linear-gradient(180deg, rgba(5,7,10,.12), rgba(5,7,10,.18) 35%, rgba(5,7,10,.92)); transition: background .4s ease; }
.p360-service-card__top { position: absolute; top: 0; right: 0; left: 0; display: flex; padding: clamp(22px, 3vw, 40px); align-items: center; justify-content: space-between; font-size: .72rem; font-weight: 750; letter-spacing: .1em; }
.p360-service-card__arrow { display: grid; width: 50px; height: 50px; place-items: center; border: 1px solid rgba(255,255,255,.36); border-radius: 50%; font-size: 1.15rem; transition: transform .35s var(--p360-ease), background .35s ease, color .35s ease; }
.p360-service-card__content { position: absolute; right: 0; bottom: 0; left: 0; padding: clamp(26px, 4vw, 54px); }
.p360-service-card h3 { margin-bottom: 18px; font-size: clamp(2.3rem, 5vw, 5.7rem); }
.p360-service-card p { max-width: 590px; margin: 0; color: rgba(255,255,255,.68); font-size: .95rem !important; line-height: 1.6; }
.p360-service-card:hover .p360-service-card__media img { transform: scale(1.055); filter: saturate(1); }
.p360-service-card:hover .p360-service-card__overlay { background: linear-gradient(180deg, rgba(5,7,10,.05), rgba(5,7,10,.14) 35%, rgba(5,7,10,.86)); }
.p360-service-card:hover .p360-service-card__arrow { transform: rotate(45deg); background: var(--p360-accent); color: var(--p360-ink); }

/* Scroll-linked interactive video story ------------------------------------
   Design options:
   - Phone width: edit --p360-phone-width below (recommended 300px–420px).
   - Frame style: change .p360-phone background gradients for graphite, silver,
     or titanium finishes.
   - Inactive video behavior: data-reset-inactive-videos on the section controls
     whether inactive clips resume or restart. "false" is the smoother default.
   - Pointer tilt runs only for fine pointers and is disabled for reduced motion.
   -------------------------------------------------------------------------- */
.p360-experience {
  --p360-phone-width: min(100%, 41svh, 410px);
  --p360-story-progress: 0;
  --p360-active-progress: .3333;
  position: relative;
  overflow: clip;
  background:
    radial-gradient(circle at 16% 28%, rgba(200,247,95,.17), transparent 25%),
    radial-gradient(circle at 86% 58%, rgba(255,93,58,.16), transparent 30%),
    #e9e6df;
}
.p360-experience::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(8,17,26,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(8,17,26,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  content: "";
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.p360-story { position: relative; display: grid; grid-template-columns: minmax(360px, .86fr) minmax(0, 1.14fr); gap: clamp(56px, 9vw, 150px); align-items: start; }
.p360-story__visual { position: sticky; top: 96px; display: grid; min-height: calc(100svh - 112px); place-items: center; isolation: isolate; }
.p360-story__atmosphere { position: absolute; inset: 8% -12%; z-index: -2; pointer-events: none; }
.p360-story__orbit { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(8,17,26,.13); border-radius: 50%; transform: translate(-50%, -50%); }
.p360-story__orbit--one { width: min(48vw, 650px); aspect-ratio: 1; animation: p360-story-orbit 24s linear infinite; }
.p360-story__orbit--two { width: min(36vw, 490px); aspect-ratio: 1; border-style: dashed; animation: p360-story-orbit 18s linear infinite reverse; }
.p360-story__orbit::before, .p360-story__orbit::after { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--p360-accent); box-shadow: 0 0 0 8px rgba(255,93,58,.12); content: ""; }
.p360-story__orbit::before { top: 14%; left: 14%; }
.p360-story__orbit::after { right: 7%; bottom: 22%; background: var(--p360-accent-2); box-shadow: 0 0 0 8px rgba(200,247,95,.14); }
.p360-story__glow { position: absolute; top: 50%; left: 50%; width: min(45vw, 600px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.72), rgba(255,255,255,.12) 48%, transparent 72%); filter: blur(8px); transform: translate(-50%, -50%); }
@keyframes p360-story-orbit { to { transform: translate(-50%, -50%) rotate(360deg); } }

.p360-phone-stage {
  --phone-rotate-x: 0deg;
  --phone-rotate-y: 0deg;
  --phone-shift-x: 0px;
  --phone-shift-y: 0px;
  --phone-glare-x: 32%;
  --phone-glare-y: 18%;
  --phone-depth: 1;
  position: relative;
  display: grid;
  width: min(100%, 520px);
  padding: 28px 48px 58px;
  place-items: center;
  perspective: 1300px;
  transform-style: preserve-3d;
}
.p360-phone {
  position: relative;
  z-index: 2;
  width: var(--p360-phone-width);
  aspect-ratio: 9 / 19.5;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 62px;
  background: linear-gradient(125deg, #8e9398 0%, #282d33 8%, #080a0d 22%, #3d434a 48%, #06080a 72%, #9ca1a5 100%);
  box-shadow:
    0 56px 110px rgba(4,8,12,.30),
    0 18px 40px rgba(4,8,12,.22),
    inset 0 0 0 1px rgba(255,255,255,.22),
    inset 0 0 0 3px rgba(0,0,0,.72);
  transform: translate3d(var(--phone-shift-x), var(--phone-shift-y), 0) rotateX(var(--phone-rotate-x)) rotateY(var(--phone-rotate-y)) scale(var(--phone-depth));
  transform-style: preserve-3d;
  transition: transform 520ms var(--p360-ease), box-shadow 520ms var(--p360-ease);
  will-change: transform;
}
.p360-phone::before { position: absolute; inset: 3px; z-index: -1; border: 1px solid rgba(255,255,255,.18); border-radius: 58px; content: ""; }
/* Optional frame finishes selected in Appearance > Customize. */
.p360-phone--silver { background: linear-gradient(125deg, #f2f3f4 0%, #92979b 9%, #3d4247 22%, #d3d5d6 48%, #4b5054 72%, #f7f7f7 100%); }
.p360-phone--midnight { border-color: rgba(255,255,255,.24); background: linear-gradient(125deg, #32373c 0%, #090b0e 12%, #010203 38%, #1b1f24 62%, #020304 82%, #41464b 100%); }
.p360-phone::after { position: absolute; top: 17%; right: -3px; width: 2px; height: 64%; border-radius: 99px; background: linear-gradient(transparent, rgba(255,255,255,.62), transparent); content: ""; opacity: .6; }
.p360-phone-stage:hover .p360-phone { box-shadow: 0 68px 130px rgba(4,8,12,.34), 0 22px 48px rgba(4,8,12,.24), inset 0 0 0 1px rgba(255,255,255,.25), inset 0 0 0 3px rgba(0,0,0,.76); }

.p360-phone__button { position: absolute; z-index: -1; width: 4px; border: 1px solid rgba(255,255,255,.22); background: linear-gradient(90deg, #171b20, #686e73 48%, #111419); box-shadow: 1px 1px 4px rgba(0,0,0,.35); }
.p360-phone__button--action { top: 17%; left: -4px; height: 34px; border-radius: 3px 0 0 3px; }
.p360-phone__button--volume-up { top: 25%; left: -5px; height: 70px; border-radius: 4px 0 0 4px; }
.p360-phone__button--volume-down { top: 35%; left: -5px; height: 70px; border-radius: 4px 0 0 4px; }
.p360-phone__button--power { top: 28%; right: -5px; height: 104px; border-radius: 0 4px 4px 0; }
/* Physical frame details remain CSS-only and scale with the device. */
.p360-phone__antenna { position: absolute; z-index: 4; width: 2px; height: 24px; border-radius: 2px; background: rgba(228,232,235,.64); box-shadow: 0 0 0 1px rgba(0,0,0,.28); }
.p360-phone__antenna--top-left { top: 11%; left: -1px; }
.p360-phone__antenna--top-right { top: 11%; right: -1px; }
.p360-phone__antenna--bottom-left { bottom: 11%; left: -1px; }
.p360-phone__antenna--bottom-right { right: -1px; bottom: 11%; }
.p360-phone__button::after { position: absolute; inset: 2px 0; border-radius: inherit; background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); content: ""; }

.p360-phone__screen { position: relative; width: 100%; height: 100%; overflow: hidden; border: 2px solid #000; border-radius: 54px; background: #07090c; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); touch-action: pan-y; }
.p360-phone__media { position: absolute; inset: 0; background: #07090c; }
.p360-phone__media::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.40), transparent 22%, transparent 54%, rgba(0,0,0,.78)); content: ""; pointer-events: none; }
.p360-phone__media video { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; object-fit: cover; object-position: center; transform: scale(1.035); filter: saturate(.96) contrast(1.035); transition: opacity 520ms ease, transform 1400ms var(--p360-ease), filter 650ms ease; }
.p360-phone__media video.is-active { opacity: 1; transform: scale(1.002); filter: saturate(1.06) contrast(1.035); }

.p360-phone__statusbar { position: absolute; top: 13px; right: 18px; left: 18px; z-index: 12; display: flex; height: 24px; align-items: center; justify-content: space-between; color: #fff; font-size: clamp(.48rem, .7vw, .68rem); font-weight: 760; letter-spacing: .01em; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.p360-phone__time { width: 52px; text-align: center; }
.p360-phone__status-icons { display: flex; align-items: center; gap: 6px; }
.p360-phone__signal { display: flex; height: 11px; align-items: end; gap: 1.5px; }
.p360-phone__signal i { display: block; width: 2.5px; border-radius: 2px; background: currentColor; }
.p360-phone__signal i:nth-child(1) { height: 4px; }.p360-phone__signal i:nth-child(2) { height: 6px; }.p360-phone__signal i:nth-child(3) { height: 8px; }.p360-phone__signal i:nth-child(4) { height: 10px; }
.p360-phone__wifi { position: relative; width: 12px; height: 9px; overflow: hidden; }
.p360-phone__wifi::before, .p360-phone__wifi::after { position: absolute; left: 50%; border: 1.5px solid currentColor; border-right-color: transparent; border-bottom-color: transparent; border-radius: 50%; content: ""; transform: translateX(-50%) rotate(45deg); }
.p360-phone__wifi::before { top: -4px; width: 14px; height: 14px; }.p360-phone__wifi::after { top: 1px; width: 7px; height: 7px; }
.p360-phone__battery { position: relative; display: block; width: 18px; height: 9px; padding: 1px; border: 1px solid rgba(255,255,255,.85); border-radius: 3px; }
.p360-phone__battery::after { position: absolute; top: 2px; right: -3px; width: 2px; height: 4px; border-radius: 0 2px 2px 0; background: currentColor; content: ""; }
.p360-phone__battery i { display: block; width: 76%; height: 100%; border-radius: 1px; background: currentColor; }

.p360-phone__island { position: absolute; top: 12px; left: 50%; z-index: 15; display: flex; width: 34%; height: 29px; align-items: center; justify-content: flex-end; padding-right: 10px; border: 1px solid rgba(255,255,255,.04); border-radius: 99px; background: #010203; box-shadow: inset 0 0 0 1px #080a0d, 0 2px 8px rgba(0,0,0,.35); transform: translateX(-50%); }
.p360-phone__speaker { position: absolute; top: 6px; left: 50%; width: 24%; height: 2px; border-radius: 99px; background: #12171c; box-shadow: 0 1px 1px rgba(255,255,255,.04); transform: translateX(-50%); }
.p360-phone__camera { width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #345a86, #07111d 44%, #020407 70%); box-shadow: inset 0 0 0 1px #16293e, 0 0 0 2px #050608; }
.p360-phone__sensor { width: 4px; height: 4px; margin-right: 8px; border-radius: 50%; background: #161c23; box-shadow: 0 0 4px rgba(73,126,180,.65); }

.p360-phone__interface { position: absolute; right: clamp(20px, 3vw, 28px); bottom: clamp(34px, 4.4vw, 48px); left: clamp(20px, 3vw, 28px); z-index: 8; display: grid; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
.p360-phone__eyebrow { margin-bottom: 7px; color: rgba(255,255,255,.68); font-size: clamp(.48rem, .7vw, .65rem); font-weight: 720; letter-spacing: .12em; text-transform: uppercase; }
.p360-phone__interface strong { font-family: var(--p360-font-display); font-size: clamp(1.5rem, 2.6vw, 2.35rem); line-height: .98; letter-spacing: -.045em; }
.p360-phone__chapter { display: flex; margin-top: 16px; align-items: center; gap: 8px; font-size: clamp(.5rem, .7vw, .68rem); font-weight: 700; letter-spacing: .08em; }
.p360-phone__chapter i { width: 34px; height: 2px; border-radius: 99px; background: var(--p360-accent-2); box-shadow: 0 0 12px rgba(200,247,95,.7); transform: scaleX(var(--p360-active-progress)); transform-origin: left; transition: transform 450ms var(--p360-ease); }
.p360-phone__chapter b { font-weight: 800; }
.p360-phone__vignette { position: absolute; inset: 0; z-index: 7; pointer-events: none; background: radial-gradient(ellipse at center, transparent 46%, rgba(0,0,0,.18) 82%, rgba(0,0,0,.38) 100%); }
.p360-phone__glass { position: absolute; inset: 0; z-index: 9; pointer-events: none; background: radial-gradient(circle at var(--phone-glare-x) var(--phone-glare-y), rgba(255,255,255,.18), transparent 17%), linear-gradient(116deg, rgba(255,255,255,.12), transparent 22%, transparent 68%, rgba(255,255,255,.055)); mix-blend-mode: screen; }
.p360-phone__home-indicator { position: absolute; bottom: 10px; left: 50%; z-index: 12; width: 35%; height: 4px; border-radius: 99px; background: rgba(255,255,255,.88); box-shadow: 0 1px 5px rgba(0,0,0,.45); transform: translateX(-50%); }

.p360-phone-stage__shadow { position: absolute; bottom: 34px; left: 50%; z-index: 0; width: 62%; height: 44px; border-radius: 50%; background: rgba(5,8,11,.30); filter: blur(18px); transform: translateX(-50%) scaleX(calc(1 - (var(--p360-story-progress) * .08))); }
.p360-phone-stage__caption { position: absolute; right: 6px; bottom: 0; left: 6px; display: flex; align-items: center; justify-content: center; gap: 10px; color: rgba(8,17,26,.58); font-size: .62rem; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }
.p360-phone-stage__caption i { width: 24px; height: 1px; background: rgba(8,17,26,.24); }

.p360-story__toolbar {
  position: relative;
  z-index: 10;
  display: flex;
  width: min(100%, 520px);
  margin-top: clamp(18px, 2.4vw, 30px);
  padding-inline: clamp(8px, 2vw, 18px);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.p360-story__controls { display: flex; padding: 7px; gap: 7px; border: 1px solid rgba(8,17,26,.14); border-radius: 99px; background: rgba(244,241,234,.82); box-shadow: 0 14px 34px rgba(8,17,26,.12); backdrop-filter: blur(14px); }
.p360-story__controls button { display: grid; width: 38px; height: 38px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--p360-muted); font: inherit; font-size: .66rem; font-weight: 820; cursor: pointer; transition: background 260ms ease, color 260ms ease, transform 260ms var(--p360-ease); }
.p360-story__controls button:hover { transform: translateY(-2px); }
.p360-story__controls button.is-active { background: var(--p360-ink); color: #fff; }
.p360-story__controls button:focus-visible { outline: 0; box-shadow: var(--p360-focus-ring); }
.p360-story__playback { display: inline-flex; min-height: 48px; padding: 0 18px; align-items: center; gap: 9px; border: 1px solid rgba(8,17,26,.16); border-radius: 99px; background: rgba(244,241,234,.88); box-shadow: 0 14px 34px rgba(8,17,26,.11); color: var(--p360-ink); font: inherit; font-size: .68rem; font-weight: 780; letter-spacing: .04em; white-space: nowrap; cursor: pointer; backdrop-filter: blur(14px); transition: transform 240ms var(--p360-ease), background 240ms ease, border-color 240ms ease; }
.p360-story__playback:hover { border-color: rgba(8,17,26,.28); background: #fff; transform: translateY(-2px); }
.p360-story__playback:focus-visible { outline: 0; box-shadow: var(--p360-focus-ring); }
.p360-story__playback-icon { position: relative; display: block; width: 12px; height: 13px; }
.p360-story__playback-icon::before, .p360-story__playback-icon::after { position: absolute; top: 1px; bottom: 1px; width: 3px; border-radius: 2px; background: currentColor; content: ""; }
.p360-story__playback-icon::before { left: 1px; }
.p360-story__playback-icon::after { right: 1px; }
.p360-story__playback.is-paused .p360-story__playback-icon::before { top: 0; bottom: auto; left: 2px; width: 0; height: 0; border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent; border-left: 10px solid currentColor; border-radius: 0; background: transparent; }
.p360-story__playback.is-paused .p360-story__playback-icon::after { display: none; }

html.no-js .p360-story__toolbar { display: none; }
html.no-js .p360-story-step { opacity: 1; transform: none; }

.p360-story__status { position: absolute; right: max(0px, calc(50% - 270px)); bottom: 8px; display: flex; align-items: center; gap: 12px; color: rgba(8,17,26,.58); font-size: .68rem; font-weight: 800; letter-spacing: .08em; }
.p360-story__status > i { position: relative; width: 68px; height: 2px; overflow: hidden; border-radius: 99px; background: rgba(8,17,26,.13); }
.p360-story__status > i b { position: absolute; inset: 0; border-radius: inherit; background: var(--p360-accent); transform: scaleX(var(--p360-story-progress)); transform-origin: left; }

.p360-story__steps { position: relative; padding-top: 12vh; padding-bottom: 28vh; }
.p360-story__rail { position: absolute; top: 12vh; bottom: 28vh; left: 0; width: 2px; overflow: hidden; background: rgba(8,17,26,.10); }
.p360-story__rail span { position: absolute; inset: 0; background: linear-gradient(var(--p360-accent), var(--p360-accent-2)); transform: scaleY(var(--p360-story-progress)); transform-origin: top; }
.p360-story-step { position: relative; min-height: 70vh; scroll-margin-top: 110px; padding: clamp(30px, 4vw, 56px) clamp(30px, 4vw, 58px); border-top: 1px solid var(--p360-line); opacity: .32; transform: translateX(0); transition: opacity 450ms ease, transform 520ms var(--p360-ease), background 450ms ease, border-color 450ms ease; }
.p360-story-step::before { position: absolute; top: clamp(30px, 4vw, 56px); left: -4px; width: 8px; height: 8px; border-radius: 50%; background: rgba(8,17,26,.20); content: ""; transform: scale(.7); transition: background 350ms ease, box-shadow 350ms ease, transform 350ms var(--p360-ease); }
.p360-story-step.is-active { opacity: 1; transform: translateX(14px); }
.p360-story-step.is-active::before { background: var(--p360-accent); box-shadow: 0 0 0 8px rgba(255,93,58,.14); transform: scale(1); }
.p360-story-step__trigger { display: grid; width: 100%; margin: 0 0 48px; padding: 0; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.p360-story-step__trigger > span { color: var(--p360-accent); font-size: .72rem; font-weight: 820; letter-spacing: .14em; }
.p360-story-step__trigger strong { font-size: .72rem; font-weight: 820; letter-spacing: .14em; text-transform: uppercase; }
.p360-story-step__trigger i { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--p360-line); border-radius: 50%; font-style: normal; transition: transform 350ms var(--p360-ease), background 350ms ease, color 350ms ease; }
.p360-story-step__trigger:hover i, .p360-story-step.is-active .p360-story-step__trigger i { background: var(--p360-ink); color: #fff; transform: rotate(45deg); }
.p360-story-step__trigger:focus-visible { outline: 0; border-radius: 10px; box-shadow: var(--p360-focus-ring); }
.p360-story-step h3 { max-width: 700px; margin-bottom: 30px; font-size: clamp(2.7rem, 5.6vw, 6.6rem); }
.p360-story-step p { max-width: 650px; color: var(--p360-muted); line-height: 1.65; }
.p360-story-step ul { display: flex; margin: 40px 0 0; padding: 0; flex-wrap: wrap; gap: 10px; list-style: none; }
.p360-story-step li { padding: 9px 13px; border: 1px solid var(--p360-line); border-radius: 99px; font-size: .74rem; font-weight: 650; transition: border-color 300ms ease, background 300ms ease, transform 300ms var(--p360-ease); }
.p360-story-step.is-active li { border-color: rgba(8,17,26,.22); background: rgba(255,255,255,.34); }
.p360-story-step.is-active li:nth-child(2) { transition-delay: 70ms; }.p360-story-step.is-active li:nth-child(3) { transition-delay: 140ms; }
.animation-cinematic .p360-story-step.is-active li { transform: translateY(-3px); }

/* Work -------------------------------------------------------------------- */
.p360-work-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(24px, 5vw, 74px) 24px; }
.p360-work-card--featured { grid-column: 1 / -1; }
.p360-work-card__media { position: relative; display: block; overflow: hidden; border-radius: var(--p360-radius); background: var(--p360-ink); aspect-ratio: 4 / 3; color: #fff !important; text-decoration: none !important; }
.p360-work-card--featured .p360-work-card__media { aspect-ratio: 16 / 8.2; }
.p360-work-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--p360-ease); }
.p360-work-card__media::after { position: absolute; inset: 0; opacity: 0; background: rgba(9,11,16,.28); content: ""; transition: opacity .35s ease; }
.p360-work-card__view { position: absolute; top: 50%; left: 50%; z-index: 2; display: grid; width: 150px; height: 150px; padding: 20px; place-items: center; border-radius: 50%; opacity: 0; background: var(--p360-accent-2); color: var(--p360-ink); font-size: .76rem; font-weight: 800; text-align: center; transform: translate(-50%,-40%) scale(.8); transition: .45s var(--p360-ease); }
.p360-work-card__view i { display: block; font-size: 1.2rem; font-style: normal; }
.p360-work-card__media:hover img { transform: scale(1.045); }
.p360-work-card__media:hover::after { opacity: 1; }
.p360-work-card__media:hover .p360-work-card__view { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.p360-work-card__meta { display: flex; padding-top: 22px; align-items: start; justify-content: space-between; gap: 20px; }
.p360-work-card__meta > div { max-width: 680px; }
.p360-work-card__meta span { font-size: .7rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.p360-work-card__meta h3 { margin: 9px 0 10px; font-size: clamp(1.7rem, 3vw, 3.4rem); }
.p360-work-card__meta h3 a { text-decoration: none; }
.p360-work-card__meta p { max-width: 600px; margin: 0; color: rgba(9,11,16,.7); font-size: .9rem !important; }
.p360-work-card__external { flex: none; padding-bottom: 4px; border-bottom: 1px solid currentColor; font-size: .76rem; font-weight: 750; text-decoration: none; }
.p360-empty-state { padding: 50px; border: 1px solid rgba(9,11,16,.22); border-radius: var(--p360-radius); }

/* Reviews ----------------------------------------------------------------- */
/**
 * GOOGLE REVIEWS PRESENTATION
 *
 * Color options:
 * - Header/summary text is intentionally near-white for reliable contrast on
 *   the dark section. Do not reduce it below rgba(255,255,255,.82).
 * - Google-style stars use #fbbc04. Change to var(--p360-accent-2) for a fully
 *   brand-led treatment, but retain a minimum 3:1 non-text contrast.
 *
 * Carousel options:
 * - Desktop card count comes from the WordPress Customizer (1–3).
 * - Tablet is capped at two cards; mobile is always one card.
 * - Native horizontal scrolling remains available before JavaScript loads.
 */
.p360-reviews { --p360-review-gap: clamp(16px, 2vw, 26px); }
.p360-reviews__top { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(260px,.7fr); gap: 60px; align-items: end; padding-bottom: var(--p360-space-3); border-bottom: 1px solid var(--p360-line-light); }
.p360-reviews__heading,
.p360-reviews__top h2 { max-width: 920px; margin: 0; color: #fff !important; font-size: clamp(3rem, 6.4vw, 7rem); }
.p360-review-score { display: flex; align-items: end; justify-content: flex-end; gap: 22px; color: #fff; }
.p360-review-score__value,
.p360-review-score > strong { color: #fff !important; font-size: clamp(4rem, 8vw, 8rem); font-weight: 650; letter-spacing: -.08em; line-height: .8; }
.p360-review-score__summary { padding-bottom: 2px; }
.p360-review-score__stars,
.p360-review-score span { display: block; color: #fbbc04 !important; font-size: 1.05rem; letter-spacing: .12em; line-height: 1; }
.p360-review-score__summary p,
.p360-review-score p { margin: 10px 0 0; color: rgba(255,255,255,.9) !important; font-size: .78rem !important; font-weight: 650; letter-spacing: .025em; }
.p360-reviews__embed { position: relative; min-height: 180px; margin-top: 45px; color: #fff; }

/* Plugin header/rating contrast. These selectors cover retained legacy markup
   and current RichPlugins output while remaining scoped to this section. */
.p360-reviews__embed :where(h2, h3, h4),
.p360-reviews__embed :where(
  .wp-gr,
  .wp-google-name,
  .wp-google-name a,
  .wp-google-name span,
  .wp-google-based,
  .wp-google-powered,
  .wp-google-rating,
  .grw-header,
  .grw-header-title,
  .grw-place-name,
  .rplg-business-name,
  .rplg-business-name a,
  .rplg-rating,
  .rplg-based-text
) { color: #fff !important; }
.p360-reviews__embed :where(.wp-google-stars, .wp-star, .grw-stars, .rplg-stars) { color: #fbbc04 !important; }
.p360-reviews__embed :where(.grw-slider, .wp-google-list, .rplg-slider, .rplg-list) { background: transparent !important; }
.p360-reviews__embed :where(.wp-google-left img, .grw-place-photo, .rplg-business-photo) { border: 1px solid rgba(255,255,255,.7) !important; }


/* JavaScript-disabled fallback: show review cards as a readable grid instead
   of leaving plugin slider items transformed or hidden. */
.no-js .p360-reviews__embed :where(.grw-reviews, .wp-google-list, .rplg-reviews) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
  gap: var(--p360-review-gap) !important;
  overflow: visible !important;
  transform: none !important;
}
.no-js .p360-reviews__embed :where(.grw-review, .wp-google-review, .rplg-review, .rplg-review-card) {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Native V2.033 fallback/enhancement. The module applies these classes only
   after it has identified at least two sibling review cards. */
.p360-reviews__embed.is-p360-review-carousel :where(.grw-slider-btns, .rplg-slider-prev, .rplg-slider-next, .rplg-slider-dots) { display: none !important; }
.p360-review-carousel__track {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 4px 2px 18px !important;
  grid-auto-flow: column !important;
  grid-auto-columns: calc((100% + var(--p360-review-gap)) / var(--p360-review-columns, 3) - var(--p360-review-gap)) !important;
  gap: var(--p360-review-gap) !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scroll-behavior: smooth;
  scroll-padding-inline: 2px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  transform: none !important;
  touch-action: pan-x pan-y;
}
.p360-review-carousel__track::-webkit-scrollbar { display: none; }
.p360-review-carousel__track:focus-visible { border-radius: var(--p360-radius-sm); outline: 2px solid var(--p360-accent-2); outline-offset: 8px; }
.p360-review-carousel__item {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  transform: none !important;
}

/* Review-card surfaces. Both the card and common plugin inner wrappers receive
   the same glass treatment so different plugin versions remain consistent. */
.p360-review-carousel__item,
.p360-review-carousel__item :where(.wp-google-review, .wp-google-review-inner, .grw-review-inner, .rplg-review-inner) {
  border-color: rgba(255,255,255,.13) !important;
  border-radius: clamp(18px, 2vw, 28px) !important;
  background: rgba(255,255,255,.065) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 22px 60px rgba(0,0,0,.18) !important;
}
.p360-review-carousel__item { padding: clamp(22px, 2.7vw, 34px) !important; transition: border-color .3s ease, background .3s ease, transform .4s var(--p360-ease); }
.p360-review-carousel__item.is-current { border-color: rgba(200,247,95,.32) !important; background: rgba(255,255,255,.095) !important; }
.p360-review-carousel__item :where(.wp-google-name, .wp-google-name a, .grw-review-name, .rplg-review-name, .rplg-review-name a) { color: #fff !important; font-weight: 750 !important; }
.p360-review-carousel__item :where(.wp-google-text, .grw-review-text, .rplg-review-text, p) { color: rgba(255,255,255,.86) !important; line-height: 1.65 !important; }
.p360-review-carousel__item :where(.wp-google-time, .grw-review-time, .rplg-review-time) { color: rgba(255,255,255,.66) !important; }
.p360-review-carousel__item :where(a, .wp-more, .grw-more, .rplg-more) { color: var(--p360-accent-2) !important; }

.p360-review-carousel__controls { position: relative; display: grid; min-height: 72px; margin-top: 16px; padding-bottom: 14px; grid-template-columns: 58px minmax(140px,1fr) 58px; align-items: center; gap: 14px; }
.p360-review-carousel__controls::before { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: linear-gradient(90deg, var(--p360-accent-2) calc(var(--p360-review-progress, .1) * 100%), rgba(255,255,255,.16) 0); content: ""; transition: background .35s ease; }
.p360-review-carousel__button { display: grid; width: 58px; height: 58px; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; transition: border-color .25s ease, background .25s ease, color .25s ease, transform .3s var(--p360-ease); }
.p360-review-carousel__button:hover { border-color: var(--p360-accent-2); background: var(--p360-accent-2); color: var(--p360-ink); transform: translateY(-2px); }
.p360-review-carousel__button span { font-size: 1.35rem; line-height: 1; }
.p360-review-carousel__status { margin: 0; color: rgba(255,255,255,.86) !important; font-size: .72rem !important; font-weight: 700; letter-spacing: .1em; text-align: center; text-transform: uppercase; }

.p360-reviews__quote { display: grid; margin-top: var(--p360-space-3); padding-top: var(--p360-space-3); grid-template-columns: minmax(0,1.35fr) minmax(260px,.65fr); gap: 70px; border-top: 1px solid var(--p360-line-light); }
.p360-reviews__quote blockquote { margin: 0; color: var(--p360-accent); font-size: clamp(2.1rem, 4.8vw, 5.2rem); font-weight: 650; letter-spacing: -.05em; line-height: 1.04; }
.p360-reviews__quote p { color: rgba(255,255,255,.76); }

/* V2.033 Client Perspective reliability layer ----------------------------- */
/**
 * The plugin's original review track is hidden only after JavaScript has built
 * a complete theme-owned track. Remove this rule only when intentionally
 * returning all slider responsibility to the Google Reviews plugin.
 */
.p360-reviews__embed.is-p360-review-carousel .p360-review-carousel__source-track { display: none !important; }
.p360-review-carousel { position: relative; width: 100%; min-width: 0; }
.p360-review-carousel__track { position: relative !important; isolation: isolate; overflow-anchor: none; }
.p360-review-carousel__item { position: relative !important; inset: auto !important; display: block !important; overflow: hidden; }
.p360-review-carousel__item > * { max-width: 100%; }
.p360-review-carousel__item :where(img) { width: auto !important; max-width: 64px !important; height: auto !important; max-height: 64px !important; object-fit: cover; }
.p360-review-carousel__button:disabled { opacity: .38; cursor: not-allowed; transform: none; }

/* Disable every known plugin navigation surface after the theme carousel is
   active. This prevents duplicate arrows, numeric counters and slider dots. */
.p360-reviews__embed.is-p360-review-carousel :where(
  .grw-slider-btns,
  .grw-slider-prev,
  .grw-slider-next,
  .grw-slider-dots,
  .rplg-slider-prev,
  .rplg-slider-next,
  .rplg-slider-dots,
  .rplg-slider-controls,
  .rplg-slider-pagination,
  .wp-google-slider-controls,
  .owl-controls,
  .slick-arrow,
  .slick-dots
) { display: none !important; }

/* High-contrast plugin summary. Attribute selectors are deliberately scoped
   to the review embed because plugin releases have changed class prefixes. */
.p360-reviews__embed :where(
  [class*="business-name"],
  [class*="business_name"],
  [class*="place-name"],
  [class*="place_name"],
  [class*="based"],
  [class*="powered"],
  [class*="rating"],
  [class*="header-title"],
  .wp-google-name,
  .wp-google-name a,
  .wp-google-rating,
  .wp-google-based,
  .wp-google-powered,
  .grw-place-name,
  .grw-place-name a,
  .grw-header-title,
  .rplg-business-name,
  .rplg-business-name a,
  .rplg-rating,
  .rplg-based-text
) { color: #fff !important; opacity: 1 !important; text-shadow: none !important; }
.p360-reviews__embed :where([class*="star"], .wp-star, .wp-google-stars, .grw-stars, .rplg-stars) { color: #fbbc04 !important; opacity: 1 !important; }
.p360-reviews__embed :where([class*="star"] svg, .wp-star svg, .grw-stars svg, .rplg-stars svg) { fill: currentColor !important; }
.p360-reviews__embed :where([class*="powered"], .wp-google-powered) { color: rgba(255,255,255,.86) !important; }

/* Cloned review-card content receives explicit colors after the generic plugin
   summary rules above, ensuring names, dates and review text remain legible. */
.p360-review-carousel__item :where(.wp-google-name, .wp-google-name a, .grw-review-name, .grw-review-name a, .rplg-review-name, .rplg-review-name a, [class*="author-name"], [class*="review-name"]) { color: #fff !important; }
.p360-review-carousel__item :where(.wp-google-text, .grw-review-text, .rplg-review-text, [class*="review-text"], [class*="review_content"], p) { color: rgba(255,255,255,.92) !important; }
.p360-review-carousel__item :where(.wp-google-time, .grw-review-time, .rplg-review-time, [class*="review-time"], [class*="review-date"]) { color: rgba(255,255,255,.74) !important; }
.p360-review-carousel__item :where(.wp-more, .grw-more, .rplg-more, [class*="read-more"]) { color: var(--p360-accent-2) !important; }

/**
 * GOOGLE REVIEWS UNAVAILABLE FALLBACK — V2.033
 *
 * This appears only when the retained Google Reviews shortcode is unavailable.
 * It keeps the dark Client Perspective section readable without inventing or
 * caching review content inside the theme.
 */
.p360-reviews-fallback {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--p360-radius-lg);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.p360-reviews-fallback p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}