/* Aerion Branding & Marketing — site styles v2 */

:root {
  --navy: #1a3a5d;
  --navy-dark: #122a44;
  --orange: #E84329;
  --orange-dark: #C93520;
  --offwhite: #e9e9e6;
  --white: #ffffff;
  --text: #26374a;
  --muted: #5b6b7d;
  --radius: 10px;
  --max-width: 1140px;
  --whatsapp: #25d366;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Side social dock ---------- */
.social-dock {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--navy);
  padding: 14px 9px;
  border-radius: 0 14px 14px 0;
  z-index: 150;
}
.social-dock a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  transition: background 0.2s ease, transform 0.2s ease;
}
.social-dock a:hover { background: var(--orange); transform: translateX(3px); }
.social-dock a svg { width: 15px; height: 15px; }
@media (max-width: 640px) { .social-dock { display: none; } }

/* ---------- Header ---------- */
.site-header {
  background: var(--navy);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 38px; width: auto; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  font-size: 26px;
  cursor: pointer;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
  align-items: center;
}

.main-nav a {
  color: var(--white);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: 0.3px;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.main-nav a:hover,
.main-nav a.active {
  border-color: var(--orange);
  color: var(--orange);
}

.main-nav .btn { color: var(--white); }
.main-nav .btn:hover { color: var(--white); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 13px 30px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.3px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-primary { background: var(--orange); color: var(--white); }
.btn-primary:hover {
  background: var(--orange-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(240,64,47,0.35);
}

.btn-outline {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.6);
}
.btn-outline:hover { border-color: var(--white); transform: translateY(-2px); }

.btn-outline-navy {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
}
.btn-outline-navy:hover { background: var(--navy); color: var(--white); }

.btn-whatsapp {
  background: var(--orange);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-whatsapp:hover { background: #d33a1f; transform: translateY(-2px); }

/* ---------- Hero (simplified — no big logo) ---------- */
.hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: var(--white);
  padding: 84px 0 76px;
  text-align: center;
}
.hero .container { max-width: 820px; }
.hero.hero-compact { padding: 48px 0 44px; }
.hero.hero-compact h1 { font-size: 34px; margin-bottom: 12px; }
.hero.hero-compact p { margin-bottom: 0; }

.badge-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.pill {
  display: inline-block;
  background: rgba(240,64,47,0.15);
  color: var(--orange);
  border: 1px solid rgba(240,64,47,0.4);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.pill.alt {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.25);
}

.hero h1 { font-size: 42px; line-height: 1.15; margin: 0 0 18px; }
.hero h1 span { color: var(--orange); }
.hero p {
  font-size: 17px;
  color: rgba(255,255,255,0.82);
  max-width: 560px;
  margin: 0 auto 32px;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

/* ---------- Sections ---------- */
section { padding: 76px 0; }
section.alt { background: var(--offwhite); }
section.navy-section { background: var(--navy); color: var(--white); }

.section-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.section-head.left { text-align: left; margin: 0 0 32px; }

.tag {
  display: inline-block;
  background: var(--orange);
  color: var(--white);
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.tag-outline {
  display: inline-block;
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.tag-outline.on-dark { color: var(--white); border-color: rgba(255,255,255,0.5); }

.section-head h2 { font-size: 30px; color: var(--navy); margin: 0 0 12px; }
.navy-section .section-head h2 { color: var(--white); }
.section-head p { color: var(--muted); font-size: 15.5px; }
.navy-section .section-head p { color: rgba(255,255,255,0.75); }

/* ---------- What We Do — two big clickable panels ---------- */
.panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.panel-card {
  display: block;
  position: relative;
  border-radius: 16px;
  padding: 44px 36px;
  color: var(--white);
  overflow: hidden;
  min-height: 260px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.panel-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.18); }
.panel-card.branding { background: linear-gradient(135deg, #e2492f 0%, #c92f1c 100%); }
.panel-card.media { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%); }
.panel-card .panel-eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 12px;
}
.panel-card h3 { font-size: 26px; margin: 0 0 14px; }
.panel-card p { color: rgba(255,255,255,0.85); font-size: 15px; margin: 0 0 22px; max-width: 380px; }
.panel-card .panel-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
}
.panel-card .panel-link .arrow { transition: transform 0.2s ease; }
.panel-card:hover .panel-link .arrow { transform: translateX(4px); }

/* ---------- Grids / Cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }

.card {
  background: var(--white);
  border: 1px solid #e6e6e6;
  border-radius: var(--radius);
  padding: 30px 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(26,58,93,0.10); }
.card .icon-badge {
  width: 46px; height: 46px; border-radius: 12px;
  background: rgba(240,64,47,0.12); color: var(--orange);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 16px; font-weight: 700;
}
.card h3 { color: var(--navy); font-size: 18px; margin: 0 0 10px; }
.card ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 14px; }
.card ul li { margin-bottom: 6px; }
.card p { color: var(--muted); font-size: 14.5px; margin: 0; }

.pillar-box {
  border: 2px solid var(--navy);
  border-radius: var(--radius);
  padding: 24px 20px;
  background: var(--navy);
  color: var(--white);
}
.pillar-box h3 { color: var(--orange); font-size: 16px; margin: 0 0 12px; }
.pillar-box ul { margin: 0; padding-left: 18px; font-size: 14px; }
.pillar-box ul li { margin-bottom: 6px; }

/* ---------- Category chips (promo products, industries) ---------- */
.chip-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  background: var(--offwhite);
  color: var(--navy);
  border: 1px solid #dcdcd8;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
}
.navy-section .chip { background: rgba(255,255,255,0.08); color: var(--white); border-color: rgba(255,255,255,0.2); }
.chip-cloud-accent .chip { border-color: var(--orange); }

/* ---------- Team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px; }
.team-card {
  background: var(--white);
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  overflow: hidden;
  padding: 34px 30px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.team-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(26,58,93,0.10); }
.team-card .team-photo {
  width: 220px;
  height: 220px;
  border-radius: 16px;
  object-fit: contain;
  margin: 0 auto 18px;
  box-sizing: border-box;
}
.team-card .team-body { padding: 0; }
.team-card h3 { color: var(--navy); font-size: 19px; margin: 0 0 4px; }
.team-card .role {
  color: var(--orange); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 14px; display: block;
}
.team-card p { color: var(--muted); font-size: 14px; margin: 0; text-align: left; }

.team-preview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.team-preview-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  gap: 18px;
  align-items: center;
}
.team-preview-card img { width: 84px; height: 84px; border-radius: 10px; object-fit: contain; background: rgba(255,255,255,0.08); padding: 4px; box-sizing: border-box; flex-shrink: 0; }
.team-preview-card h4 { margin: 0 0 4px; font-size: 16px; }
.team-preview-card .role { color: var(--orange); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.team-preview-card p { margin: 6px 0 0; font-size: 13.5px; color: rgba(255,255,255,0.7); }

/* ---------- Portfolio ---------- */
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.portfolio-item { border-radius: 12px; overflow: hidden; position: relative; }
.portfolio-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 0.3s ease; }
.portfolio-item:hover img { transform: scale(1.05); }
.portfolio-item .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(18,42,68,0.85), transparent);
  color: var(--white);
  padding: 30px 16px 12px;
  font-size: 14px;
  font-weight: 600;
}

/* ---------- Homepage portfolio CTA (text-only, clickable) ---------- */
.portfolio-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--navy);
  color: var(--white);
  border-radius: 16px;
  padding: 46px 44px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.portfolio-cta:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.18); }
.portfolio-cta h3 { font-size: 30px; margin: 0; color: var(--white); }
.portfolio-cta span.sub { display:block; font-size: 14.5px; color: rgba(255,255,255,0.7); margin-top: 6px; font-weight: 400; }
.portfolio-cta .arrow { font-size: 30px; color: var(--orange); transition: transform 0.2s ease; }
.portfolio-cta:hover .arrow { transform: translateX(6px); }

/* ---------- Portfolio view toggle ---------- */
.view-toggle { display:flex; gap:10px; justify-content:center; margin-bottom:36px; }
.view-toggle button {
  padding:10px 24px; border-radius:999px; border:2px solid var(--navy);
  background:transparent; color:var(--navy); font-weight:700; font-size:13px;
  text-transform:uppercase; letter-spacing:0.5px; cursor:pointer;
  transition:background .2s ease,color .2s ease; font-family:inherit;
}
.view-toggle button.active, .view-toggle button:hover { background:var(--navy); color:var(--white); }

.grid-view.is-hidden, .scroll-view.is-hidden { display:none; }

/* ---------- Portfolio scroll (story) view ---------- */
.story-scroll {
  height: 78vh;
  max-height: 760px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  border-radius: 18px;
  background: var(--navy-dark);
  scrollbar-width: thin;
}
.story-slide {
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 28px;
  box-sizing: border-box;
}
.story-slide img { max-width: 92%; max-height: 68%; object-fit: contain; border-radius: 8px; }
.story-cap { color: var(--white); margin-top: 18px; font-size: 15px; text-align: center; max-width: 80%; }
.story-tag {
  position: absolute; top: 22px; left: 22px;
  background: rgba(255,255,255,0.12); color: var(--white);
  padding: 5px 16px; border-radius: 999px; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700;
}
.story-count {
  position: absolute; top: 22px; right: 22px;
  color: rgba(255,255,255,0.6); font-size: 12px;
}
.story-hint {
  text-align: center; color: var(--muted); font-size: 13px; margin-top: 14px;
}
@media (max-width: 640px) {
  .story-scroll { height: 72vh; border-radius: 12px; }
  .story-slide img { max-height: 62%; }
}

/* ---------- Portfolio v2: category tile grid + lightbox ---------- */
.portfolio-category { margin-bottom: 56px; }
.portfolio-category:last-child { margin-bottom: 0; }
.portfolio-category-head { display:flex; align-items:baseline; gap:14px; margin-bottom: 22px; }
.portfolio-category-head h2 { color: var(--navy); font-size: 24px; margin:0; }
.portfolio-category-head span { color: var(--muted); font-size: 14px; }
.tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.tile {
  aspect-ratio: 1/1;
  display: block;
  width: 100%;
  background: var(--offwhite);
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  font: inherit;
}
.tile:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease; }
.tile:hover img { transform: scale(1.05); }

/* ---------- Portfolio Featured (crossfade) ---------- */
.featured-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
.crossfade-viewer {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--offwhite);
  border: 1px solid #e6e6e6;
  cursor: pointer;
  aspect-ratio: 4/3;
}
.crossfade-viewer.tall { aspect-ratio: 3/4; }
.crossfade-viewer.landscape { aspect-ratio: 5/4; }
.clean-tile.tall-fit { aspect-ratio: 787/1400; }
.clean-tile.square-fit { aspect-ratio: 1/1; }
.crossfade-viewer .cf-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; opacity: 0; transition: opacity 0.7s ease;
}
.crossfade-viewer .cf-img.active { opacity: 1; }
.crossfade-viewer .cf-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  background: linear-gradient(to top, rgba(18,42,68,0.85), transparent);
  color: var(--white); padding: 26px 16px 12px; font-size: 13.5px; font-weight: 600;
}
.crossfade-viewer .cf-dots { position: absolute; top: 14px; right: 14px; z-index: 2; display: flex; gap: 6px; }
.crossfade-viewer .cf-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.5); transition: background 0.2s ease; }
.crossfade-viewer .cf-dots span.active { background: var(--orange); }
.crossfade-hint { text-align: center; color: var(--muted); font-size: 13px; margin-top: 12px; }
@media (max-width: 900px) { .featured-grid { grid-template-columns: 1fr; } }

