/* Consultancy page effects layer.
   Scoped to body.fx so the rest of the site is untouched. Brand colours only:
   --accent #33c375 and --dark #042626, with glows and gradients derived from them.
   Everything animates transform/opacity, and everything switches off under
   prefers-reduced-motion. */

body.fx {
  --glow: rgba(51, 195, 117, 0.45);
  --glow-soft: rgba(51, 195, 117, 0.14);
  --teal-2: #0b3837;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- header: glass on scroll ---------- */
body.fx header {
  position: sticky; top: 0; z-index: 50;
  transition: background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
body.fx header.scrolled {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  box-shadow: 0 1px 0 rgba(4, 38, 38, 0.08), 0 8px 30px rgba(4, 38, 38, 0.06);
}
body.fx .nav-links a:not(.nav-cta) { position: relative; }
body.fx .nav-links a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  background: var(--accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out);
}
body.fx .nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); }
body.fx .nav-cta { box-shadow: 0 0 0 0 var(--glow); transition: box-shadow .3s ease, transform .2s ease; }
body.fx .nav-cta:hover { box-shadow: 0 0 24px 2px var(--glow-soft); transform: translateY(-1px); }

/* ---------- hero: aurora, perspective grid, floating orbit ---------- */
body.fx .hero {
  background: radial-gradient(120% 90% at 85% 10%, #eafbf2 0%, #ffffff 55%);
  isolation: isolate;
}
body.fx .hero::before {                       /* drifting aurora */
  content: ""; position: absolute; inset: -30%; z-index: -2;
  background:
    radial-gradient(40% 35% at 70% 30%, rgba(51,195,117,.28), transparent 70%),
    radial-gradient(35% 30% at 20% 70%, rgba(4,38,38,.10), transparent 70%),
    radial-gradient(30% 25% at 90% 80%, rgba(51,195,117,.16), transparent 70%);
  filter: blur(30px);
  animation: fx-aurora 18s ease-in-out infinite alternate;
}
body.fx .hero::after {                        /* receding grid floor */
  content: ""; position: absolute; left: -20%; right: -20%; bottom: -45%; height: 65%;
  z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(51,195,117,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51,195,117,.14) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: perspective(600px) rotateX(66deg);
  transform-origin: center top;
  mask-image: linear-gradient(to top, transparent 0%, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 55%, transparent 100%);
  animation: fx-grid 6s linear infinite;
}
@keyframes fx-aurora {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  100% { transform: translate3d(-6%, 4%, 0) rotate(8deg) scale(1.08); }
}
@keyframes fx-grid { to { background-position: 0 48px, 0 0; } }

body.fx .hero-art {
  transform-style: preserve-3d;
  transform: translateY(-50%) perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s var(--ease-out);
  filter: drop-shadow(0 0 22px rgba(51,195,117,.25));
}
body.fx .hero-art > circle:nth-of-type(2) { transform-origin: 270px 270px; animation: fx-spin 60s linear infinite; }
body.fx .hero-art > circle:nth-of-type(3) { transform-origin: 270px 270px; animation: fx-spin 40s linear infinite reverse; }
body.fx .hero-art g:first-of-type circle { animation: fx-pulse 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
body.fx .hero-art g:first-of-type circle:nth-child(2n) { animation-delay: -1.6s; }
@keyframes fx-spin { to { transform: rotate(360deg); } }
@keyframes fx-pulse { 50% { transform: scale(1.6); opacity: .55; } }

body.fx .hero .grad {
  background: linear-gradient(100deg, var(--dark) 0%, var(--accent) 45%, #7fe3ad 55%, var(--dark) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fx-shimmer 7s ease-in-out infinite;
}
@keyframes fx-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

body.fx .cta {
  position: relative; overflow: hidden;
  transition: transform .25s var(--ease-out), box-shadow .3s ease;
}
body.fx .cta:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -8px var(--glow); }
body.fx .cta::after {                         /* sweeping sheen */
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); transition: left .7s var(--ease-out);
}
body.fx .cta:hover::after { left: 120%; }

/* ---------- entrance + scroll reveal ---------- */
body.fx .hero .wrap > * { opacity: 0; transform: translateY(18px); animation: fx-rise .9s var(--ease-out) forwards; }
body.fx .hero .wrap > *:nth-child(2) { animation-delay: .08s; }
body.fx .hero .wrap > *:nth-child(3) { animation-delay: .18s; }
body.fx .hero .wrap > *:nth-child(4) { animation-delay: .28s; }
@keyframes fx-rise { to { opacity: 1; transform: none; } }

body.fx [data-reveal] {
  opacity: 0; transform: translateY(28px) scale(.985);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--d, 0s);
}
body.fx [data-reveal].in { opacity: 1; transform: none; }

/* ---------- stats ---------- */
body.fx .stat-num { font-variant-numeric: tabular-nums; }
body.fx .stats > div::before { transition: width 1.2s var(--ease-out); }

/* ---------- 3D tilt cards with cursor spotlight ---------- */
body.fx .tilt {
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform .5s var(--ease-out), box-shadow .4s ease, border-color .3s ease;
  will-change: transform;
}
body.fx .tilt.tilting { transition: transform .08s linear, box-shadow .4s ease, border-color .3s ease; }
body.fx .card.tilt { position: relative; overflow: hidden; }
body.fx .card.tilt::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), var(--glow-soft), transparent 60%);
  transition: opacity .3s ease;
}
body.fx .card.tilt:hover::before { opacity: 1; }
body.fx .card.tilt:hover {
  border-color: rgba(51,195,117,.45);
  box-shadow: 0 24px 50px -24px rgba(4,38,38,.35), 0 0 0 1px rgba(51,195,117,.12);
}
body.fx .card.tilt > * { transform: translateZ(18px); }
body.fx .card .icon-box { transition: transform .4s var(--ease-out), box-shadow .4s ease; }
body.fx .card:hover .icon-box { transform: translateZ(40px) scale(1.06); box-shadow: 0 8px 22px -6px var(--glow); }

/* ---------- portfolio ---------- */
body.fx section.portfolio {
  position: relative; overflow: hidden;
  background: radial-gradient(90% 70% at 20% 0%, #0f4a47 0%, var(--dark) 60%);
  color: #fff;
}
body.fx section.portfolio::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(51,195,117,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51,195,117,.07) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent);
}
body.fx section.portfolio .wrap { position: relative; }
body.fx section.portfolio h2 { color: #fff; }
body.fx section.portfolio .muted { color: rgba(255,255,255,.7); }
body.fx .eyebrow.on-dark { color: var(--accent); }

.pf-grid { display: grid; gap: 24px; grid-template-columns: 1fr; margin-top: 44px; }
@media (min-width: 860px) { .pf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .pf-grid { grid-template-columns: repeat(3, 1fr); } }

.pf-card {
  position: relative; display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff;
}
.pf-card:hover { border-color: rgba(51,195,117,.5); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6), 0 0 40px -10px var(--glow); }
.pf-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 2;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(51,195,117,.16), transparent 60%);
  transition: opacity .3s ease;
}
.pf-card:hover::before { opacity: 1; }
.pf-visual {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: radial-gradient(80% 90% at 70% 20%, #11524e, #06302f 70%);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transform: translateZ(30px);
}
.pf-visual svg, .pf-visual img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pf-visual img { object-fit: cover; opacity: .9; transition: transform .8s var(--ease-out); }
.pf-card:hover .pf-visual img { transform: scale(1.05); }
.pf-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; transform: translateZ(20px); }
.pf-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-tag {
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  padding: 4px 9px; border-radius: 999px;
  color: #bff3d6; background: rgba(51,195,117,.12); border: 1px solid rgba(51,195,117,.25);
}
.pf-card h3 { margin: 4px 0 0; font-size: 21px; color: #fff; }
.pf-card p { margin: 0; color: rgba(255,255,255,.72); font-size: 15.5px; line-height: 1.55; }
.pf-facts { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.pf-facts li { font-size: 14px; color: rgba(255,255,255,.82); padding-left: 18px; position: relative; }
.pf-facts li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--glow); }
.pf-link { margin-top: auto; padding-top: 10px; font-weight: 600; color: var(--accent) !important; display: inline-flex; align-items: center; gap: 6px; }
.pf-link span { transition: transform .3s var(--ease-out); }
.pf-link:hover span { transform: translateX(4px); }
.pf-private { margin-top: auto; padding-top: 10px; font-size: 13px; color: rgba(255,255,255,.5); }