.lightbox {
  display: none;
  position: fixed; inset: 0; z-index: 999;
  background: rgba(10,20,34,0.94);
  align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox-inner { max-width: 90vw; max-height: 84vh; display:flex; flex-direction:column; align-items:center; }
.lightbox-inner img { max-width: 90vw; max-height: 74vh; object-fit: contain; border-radius: 6px; }
.lightbox-cap { color: var(--white); margin-top: 14px; font-size: 14.5px; text-align:center; }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute; background: rgba(255,255,255,0.1); color: var(--white);
  border: none; cursor: pointer; display:flex; align-items:center; justify-content:center;
  border-radius: 50%; transition: background 0.2s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: var(--orange); }
.lightbox-close { top: 22px; right: 22px; width: 42px; height: 42px; font-size: 20px; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; font-size: 24px; }
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }
@media (max-width: 640px) {
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
  .lightbox-prev, .lightbox-next { width: 40px; height: 40px; font-size: 18px; }
}

/* ---------- Dimmed background photo sections ---------- */
.bg-photo { position: relative; background-size: cover; background-position: center; }
.bg-photo::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(15,32,55,0.90) 0%, rgba(15,32,55,0.80) 100%);
}
.bg-photo > .container { position: relative; z-index: 1; }
.bg-photo.page-hero { background-color: var(--navy); }

/* ---------- Portfolio: Bento mosaic grids (crop-safe: object-fit:contain, nothing gets cut off) ---------- */
.bento-grid-6, .bento-grid-5 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.bento-item {
  border-radius: 14px; overflow: hidden; cursor: pointer; border: none; padding: 0;
  background: var(--offwhite); position: relative; width: 100%; display: block;
  aspect-ratio: 4 / 5;
}
.bento-item.featured { grid-column: span 2; grid-row: span 2; aspect-ratio: 1 / 1; }
.bento-item img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  transition: transform 0.35s ease;
}
.bento-item:hover img { transform: scale(1.05); }
.bento-item .bento-cap,
.clean-tile .bento-cap,
.row-tile .bento-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  background: linear-gradient(to top, rgba(18,42,68,0.88), transparent);
  color: var(--white); padding: 22px 14px 10px; font-size: 12.5px; font-weight: 600;
  opacity: 0; transition: opacity 0.25s ease; pointer-events: none;
}
.bento-item:hover .bento-cap,
.clean-tile:hover .bento-cap,
.row-tile:hover .bento-cap { opacity: 1; }
.bento-item.logo-tile { background: var(--white); display: flex; align-items: center; justify-content: center; padding: 20px; cursor: default; }
.bento-item.logo-tile:hover img { transform: none; }
.bento-item.logo-tile img { width: 72%; height: 72%; object-fit: contain; }
.navy-section .bento-item { background: rgba(255,255,255,0.06); }
@media (max-width: 900px) {
  .bento-grid-6, .bento-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .bento-item.featured { grid-column: span 2; grid-row: span 1; aspect-ratio: 4 / 3; }
}

/* ---------- Scroll-reveal (adds movement as sections come into view) ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-stagger.in-view { transition-delay: calc(var(--i, 0) * 70ms); }

/* ---------- Portfolio v3: no-crop clean grid ---------- */
.clean-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}
.clean-tile {
  border-radius: 14px; overflow: hidden; cursor: pointer; border: none; padding: 0;
  background: var(--offwhite); position: relative; width: 100%; display: block;
  aspect-ratio: 3 / 4;
}
.clean-tile img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  transition: transform 0.3s ease;
}
.clean-tile:hover img { transform: scale(1.04); }
.navy-section .clean-tile { background: rgba(255,255,255,0.06); }
.navy-section .crossfade-hint { color: rgba(255,255,255,0.65); }
.navy-section .row-tile,
.navy-section .flip-card-block { background: transparent; }

/* ---------- Portfolio v3: masonry grid — image's own shape, zero letterbox/border ---------- */
.masonry-grid { columns: 3; column-gap: 18px; }
.masonry-grid .clean-tile {
  aspect-ratio: auto; width: 100%; display: inline-block; break-inside: avoid; margin-bottom: 18px;
  background: none;
}
.masonry-grid .clean-tile img { height: auto; width: 100%; object-fit: unset; }
@media (max-width: 900px) { .masonry-grid { columns: 2; } }
@media (max-width: 560px) { .masonry-grid { columns: 1; } }

/* ---------- Portfolio v3: branding "row" — natural aspect ratio, never cropped ---------- */
.row-strip {
  display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; align-items: flex-end;
}
.row-tile {
  height: 260px; border-radius: 14px; overflow: hidden; cursor: pointer; border: none; padding: 0;
  background: var(--offwhite); position: relative; flex: 0 0 auto;
}
.row-tile img { height: 100%; width: auto; display: block; object-fit: contain; transition: transform 0.3s ease; }
.row-tile:hover img { transform: scale(1.04); }
@media (max-width: 640px) { .row-tile { height: 190px; } }

/* ---------- Portfolio v3: Logos — hover to switch light/dark ---------- */
.logo-swap-row { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.logo-swap-tile {
  position: relative; width: 260px; height: 180px; border-radius: 14px; overflow: hidden;
}
.logo-swap-tile .state {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 26px; transition: opacity 0.4s ease;
}
.logo-swap-tile .state.light { background: var(--offwhite); opacity: 1; }
.logo-swap-tile .state.dark { background: var(--navy); opacity: 0; }
.logo-swap-tile:hover .state.light { opacity: 0; }
.logo-swap-tile:hover .state.dark { opacity: 1; }
.logo-swap-tile img { max-width: 74%; max-height: 62%; object-fit: contain; }
@media (max-width: 640px) { .logo-swap-tile { width: 100%; max-width: 320px; } }

/* ---------- Portfolio: Flip business cards ---------- */
.flip-card-row { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; }
.flip-card-block { text-align: center; }
.flip-card { width: 280px; height: 176px; perspective: 1200px; }
.flip-card-inner {
  position: relative; width: 100%; height: 100%;
  transition: transform 0.6s cubic-bezier(.4,.2,.2,1); transform-style: preserve-3d;
  border-radius: 12px; box-shadow: 0 10px 24px rgba(0,0,0,0.14);
}
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: 12px; overflow: hidden; background: var(--offwhite);
  display: flex; align-items: center; justify-content: center;
}
.flip-card-front img, .flip-card-back img { width: 100%; height: 100%; object-fit: contain; }
.flip-card-back { transform: rotateY(180deg); }
.flip-card-label { margin-top: 12px; font-size: 13px; color: var(--muted); font-weight: 600; }

/* ---------- Portfolio: Poster carousel arrows ---------- */
.crossfade-viewer .cf-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.88);
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--navy); transition: background 0.2s ease;
}
.crossfade-viewer .cf-arrow:hover { background: var(--white); }
.crossfade-viewer .cf-prev { left: 12px; }
.crossfade-viewer .cf-next { right: 12px; }

/* ---------- Portfolio: Logos grid ---------- */
.logos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.logo-swatch { border-radius: 12px; padding: 26px 18px; display: flex; align-items: center; justify-content: center; min-height: 110px; }
.logo-swatch.dark { background: var(--navy); }
.logo-swatch.light { background: var(--offwhite); border: 1px solid #e6e6e6; }
.logo-swatch img { max-width: 82%; max-height: 64px; object-fit: contain; }
@media (max-width: 640px) { .logos-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Why choose us ---------- */
.why-list { max-width: 780px; margin: 0 auto; }
.why-item { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid #e2e2e2; }
.why-item:last-child { border-bottom: none; }
.why-item .num { color: var(--orange); font-weight: 700; font-size: 20px; min-width: 34px; }
.why-item p { margin: 0; color: var(--text); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--orange); color: var(--white); padding: 54px 0; text-align: center; }
.cta-band h2 { font-size: 26px; margin: 0 0 12px; }
.cta-band p { margin: 0 0 24px; color: rgba(255,255,255,0.9); }
.cta-band .hero-actions { justify-content: center; }
/* WhatsApp button was orange-on-orange here (same color as the band itself),
   nearly invisible. Flip it to a solid white pill so it's clearly visible
   next to the outline "Get a Quote" button. */
.cta-band .btn-whatsapp { background: var(--white); color: var(--orange); }
.cta-band .btn-whatsapp svg { fill: var(--orange); }
.cta-band .btn-whatsapp:hover { background: var(--navy); color: var(--white); }
.cta-band .btn-whatsapp:hover svg { fill: var(--white); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.contact-card { background: var(--offwhite); border-radius: var(--radius); padding: 26px; margin-bottom: 18px; }
.contact-card h3 { color: var(--navy); margin: 0 0 6px; font-size: 17px; }
.contact-card p { margin: 2px 0; color: var(--text); font-size: 15px; }
.contact-card a { color: var(--orange); font-weight: 600; }

form.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form label { font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 6px; display: block; }
.contact-form input, .contact-form textarea {
  width: 100%; padding: 12px 14px; border: 1px solid #d7d7d4; border-radius: 8px;
  font-family: inherit; font-size: 15px; background: var(--white);
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--orange); }
.contact-form button { align-self: flex-start; border: none; cursor: pointer; }

/* ---------- Legal pages ---------- */
.legal-doc { max-width: 800px; margin: 0 auto; }
.legal-doc h2 { color: var(--navy); font-size: 22px; margin: 40px 0 14px; }
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc p, .legal-doc li { color: var(--text); font-size: 15px; margin: 0 0 10px; }
.legal-doc ul { padding-left: 20px; }
.legal-doc .doc-meta {
  background: var(--offwhite); border-radius: 10px; padding: 18px 22px;
  font-size: 14px; color: var(--muted); margin-bottom: 36px;
}
.legal-doc .doc-meta strong { color: var(--navy); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-dark); color: rgba(255,255,255,0.75); padding: 50px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 28px; margin-bottom: 30px; }
.footer-grid h4 { color: var(--white); font-size: 14.5px; margin: 0 0 14px; letter-spacing: 0.4px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 8px; font-size: 14px; }
.footer-grid a:hover { color: var(--orange); }
.footer-brand img { height: 32px; margin-bottom: 14px; }
.footer-brand p { font-size: 13.5px; max-width: 300px; color: rgba(255,255,255,0.6); }
.footer-socials { display: flex; gap: 12px; margin-top: 14px; }
.footer-socials a {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center;
}
.footer-socials a:hover { background: var(--orange); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12); padding-top: 20px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: 12.5px; color: rgba(255,255,255,0.5);
}
.footer-bottom a { color: rgba(255,255,255,0.5); }
.footer-bottom a:hover { color: var(--orange); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { background: var(--navy); color: var(--white); padding: 60px 0; text-align: center; }
.page-hero h1 { font-size: 34px; margin: 0 0 10px; }
.page-hero p { color: rgba(255,255,255,0.75); margin: 0; }

/* ---------- WhatsApp chat widget ---------- */
.whatsapp-backdrop {
  position: fixed; inset: 0; background: rgba(10,20,34,0.55); z-index: 199;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.whatsapp-backdrop.open { opacity: 1; pointer-events: auto; }
.whatsapp-widget { position: fixed; bottom: 24px; right: 24px; z-index: 200; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.whatsapp-toggle {
  width: 60px; height: 60px; border-radius: 50%; border: 3px solid var(--white);
  background: var(--whatsapp); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(0,0,0,0.3); cursor: pointer; padding: 0; position: relative;
  transition: transform 0.2s ease;
}
.whatsapp-toggle::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--whatsapp); opacity: 0.55;
  animation: wa-pulse 2.2s ease-out infinite;
}
@keyframes wa-pulse {
  0% { transform: scale(0.9); opacity: 0.55; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { opacity: 0; }
}
.whatsapp-toggle:hover { transform: scale(1.08); }
.whatsapp-toggle svg { width: 30px; height: 30px; position: relative; z-index: 1; }

/* Non-blocking modal: anchored bottom-right, above the round toggle button.
   No backdrop/dimming — the rest of the page stays fully usable while open. */
.whatsapp-panel {
  position: fixed; bottom: 96px; right: 24px; z-index: 201;
  width: 320px; max-width: calc(100vw - 48px); background: var(--white); border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3); overflow: hidden;
  opacity: 0; transform: translateY(16px) scale(0.97); pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.whatsapp-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
@media (max-width: 640px) { .whatsapp-panel { bottom: 84px; right: 16px; } }
.whatsapp-panel-head {
  background: var(--whatsapp); color: var(--white); padding: 16px 16px 18px;
  display: flex; align-items: center; gap: 10px; position: relative;
}
.whatsapp-panel-logo { width: 34px; height: 34px; border-radius: 50%; background: var(--white); padding: 5px; object-fit: contain; }
.whatsapp-panel-head strong { display: block; font-size: 14.5px; }
.whatsapp-panel-head span { display: block; font-size: 11.5px; opacity: 0.85; }
.whatsapp-panel-close {
  position: absolute; top: 8px; right: 10px; background: none; border: none; color: var(--white);
  font-size: 20px; line-height: 1; cursor: pointer; opacity: 0.85; padding: 4px;
}
.whatsapp-panel-close:hover { opacity: 1; }
.whatsapp-panel-msg { padding: 16px 16px 4px; margin: 0; font-size: 13.5px; color: var(--text); line-height: 1.5; }
.whatsapp-panel-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: calc(100% - 32px); margin: 14px 16px 16px; padding: 11px 14px;
  background: var(--whatsapp); color: var(--white); border: none; border-radius: 10px;
  font-weight: 700; font-size: 13.5px; cursor: pointer; transition: background 0.2s ease;
}
.whatsapp-panel-cta:hover { background: #1ebd5a; }
.whatsapp-panel-cta svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .whatsapp-widget { bottom: 16px; right: 16px; }
  .whatsapp-toggle { width: 52px; height: 52px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .panel-grid, .grid-3, .grid-4, .grid-2, .team-grid, .team-preview-grid, .portfolio-grid { grid-template-columns: 1fr 1fr; }
  .tile-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .portfolio-cta { flex-direction: column; text-align: center; padding: 36px 28px; }
}

@media (max-width: 640px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--navy); display: none; padding: 10px 24px 20px;
  }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; gap: 4px; align-items: stretch; }
  .main-nav li { border-bottom: 1px solid rgba(255,255,255,0.08); }
  .main-nav a { display: block; padding: 12px 0; }
  .hero { padding: 56px 0; }
  .hero h1 { font-size: 28px; }
  .panel-grid, .grid-3, .grid-4, .grid-2, .team-grid, .team-preview-grid, .portfolio-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  section { padding: 52px 0; }
}