/* animated SVG art inside portfolio visuals */
.pf-arc { stroke-dasharray: 900; stroke-dashoffset: 900; animation: fx-draw 3.4s var(--ease-out) forwards infinite; }
@keyframes fx-draw { 60%, 100% { stroke-dashoffset: 0; } }
.pf-ball { offset-rotate: 0deg; animation: fx-fly 3.4s var(--ease-out) infinite; }
@keyframes fx-fly { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 60% { offset-distance: 100%; opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.pf-worm { stroke-dasharray: 700; stroke-dashoffset: 700; animation: fx-draw 4s ease-in-out infinite; }
.pf-bar { transform-box: fill-box; transform-origin: bottom; animation: fx-bar 2.4s ease-in-out infinite; }
@keyframes fx-bar { 50% { transform: scaleY(.55); } }

/* ---------- team ---------- */
body.fx .team-card.tilt { border-radius: 10px; }
body.fx .team-photo-wrap { border-radius: 10px; box-shadow: 0 0 0 0 transparent; transition: box-shadow .4s ease; transform: translateZ(24px); }
body.fx .team-card:hover .team-photo-wrap { box-shadow: 0 18px 40px -18px rgba(4,38,38,.45), 0 0 0 2px rgba(51,195,117,.6); }
body.fx .team-card:hover .team-photo { filter: grayscale(.2) contrast(1.04); }
body.fx .team-photo-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(4,38,38,.35));
  opacity: 0; transition: opacity .4s ease;
}
body.fx .team-card:hover .team-photo-wrap::after { opacity: 1; }

/* ---------- dark closing section ---------- */
body.fx .dark-section { position: relative; overflow: hidden; }
body.fx .dark-section::before {
  content: ""; position: absolute; width: 700px; height: 700px; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(51,195,117,.22), transparent 60%);
  animation: fx-breathe 8s ease-in-out infinite; pointer-events: none;
}
body.fx .dark-section .wrap { position: relative; }
@keyframes fx-breathe { 50% { transform: translate(-50%, -50%) scale(1.25); opacity: .6; } }

/* ---------- scroll progress ---------- */
.fx-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 60;
  background: linear-gradient(90deg, var(--accent), #7fe3ad);
  transform-origin: left; transform: scaleX(0);
  box-shadow: 0 0 12px var(--glow);
}

/* ---------- motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  body.fx *, body.fx *::before, body.fx *::after {
    animation: none !important; transition: none !important;
  }
  body.fx [data-reveal], body.fx .hero .wrap > * { opacity: 1 !important; transform: none !important; }
  body.fx .tilt { transform: none !important; }
  body.fx .hero-art { transform: translateY(-50%) !important; }
  .pf-arc, .pf-worm { stroke-dashoffset: 0; }
  .fx-progress { display: none; }
}

/* ---------- portfolio: feature card, device and browser mockups ---------- */
.pf-feature { margin-top: 44px; }
.pf-feature .pf-visual { aspect-ratio: 1000 / 366; }
.pf-feature .pf-visual img { object-fit: contain; }
@media (min-width: 980px) {
  .pf-feature .pf-body { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; align-items: start; }
  .pf-feature .pf-body > .pf-tags, .pf-feature .pf-body > h3, .pf-feature .pf-body > p { grid-column: 1; }
  .pf-feature .pf-body > .pf-facts { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  .pf-feature .pf-body > .pf-private { grid-column: 2; }
}
.pf-feature .pf-body { padding: 28px; }
.pf-feature h3 { font-size: 24px; }
.pf-map { background: #042626; }
.pf-map img { object-fit: cover; opacity: 1; }
@media (min-width: 860px) { .pf-grid { grid-template-columns: repeat(2, 1fr) !important; } }
.pf-grid { margin-top: 24px; }

.pf-phones { perspective: 1100px; }
.pf-phones .device {
  position: absolute; width: auto; height: 118%; inset: auto;
  top: 9%; border-radius: 14px; object-fit: cover; opacity: 1;
  border: 3px solid #1b2b2a; background: #111;
  box-shadow: 0 24px 50px -18px rgba(0,0,0,.7), 0 0 0 1px rgba(127,227,173,.18);
  transition: transform .8s var(--ease-out);
}
.pf-phones .d-front { left: 50%; transform: translateX(-8%) rotateY(-16deg) rotateX(6deg); z-index: 2; }
.pf-phones .d-back  { left: 50%; transform: translateX(-88%) rotateY(18deg) rotateX(6deg) scale(.9); opacity: .75; }
.pf-phones.single .d-front { transform: translateX(-50%) rotateY(-14deg) rotateX(8deg); }
.pf-card:hover .pf-phones .d-front { transform: translateX(-4%) rotateY(-8deg) rotateX(3deg) translateY(-6px); }
.pf-card:hover .pf-phones .d-back { transform: translateX(-96%) rotateY(12deg) rotateX(3deg) scale(.92); }
.pf-card:hover .pf-phones.single .d-front { transform: translateX(-50%) rotateY(-6deg) rotateX(3deg) translateY(-6px); }
.pf-card:hover .pf-visual .device { transform-origin: center; }
.pf-card:hover .pf-phones img.device { scale: 1; }

.pf-browser { padding: 26px 22px 0; }
.pf-browser .bar {
  position: relative; height: 22px; border-radius: 8px 8px 0 0;
  background: #1a2b2a; display: flex; align-items: center; gap: 6px; padding: 0 10px;
  transform: perspective(900px) rotateX(10deg); transform-origin: bottom;
}
.pf-browser .bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.25); }
.pf-browser img {
  position: relative; inset: auto; width: 100%; height: auto; display: block;
  border-radius: 0 0 6px 6px; opacity: 1;
  transform: perspective(900px) rotateX(10deg); transform-origin: top;
  box-shadow: 0 30px 50px -20px rgba(0,0,0,.7);
}
.pf-card:hover .pf-browser img, .pf-card:hover .pf-browser .bar { transform: perspective(900px) rotateX(3deg); }
.pf-card:hover .pf-visual.pf-browser img { scale: 1; }