/* V20 additions */
.social-showcase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}.social-showcase-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(26,58,93,.10);transition:transform .35s ease,box-shadow .35s ease}.social-showcase-card:hover{transform:translateY(-8px) rotate(.25deg);box-shadow:0 20px 45px rgba(26,58,93,.18)}.social-showcase-card img{width:100%;height:auto;display:block;object-fit:contain}.social-showcase-card div{padding:18px}.social-showcase-card h3{margin:0 0 6px;color:var(--navy)}.social-showcase-card p{margin:0;color:var(--muted)}
.insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.insight-card{background:#fff;border-radius:16px;padding:28px;box-shadow:0 10px 30px rgba(26,58,93,.09);transition:.3s}.insight-card:hover{transform:translateY(-7px)}.daily-quote{background:linear-gradient(135deg,var(--navy),#0b2946);color:#fff;border-radius:20px;padding:42px}.daily-quote blockquote{font-size:clamp(24px,3vw,42px);line-height:1.25;margin:0 0 16px}.daily-quote cite{color:rgba(255,255,255,.75)}
@media(max-width:800px){.social-showcase-grid,.insight-grid{grid-template-columns:1fr}.daily-quote{padding:28px}}

/* ===== Aerion V21 cinematic homepage ===== */
.home-v21{background:#f5f3ef;overflow-x:hidden}.home-v21 .site-header{background:rgba(8,18,38,.76);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.1)}
.home-v21 .nav-contact{padding:10px 18px!important}.cursor-glow{position:fixed;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(15,57,92,.12),transparent 68%);pointer-events:none;z-index:2;transform:translate(-50%,-50%);transition:opacity .3s}.page-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:9999}.page-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#E84329,#0F395C)}
.speed-hero{height:min(920px,100vh);min-height:720px;position:relative;display:flex;align-items:center;color:#fff;overflow:hidden;background:linear-gradient(140deg,#071024 0%,#0d2344 45%,#dd4a20 150%)}
.speed-sky{position:absolute;inset:0;background:radial-gradient(circle at 75% 22%,rgba(255,112,34,.45),transparent 26%),linear-gradient(180deg,#0d1b36 0%,#143055 55%,#e16431 130%)}
.streaks{position:absolute;inset:-20%;background:repeating-linear-gradient(105deg,transparent 0 34px,rgba(255,255,255,.08) 36px 37px,transparent 39px 95px);animation:streakMove 2.8s linear infinite;filter:blur(1px)}
.city{position:absolute;left:-10%;right:-10%;bottom:28%;height:27%;clip-path:polygon(0 100%,0 55%,4% 55%,4% 25%,8% 25%,8% 67%,13% 67%,13% 42%,16% 42%,16% 10%,20% 10%,20% 74%,26% 74%,26% 30%,30% 30%,30% 61%,36% 61%,36% 20%,41% 20%,41% 76%,47% 76%,47% 45%,52% 45%,52% 5%,57% 5%,57% 66%,63% 66%,63% 34%,68% 34%,68% 70%,74% 70%,74% 14%,80% 14%,80% 58%,86% 58%,86% 29%,92% 29%,92% 65%,100% 65%,100% 100%);background:#091429;opacity:.58}.city-back{transform:scale(.8);transform-origin:bottom;filter:blur(2px);opacity:.32;animation:cityMove 18s linear infinite}.city-front{animation:cityMove 8s linear infinite}.rail{position:absolute;left:-15%;width:130%;height:6px;background:rgba(255,255,255,.72);bottom:22%;transform:rotate(-2deg);box-shadow:0 12px 0 rgba(11,20,39,.8),0 22px 0 rgba(255,255,255,.28)}.rail-two{bottom:18%;opacity:.45}.bullet-train{position:absolute;right:-2%;bottom:23%;width:min(52vw,740px);height:130px;display:flex;align-items:flex-end;filter:drop-shadow(0 24px 25px rgba(0,0,0,.42));animation:trainFloat 4s ease-in-out infinite}.train-nose{width:38%;height:92px;background:linear-gradient(180deg,#fff 0%,#dce6ec 72%,#E84329 73% 85%,#C93520 86%);clip-path:polygon(100% 23%,78% 3%,18% 0,0 25%,0 100%,86% 100%,100% 76%);border-radius:12px 70% 18px 10px}.train-body{height:92px;flex:1;background:linear-gradient(180deg,#fff,#dce6ec 72%,#E84329 73% 85%,#C93520 86%);border-radius:8px 0 0 12px;display:flex;gap:18px;align-items:center;padding:0 24px}.train-body span{display:block;width:42px;height:20px;border-radius:5px;background:#183253;box-shadow:inset 0 0 0 2px rgba(255,255,255,.22)}
.hero-vignette{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,10,23,.92) 0%,rgba(4,10,23,.56) 48%,rgba(4,10,23,.05) 78%),linear-gradient(0deg,rgba(4,10,23,.75),transparent 35%)}.speed-content{position:relative;z-index:3;padding-top:80px}.hero-kicker{display:inline-flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;font-weight:700;color:#EEEDED;margin-bottom:24px}.hero-kicker:before{content:"";width:38px;height:1px;background:currentColor}.speed-content h1{font-size:clamp(3.4rem,7.4vw,7.2rem);line-height:.92;max-width:900px;letter-spacing:-.06em;margin:0 0 28px}.speed-content h1 em{font-style:normal;color:#E84329}.speed-content>p{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.65;max-width:700px;color:rgba(255,255,255,.82)}.btn-large{padding:15px 25px}.btn-glass{background:rgba(255,255,255,.09);color:#fff;border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(10px)}.soundless-trigger{border:0;background:none;color:rgba(255,255,255,.72);text-decoration:underline;text-underline-offset:5px;cursor:pointer}.hero-proof{display:flex;gap:48px;margin-top:60px}.hero-proof div{display:grid;gap:4px}.hero-proof strong{font-size:.86rem;text-transform:uppercase;letter-spacing:.1em}.hero-proof span{font-size:.83rem;color:rgba(255,255,255,.58)}.scroll-cue{position:absolute;z-index:4;bottom:25px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.65);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;display:grid;justify-items:center;gap:8px}.scroll-cue span{height:35px;width:1px;background:#fff;animation:scrollPulse 1.7s infinite}
.marquee-section{padding:18px 0;background:#E84329;color:#fff;overflow:hidden}.marquee-track{display:flex;width:max-content;gap:25px;align-items:center;font-weight:800;text-transform:uppercase;letter-spacing:.1em;animation:marquee 32s linear infinite}.marquee-track span{white-space:nowrap}.marquee-track i{font-style:normal}.agency-intro{padding:120px 0;background:#f5f3ef}.split-intro{display:grid;grid-template-columns:70px 1.1fr 1fr;gap:48px;align-items:start}.intro-number{font-size:.8rem;letter-spacing:.1em;color:#E84329}.split-intro h2{font-size:clamp(2.5rem,5vw,5.3rem);line-height:1;letter-spacing:-.055em}.split-intro .lead{font-size:1.35rem;line-height:1.55;color:#15233c}.split-intro p{color:#5f6772;line-height:1.8}
.service-universe{padding:120px 0;background:#09152c;color:#fff}.service-universe .section-head h2{color:#fff;max-width:850px}.universe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.universe-card{position:relative;overflow:hidden;min-height:560px;padding:36px;border-radius:28px;color:#fff;display:flex;flex-direction:column;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}.universe-card:hover{transform:translateY(-12px);box-shadow:0 28px 70px rgba(0,0,0,.3)}.universe-card.orange{background:linear-gradient(145deg,#E84329,#0F395C)}.universe-card.red{background:linear-gradient(145deg,#db334d,#7e1831)}.universe-card.navy{background:linear-gradient(145deg,#234b78,#0a1b36)}.card-index{font-size:.75rem;letter-spacing:.15em}.universe-card .orb{position:absolute;width:250px;height:250px;border-radius:50%;right:-70px;top:-70px;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.4),rgba(255,255,255,.03) 65%);transition:transform .7s}.universe-card:hover .orb{transform:scale(1.25) translate(-12px,18px)}.universe-card h3{font-size:2.35rem;margin-top:auto;margin-bottom:18px}.universe-card p{color:rgba(255,255,255,.78);line-height:1.65}.universe-card ul{list-style:none;padding:0;margin:22px 0}.universe-card li{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.16)}.universe-card b{margin-top:15px}
.showcase-section{padding:120px 0;background:#f5f3ef}.horizontal-gallery{display:flex;gap:18px;overflow-x:auto;padding:20px max(4vw,calc((100vw - 1200px)/2));scrollbar-width:none;cursor:grab}.horizontal-gallery::-webkit-scrollbar{display:none}.horizontal-gallery.active{cursor:grabbing}.gallery-tile{position:relative;flex:0 0 min(470px,72vw);height:410px;border-radius:24px;overflow:hidden;background:#ddd}.gallery-tile.tall{height:560px}.gallery-tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s}.gallery-tile:hover img{transform:scale(1.045)}.gallery-tile:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.72))}.gallery-tile span{position:absolute;z-index:2;bottom:25px;left:25px;color:#fff;font-size:1.15rem;font-weight:700}.gallery-footer{display:flex;justify-content:space-between;margin-top:25px;color:#68717d}.text-link{font-weight:700;color:#E84329}.process-section{padding:120px 0;background:#fff}.process-line{display:grid;grid-template-columns:repeat(4,1fr);position:relative}.process-line:before{content:"";position:absolute;top:29px;left:3%;right:3%;height:1px;background:#ccd1d7}.process-step{position:relative;padding:0 28px 0 0}.process-step span{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#fff;border:1px solid #cfd4da;color:#E84329;font-weight:800;position:relative;z-index:1}.process-step h3{font-size:1.5rem;margin:24px 0 10px}.process-step p{color:#69717d;line-height:1.7}
.team-preview{padding:120px 0;background:#ecedea}.team-preview-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center}.team-copy h2{font-size:clamp(2.5rem,4.6vw,5rem);line-height:1;letter-spacing:-.05em}.team-copy p{font-size:1.12rem;color:#626b76;line-height:1.7;margin:25px 0}.team-collage{height:620px;position:relative;display:block}.portrait{position:absolute;overflow:hidden;border-radius:24px;box-shadow:0 25px 60px rgba(19,30,48,.2)}.portrait img{width:100%;height:100%;object-fit:cover}.portrait-one{width:58%;height:78%;left:0;top:0;transform:rotate(-3deg)}.portrait-two{width:52%;height:76%;right:0;bottom:0;transform:rotate(4deg)}.team-stamp{position:absolute;z-index:3;left:43%;top:39%;width:160px;height:160px;border-radius:50%;background:#E84329;color:#fff;display:grid;place-items:center;text-align:center;font-weight:800;transform:rotate(-8deg);box-shadow:0 18px 35px rgba(0,0,0,.22)}.work-with-us-banner{padding:95px 0;background:linear-gradient(120deg,#E84329,#dc2944);color:#fff}.work-with-us-banner .container{display:grid;grid-template-columns:1.3fr .7fr;gap:80px;align-items:end}.work-with-us-banner h2{font-size:clamp(2.3rem,4vw,4.5rem);line-height:1.02;color:#fff}.work-with-us-banner p{font-size:1.15rem;line-height:1.6}.btn-white{background:#fff;color:#E84329;margin-top:18px}.tag.light{color:#fff}.quote-stage{position:relative;overflow:hidden;padding:140px 0;background:#09152c;color:#fff;text-align:center}.quote-bg-word{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(7rem,20vw,22rem);font-weight:900;letter-spacing:-.08em;color:rgba(255,255,255,.025);white-space:nowrap}.quote-inner{position:relative}.quote-inner blockquote{font-size:clamp(2rem,4.8vw,5rem);line-height:1.15;max-width:1000px;margin:30px auto;font-weight:700;letter-spacing:-.035em}.quote-inner p{color:#EEEDED;font-weight:700}.light-link{color:#fff}.final-cta{padding:130px 0;background:#f5f3ef;text-align:center}.final-cta h2{font-size:clamp(3rem,6vw,6.8rem);line-height:.95;max-width:1100px;margin:22px auto 38px;letter-spacing:-.06em}.final-cta .hero-actions{justify-content:center}.btn-outline-dark{border:1px solid #12213a;color:#12213a;background:transparent}.enhanced-footer{padding-top:75px}.footer-topline{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:45px;margin-bottom:45px}.footer-topline img{width:190px}.footer-topline p{text-align:right;color:rgba(255,255,255,.68);line-height:1.6}.enhanced-footer .footer-grid{grid-template-columns:repeat(4,1fr)}.enhanced-footer .footer-bottom a{color:inherit}
.modal{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;visibility:hidden;opacity:0;transition:.3s}.modal.open{visibility:visible;opacity:1}.modal-backdrop{position:absolute;inset:0;background:rgba(3,9,20,.72);backdrop-filter:blur(8px)}.modal-card{position:relative;width:min(590px,90vw);background:#fff;border-radius:28px;padding:48px;box-shadow:0 40px 100px rgba(0,0,0,.35);transform:translateY(25px) scale(.97);transition:.35s}.modal.open .modal-card{transform:none}.modal-card h2{font-size:2.7rem;line-height:1}.modal-card p{line-height:1.75;color:#626b77}.modal-close{position:absolute;right:20px;top:14px;border:0;background:none;font-size:2rem;cursor:pointer}.reveal-section{opacity:0;transform:translateY(35px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}.reveal-section.in-view{opacity:1;transform:none}
@keyframes streakMove{to{transform:translateX(-180px)}}@keyframes cityMove{to{transform:translateX(-10%)}}@keyframes trainFloat{50%{transform:translateY(-8px)}}@keyframes scrollPulse{0%,100%{opacity:.25;transform:scaleY(.5);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}@keyframes marquee{to{transform:translateX(-50%)}}
@media(max-width:980px){.bullet-train{opacity:.48;width:90vw;right:-40%;bottom:21%}.hero-vignette{background:linear-gradient(90deg,rgba(4,10,23,.9),rgba(4,10,23,.48))}.split-intro{grid-template-columns:40px 1fr}.split-intro>div:last-child{grid-column:2}.universe-grid{grid-template-columns:1fr}.universe-card{min-height:430px}.process-line{grid-template-columns:repeat(2,1fr);gap:45px}.process-line:before{display:none}.team-preview-grid,.work-with-us-banner .container{grid-template-columns:1fr}.team-collage{height:550px}.enhanced-footer .footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.cursor-glow{display:none}.speed-hero{min-height:760px}.speed-content h1{font-size:3.35rem}.hero-proof{gap:18px;flex-direction:column;margin-top:38px}.hero-proof div{display:block}.hero-proof span{margin-left:8px}.soundless-trigger{width:100%;text-align:left}.split-intro{grid-template-columns:1fr;gap:20px}.split-intro>div:last-child{grid-column:auto}.intro-number{display:none}.agency-intro,.service-universe,.showcase-section,.process-section,.team-preview,.final-cta{padding:85px 0}.process-line{grid-template-columns:1fr}.team-collage{height:430px}.team-stamp{width:125px;height:125px;font-size:.83rem}.work-with-us-banner{padding:70px 0}.gallery-tile,.gallery-tile.tall{height:430px}.quote-stage{padding:100px 0}.footer-topline{display:block}.footer-topline p{text-align:left;margin-top:25px}.enhanced-footer .footer-grid{grid-template-columns:1fr 1fr}.social-dock{display:none}}
@media(prefers-reduced-motion:reduce){.streaks,.city,.bullet-train,.marquee-track,.scroll-cue span{animation:none!important}.reveal-section{opacity:1;transform:none}.cursor-glow{display:none}}


/* =========================================================
   Aerion V22 — unified motion system, centered rhythm, compact UI
   ========================================================= */
:root{--page-accent:#E84329;--page-accent-2:#7EA6C4;--page-ink:#0b1730;--content-width:1080px;--narrow-width:760px}
body.theme-orange{--page-accent:#E84329;--page-accent-2:#0F395C}
body.theme-rose{--page-accent:#e63a62;--page-accent-2:#E98AA0}
body.theme-cyan{--page-accent:#00a9c6;--page-accent-2:#66e0ef}
body.theme-violet{--page-accent:#7656e8;--page-accent-2:#bd9cff}
body.theme-gold{--page-accent:#c88a18;--page-accent-2:#EEEDED}
body.theme-teal{--page-accent:#138f85;--page-accent-2:#74d8cf}
body.theme-coral{--page-accent:#E84329;--page-accent-2:#EEEDED}
body.theme-blue{--page-accent:#2467d8;--page-accent-2:#72b1ff}
body.theme-slate{--page-accent:#52647a;--page-accent-2:#9eafc2}

body{overflow-x:hidden}.container{max-width:var(--content-width);padding-left:28px;padding-right:28px}
.site-header .container{padding-top:9px;padding-bottom:9px}.brand img{height:30px}.main-nav ul{gap:18px}.main-nav a{font-size:12.5px}.main-nav .btn,.nav-contact{padding:8px 15px!important;font-size:12px}
.site-header{background:rgba(9,21,44,.92);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}

/* Dock adapts to every page theme */
.social-dock{background:var(--page-accent);box-shadow:0 14px 36px color-mix(in srgb,var(--page-accent) 34%,transparent);transition:background .45s ease}
.social-dock a{background:rgba(8,20,43,.16)}.social-dock a:hover{background:#fff;transform:translateX(4px) scale(1.07)}
.social-dock a:hover svg{filter:brightness(0) saturate(100%)}

/* Animated ambient layer on every inner page */
.ambient-motion{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
.ambient-bubble{position:absolute;border-radius:50%;border:1px solid color-mix(in srgb,var(--page-accent) 27%,transparent);background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--page-accent-2) 22%,transparent),transparent 68%);filter:blur(.1px);animation:ambientFloat var(--dur,18s) ease-in-out infinite alternate}
.ambient-spark{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--page-accent);box-shadow:0 0 14px var(--page-accent);animation:sparkBlink var(--dur,3.2s) ease-in-out infinite}
@keyframes ambientFloat{to{transform:translate3d(var(--dx,80px),var(--dy,-100px),0) scale(1.16)}}
@keyframes sparkBlink{0%,100%{opacity:.12;transform:scale(.6)}50%{opacity:.9;transform:scale(1.5)}}

/* Inner-page hero: compact, alive, not oversized */
.page-hero{position:relative;isolation:isolate;overflow:hidden;padding:72px 0 64px;background:linear-gradient(135deg,#0a1730 0%,color-mix(in srgb,var(--page-accent) 34%,#0a1730) 100%)}
.page-hero:before,.page-hero:after{content:"";position:absolute;border-radius:50%;z-index:-1;filter:blur(2px)}
.page-hero:before{width:330px;height:330px;left:-90px;top:-190px;background:radial-gradient(circle,color-mix(in srgb,var(--page-accent-2) 55%,transparent),transparent 68%);animation:heroOrb 9s ease-in-out infinite alternate}
.page-hero:after{width:260px;height:260px;right:-70px;bottom:-170px;border:1px solid rgba(255,255,255,.2);box-shadow:0 0 0 35px rgba(255,255,255,.035),0 0 0 72px rgba(255,255,255,.02);animation:ringDrift 12s linear infinite}
.page-hero .container{max-width:var(--narrow-width)}.page-hero h1{font-size:clamp(2.15rem,4.4vw,3.7rem);line-height:1.02;letter-spacing:-.045em}.page-hero p{font-size:clamp(.98rem,1.7vw,1.15rem);max-width:640px;margin-inline:auto}
@keyframes heroOrb{to{transform:translate(95px,48px) scale(1.18)}}@keyframes ringDrift{to{transform:rotate(360deg) translateX(24px)}}

/* Consistent centered content rhythm */
section>.container{position:relative}.section-head,.section-head.left{text-align:center;max-width:720px;margin:0 auto 42px}.section-head h2{font-size:clamp(1.85rem,3.2vw,3rem);line-height:1.08;letter-spacing:-.035em}.section-head p{max-width:650px;margin-inline:auto}
.inner-v22 section:not(.page-hero) .container>h2,.inner-v22 section:not(.page-hero) .container>h3{text-align:center}
.inner-v22 .two-col,.inner-v22 .split,.inner-v22 .contact-grid,.inner-v22 .team-grid,.inner-v22 .info-grid{align-items:center}
.inner-v22 .card,.inner-v22 article,.inner-v22 .panel-card{text-align:center}
.panel-grid,.service-grid,.card-grid,.clean-grid,.social-showcase-grid,.values-grid,.feature-grid{justify-content:center}

/* Smaller, more consistent boxes */
.panel-card,.service-card,.info-card,.value-card,.social-showcase-card{border-radius:20px;padding:30px;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.panel-card:hover,.service-card:hover,.info-card:hover,.value-card:hover,.social-showcase-card:hover{transform:translateY(-8px) scale(1.012);box-shadow:0 24px 55px rgba(12,27,54,.14)}

/* Modern homepage motion — no train */
.modern-motion-hero{min-height:780px;background:radial-gradient(circle at 50% 25%,#213b69 0%,#0a1832 44%,#050b17 100%)}
.motion-mesh{position:absolute;inset:0;overflow:hidden;z-index:0}.mesh-orb{position:absolute;border-radius:50%;filter:blur(1px);mix-blend-mode:screen}.orb-a{width:42vw;height:42vw;left:-10vw;top:-15vw;background:radial-gradient(circle at 36% 36%,rgba(255,136,61,.9),rgba(255,83,29,.22) 40%,transparent 70%);animation:meshA 11s ease-in-out infinite alternate}.orb-b{width:38vw;height:38vw;right:-8vw;top:3vw;background:radial-gradient(circle at 40% 35%,rgba(64,164,255,.72),rgba(76,63,217,.2) 48%,transparent 72%);animation:meshB 14s ease-in-out infinite alternate}.orb-c{width:32vw;height:32vw;left:38%;bottom:-18vw;background:radial-gradient(circle,rgba(255,44,104,.46),transparent 68%);animation:meshC 9s ease-in-out infinite alternate}.motion-ring{position:absolute;border:1px solid rgba(255,255,255,.16);border-radius:50%;animation:ringSpin 25s linear infinite}.ring-a{width:520px;height:520px;right:10%;top:9%}.ring-b{width:290px;height:290px;left:9%;bottom:8%;animation-direction:reverse}.motion-line{position:absolute;height:1px;width:52vw;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:rotate(-18deg);animation:lineSweep 6s ease-in-out infinite}.line-a{top:25%;left:-30%;}.line-b{top:52%;left:22%;animation-delay:-2s}.line-c{top:72%;left:-10%;animation-delay:-4s}.pixel-field{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent);animation:gridDrift 18s linear infinite}
@keyframes meshA{to{transform:translate(19vw,12vh) scale(1.14)}}@keyframes meshB{to{transform:translate(-15vw,20vh) scale(.9)}}@keyframes meshC{to{transform:translate(-10vw,-18vh) scale(1.2)}}@keyframes ringSpin{to{transform:rotate(360deg)}}@keyframes lineSweep{0%,100%{transform:translateX(-12vw) rotate(-18deg);opacity:.1}50%{transform:translateX(40vw) rotate(-18deg);opacity:.72}}@keyframes gridDrift{to{background-position:68px 34px}}
.modern-motion-hero .speed-content{position:relative;z-index:3;text-align:center;max-width:900px}.modern-motion-hero .speed-content h1{font-size:clamp(3rem,7vw,6.7rem);max-width:980px;margin-inline:auto}.modern-motion-hero .speed-content p{margin-inline:auto}.modern-motion-hero .hero-actions,.modern-motion-hero .hero-proof{justify-content:center}.modern-motion-hero .hero-proof{text-align:left}

/* Never crop source photography */
.inner-v22 img,.home-v22 .portrait img{object-fit:contain!important}.masonry-grid img,.clean-tile img,.row-tile img,.social-showcase-card img,.team-photo{height:auto!important;width:100%!important;object-fit:contain!important}.clean-tile,.row-tile{height:auto!important;min-height:0!important;background:transparent}.portrait{background:transparent}.team-photo{max-height:620px}

/* 3D orbit for poster collection */
.poster-orbit{position:relative;height:560px;max-width:920px;margin:0 auto 66px;perspective:1400px;overflow:visible}.poster-orbit .cf-img{display:block!important;position:absolute!important;left:50%;top:50%;width:min(300px,34vw)!important;height:auto!important;max-height:460px;object-fit:contain!important;opacity:1!important;border-radius:18px;box-shadow:0 22px 55px rgba(0,0,0,.38);transition:transform .85s cubic-bezier(.2,.8,.2,1),opacity .6s,filter .6s;transform-origin:center center}.poster-orbit .cf-arrow,.poster-orbit .cf-dots,.poster-orbit .cf-cap{display:none!important}.poster-orbit:before{content:"";position:absolute;left:50%;top:53%;width:78%;height:120px;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.16);border-radius:50%;box-shadow:0 0 60px rgba(127,92,255,.25)}
.orbit-controls{display:flex;justify-content:center;gap:12px;margin-top:-30px;margin-bottom:48px}.orbit-controls button{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;font-size:24px;cursor:pointer;transition:.25s}.orbit-controls button:hover{background:var(--page-accent);transform:scale(1.08)}
@keyframes posterPop{0%,100%{filter:brightness(.78);transform:var(--orbit-transform) scale(.92)}50%{filter:brightness(1.1);transform:var(--orbit-transform) scale(1.035)}}
.poster-orbit .cf-img.is-front{animation:posterPop 2.8s ease-in-out infinite}

/* Reveal variety and blinking accents */
.reveal,.reveal-section{will-change:transform,opacity}.reveal.in-view:nth-child(3n+1),.reveal-section.in-view:nth-child(3n+1){animation:softArrive .85s cubic-bezier(.2,.8,.2,1) both}.reveal.in-view:nth-child(3n+2),.reveal-section.in-view:nth-child(3n+2){animation:softArriveSide .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes softArrive{from{opacity:0;transform:translateY(32px) scale(.975)}to{opacity:1;transform:none}}@keyframes softArriveSide{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
.tag,.tag-outline{position:relative}.tag:after,.tag-outline:after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;right:-11px;top:50%;background:var(--page-accent-2);box-shadow:0 0 12px var(--page-accent-2);animation:sparkBlink 2.4s infinite}

@media(max-width:900px){.site-header .container{padding-top:10px;padding-bottom:10px}.brand img{height:28px}.poster-orbit{height:450px}.poster-orbit .cf-img{width:min(250px,45vw)!important}.modern-motion-hero{min-height:720px}.modern-motion-hero .hero-proof{flex-wrap:wrap}}
@media(max-width:680px){.page-hero{padding:58px 0 50px}.container{padding-left:20px;padding-right:20px}.poster-orbit{height:390px;overflow:hidden}.poster-orbit .cf-img{width:210px!important}.modern-motion-hero .speed-content h1{font-size:3.25rem}.modern-motion-hero .hero-proof{text-align:center}.main-nav a{font-size:14px}.social-dock{display:none}}
@media(prefers-reduced-motion:reduce){.ambient-bubble,.ambient-spark,.mesh-orb,.motion-ring,.motion-line,.pixel-field,.poster-orbit .cf-img.is-front{animation:none!important}}


/* =========================================================
   AERION V23 — POLISH, TRUST, EDITABILITY & DNA MOVEMENT
   Brand palette: red #E84329, blue #0F395C, white #EEEDED
   ========================================================= */
:root{
  --navy:#0F395C;--navy-dark:#082844;--orange:#E84329;--orange-dark:#c93520;
  --offwhite:#EEEDED;--white:#fff;--page-accent:#E84329;--page-accent-2:#62d8ff;
}

/* More colourful ambient motion, while keeping content calm */
.ambient-motion{opacity:.88}
.ambient-bubble:nth-of-type(5n+1){--bubble-col:#E84329;--bubble-col2:#ff8b73}
.ambient-bubble:nth-of-type(5n+2){--bubble-col:#0F395C;--bubble-col2:#59cfff}
.ambient-bubble:nth-of-type(5n+3){--bubble-col:#f04fa3;--bubble-col2:#ff9fd1}
.ambient-bubble:nth-of-type(5n+4){--bubble-col:#7f5cff;--bubble-col2:#c3b2ff}
.ambient-bubble:nth-of-type(5n+5){--bubble-col:#20c9a6;--bubble-col2:#90ffe8}
.ambient-bubble{border-color:color-mix(in srgb,var(--bubble-col,var(--page-accent)) 30%,transparent);background:radial-gradient(circle at 28% 24%,color-mix(in srgb,var(--bubble-col2,var(--page-accent-2)) 30%,transparent),color-mix(in srgb,var(--bubble-col,var(--page-accent)) 7%,transparent) 48%,transparent 72%);box-shadow:inset -18px -20px 40px rgba(255,255,255,.04),0 0 36px color-mix(in srgb,var(--bubble-col,var(--page-accent)) 10%,transparent)}
.ambient-spark:nth-child(4n+1){background:#ff6cac}.ambient-spark:nth-child(4n+2){background:#58d7ff}.ambient-spark:nth-child(4n+3){background:#ff8a65}.ambient-spark:nth-child(4n+4){background:#8e7dff}

/* Round contact WhatsApp action */
.contact-wa-action{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:22px;text-align:left}
.contact-wa-round{width:72px;height:72px;min-width:72px;border:0;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#E84329,#c93420);box-shadow:0 14px 34px rgba(232,67,41,.3);cursor:pointer;transition:transform .3s ease,box-shadow .3s ease}
.contact-wa-round:hover{transform:translateY(-5px) rotate(-5deg) scale(1.04);box-shadow:0 22px 46px rgba(232,67,41,.38)}
.contact-wa-round svg{width:31px;height:31px}.contact-wa-action strong{display:block;color:#0F395C;font-size:1rem}.contact-wa-action span{display:block;color:var(--muted);font-size:.86rem}
.contact-card{text-align:center;border-radius:20px;border:1px solid rgba(15,57,92,.08);box-shadow:0 12px 30px rgba(15,57,92,.06)}

/* Flexible project stories: deliberately modular for future case studies */
.project-spotlights{position:relative;overflow:hidden}
.spotlight-grid{display:grid;gap:28px;max-width:1000px;margin:0 auto}
.spotlight-card{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;background:#fff;border-radius:26px;overflow:hidden;box-shadow:0 22px 70px rgba(15,57,92,.1);border:1px solid rgba(15,57,92,.07);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.spotlight-card:hover{transform:translateY(-8px);box-shadow:0 32px 90px rgba(15,57,92,.16)}
.spotlight-card.reverse .spotlight-media{order:2}.spotlight-card.reverse .spotlight-copy{order:1}
.spotlight-media{height:100%;min-height:330px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#f4f4f2,#e7e7e4);padding:20px;overflow:hidden}
.spotlight-media img{width:100%;height:100%;max-height:440px;object-fit:contain;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.spotlight-card:hover .spotlight-media img{transform:scale(1.035) rotate(.5deg)}
.spotlight-copy{padding:44px;text-align:center}.spotlight-copy>span{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;font-weight:800;color:#E84329}.spotlight-copy h3{font-size:clamp(1.45rem,2.4vw,2.2rem);line-height:1.15;color:#0F395C;margin:10px 0 14px}.spotlight-copy p{color:var(--muted);max-width:470px;margin:0 auto 18px}

/* Honest, editable reviews */
.reviews-stage,.contact-trust{position:relative;overflow:hidden}.review-orb{position:absolute;border-radius:50%;filter:blur(4px);opacity:.22;animation:reviewDrift 12s ease-in-out infinite alternate}.review-orb-a{width:320px;height:320px;background:#E84329;left:-90px;top:-120px}.review-orb-b{width:280px;height:280px;background:#7767ff;right:-80px;bottom:-130px;animation-delay:-6s}@keyframes reviewDrift{to{transform:translate(55px,40px) scale(1.16)}}
.review-track{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;max-width:960px;margin:0 auto}.review-track.compact{max-width:760px}
.review-card{position:relative;padding:32px 28px;border-radius:22px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(14px);text-align:center;transition:transform .35s,background .35s}.review-card:hover{transform:translateY(-7px) rotate(.4deg);background:rgba(255,255,255,.13)}.review-card:before{content:'“';display:block;font:700 58px/1 Georgia,serif;color:#E84329;height:42px}.review-card blockquote{margin:6px 0 18px;color:#fff;font-size:1rem}.review-card strong{display:block;color:#fff}.review-card small{display:block;color:rgba(255,255,255,.65);margin-top:5px}.review-card.is-placeholder{border-style:dashed}.review-card.is-placeholder:after{content:'EDITABLE';position:absolute;top:13px;right:14px;font-size:.56rem;letter-spacing:.12em;color:rgba(255,255,255,.5)}
.review-actions{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:30px}.review-actions span{color:rgba(255,255,255,.62);font-size:.82rem}

/* DNA double-helix poster movement */
.poster-orbit{height:650px;max-width:1040px;perspective:1600px;isolation:isolate}
.poster-orbit:before,.poster-orbit:after{content:"";position:absolute;left:50%;top:50%;width:72%;height:78%;border:1px solid rgba(255,255,255,.12);border-radius:50%;transform:translate(-50%,-50%) rotate(70deg);box-shadow:0 0 75px rgba(103,88,255,.18);pointer-events:none}.poster-orbit:after{transform:translate(-50%,-50%) rotate(-70deg);border-color:rgba(232,67,41,.18)}
.poster-orbit .cf-img{width:min(270px,29vw)!important;max-height:470px;transition:transform 1.05s cubic-bezier(.16,.82,.2,1),opacity .7s,filter .7s;will-change:transform,opacity;backface-visibility:hidden}
.poster-orbit .cf-img.is-front{animation:dnaPulse 2.7s ease-in-out infinite}
@keyframes dnaPulse{0%,100%{filter:brightness(.94) saturate(1);box-shadow:0 22px 55px rgba(0,0,0,.38)}50%{filter:brightness(1.12) saturate(1.1);box-shadow:0 30px 80px rgba(232,67,41,.28)}}
.orbit-controls button{background:#E84329!important}.orbit-controls button:hover{background:#0F395C!important}

/* Keep image display honest: never crop */
.spotlight-media img,.clean-tile img,.bento-item img,.row-tile img,.team-photo,.gallery-tile img{object-fit:contain!important}

@media(max-width:780px){
 .spotlight-card,.spotlight-card.reverse{grid-template-columns:1fr}.spotlight-card.reverse .spotlight-media,.spotlight-card.reverse .spotlight-copy{order:initial}.spotlight-media{min-height:260px}.spotlight-copy{padding:30px 24px}
 .contact-wa-action{flex-direction:column;text-align:center}
 /* Mobile portfolio becomes a clean grid for speed, clarity and touch use */
 .poster-orbit{height:auto!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;perspective:none;margin-bottom:28px;overflow:visible!important}
 .poster-orbit:before,.poster-orbit:after{display:none}
 .poster-orbit .cf-img{position:relative!important;inset:auto!important;left:auto!important;top:auto!important;width:100%!important;max-height:none!important;height:auto!important;opacity:1!important;transform:none!important;animation:none!important;border-radius:14px;box-shadow:0 12px 28px rgba(15,57,92,.15);pointer-events:auto!important}
 .orbit-controls{display:none!important}
}
@media(max-width:480px){.poster-orbit{grid-template-columns:1fr}.review-track{grid-template-columns:1fr}.contact-wa-round{width:66px;height:66px;min-width:66px}}

/* === V24 launch polish === */
:root{--brand-red:#E84329;--brand-blue:#0F395C;--brand-white:#EEEDED}
/* Contact button must remain visible on every page and active state */
.main-nav a.btn-primary,.main-nav a.btn-primary.active,.main-nav a.nav-contact,.main-nav a.nav-contact.active{background:var(--brand-red)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important;border-bottom-color:rgba(255,255,255,.18)!important;box-shadow:0 8px 24px rgba(232,67,41,.22)}
.main-nav a.btn-primary:hover,.main-nav a.nav-contact:hover{background:#fff!important;color:var(--brand-blue)!important;border-color:#fff!important;transform:translateY(-2px)}
/* smaller, cleaner animated backdrops */
.page-hero{padding:60px 0 54px;background:linear-gradient(135deg,#09172c 0%,color-mix(in srgb,var(--page-accent) 27%,#09172c) 100%)}
.page-hero:before{width:220px;height:220px;left:-70px;top:-120px;animation:heroSwipeSpin 11s ease-in-out infinite alternate}
.page-hero:after{width:180px;height:180px;right:-45px;bottom:-110px;box-shadow:0 0 0 24px rgba(255,255,255,.035),0 0 0 48px rgba(255,255,255,.018);animation:ringSwipeSpin 15s linear infinite}
@keyframes heroSwipeSpin{to{transform:translate(120px,32px) rotate(190deg) scale(1.12)}}
@keyframes ringSwipeSpin{to{transform:translateX(-90px) rotate(360deg) scale(.9)}}
.ambient-bubble{opacity:.62;animation-name:ambientSwipeSpin;animation-timing-function:cubic-bezier(.45,.05,.25,1)}
@keyframes ambientSwipeSpin{0%{transform:translate3d(0,0,0) rotate(0) scale(.84)}50%{transform:translate3d(calc(var(--dx,80px)*.58),calc(var(--dy,-100px)*.35),0) rotate(145deg) scale(1.08)}100%{transform:translate3d(var(--dx,80px),var(--dy,-100px),0) rotate(300deg) scale(.93)}}
.ambient-bubble-small{opacity:.5}
/* premium infographic/process motion */
.process-line{gap:22px;perspective:1000px}
.process-line:before{background:linear-gradient(90deg,transparent,var(--brand-red),#8e72ff,#35c8ce,var(--brand-blue),transparent);height:2px;background-size:220% 100%;animation:processCurrent 4.5s linear infinite}
@keyframes processCurrent{to{background-position:-220% 0}}
.process-step{padding:22px 16px 26px;border-radius:22px;background:rgba(255,255,255,.72);border:1px solid rgba(15,57,92,.08);box-shadow:0 18px 42px rgba(15,57,92,.07);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.process-step:nth-child(even){animation:cardFloat 5.2s ease-in-out infinite alternate}.process-step:nth-child(odd){animation:cardFloat 6.1s ease-in-out infinite alternate-reverse}
.process-step:hover{animation-play-state:paused;transform:translateY(-12px) rotateX(4deg) rotateY(-3deg);box-shadow:0 28px 64px rgba(15,57,92,.16)}
.process-step span{margin-inline:auto;background:linear-gradient(145deg,#fff,var(--brand-white));box-shadow:0 0 0 0 rgba(232,67,41,.25);animation:stepPulse 2.8s ease-out infinite}
.process-step:nth-child(2) span{animation-delay:.5s}.process-step:nth-child(3) span{animation-delay:1s}.process-step:nth-child(4) span{animation-delay:1.5s}
@keyframes stepPulse{0%{box-shadow:0 0 0 0 rgba(232,67,41,.28);transform:rotate(0)}60%{box-shadow:0 0 0 15px rgba(232,67,41,0)}100%{box-shadow:0 0 0 0 rgba(232,67,41,0);transform:rotate(360deg)}}
@keyframes cardFloat{to{transform:translateY(-8px)}}
/* page transition */
.page-wipe{position:fixed;inset:0;z-index:10000;background:linear-gradient(120deg,var(--brand-blue),#6e59d9,var(--brand-red));transform:translateX(-105%);pointer-events:none}
.page-wipe.is-leaving{animation:wipeIn .48s cubic-bezier(.7,0,.2,1) forwards}.page-wipe.is-arriving{animation:wipeOut .55s cubic-bezier(.7,0,.2,1) forwards}
@keyframes wipeIn{to{transform:translateX(0)}}@keyframes wipeOut{from{transform:translateX(0)}to{transform:translateX(105%)}}
/* legal usability */
.legal-summary{margin:26px 0 44px;padding:28px;border-radius:22px;background:linear-gradient(135deg,rgba(232,67,41,.07),rgba(15,57,92,.07));border:1px solid rgba(15,57,92,.1)}
.legal-summary h2{text-align:left!important;margin:10px 0}.legal-toc{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.legal-toc a{padding:9px 13px;border-radius:999px;background:#fff;color:var(--brand-blue);font-weight:700;font-size:.82rem}
/* Blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.blog-card{overflow:hidden;border-radius:22px;background:#fff;box-shadow:0 16px 46px rgba(15,57,92,.09);transition:.4s}.blog-card:hover{transform:translateY(-9px) rotate(.35deg);box-shadow:0 26px 60px rgba(15,57,92,.16)}.blog-card img{width:100%;height:230px!important;object-fit:contain!important;background:#f2f2f2}.blog-card-copy{padding:24px}.blog-card-copy h3{margin:8px 0 10px}.blog-meta{font-size:.78rem;color:var(--muted)}.draft-badge{display:inline-block;padding:5px 9px;border-radius:999px;background:#fff1ed;color:var(--brand-red);font-size:.72rem;font-weight:800}
.article-hero{padding:110px 0 78px;color:#fff;background:radial-gradient(circle at 20% 10%,rgba(232,67,41,.6),transparent 35%),linear-gradient(135deg,#08162b,var(--brand-blue))}.article-hero .container{max-width:860px}.article-hero h1{font-size:clamp(2.5rem,6vw,5.5rem);line-height:1;letter-spacing:-.05em}.article-lead{font-size:1.22rem;max-width:720px}.article-meta{opacity:.72}.article-layout{max-width:900px;padding-top:70px;padding-bottom:100px}.article-body{font-size:1.08rem;line-height:1.85}.article-body h2{margin-top:48px}.article-cover{width:100%;height:auto!important;object-fit:contain!important;border-radius:24px;margin-bottom:42px}.article-callout{padding:26px;border-left:4px solid var(--brand-red);background:#f7f5f2;border-radius:0 18px 18px 0;margin:34px 0}
/* Admin export studio */
.admin-body{background:#f4f2ef;color:var(--brand-blue)}.admin-shell{max-width:1220px;margin:auto;padding:48px 28px 90px}.admin-head{display:flex;gap:30px;align-items:center;margin-bottom:30px}.admin-head img{width:190px}.admin-head h1{font-size:clamp(2.3rem,5vw,4.5rem);margin:7px 0}.admin-note{padding:20px 24px;border-radius:16px;background:#fff3d8;border:1px solid #f1d48a;margin-bottom:26px}.admin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.admin-panel{background:#fff;padding:22px;border-radius:20px;box-shadow:0 16px 44px rgba(15,57,92,.08)}.admin-panel textarea{width:100%;padding:14px;border:1px solid #d7dce2;border-radius:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem}.admin-actions{display:flex;gap:12px;margin-top:26px}.btn-secondary{background:var(--brand-blue);color:#fff}
@media(max-width:900px){.blog-grid,.admin-grid{grid-template-columns:1fr 1fr}.process-line:before{display:none}}
@media(max-width:680px){.page-hero{padding:50px 0 45px}.process-line{gap:16px}.process-step{animation:none!important}.blog-grid,.admin-grid{grid-template-columns:1fr}.admin-head{display:block}.admin-head img{width:150px;margin-bottom:22px}.article-hero{padding:84px 0 60px}.article-hero h1{font-size:2.8rem}.page-wipe{display:none}}

/* ===== V25 portfolio motion refinement ===== */
.compact-motion-grid{position:relative;isolation:isolate;align-items:center;justify-items:center}
.photography-motion-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:980px;margin:0 auto}
.photography-motion-grid .clean-tile{width:100%;max-width:290px;border-radius:20px;background:rgba(255,255,255,.74)!important;padding:10px!important;box-shadow:0 14px 34px rgba(15,57,92,.10);overflow:visible!important;animation:portfolioFloat 7s ease-in-out infinite;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,filter .4s}
.photography-motion-grid .clean-tile:nth-child(2n){animation-delay:-2.2s}.photography-motion-grid .clean-tile:nth-child(3n){animation-delay:-4.1s}
.photography-motion-grid .clean-tile:hover{transform:translateY(-12px) rotate(1.2deg) scale(1.045)!important;box-shadow:0 26px 60px rgba(15,57,92,.18);z-index:4;filter:saturate(1.05)}
.photography-motion-grid .clean-tile:active{transform:scale(.97)!important}
.photography-motion-grid img{border-radius:14px}
.branding-motion-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;max-width:1040px;margin:0 auto;overflow:visible!important}
.branding-motion-grid .row-tile{width:100%;max-width:230px;border-radius:18px;background:#fff!important;padding:10px!important;box-shadow:0 16px 38px rgba(15,57,92,.11);animation:portfolioSway 8s ease-in-out infinite;transition:transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .42s}
.branding-motion-grid .row-tile:nth-child(2){animation-delay:-2s}.branding-motion-grid .row-tile:nth-child(3){animation-delay:-4s}.branding-motion-grid .row-tile:nth-child(4){animation-delay:-6s}
.branding-motion-grid .row-tile:hover{transform:translateY(-14px) rotateY(8deg) rotateZ(-1deg) scale(1.055)!important;box-shadow:0 28px 64px rgba(15,57,92,.2);z-index:5}
.branding-motion-grid .bento-cap,.backdrop-motion-grid .bento-cap{position:static!important;display:block;background:transparent!important;color:var(--brand-blue)!important;padding:10px 4px 2px!important;font-size:.76rem;text-align:center}
.backdrop-motion-grid{display:flex!important;justify-content:center;gap:34px;overflow:visible!important;max-width:820px;margin-left:auto!important;margin-right:auto!important;perspective:1200px}
.backdrop-motion-grid .row-tile{flex:0 1 320px;max-width:320px;border-radius:22px;background:rgba(255,255,255,.09)!important;padding:12px!important;border:1px solid rgba(255,255,255,.18);box-shadow:0 22px 54px rgba(0,0,0,.22);animation:backdropSpin 9s ease-in-out infinite;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,background .45s}
.backdrop-motion-grid .row-tile:nth-child(2){animation-delay:-4.5s}
.backdrop-motion-grid .row-tile:hover{animation-play-state:paused;transform:translateY(-16px) rotateY(11deg) rotateX(-4deg) scale(1.055)!important;box-shadow:0 34px 78px rgba(0,0,0,.35);background:rgba(255,255,255,.15)!important;z-index:5}
.backdrop-motion-grid .bento-cap{color:#fff!important}
.compact-motion-grid button{cursor:pointer}
@keyframes portfolioFloat{0%,100%{transform:translateY(0) rotate(-.35deg)}50%{transform:translateY(-10px) rotate(.65deg)}}
@keyframes portfolioSway{0%,100%{transform:translateY(0) rotateZ(-.5deg)}33%{transform:translateY(-9px) rotateZ(.65deg)}66%{transform:translateY(-4px) rotateZ(-.15deg)}}
@keyframes backdropSpin{0%,100%{transform:translateY(0) rotateY(-5deg) rotateZ(-.35deg)}50%{transform:translateY(-13px) rotateY(7deg) rotateZ(.5deg)}}

/* Remove page colour wipe completely; keep navigation immediate and clean */
.page-wipe{display:none!important}

@media(max-width:900px){
  .photography-motion-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:680px}
  .branding-motion-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px}
  .backdrop-motion-grid{gap:20px;max-width:700px}
}
@media(max-width:680px){
  .photography-motion-grid,.branding-motion-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .photography-motion-grid .clean-tile,.branding-motion-grid .row-tile{max-width:none;padding:7px!important;animation-duration:9s}
  .backdrop-motion-grid{display:grid!important;grid-template-columns:1fr 1fr;gap:12px;width:100%;perspective:none}
  .backdrop-motion-grid .row-tile{width:100%;max-width:none;animation:portfolioFloat 9s ease-in-out infinite}
  .compact-motion-grid .bento-cap{font-size:.68rem}
}
@media(prefers-reduced-motion:reduce){.photography-motion-grid .clean-tile,.branding-motion-grid .row-tile,.backdrop-motion-grid .row-tile{animation:none!important}}

/* ===== V27 controlled portfolio-motion upgrade =====
   Keeps the V26 design intact and adds depth only to portfolio image groups. */
body.portfolio-page .photography-motion-grid,
body.portfolio-page .branding-motion-grid,
body.portfolio-page .backdrop-motion-grid{
  --spine-blue: rgba(15,57,92,.24);
  position:relative;
  perspective:1200px;
  transform-style:preserve-3d;
  overflow:visible!important;
}
body.portfolio-page .photography-motion-grid::before,
body.portfolio-page .branding-motion-grid::before,
body.portfolio-page .backdrop-motion-grid::before{
  content:"";
  position:absolute;
  left:50%;
  top:4%;
  bottom:4%;
  width:2px;
  border-radius:999px;
  background:linear-gradient(180deg,transparent,var(--spine-blue),rgba(232,67,41,.22),var(--spine-blue),transparent);
  transform:translateX(-50%);
  opacity:.72;
  filter:blur(.15px);
  pointer-events:none;
  animation:portfolioSpinePulse 4.8s ease-in-out infinite;
}
body.portfolio-page .photography-motion-grid::after,
body.portfolio-page .branding-motion-grid::after,
body.portfolio-page .backdrop-motion-grid::after{
  content:"";
  position:absolute;
  inset:8% 13%;
  border:1px solid rgba(15,57,92,.08);
  border-radius:50%;
  transform:rotate(-8deg);
  pointer-events:none;
  animation:portfolioOrbitRing 13s linear infinite;
}
body.portfolio-page .photography-motion-grid .clean-tile,
body.portfolio-page .branding-motion-grid .row-tile,
body.portfolio-page .backdrop-motion-grid .row-tile{
  animation:none!important;
  will-change:transform,filter;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  transition:box-shadow .35s ease,filter .35s ease,background .35s ease!important;
}
body.portfolio-page .photography-motion-grid .clean-tile:hover,
body.portfolio-page .branding-motion-grid .row-tile:hover,
body.portfolio-page .backdrop-motion-grid .row-tile:hover{
  box-shadow:0 30px 70px rgba(15,57,92,.22)!important;
  filter:saturate(1.08) contrast(1.02);
}
body.portfolio-page .photography-motion-grid img,
body.portfolio-page .branding-motion-grid img,
body.portfolio-page .backdrop-motion-grid img{
  transition:filter .35s ease,opacity .35s ease!important;
}
body.portfolio-page .portfolio-motion-active{
  z-index:8!important;
}
body.portfolio-page .portfolio-motion-active img{
  filter:saturate(1.08) brightness(1.03);
}
body.portfolio-page .portfolio-motion-clicked{
  animation:portfolioClickPop .42s cubic-bezier(.2,.9,.25,1)!important;
}
@keyframes portfolioSpinePulse{0%,100%{opacity:.3;transform:translateX(-50%) scaleY(.9)}50%{opacity:.85;transform:translateX(-50%) scaleY(1.04)}}
@keyframes portfolioOrbitRing{to{transform:rotate(352deg)}}
@keyframes portfolioClickPop{0%{filter:brightness(1)}45%{filter:brightness(1.16)}100%{filter:brightness(1)}}

/* Decorative/design grid receives a lighter floating wave, without changing layout. */
body.portfolio-page .design-motion-grid .clean-tile{
  will-change:transform;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease!important;
}
body.portfolio-page .design-motion-grid .clean-tile:nth-child(odd){animation:portfolioSoftWave 8.5s ease-in-out infinite}
body.portfolio-page .design-motion-grid .clean-tile:nth-child(even){animation:portfolioSoftWave 8.5s ease-in-out -4.25s infinite reverse}
body.portfolio-page .design-motion-grid .clean-tile:hover{animation-play-state:paused;transform:translateY(-12px) rotateY(6deg) scale(1.035)!important;box-shadow:0 28px 64px rgba(15,57,92,.18)}
@keyframes portfolioSoftWave{0%,100%{transform:translateY(0) rotateZ(-.25deg)}50%{transform:translateY(-9px) rotateZ(.4deg)}}

@media(max-width:780px){
  body.portfolio-page .photography-motion-grid::before,
  body.portfolio-page .branding-motion-grid::before,
  body.portfolio-page .backdrop-motion-grid::before,
  body.portfolio-page .photography-motion-grid::after,
  body.portfolio-page .branding-motion-grid::after,
  body.portfolio-page .backdrop-motion-grid::after{display:none}
  body.portfolio-page .photography-motion-grid .clean-tile,
  body.portfolio-page .branding-motion-grid .row-tile,
  body.portfolio-page .backdrop-motion-grid .row-tile{
    transform:none!important;
    animation:portfolioMobileFloat 7.5s ease-in-out infinite!important;
  }
  body.portfolio-page .photography-motion-grid .clean-tile:nth-child(even),
  body.portfolio-page .branding-motion-grid .row-tile:nth-child(even),
  body.portfolio-page .backdrop-motion-grid .row-tile:nth-child(even){animation-delay:-3.75s!important}
  body.portfolio-page .design-motion-grid .clean-tile{animation:portfolioMobileFloat 8s ease-in-out infinite!important}
  @keyframes portfolioMobileFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
}
@media(prefers-reduced-motion:reduce){
  body.portfolio-page .photography-motion-grid::before,
  body.portfolio-page .branding-motion-grid::before,
  body.portfolio-page .backdrop-motion-grid::before,
  body.portfolio-page .photography-motion-grid::after,
  body.portfolio-page .branding-motion-grid::after,
  body.portfolio-page .backdrop-motion-grid::after,
  body.portfolio-page .design-motion-grid .clean-tile{animation:none!important}
}

/* ===== V28 portfolio-wide motion polish ===== */
body.portfolio-page .flip-card-motion,
body.portfolio-page .poster-motion-shell,
body.portfolio-page .logo-motion-row,
body.portfolio-page .infographic-motion-grid,
body.portfolio-page .social-motion-grid{
  position:relative;
  isolation:isolate;
  perspective:1100px;
}
body.portfolio-page .flip-card-motion::before,
body.portfolio-page .poster-motion-shell::before,
body.portfolio-page .logo-motion-row::before,
body.portfolio-page .infographic-motion-grid::before,
body.portfolio-page .social-motion-grid::before{
  content:"";
  position:absolute;
  inset:8% 12%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(232,67,41,.10),transparent 62%);
  filter:blur(18px);
  z-index:-1;
  animation:portfolioHaloDrift 9s ease-in-out infinite alternate;
  pointer-events:none;
}
body.portfolio-page .flip-card-block{
  animation:portfolioCardOrbit 8.5s ease-in-out infinite;
  transform-style:preserve-3d;
}
body.portfolio-page .flip-card-block:nth-child(2){animation-delay:-4.25s;animation-direction:reverse}
body.portfolio-page .flip-card-block:hover{animation-play-state:paused}
body.portfolio-page .poster-motion-shell{
  animation:posterShellFloat 7.5s ease-in-out infinite;
  transform-style:preserve-3d;
}
body.portfolio-page .poster-motion-shell .crossfade-viewer{
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease;
  transform-style:preserve-3d;
  box-shadow:0 28px 72px rgba(0,0,0,.32);
}
body.portfolio-page .poster-motion-shell:hover{animation-play-state:paused}
body.portfolio-page .poster-motion-shell:hover .crossfade-viewer{box-shadow:0 38px 92px rgba(0,0,0,.42)}
body.portfolio-page .logo-motion-row .logo-swap-tile{
  animation:logoFloatSpin 9s ease-in-out infinite;
  transform-style:preserve-3d;
}
body.portfolio-page .logo-motion-row .logo-swap-tile:nth-child(2){animation-delay:-4.5s;animation-direction:reverse}
body.portfolio-page .logo-motion-row .logo-swap-tile:hover{animation-play-state:paused}
body.portfolio-page .infographic-motion-grid .clean-tile{
  animation:infoCardWave 8s ease-in-out infinite;
  transform-style:preserve-3d;
  transition:transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .38s ease,filter .38s ease;
}
body.portfolio-page .infographic-motion-grid .clean-tile:nth-child(2){animation-delay:-2s}
body.portfolio-page .infographic-motion-grid .clean-tile:nth-child(3){animation-delay:-4s}
body.portfolio-page .infographic-motion-grid .clean-tile:nth-child(4){animation-delay:-6s}
body.portfolio-page .infographic-motion-grid .clean-tile:hover{
  animation-play-state:paused;
  transform:translateY(-14px) rotateX(5deg) rotateY(-6deg) scale(1.035)!important;
  box-shadow:0 30px 76px rgba(0,0,0,.28);
  filter:brightness(1.05);
}
body.portfolio-page .social-motion-grid .social-showcase-card{
  animation:socialCardRibbon 9s ease-in-out infinite;
  transform-style:preserve-3d;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease;
}
body.portfolio-page .social-motion-grid .social-showcase-card:nth-child(2){animation-delay:-3s}
body.portfolio-page .social-motion-grid .social-showcase-card:nth-child(3){animation-delay:-6s}
body.portfolio-page .social-motion-grid .social-showcase-card:hover{
  animation-play-state:paused;
  transform:translateY(-13px) rotateY(5deg) scale(1.025)!important;
  box-shadow:0 28px 70px rgba(15,57,92,.2);
}
body.portfolio-page .section-head h2{animation:portfolioTitleBreathe 7s ease-in-out infinite}
@keyframes portfolioHaloDrift{0%{transform:translate3d(-2%,0,0) scale(.92);opacity:.35}100%{transform:translate3d(3%,-3%,0) scale(1.08);opacity:.7}}
@keyframes portfolioCardOrbit{0%,100%{transform:translateY(0) rotateY(-2deg) rotateZ(-.3deg)}50%{transform:translateY(-10px) rotateY(3deg) rotateZ(.4deg)}}
@keyframes posterShellFloat{0%,100%{transform:translateY(0) rotateZ(-.25deg)}50%{transform:translateY(-9px) rotateZ(.3deg)}}
@keyframes logoFloatSpin{0%,100%{transform:translateY(0) rotateY(-3deg) rotateZ(-.25deg)}50%{transform:translateY(-11px) rotateY(4deg) rotateZ(.35deg)}}
@keyframes infoCardWave{0%,100%{transform:translateY(0) rotateX(0) rotateY(-1.5deg)}50%{transform:translateY(-9px) rotateX(2deg) rotateY(2deg)}}
@keyframes socialCardRibbon{0%,100%{transform:translate3d(0,0,0) rotateY(-1.5deg)}50%{transform:translate3d(0,-10px,18px) rotateY(2.5deg)}}
@keyframes portfolioTitleBreathe{0%,100%{letter-spacing:0}50%{letter-spacing:.01em}}
@media(max-width:780px){
  body.portfolio-page .flip-card-block,
  body.portfolio-page .poster-motion-shell,
  body.portfolio-page .logo-motion-row .logo-swap-tile,
  body.portfolio-page .infographic-motion-grid .clean-tile,
  body.portfolio-page .social-motion-grid .social-showcase-card{
    animation:portfolioMobileFloat 8s ease-in-out infinite!important;
  }
  body.portfolio-page .flip-card-motion::before,
  body.portfolio-page .poster-motion-shell::before,
  body.portfolio-page .logo-motion-row::before,
  body.portfolio-page .infographic-motion-grid::before,
  body.portfolio-page .social-motion-grid::before{inset:12% 4%;filter:blur(28px)}
}
@media(prefers-reduced-motion:reduce){
  body.portfolio-page .flip-card-block,
  body.portfolio-page .poster-motion-shell,
  body.portfolio-page .logo-motion-row .logo-swap-tile,
  body.portfolio-page .infographic-motion-grid .clean-tile,
  body.portfolio-page .social-motion-grid .social-showcase-card,
  body.portfolio-page .section-head h2,
  body.portfolio-page .flip-card-motion::before,
  body.portfolio-page .poster-motion-shell::before,
  body.portfolio-page .logo-motion-row::before,
  body.portfolio-page .infographic-motion-grid::before,
  body.portfolio-page .social-motion-grid::before{animation:none!important}
}

/* V29 — Expanded campaign poster collection */
.campaign-poster-wall{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,2vw,28px);
  align-items:start;
  perspective:1400px;
}
.campaign-poster-wall .campaign-poster{
  aspect-ratio:4/5;
  min-height:0;
  transform-style:preserve-3d;
  animation:campaignPosterDrift calc(8s + (var(--poster-i) * .23s)) ease-in-out infinite alternate;
  animation-delay:calc(var(--poster-i) * -.58s);
  will-change:transform;
}
.campaign-poster-wall .campaign-poster:nth-child(3n+2){margin-top:34px}
.campaign-poster-wall .campaign-poster:nth-child(4n){margin-top:70px}
.campaign-poster-wall .campaign-poster img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .45s ease;
}
.campaign-poster-wall .campaign-poster:hover{
  z-index:8;
  animation-play-state:paused;
  transform:translateY(-18px) translateZ(60px) rotateX(2deg) rotateY(-3deg) scale(1.035);
}
.campaign-poster-wall .campaign-poster:hover img{transform:scale(1.035);filter:saturate(1.08) contrast(1.03)}
.campaign-wall-hint{margin-top:26px;margin-bottom:0}
@keyframes campaignPosterDrift{
  0%{transform:translate3d(-3px,8px,0) rotateX(-1deg) rotateY(1.4deg) rotateZ(-.45deg)}
  50%{transform:translate3d(5px,-7px,28px) rotateX(1.2deg) rotateY(-1.8deg) rotateZ(.5deg)}
  100%{transform:translate3d(-1px,4px,12px) rotateX(-.5deg) rotateY(1deg) rotateZ(-.2deg)}
}
@media(max-width:980px){
  .campaign-poster-wall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .campaign-poster-wall .campaign-poster:nth-child(4n){margin-top:20px}
}
@media(max-width:700px){
  .campaign-poster-wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .campaign-poster-wall .campaign-poster:nth-child(n){margin-top:0}
  .campaign-poster-wall .campaign-poster:nth-child(even){margin-top:24px}
  .campaign-poster-wall .campaign-poster{animation-duration:10s}
}
@media(prefers-reduced-motion:reduce){
  .campaign-poster-wall .campaign-poster{animation:none!important;transform:none!important}
}

/* =========================================================
   AERION V30 — CTA ALIGNMENT, COMPACT CONTACT TRUST & TURNING CAMPAIGNS
   ========================================================= */

/* Keep every full-size WhatsApp CTA aligned and visually consistent. */
.btn.btn-whatsapp,
.btn.js-whatsapp:not(.contact-wa-round){
  min-height:48px;
  padding:12px 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  line-height:1;
  vertical-align:middle;
  text-align:center;
  white-space:nowrap;
  background:var(--orange)!important;
  color:var(--white)!important;
  border:2px solid rgba(255,255,255,.92)!important;
  border-radius:999px;
  box-shadow:0 0 0 1px rgba(15,57,92,.20),0 10px 26px rgba(15,57,92,.16);
}
.btn.btn-whatsapp svg,
.btn.js-whatsapp:not(.contact-wa-round) svg{
  width:18px;
  height:18px;
  flex:0 0 18px;
  fill:currentColor!important;
}
.btn.btn-whatsapp:hover,
.btn.js-whatsapp:not(.contact-wa-round):hover{
  background:var(--navy)!important;
  color:var(--white)!important;
  border-color:var(--white)!important;
  transform:translateY(-3px);
  box-shadow:0 0 0 1px rgba(232,67,41,.32),0 16px 34px rgba(15,57,92,.24);
}
.hero-actions{align-items:center}
.hero-actions>.btn{margin:0}
.cta-band .btn-whatsapp,
.cta-band .btn.js-whatsapp{
  background:var(--white)!important;
  color:var(--orange)!important;
  border-color:var(--white)!important;
  box-shadow:0 0 0 2px rgba(15,57,92,.16),0 12px 28px rgba(15,57,92,.18);
}
.cta-band .btn-whatsapp:hover,
.cta-band .btn.js-whatsapp:hover{
  background:var(--navy)!important;
  color:var(--white)!important;
}

/* The review-ready contact block should not reserve a large empty area. */
.contact-trust{padding:46px 0}
.contact-trust .section-head{margin-bottom:0}
.contact-trust .section-head p{margin-bottom:0}
.contact-trust .review-track:empty{display:none}
.contact-trust .review-track:not(:empty){margin-top:28px}

/* Give the campaign collection a stronger turning/orbiting character. */
.campaign-poster-wall{
  perspective:1700px;
  transform-style:preserve-3d;
}
.campaign-poster-wall .campaign-poster{
  transform-origin:50% 55%;
  animation-name:campaignPosterTurn;
  animation-duration:calc(10s + (var(--poster-i) * .32s));
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-direction:alternate;
}
.campaign-poster-wall .campaign-poster:nth-child(even){
  animation-direction:alternate-reverse;
}
@keyframes campaignPosterTurn{
  0%{
    transform:translate3d(-7px,10px,0) rotateX(-2deg) rotateY(-8deg) rotateZ(-1.2deg);
  }
  28%{
    transform:translate3d(7px,-8px,38px) rotateX(2deg) rotateY(7deg) rotateZ(.8deg);
  }
  55%{
    transform:translate3d(2px,-15px,62px) rotateX(-1deg) rotateY(13deg) rotateZ(1.6deg);
  }
  78%{
    transform:translate3d(-8px,3px,28px) rotateX(2.2deg) rotateY(-6deg) rotateZ(-.6deg);
  }
  100%{
    transform:translate3d(5px,8px,12px) rotateX(-1deg) rotateY(-12deg) rotateZ(.9deg);
  }
}
.campaign-poster-wall .campaign-poster:hover{
  animation-play-state:paused;
  transform:translateY(-20px) translateZ(90px) rotateX(2deg) rotateY(-7deg) rotateZ(1deg) scale(1.045);
}

@media(max-width:680px){
  .btn.btn-whatsapp,
  .btn.js-whatsapp:not(.contact-wa-round){min-height:46px;padding:11px 18px}
  .contact-trust{padding:38px 0}
  .campaign-poster-wall .campaign-poster{animation-duration:12s}
}
@media(prefers-reduced-motion:reduce){
  .campaign-poster-wall .campaign-poster{animation:none!important}
}

/* V31: collapse the Contact review block completely until genuine reviews exist. */
.contact-trust.review-dependent{display:none!important;padding:0!important;margin:0!important;min-height:0!important}
.contact-trust.review-dependent.has-genuine-reviews{display:block!important;padding:46px 0!important}
@media(max-width:680px){.contact-trust.review-dependent.has-genuine-reviews{padding:38px 0!important}}

/* V32 launch: do not show testimonial areas until genuine approved reviews exist. */
.reviews-stage.review-dependent{display:none!important}
.reviews-stage.review-dependent.has-genuine-reviews{display:block!important}