/* ---------- capability strip ---------- */
.cap-strip {
  display: flex; overflow: hidden; gap: 12px; margin-top: 30px;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cap-track { display: flex; gap: 12px; flex: none; animation: cap-scroll 38s linear infinite; }
.cap-strip:hover .cap-track { animation-play-state: paused; }
@keyframes cap-scroll { to { transform: translateX(calc(-100% - 12px)); } }
.cap-chip {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 10px 16px; border-radius: 999px; font-size: 15px; font-weight: 600; color: #e9fbf1;
  background: rgba(255,255,255,.05); border: 1px solid rgba(127,227,173,.22);
}
.cap-chip svg { width: 18px; height: 18px; fill: none; stroke: #33c375; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pf-built { font-size: 13.5px !important; color: #bff3d6 !important; margin: -2px 0 2px !important; }
.pf-built span {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  color: var(--dark); background: var(--accent); padding: 2px 7px; border-radius: 4px; margin-right: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .cap-track { animation: none !important; } .cap-strip { flex-wrap: wrap; mask-image: none; -webkit-mask-image: none; }
  .cap-track[aria-hidden] { display: none; } .cap-track { flex-wrap: wrap; }
}

/* ---------- hardware card: internals + finished unit ---------- */
.pf-hw { perspective: 1100px; background: radial-gradient(80% 90% at 30% 20%, #11524e, #06302f 70%); }
.pf-hw img { position: absolute; inset: auto; opacity: 1; box-shadow: 0 24px 50px -18px rgba(0,0,0,.7), 0 0 0 1px rgba(127,227,173,.18); transition: transform .8s var(--ease-out); }
.pf-hw .hw-inner { left: 7%; top: 13%; width: 58%; height: auto; border-radius: 10px; transform: rotateY(14deg) rotateX(4deg); }
.pf-hw .hw-unit  { right: 8%; top: 7%; height: 88%; width: auto; border-radius: 12px; transform: rotateY(-12deg) rotateX(4deg); z-index: 2; }
.pf-card:hover .pf-hw .hw-inner { transform: rotateY(8deg) rotateX(2deg) translateX(-6px); }
.pf-card:hover .pf-hw .hw-unit  { transform: rotateY(-6deg) rotateX(2deg) translateY(-6px); }

.pf-title {
  font-size: clamp(44px, 7vw, 84px); line-height: 1; letter-spacing: -0.03em; margin: 0 0 18px;
  background: linear-gradient(100deg, #ffffff 0%, #bff3d6 40%, #33c375 60%, #ffffff 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important;
  animation: fx-shimmer 9s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .pf-title { animation: none; } }

/* ---------- booking ---------- */
.cal-card {
  max-width: 1040px; margin: 0 auto; border-radius: 18px; overflow: hidden;
  background: #ffffff; text-align: left;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(127,227,173,.25), 0 0 60px -10px rgba(51,195,117,.25);
}
.cal-inline { width: 100%; min-height: 640px; overflow: auto; }
.cal-fallback { color: #5b6968 !important; padding: 40px; text-align: center; margin: 0; }
.cal-fallback a { color: #2ba764; font-weight: 600; }
@media (max-width: 640px) { .cal-inline { min-height: 760px; } }
.cal-inline:has(iframe) .cal-fallback { display: none; }

/* ---------- hero bullets ---------- */
.hero-points { list-style: none; padding: 0; margin: 4px 0 30px; display: grid; gap: 12px; max-width: 640px; }
.hero-points li {
  position: relative; padding-left: 34px; font-size: 18px; line-height: 1.5; color: var(--muted);
}
.hero-points li strong { color: var(--fg); }
.hero-points li::before {
  content: ""; position: absolute; left: 0; top: .18em; width: 22px; height: 22px; border-radius: 7px;
  background: rgba(51,195,117,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ba764' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(51,195,117,.35);
}
body.fx .hero .wrap > *:nth-child(5) { animation-delay: .38s; }
body.fx .hero-points li { opacity: 0; transform: translateX(-10px); animation: fx-rise .7s var(--ease-out) forwards; }
body.fx .hero-points li:nth-child(1) { animation-delay: .32s; }
body.fx .hero-points li:nth-child(2) { animation-delay: .40s; }
body.fx .hero-points li:nth-child(3) { animation-delay: .48s; }
body.fx .hero-points li:nth-child(4) { animation-delay: .56s; }
@media (max-width: 600px) { .hero-points li { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { body.fx .hero-points li { opacity: 1 !important; transform: none !important; } }

/* ---------- phones ---------- */
@media (max-width: 700px) {
  /* The full Pacific at phone width is too small to read. Crop in on the part that
     carries the story - Panama, the Gulf and East Coast ports, and the US - and let
     the route run in from the left edge. */
  .pf-feature .pf-visual { aspect-ratio: 4 / 3; }
  .pf-feature .pf-visual img { object-fit: cover; object-position: 100% 50%; }
  body.fx .team-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 14px; }
  body.fx .team-card h3 { font-size: 16px; }
  body.fx .team-role { font-size: 13px; }
}

/* ---------- Gym App gallery ---------- */
.pf-app { margin-top: 24px; }
.app-gallery { position: relative; border-bottom: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(70% 90% at 50% 0%, #11524e, #06302f 75%); }
.app-track {
  display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 38px calc(50% - 115px) 30px; scrollbar-width: none; perspective: 1400px;
}
.app-track::-webkit-scrollbar { display: none; }
.app-track:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.app-shot { flex: none; width: 230px; margin: 0; scroll-snap-align: center; text-align: center;
  transform: rotateY(var(--ry, 0deg)) scale(var(--sc, 1)); transition: transform .25s ease-out, opacity .25s; opacity: var(--op, 1); }
.app-shot img { display: block; width: 100%; height: auto; border-radius: 26px; border: 4px solid #172524; background: #111;
  box-shadow: 0 30px 60px -25px rgba(0,0,0,.8), 0 0 0 1px rgba(127,227,173,.2); }
.app-shot figcaption { margin-top: 14px; font-size: 13.5px; font-weight: 600; letter-spacing: .02em; color: #bff3d6; }
.app-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(127,227,173,.4); background: rgba(4,38,38,.75); color: #e9fbf1; font-size: 30px; line-height: 1;
  cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .2s, transform .2s;
}
.app-nav:hover { background: var(--accent); color: var(--dark); }
.app-nav.prev { left: 16px; } .app-nav.next { right: 16px; }
.pf-app .pf-body { padding: 28px; }
.pf-app h3 { font-size: 24px; }
@media (min-width: 980px) {
  .pf-app .pf-body { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; align-items: start; }
  .pf-app .pf-body > .pf-tags, .pf-app .pf-body > h3, .pf-app .pf-body > p { grid-column: 1; }
  .pf-app .pf-body > .pf-facts { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
}
@media (min-width: 1100px) { .pf-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 700px) {
  .app-track { gap: 16px; padding: 28px calc(50% - 95px) 24px; }
  .app-shot { width: 190px; }
  .app-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) { .app-shot { transform: none !important; opacity: 1 !important; } .app-track { scroll-behavior: auto; } }
body.fx .pf-feature.tilt { transform: none !important; }