/**
 * Profile booklet — screen styles.
 *
 * Replaces the original dark "space" treatment (particle-network canvas,
 * circuit-trace SVGs, glowing 3D-render tech imagery) with a bold,
 * color-blocked editorial system: confident navy/lime/sky/teal panels,
 * large decisive typography (Archivo Black + Fredoka), and the real
 * Canvas mascot as a recurring character instead of a roaming sci-fi prop.
 *
 * Same class names as the original markup throughout — this is a reskin,
 * not a rebuild, so partials/profile-booklet-body.html didn't need its
 * structure rewritten, only a handful of decorative elements removed
 * (the particle canvas, the circuit-trace SVGs, the AI-render photography).
 *
 * The @media print block (the separate PDF-only deck) is untouched — see
 * README.md for why the print/PDF version wasn't restyled in this pass.
 */

@font-face {
  font-family: 'Profile Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/profile/archivo-black.woff2) format('woff2');
}
@font-face {
  font-family: 'Profile Rounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/profile/fredoka-700.woff2) format('woff2');
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Without this, the page had two scrollbars: .profile-booklet below is
   its own scroll container (height:100vh, overflow-y:scroll, needed
   for scroll-snap) with its own thumb, and with no reset here `html`/
   `body` default to the browser's normal flow -- their height ends up
   taller than the viewport (default UA margin on body, plus .profile-
   booklet's own box) so the *page* also scrolls, growing a second,
   native scrollbar alongside the booklet's. Pinning html/body to
   exactly the viewport with nothing of their own to scroll leaves
   .profile-booklet as the only scrolling element, and only one
   scrollbar. (This stylesheet is only ever loaded on /profile/, so no
   need to scope the selector any tighter than plain html/body.) */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

.profile-booklet-shell {
  --navy: #011531;
  --navy-deep: #030c1e;
  --royal: #1844d8;
  --lime: #e3fe69;
  --sky: #89bad7;
  --teal: #00838f;
  --white: #ffffff;
  --display: 'Profile Display', 'Archivo Black', sans-serif;
  --rounded: 'Profile Rounded', 'Fredoka', sans-serif;
  --body: 'Inter', -apple-system, sans-serif;
}

.profile-booklet, .profile-booklet * { box-sizing: border-box; }

.profile-booklet {
  margin: 0;
  padding: 0;
  background: var(--navy);
  font-family: var(--body);
  color: var(--white);
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
  /* .dotnav below is a custom-styled page-position indicator (a pill of
     dots, one per page, the active one lit up) sitting just inside this
     element's own edge -- with a real, unstyled scrollbar from
     overflow-y:scroll *also* rendering at the true edge right next to
     it (visible as classic arrow-button chrome on Windows), it reads as
     two separate scroll indicators stacked next to each other. This
     keeps the actual scrolling (wheel/touch/keyboard, scroll-snap) but
     hides that native scrollbar's own UI, leaving .dotnav as the only
     visible one. */
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* legacy Edge */
}
.profile-booklet::-webkit-scrollbar { display: none; } /* Chrome/Safari/new Edge */

.profile-booklet .print-deck { display: none; }

.profile-booklet h1,
.profile-booklet h2,
.profile-booklet h3,
.profile-booklet .display {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -0.01em;
}

.profile-booklet .page {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  padding: 70px 8vw;
  position: relative;
  overflow: hidden;
}

.profile-booklet .page.royal { background: var(--royal); }
.profile-booklet .page.navy { background: var(--navy); }

/* Quiet ambient depth — reuses the main site's own .animate-glow-pulse
   blur-circle language instead of the particle canvas that used to live
   here, so the profile page ties back to the rest of the site's visual
   system instead of inventing a one-off effect. Turned up from the first
   pass (0.14-0.16 alpha) after "too dark" feedback — more light presence
   on every page, not just a hint of it. */
.profile-booklet .page::before,
.profile-booklet .page::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.profile-booklet .page::before {
  width: 34vw; height: 34vw;
  top: -10vw; right: -8vw;
  background: rgba(227, 254, 105, 0.26);
}
.profile-booklet .page::after {
  width: 28vw; height: 28vw;
  bottom: -10vw; left: -6vw;
  background: rgba(137, 186, 215, 0.22);
}
.profile-booklet .page.royal::before { background: rgba(227, 254, 105, 0.3); }
.profile-booklet .page.royal::after { background: rgba(255, 255, 255, 0.12); }

/* Two pages (Vision/Mission, ERP roadmap) are genuinely light instead of
   navy — real dark/light alternation across the scroll, not just a
   brighter shade of dark, after "still too dark" held up on the second
   pass. Same brand colors, inverted: cream ground, navy ink. */
.profile-booklet .page.light {
  background: #f4f1ea;
  color: var(--navy);
}
.profile-booklet .page.light::before { background: rgba(0, 131, 143, 0.14); }
.profile-booklet .page.light::after { background: rgba(227, 254, 105, 0.35); }
.profile-booklet .page.light h1,
.profile-booklet .page.light h2,
.profile-booklet .page.light h3 { color: var(--navy); }
/* .textcol h1 .accent (below, line ~757) is lime -- reads fine on a navy
   page but is low-contrast on this cream background ("built on trust.",
   "AI Agent", "Mobile App", "Social Media" all use it). Every other
   accent color on this light variant (eyebrow, page-index digit, icons)
   already swaps to teal for the same reason -- matching that instead of
   inventing a new color. */
.profile-booklet .page.light .accent { color: var(--teal); }
.profile-booklet .page.light .eyebrow { color: var(--teal); }
.profile-booklet .page.light .eyebrow::before { background: var(--teal); }
.profile-booklet .page.light .brand-mark-logo { filter: none; }
.profile-booklet .page.light .page-index { color: rgba(1,21,49,0.5); }
.profile-booklet .page.light .page-index b { color: var(--teal); }
.profile-booklet .page.light .vm-card { background: #ffffff; border-top-color: var(--teal); box-shadow: 0 10px 30px -12px rgba(1,21,49,0.15); }
.profile-booklet .page.light .vm-grid .vm-card:nth-child(2) { border-top-color: var(--royal); }
.profile-booklet .page.light .vm-card h3 { color: var(--navy); }
.profile-booklet .page.light .vm-card p,
.profile-booklet .page.light .center-layout .col p,
.profile-booklet .page.light .textcol p { color: rgba(1,21,49,0.72); }
.profile-booklet .page.light .vm-icon { color: var(--teal); }
.profile-booklet .page.light .vm-grid .vm-card:nth-child(2) .vm-icon { color: var(--royal); }
.profile-booklet .page.light .cap-num { background: var(--navy); color: var(--lime); }
.profile-booklet .page.light .road-bed { stroke: rgba(1,21,49,0.15); }
.profile-booklet .page.light .road-dash { stroke: var(--teal); }
.profile-booklet .page.light .road-stop circle { fill: var(--navy); stroke: #f4f1ea; }
.profile-booklet .page.light .road-stop text { fill: var(--lime); }
.profile-booklet .page.light .road-label { fill: var(--navy); opacity: 0.7; }
.profile-booklet .page.light .mascot-shadow { opacity: 0.5; }
.profile-booklet .page.light .stat-grid-item .num { color: var(--teal); }
.profile-booklet .page.light .stat-grid-item .lbl { color: rgba(1,21,49,0.6); }
.profile-booklet .page.light .chip { background: #ffffff; border-color: rgba(1,21,49,0.15); color: var(--navy); box-shadow: 0 4px 14px -6px rgba(1,21,49,0.15); }
.profile-booklet .page.light .chip:hover { background: var(--navy); color: var(--lime); border-color: var(--navy); }
.profile-booklet .page.light .ghost-year { color: rgba(1,21,49,0.05); }
.profile-booklet .page.light .tile { background: #ffffff; border-color: rgba(1,21,49,0.1); box-shadow: 0 4px 14px -8px rgba(1,21,49,0.18); }
.profile-booklet .page.light .tile svg { color: var(--teal); }
.profile-booklet .page.light .tile:hover { border-color: var(--teal); background: rgba(0,131,143,0.06); }
.profile-booklet .page.light .badge-lime { box-shadow: 0 4px 14px -6px rgba(1,21,49,0.2); }
.profile-booklet .page.light .imgframe { box-shadow: 0 30px 60px -20px rgba(1,21,49,0.35); }
.profile-booklet .page.light .toc-num { border-color: rgba(1,21,49,0.2); }

.profile-booklet .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--rounded);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 14px;
  position: relative; z-index: 5;
}
.profile-booklet .eyebrow::before {
  content: '';
  width: 26px; height: 3px;
  background: var(--lime);
  display: inline-block;
}

.profile-booklet .brand-mark {
  position: absolute;
  top: 34px; left: 8vw;
  z-index: 20;
  display: flex; align-items: center; gap: 10px;
}
.profile-booklet .brand-mark-logo {
  height: 26px; width: auto;
  filter: brightness(0) invert(1);
}

.profile-booklet .page-index {
  position: absolute;
  top: 34px; right: 8vw;
  z-index: 20;
  font-family: var(--rounded);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.6);
}
.profile-booklet .page-index b { color: var(--lime); font-size: 14px; }

/* ---- corner buttons ---- */
.profile-booklet-shell .profile-home-btn {
  position: fixed;
  left: 26px; bottom: 26px;
  z-index: 200;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--navy);
  color: var(--white);
  border: 2px solid var(--lime);
  border-radius: 999px;
  padding: 10px 18px 10px 14px;
  font-family: var(--rounded);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
}
.profile-booklet-shell .profile-home-btn:hover { background: var(--royal); transform: translateY(-2px); }
.profile-booklet-shell .profile-home-btn-icon { width: 15px; height: 15px; }
.profile-booklet-shell .profile-pdf-btn { left: auto; right: 26px; background: var(--lime); color: var(--navy); border-color: var(--navy); }
.profile-booklet-shell .profile-pdf-btn:hover { background: var(--white); }

@media (max-width: 700px) {
  .profile-booklet-shell .profile-home-btn { left: 16px; bottom: 16px; padding: 8px 14px 8px 10px; font-size: 11.5px; }
  .profile-booklet-shell .profile-pdf-btn { left: auto; right: 16px; }
}

/* ---- dot nav ---- */
.profile-booklet .dotnav {
  position: fixed;
  right: 26px; top: 50%;
  transform: translateY(-50%);
  z-index: 200;
  display: flex; flex-direction: column; gap: 10px;
  /* A dark backdrop chip so the dots stay visible over both the navy
     pages and the light pages (see .page.light below) — without this,
     white-on-white dots vanish once the scroll reaches a light page. */
  background: rgba(1, 21, 49, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 12px 7px;
  border-radius: 999px;
}
.profile-booklet .dotnav a {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transition: all 0.25s ease;
}
.profile-booklet .dotnav a.active { background: var(--lime); box-shadow: 0 0 10px rgba(227,254,105,0.7); transform: scale(1.3); }
@media (max-width: 700px) { .profile-booklet .dotnav { right: 12px; } }

/* ---- mascot ----
   The original glided continuously between 4 waypoints per page via
   physics-driven JS — part of what read as a restless "sci-fi" character.
   This version keeps it genuinely alive without that: profile-booklet.js
   still relocates it to one resting spot per page as you scroll (the
   `left`/`bottom` transition below makes that a glide, not a jump cut),
   and — independent of that, layered on top via `transform`, which
   doesn't conflict with `left`/`bottom` — it continuously wanders in a
   small loop around wherever it's currently resting, so it's never
   actually standing still. Hovering (or tapping, on touch) makes it jump. */
.profile-booklet .mascot-wrap {
  position: fixed;
  left: 34px;
  bottom: 96px;
  z-index: 15;
  width: 200px;
  cursor: pointer;
  animation: mascotRoam 13s ease-in-out infinite;
  transition: left 0.9s cubic-bezier(.16,.84,.44,1), right 0.9s cubic-bezier(.16,.84,.44,1), top 0.9s cubic-bezier(.16,.84,.44,1), bottom 0.9s cubic-bezier(.16,.84,.44,1), opacity 0.4s ease;
}
@media (max-width: 700px) {
  .profile-booklet .mascot-wrap { width: 155px; left: 16px; bottom: 76px; }
}
.profile-booklet .mascot-glow {
  position: absolute; left: 50%; bottom: 6%;
  width: 120%; padding-top: 120%;
  transform: translate(-50%, 0);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227,254,105,0.3) 0%, transparent 68%);
  pointer-events: none;
}
.profile-booklet .mascot-shadow {
  position: absolute; left: 50%; bottom: 2%;
  width: 56%; height: 10px;
  background: radial-gradient(ellipse at center, rgba(1,21,49,0.5) 0%, transparent 72%);
  transform: translateX(-50%);
  pointer-events: none;
  animation: mascotShadowPulse 9s ease-in-out infinite;
}
.profile-booklet .mascot-rig { position: relative; width: 100%; aspect-ratio: 558/447; filter: drop-shadow(0 10px 14px rgba(1,21,49,0.4)); }
.profile-booklet .mascot-wrap:hover .mascot-rig,
.profile-booklet .mascot-wrap:active .mascot-rig {
  animation: mascotJump 0.7s cubic-bezier(.34,1.56,.64,1) 1;
}
.profile-booklet .mascot-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.profile-booklet .mascot-body { position: relative; }
.profile-booklet .mascot-arm { left: 20.07%; top: 37.58%; width: 21.15%; height: 16.55%; transform-origin: 93.2% 43.2%; animation: armWave 4.5s ease-in-out infinite; }
.profile-booklet .mascot-cap { left: 36.92%; top: 35.35%; width: 5.74%; height: 12.08%; }
.profile-booklet .mascot-eyes { left: 37.28%; top: 22.37%; width: 20.43%; height: 10.74%; opacity: 0; animation: eyeBlink 4.6s ease-in-out infinite; }

/* A continuous wander loop around the resting spot — noticeably on the
   move at all times (not a subtle in-place wobble), while still looping
   back to (0,0) each cycle so it never conflicts with the page-to-page
   glide (see the left/bottom transition above) or drifts away from its
   spot permanently. */
@keyframes mascotRoam {
  0%   { transform: translate(0, 0) rotate(0deg); }
  15%  { transform: translate(26px, -14px) rotate(4deg); }
  35%  { transform: translate(40px, 8px) rotate(-2deg); }
  50%  { transform: translate(18px, 20px) rotate(3deg); }
  65%  { transform: translate(-20px, 14px) rotate(-4deg); }
  85%  { transform: translate(-32px, -10px) rotate(2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes mascotShadowPulse {
  0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.35; transform: translateX(-50%) scale(0.85); }
}
@keyframes mascotJump {
  0%   { transform: translateY(0) scale(1, 1); }
  30%  { transform: translateY(-26px) scale(1.06, 0.94); }
  55%  { transform: translateY(0) scale(0.94, 1.08); }
  75%  { transform: translateY(-8px) scale(1.02, 0.98); }
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes armWave { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-16deg); } }
@keyframes eyeBlink { 0%, 92%, 100% { opacity: 0; } 96% { opacity: 1; } }

/* ---- scroll reveal ---- */
.profile-booklet .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(.16,.84,.44,1), transform 0.7s cubic-bezier(.16,.84,.44,1); }
.profile-booklet .reveal.in-view { opacity: 1; transform: translateY(0); }
.profile-booklet .imgcol.reveal { transform: translateY(24px) scale(0.97); }
.profile-booklet .imgcol.reveal.in-view { transform: translateY(0) scale(1); }

/* ================= PAGE 1 — COVER ================= */

.profile-booklet .cover-content {
  position: relative; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; height: 100%;
}
.profile-booklet .cover-content img.lockup { width: min(300px, 50vw); margin-bottom: 22px; filter: brightness(0) invert(1); }
.profile-booklet .cover-tag {
  font-family: var(--rounded);
  font-weight: 700;
  color: var(--sky);
  font-size: 15px;
  max-width: 480px;
  margin-top: 16px;
}
.profile-booklet .cover-stats {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 0;
  margin-top: 44px;
  position: relative; z-index: 5;
  /* A backdrop of its own: the diagonal lime panel behind the cover can
     reach under this row, and lime stat numbers on a lime panel would be
     unreadable without a consistent dark surface under the whole row. */
  background: rgba(1, 21, 49, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: 20px 8px;
}
.profile-booklet .cover-stats .stat {
  padding: 0 26px;
  border-left: 1px solid rgba(255,255,255,0.18);
}
.profile-booklet .cover-stats .stat:first-child { border-left: none; }
.profile-booklet .cover-stats .stat .num { font-family: var(--display); font-size: 30px; color: var(--lime); display: block; }
.profile-booklet .cover-stats .stat .lbl { font-family: var(--rounded); font-size: 11.5px; color: rgba(255,255,255,0.7); margin-top: 4px; display: block; max-width: 140px; }
@media (max-width: 700px) {
  .profile-booklet .cover-stats { grid-template-columns: repeat(2, auto); row-gap: 22px; }
  .profile-booklet .cover-stats .stat:nth-child(3) { border-left: none; }
}

.profile-booklet .scroll-hint {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--rounded); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  z-index: 5;
}
.profile-booklet .scroll-hint svg { width: 14px; height: 14px; }

/* Muted looping background video (free stock — see images/profile/stock/
   CREDITS.md) instead of a flat navy field behind the cover. */
.profile-booklet .cover-bg-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.55;
}
.profile-booklet #p1::after {
  /* darken the video just enough for the lockup/text to stay legible,
     without going back to a flat opaque navy field */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(1,21,49,0.55), rgba(1,21,49,0.82) 70%, var(--navy) 100%);
  z-index: 1;
  border-radius: 0; filter: none; width: auto; height: auto;
}

/* Circuit-board trace pattern behind the cover — actual angled trace
   lines + via-dots (an inline, tiled SVG), not a dot-grid: matches the
   reference's PCB-line texture instead of a generic graph-paper look.
   Replaces reviving the old .trace/.node SVGs, whose supporting CSS and
   keyframes no longer exist anywhere in this stylesheet — un-hiding them
   as-is would render as unstyled default black SVG shapes, not lines. */
.profile-booklet .cover-tech-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.85;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.14)' stroke-width='1'%3E%3Cpath d='M15,0 L15,30 L45,30 L45,70 L75,70'/%3E%3Cpath d='M110,15 L80,15 L80,50 L120,50 L120,90 L150,90'/%3E%3Cpath d='M0,100 L30,100 L30,130 L60,130'/%3E%3Cpath d='M95,108 L95,150'/%3E%3Cpath d='M132,0 L132,40 L150,40'/%3E%3Cpath d='M0,45 L15,45'/%3E%3C/g%3E%3Cg fill='rgba(227,254,105,0.5)'%3E%3Ccircle cx='15' cy='30' r='2'/%3E%3Ccircle cx='45' cy='70' r='2'/%3E%3Ccircle cx='80' cy='50' r='2'/%3E%3Ccircle cx='120' cy='90' r='2'/%3E%3Ccircle cx='30' cy='130' r='2'/%3E%3Ccircle cx='95' cy='108' r='2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 150px 150px;
  animation: gridDrift 26s linear infinite;
}
@keyframes gridDrift {
  from { background-position: 0 0; }
  to   { background-position: 150px 150px; }
}

/* Cover mark — a real SVG wave (bezier curves, not a straight-edge
   clip-path) so the boundary reads as a flowing ribbon like the
   reference, with three stacked layers (back/mid/front-highlight) for
   depth. `.cover-ambient-parallax` is what the mousemove handler nudges
   via inline transform; the individual wave-layer paths keep their own
   independent drift animation — composes fine since they're different
   elements from the one JS sets. */
.profile-booklet .cover-ambient-parallax {
  position: absolute;
  top: -6%; right: -10%;
  width: 78%; height: 112%;
  z-index: 2;
  transition: transform 0.3s ease-out;
}
.profile-booklet .cover-wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.profile-booklet .wave-layer, .profile-booklet .wave-rim {
  transform-box: fill-box;
  transform-origin: center;
}
.profile-booklet .wave-back2 { opacity: 0.55; animation: waveDrift 18s ease-in-out infinite alternate; }
.profile-booklet .wave-back { opacity: 0.7; animation: waveDrift 15s ease-in-out infinite alternate; }
.profile-booklet .wave-mid { opacity: 1; animation: waveDrift 12s ease-in-out infinite alternate-reverse; }
.profile-booklet .wave-front { opacity: 0.8; filter: blur(1px); animation: waveDrift 9s ease-in-out infinite alternate; }
.profile-booklet .wave-rim { opacity: 0.55; animation: waveDrift 12s ease-in-out infinite alternate-reverse; }
@keyframes waveDrift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-1.2%, 1%) scale(1.015); }
}

/* Small twinkling accents scattered across the green mark. */
.profile-booklet .cover-sparkle {
  position: absolute;
  width: 10px; height: 10px;
  z-index: 3;
  background: radial-gradient(circle, #fff 0%, rgba(255,255,255,0) 70%);
  clip-path: polygon(50% 0%, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0% 50%, 37% 37%);
  animation: sparkleTwinkle 3.4s ease-in-out infinite;
}
.profile-booklet .cover-sparkle-1 { top: 22%; left: 38%; width: 14px; height: 14px; animation-delay: 0s; }
.profile-booklet .cover-sparkle-2 { top: 62%; left: 20%; width: 8px; height: 8px; animation-delay: 1.1s; }
.profile-booklet .cover-sparkle-3 { top: 45%; left: 68%; width: 11px; height: 11px; animation-delay: 2.1s; }
@keyframes sparkleTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  50% { opacity: 0.9; transform: scale(1) rotate(45deg); }
}

/* Metallic wordmark. The source lockup.jpg is a flat white-on-transparent
   silhouette (no shading baked in — checked the pixels: solid #fff
   wherever alpha > 0), so a color filter alone can't fake a chrome bevel,
   there's no tonal variation for it to work with. Using the same file as
   a CSS mask instead lets an actual metallic gradient paint into that
   silhouette — `.lockup` itself goes transparent (kept in the DOM for
   its alt text) and `.lockup-wrap::before` recreates its shape filled
   with brushed-steel tones instead of flat white. `::after` layers a
   brighter sweep on top for the moving shine. */
.profile-booklet .lockup-wrap { position: relative; display: inline-block; }
.profile-booklet .lockup-wrap img.lockup { opacity: 0; }
.profile-booklet .lockup-wrap::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg,
    #7d8f89 0%, #eef8e6 14%, #b9d2ae 26%, #5f7267 40%,
    #f4fce9 52%, #93a892 64%, #dcefd2 78%, #6c8078 90%, #eef8e6 100%);
  background-size: 220% 100%;
  -webkit-mask-image: url(/images/profile/lockup.jpg);
  mask-image: url(/images/profile/lockup.jpg);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  filter: drop-shadow(0 4px 10px rgba(1,21,49,0.5)) drop-shadow(0 0 22px rgba(227,254,105,0.3));
  animation: metalShift 7s ease-in-out infinite alternate;
}
.profile-booklet .lockup-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.8) 50%, transparent 60%);
  background-size: 220% 100%;
  -webkit-mask-image: url(/images/profile/lockup.jpg);
  mask-image: url(/images/profile/lockup.jpg);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  background-position: 140% 0;
  animation: logoShine 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes metalShift {
  0% { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}
@keyframes logoShine {
  0%, 40% { background-position: 140% 0; }
  70%, 100% { background-position: -40% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .profile-booklet .cover-tech-grid,
  .profile-booklet .wave-layer,
  .profile-booklet .wave-rim,
  .profile-booklet .cover-sparkle,
  .profile-booklet .lockup-wrap::before,
  .profile-booklet .lockup-wrap::after { animation: none; }
}

/* ================= PAGE 2 — TOC ================= */

.profile-booklet .toc-wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 0; height: 100%; align-items: stretch; position: relative; z-index: 5; }
.profile-booklet .toc-left { background: var(--navy); padding: 120px 8vw 70px 8vw; display: flex; flex-direction: column; justify-content: center; }
.profile-booklet .toc-right {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, var(--teal), var(--navy) 78%);
  display: flex; align-items: center; justify-content: center;
}
/* The photo this used to layer under a dark tint (toc-abstract.jpg) was a
   generic pastel bubble render with no tech/business content — between
   its own softness and the tint it was reading as "no picture at all".
   Replaced with a real glowing circuit-board macro (toc-circuit.jpg,
   Unsplash-licensed — see stock/CREDITS.md) so there's genuine
   photographic depth behind the platform/tiles scene, tinted toward the
   brand teal/navy so it sits behind that scene instead of fighting it. */
.profile-booklet .toc-right {
  background-image:
    linear-gradient(155deg, rgba(0,131,143,0.55), rgba(1,21,49,0.82) 78%),
    url('/images/profile/stock/toc-circuit.jpg');
  background-size: cover;
  background-position: center;
}
.profile-booklet .toc-right::before {
  content: '02';
  font-family: var(--display);
  font-size: min(28vw, 320px);
  color: rgba(227,254,105,0.12);
  line-height: 1;
  animation: tocGhostPulse 4s ease-in-out infinite;
}
@keyframes tocGhostPulse {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 0 rgba(227,254,105,0)); }
  50% { opacity: 0.6; filter: drop-shadow(0 0 26px rgba(227,254,105,0.55)); }
}

/* A moving diagonal light band, like a holographic scan — sells motion
   across the still photo without touching its pixels. */
.profile-booklet .toc-shimmer {
  position: absolute; inset: 0;
  z-index: 2;
  background: linear-gradient(100deg, transparent 42%, rgba(227,254,105,0.28) 50%, transparent 58%);
  background-size: 250% 100%;
  mix-blend-mode: screen;
  animation: tocShimmerSweep 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes tocShimmerSweep {
  0%, 30% { background-position: 160% 0; }
  70%, 100% { background-position: -60% 0; }
}

/* Small glowing motes drifting up through the panel, echoing the neon
   accents already in the photo instead of competing with them. */
.profile-booklet .toc-particle {
  position: absolute;
  z-index: 2;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227,254,105,0.95) 0%, rgba(227,254,105,0) 72%);
  filter: blur(0.5px);
  opacity: 0;
  animation: tocParticleDrift 6s ease-in infinite;
  pointer-events: none;
}
.profile-booklet .toc-particle.tp-2, .profile-booklet .toc-particle.tp-5 {
  background: radial-gradient(circle, rgba(137,186,215,0.95) 0%, rgba(137,186,215,0) 72%);
}
.profile-booklet .tp-1 { left: 20%; bottom: 12%; animation-delay: 0s; }
.profile-booklet .tp-2 { left: 68%; bottom: 8%;  width: 5px; height: 5px; animation-delay: 1s; }
.profile-booklet .tp-3 { left: 82%; bottom: 20%; animation-delay: 2.1s; }
.profile-booklet .tp-4 { left: 40%; bottom: 6%;  width: 9px; height: 9px; animation-delay: 3.2s; }
.profile-booklet .tp-5 { left: 55%; bottom: 16%; width: 6px; height: 6px; animation-delay: 4s; }
.profile-booklet .tp-6 { left: 12%; bottom: 24%; animation-delay: 5s; }
@keyframes tocParticleDrift {
  0%   { opacity: 0; transform: translateY(0) scale(0.8); }
  15%  { opacity: 0.9; }
  85%  { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-220px) scale(1.1); }
}

/* The centerpiece: a diamond "platform" (double outline + soft glow fill,
   both slowly breathing) standing in for the isometric base in the
   reference, six lines radiating out to an icon tile per TOC entry —
   this is the actual picture now, built in CSS/SVG since no matching
   illustration exists in the project's assets. */
/* `inset:0` alone doesn't force a replaced element (svg/img/video) to
   fill a non-square box when it has a square intrinsic ratio (viewBox
   100x100 here) — CSS sizes it to the smaller dimension instead, so this
   was rendering as a 783x783 square pinned inside a 783x880 panel rather
   than actually filling it, throwing the diamond off from where the
   tiles/lines below expect it. Explicit width/height:100% overrides that. */
.profile-booklet .toc-platform { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.profile-booklet .tp-glow {
  fill: rgba(227,254,105,0.14);
  animation: tpGlowPulse 4s ease-in-out infinite;
}
.profile-booklet .tp-ring {
  fill: none;
  stroke: rgba(227,254,105,0.7);
  stroke-width: 0.4;
  filter: drop-shadow(0 0 6px rgba(227,254,105,0.6));
  animation: tpRingPulse 4s ease-in-out infinite;
}
@keyframes tpGlowPulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes tpRingPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

/* Circuit lines radiating from the platform to each tile, each with a
   flowing dash (data-packet feel). */
.profile-booklet .toc-circuit-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.profile-booklet .tc-line {
  fill: none;
  stroke: rgba(227,254,105,0.55);
  stroke-width: 0.28;
  stroke-dasharray: 2.4 2.2;
  filter: drop-shadow(0 0 2px rgba(227,254,105,0.5));
  animation: tcFlow 1.8s linear infinite;
}
@keyframes tcFlow { to { stroke-dashoffset: -18.4; } }

.profile-booklet .toc-icon-tile {
  position: absolute;
  z-index: 3;
  width: 74px;
  padding: 10px 6px 8px;
  border-radius: 14px;
  background: rgba(1,21,49,0.55);
  border: 1px solid rgba(227,254,105,0.4);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  box-shadow: 0 0 22px rgba(227,254,105,0.28), 0 8px 18px rgba(1,21,49,0.45);
  animation: ticFloat 4.6s ease-in-out infinite;
  transform: translate(-50%, -50%);
}
.profile-booklet .toc-icon-tile svg { width: 20px; height: 20px; color: var(--lime); flex: none; }
/* A caption under each icon completes it as a labeled item instead of a
   bare glyph — matches the captioned mockup tiles elsewhere in the deck. */
.profile-booklet .tit-label {
  font-family: var(--rounded); font-weight: 700; font-size: 9.5px;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.profile-booklet .tit-1 { animation-delay: 0s; }
.profile-booklet .tit-2 { animation-delay: -0.8s; }
.profile-booklet .tit-3 { animation-delay: -1.6s; }
.profile-booklet .tit-4 { animation-delay: -2.4s; }
.profile-booklet .tit-5 { animation-delay: -3.2s; }
.profile-booklet .tit-6 { animation-delay: -4s; }
@keyframes ticFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-10px); }
}
@media (max-width: 900px) {
  .profile-booklet .toc-icon-tile { width: 58px; padding: 7px 4px 6px; border-radius: 12px; }
  .profile-booklet .toc-icon-tile svg { width: 16px; height: 16px; }
  .profile-booklet .tit-label { font-size: 8px; }
}
.profile-booklet .toc-list { list-style: none; margin: 26px 0 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.profile-booklet .toc-list li { border-bottom: 1px solid rgba(255,255,255,0.12); transition: border-color 0.2s ease; }
.profile-booklet .toc-list li:hover { border-color: rgba(227,254,105,0.6); }
.profile-booklet .toc-list li a {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 4px;
  text-decoration: none; color: var(--white);
  font-family: var(--rounded); font-weight: 700; font-size: 15px;
}
.profile-booklet .toc-num {
  font-family: var(--display); font-size: 13px; color: var(--lime);
  border: 1px solid rgba(227,254,105,0.4); border-radius: 50%;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex: none;
}
.profile-booklet .toc-list li:hover .toc-num { background: var(--lime); color: var(--navy); }
.profile-booklet .toc-label { flex: 1; }
.profile-booklet .toc-arrow { width: 18px; height: 18px; opacity: 0.4; transition: all 0.2s ease; }
.profile-booklet .toc-list li:hover .toc-arrow { opacity: 1; transform: translateX(3px); color: var(--lime); }
h1[style*="clamp(26px"] { font-family: var(--display) !important; font-weight: 900 !important; }

/* ================= PAGE 3/5/6 — SPLIT LAYOUTS ================= */

.profile-booklet .split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items: center; position: relative; z-index: 5; height: 100%; }
.profile-booklet .split.reverse { grid-template-columns: 0.95fr 1.05fr; }
.profile-booklet .split.reverse .textcol { order: 2; }
.profile-booklet .split.reverse .imgcol { order: 1; }
.profile-booklet .textcol h1 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; margin: 0 0 22px 0; color: var(--white); }
.profile-booklet .textcol h1 .accent { color: var(--lime); }
.profile-booklet .textcol p { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.82); max-width: 560px; }

.profile-booklet .imgcol { position: relative; }
.profile-booklet .imgcol img { display: none; }
.profile-booklet .imgframe {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 24px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, var(--royal), var(--navy-deep));
  box-shadow: 0 30px 60px rgba(0,0,0,0.45);
}
.profile-booklet .split.reverse .imgframe { border-radius: 62% 38% 39% 61% / 55% 60% 40% 45%; background: linear-gradient(145deg, var(--teal), var(--navy-deep)); }
.profile-booklet .imgframe:hover { box-shadow: 0 0 90px rgba(227,254,105,0.22); }

/* Page 3 uses the client-provided mascot portrait, framed to fit the
   split layout without becoming a tall narrow panel. */
#p3 .imgframe {
  aspect-ratio: 1 / 1.04;
  width: min(100%, 440px);
  margin-inline: auto;
  background-color: #8db3d3;
  background-image: url('/images/profile/who-we-are-mascot.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 46%;
}
/* Page 5 uses the client-provided AI Agents diagram. aspect-ratio matches
   the image exactly so `contain` fills edge-to-edge with no letterbox seam. */
#p5 .imgframe {
  aspect-ratio: 1683 / 934;
  background-image: url('/images/profile/ai-agents-integration.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#p6 .imgframe {
  aspect-ratio: 3 / 2;
  background-image: url('/images/profile/mobile-app-development.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Motion layered on top of the real photo: two rings of small satellites
   continuously orbiting the hologram (blue + lemon-yellow, replacing the
   earlier fixed radiating-line network with something that actually
   travels), a slow shimmer sweep (reused from the TOC page), a gentle
   float on the whole frame, and a couple of drifting particles. */
.profile-booklet .p3-frame { animation: p3Float 6s ease-in-out infinite; }
/* Reused on p5's server illustration too: a small pulsing glow pinned at
   each labeled icon. */
.profile-booklet .p3-node-glow {
  position: absolute;
  z-index: 2;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227,254,105,0.9) 0%, rgba(227,254,105,0) 70%);
  animation: p3NodePulse 2.6s ease-in-out infinite;
  pointer-events: none;
}
.profile-booklet .p3-node-glow:nth-of-type(1) { animation-delay: 0s; }
.profile-booklet .p3-node-glow:nth-of-type(2) { animation-delay: -0.5s; }
.profile-booklet .p3-node-glow:nth-of-type(3) { animation-delay: -1s; }
.profile-booklet .p3-node-glow:nth-of-type(4) { animation-delay: -1.5s; }
.profile-booklet .p3-node-glow:nth-of-type(5) { animation-delay: -2s; }
@keyframes p3NodePulse {
  0%, 100% { opacity: 0.5; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.3); }
}
@keyframes p3Float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.profile-booklet .p3-orbit {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.profile-booklet .p3-orbit-a { top: 8%; left: 18%; width: 64%; height: 56%; }
.profile-booklet .p3-orbit-b { top: 2%; left: 30%; width: 42%; height: 42%; }
.profile-booklet .p3-orbit-dot {
  position: absolute;
  top: 0; left: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin: -4.5px 0 0 -4.5px;
}
.profile-booklet .p3-orbit-dot-blue {
  background: radial-gradient(circle, #bfe3fb 0%, #4fa8e8 55%, rgba(79,168,232,0) 75%);
  box-shadow: 0 0 10px 2px rgba(79,168,232,0.75);
}
.profile-booklet .p3-orbit-dot-yellow {
  background: radial-gradient(circle, #fffbd6 0%, #f5e04a 55%, rgba(245,224,74,0) 75%);
  box-shadow: 0 0 10px 2px rgba(245,224,74,0.75);
}
.profile-booklet .p3-orbit-a .p3-orbit-dot { offset-path: ellipse(50% 44% at 50% 50%); animation: p3Orbit 7s linear infinite; }
.profile-booklet .p3-orbit-b .p3-orbit-dot { offset-path: ellipse(50% 44% at 50% 50%); animation: p3Orbit 5s linear infinite reverse; }
@keyframes p3Orbit { to { offset-distance: 100%; } }
#p3 .imgframe .toc-particle { z-index: 2; }
#p3 .imgframe .toc-particle.tp-1 { background: radial-gradient(circle, #fffbd6 0%, rgba(245,224,74,0) 72%); }
#p3 .imgframe .toc-shimmer { z-index: 2; }

.profile-booklet .stat-chips { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.profile-booklet .chip {
  font-family: var(--rounded); font-weight: 700; font-size: 12.5px;
  border-radius: 999px; padding: 9px 18px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); color: var(--white);
  transition: all 0.2s ease;
}
.profile-booklet .chip:hover { background: var(--lime); color: var(--navy); border-color: var(--lime); transform: translateY(-2px); }

.profile-booklet .stat-grid { display: flex; gap: 38px; margin-top: 32px; flex-wrap: wrap; }
.profile-booklet .stat-grid-item { display: flex; flex-direction: column; gap: 5px; }
.profile-booklet .stat-grid-item .num { font-family: var(--display); font-size: 28px; color: var(--lime); }
.profile-booklet .stat-grid-item .lbl { font-family: var(--rounded); font-size: 12px; color: rgba(255,255,255,0.7); }

.profile-booklet .ghost-year { position: absolute; top: 6%; right: 4%; font-family: var(--display); font-size: min(22vw, 260px); color: rgba(255,255,255,0.04); z-index: 0; line-height: 1; }

.profile-booklet .cap-head { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; position: relative; z-index: 5; }
.profile-booklet .cap-num {
  font-family: var(--display); font-size: 20px; color: var(--navy);
  background: var(--lime); width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex: none;
}

/* ================= PAGE 4 — VISION / MISSION ================= */

.profile-booklet .vm-wrap { position: relative; z-index: 5; text-align: center; }
.profile-booklet .vm-head { max-width: 640px; margin: 0 auto 50px auto; }
.profile-booklet .vm-head h1 { font-size: clamp(28px, 3.6vw, 44px); margin: 10px 0 0 0; line-height: 1.15; }
.profile-booklet .vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 900px; margin: 0 auto; text-align: left; }
.profile-booklet .vm-card {
  background: rgba(255,255,255,0.05);
  border-radius: 20px;
  padding: 36px;
  border-top: 4px solid var(--lime);
  transition: transform 0.25s ease, background 0.25s ease;
}
.profile-booklet .vm-grid .vm-card:nth-child(2) { border-top-color: var(--sky); }
.profile-booklet .vm-card:hover { transform: translateY(-6px); background: rgba(255,255,255,0.08); }
.profile-booklet .vm-icon { width: 48px; height: 48px; color: var(--lime); margin-bottom: 20px; }
.profile-booklet .vm-grid .vm-card:nth-child(2) .vm-icon { color: var(--sky); }
.profile-booklet .vm-icon svg { width: 100%; height: 100%; }
.profile-booklet .vm-card h3 { font-family: var(--rounded); font-weight: 700; font-size: 22px; margin: 0 0 16px 0; color: var(--white); }
.profile-booklet .vm-card p { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,0.78); margin: 0; }
@media (max-width: 700px) { .profile-booklet .vm-grid { grid-template-columns: 1fr; } }

/* This page (p4) switched to .page.light below — a dark photo-texture
   overlay no longer fits, so unlike p7 (still navy) it doesn't get one. */

/* The old particle-network canvas and circuit-trace SVGs are still present
   in the markup (removing ~40 lines of inline HTML across pages 1 and 7
   carried more risk than value here) but are fully hidden — the ambient
   .page::before/::after blur circles above replace them visually. */
.profile-booklet #bg-canvas,
.profile-booklet svg.circuit {
  display: none;
}

/* ================= PAGE 7 — E-COMMERCE (royal bg) ================= */

/* Full-bleed photo texture on the e-commerce page (free stock — see
   images/profile/stock/CREDITS.md). The gradient used to go from 82% to
   92% opacity of the *same* royal blue top-to-bottom — at that strength
   it was reading as a flat blue fill with the photo barely contributing
   any texture ("too blue"). Rebalanced so the tint is directional (darker
   navy at the edges for depth, more transparent through the middle) and
   meaningfully lighter overall, so the photo's own contrast shows through
   instead of being washed out. */
#p7.page::before {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(155deg, rgba(3,12,30,0.75), rgba(24,68,216,0.42) 45%, rgba(24,68,216,0.5) 60%, rgba(3,12,30,0.8)), url('/images/profile/stock/ecommerce.jpg');
  background-size: cover; background-position: center;
  width: auto; height: auto; border-radius: 0; filter: none; z-index: 0;
}
/* Circuit-grid texture (same pattern as the cover) layered above the
   photo for the same "designed, not just tinted" richness the other
   pages have. */
.profile-booklet .p7-grid { z-index: 1; opacity: 0.4; }

.profile-booklet .tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 36px 0; position: relative; z-index: 5; }
.profile-booklet .tri-item {
  background: rgba(1,21,49,0.35);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 18px;
  padding: 26px;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.profile-booklet .tri-item .ic { width: 34px; height: 34px; margin-bottom: 14px; color: var(--lime); }
.profile-booklet .tri-item h4 { font-family: var(--rounded); font-size: 15px; color: var(--white); margin: 0 0 8px 0; }
.profile-booklet .tri-item p { font-size: 13px; color: rgba(255,255,255,0.72); margin: 0; line-height: 1.5; }
.profile-booklet .tri-item:hover { transform: translateY(-4px); border-color: var(--lime); box-shadow: 0 16px 40px -12px rgba(227,254,105,0.35); }
@media (max-width: 700px) { .profile-booklet .tri { grid-template-columns: 1fr; } }

/* ================= PAGE 8 — ERP ROADMAP ================= */

.profile-booklet .center-layout { display: grid; grid-template-columns: 1fr auto 1fr; gap: 40px; align-items: center; position: relative; z-index: 5; }
.profile-booklet .center-layout .col p { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,0.8); }
.profile-booklet .road-graphic { width: 220px; height: 254px; overflow: visible; }
.profile-booklet .road-bed { fill: none; stroke: var(--royal); stroke-width: 16; stroke-linecap: round; opacity: 0.85; }
/* Flowing dash — data moving along the road instead of a static dashed
   outline, plus a bright dot actually walking the route stop to stop. */
.profile-booklet .road-dash { fill: none; stroke: var(--lime); stroke-width: 2; stroke-dasharray: 8 10; stroke-linecap: round; opacity: 0.7; animation: roadFlow 1.4s linear infinite; }
@keyframes roadFlow { to { stroke-dashoffset: -18; } }
.profile-booklet .road-traveler { fill: var(--lime); filter: drop-shadow(0 0 6px rgba(227,254,105,0.85)); }
.profile-booklet .road-stop circle { fill: var(--lime); stroke: var(--navy); stroke-width: 3; }
.profile-booklet .road-stop text { font-family: var(--display); font-size: 13px; fill: var(--navy); text-anchor: middle; }
/* An expanding, fading ring pulsing outward from each stop, staggered so
   they read as a sequence (1→2→3→4) rather than all firing at once. */
.profile-booklet .road-stop .road-stop-pulse {
  fill: none; stroke: var(--lime); stroke-width: 2;
  transform-box: fill-box; transform-origin: center;
  animation: roadStopPulse 2.4s ease-out infinite;
}
.profile-booklet .road-stop-2 .road-stop-pulse { animation-delay: 0.6s; }
.profile-booklet .road-stop-3 .road-stop-pulse { animation-delay: 1.2s; }
.profile-booklet .road-stop-4 .road-stop-pulse { animation-delay: 1.8s; }
@keyframes roadStopPulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.9); opacity: 0; }
}
.profile-booklet .road-label { font-family: var(--rounded); font-size: 11px; font-weight: 700; fill: var(--sky); }
@media (max-width: 700px) { .profile-booklet .center-layout { grid-template-columns: 1fr; text-align: center; } }

/* ================= PAGE 9 — SOCIAL MEDIA ================= */

.profile-booklet .social-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; position: relative; z-index: 5; }
.profile-booklet .content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.profile-booklet .tile {
  aspect-ratio: 1;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s ease;
}
.profile-booklet .tile svg { width: 38%; height: 38%; opacity: 0.9; color: var(--lime); }
.profile-booklet .tile:hover { transform: translateY(-4px); border-color: var(--lime); background: rgba(227,254,105,0.08); }

/* Dashboard-mockup tiles — replacing four identical centered icons with
   four distinct little "product" mockups (a planner grid, an engagement
   panel over the real photo, a performance chart, a settings panel), each
   captioned, closer to an actual dashboard screenshot mosaic. */
.profile-booklet .tile-mock {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  padding: 14px;
  gap: 8px;
  overflow: hidden;
  position: relative;
}
.profile-booklet .mock-caption {
  font-family: var(--rounded); font-weight: 700; font-size: 11px;
  color: var(--white);
  background: rgba(1,21,49,0.6);
  border-radius: 8px;
  padding: 6px 9px;
  align-self: flex-start;
  position: relative; z-index: 2;
}

/* A soft glow breathing behind the whole tile grid — the tiles/glass
   accents already glow individually, the grid as a whole didn't. */
.profile-booklet .content-grid-glow {
  position: absolute;
  z-index: 0;
  top: -8%; left: -10%; right: -10%; bottom: -8%;
  background:
    radial-gradient(ellipse 55% 45% at 25% 20%, rgba(227,254,105,0.35), transparent 70%),
    radial-gradient(ellipse 50% 45% at 80% 75%, rgba(0,131,143,0.3), transparent 70%);
  filter: blur(30px);
  animation: gridGlowPulse 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gridGlowPulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
.profile-booklet .content-grid { position: relative; z-index: 1; }

/* .page.light .tile sets `background` (the shorthand — it resets
   background-image too) at specificity (0,0,4,0); matched here with
   `.page.light` in the selector, otherwise these lose to it silently. */
.profile-booklet .page.light .tile-mock--planner { background: linear-gradient(155deg, var(--navy), var(--navy-deep)); border-color: rgba(227,254,105,0.25); }

/* Window chrome (traffic-light dots + a title) on every mock tile except
   the photo one — this is what actually reads as "a little app window",
   not just colored shapes floating in a card. */
.profile-booklet .mock-chrome { display: flex; align-items: center; gap: 5px; position: relative; z-index: 2; }
.profile-booklet .mock-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(1,21,49,0.18); }
.profile-booklet .mock-chrome-title { font-family: var(--rounded); font-weight: 700; font-size: 10px; color: rgba(1,21,49,0.45); margin-left: 4px; }
.profile-booklet .tile-mock--planner .mock-dot { background: rgba(227,254,105,0.3); }
.profile-booklet .tile-mock--planner .mock-chrome-title { color: rgba(227,254,105,0.6); }
.profile-booklet .mock-chrome--dark .mock-dot { background: rgba(255,255,255,0.35); }
.profile-booklet .mock-live { margin-left: auto; display: flex; align-items: center; gap: 4px; font-family: var(--rounded); font-weight: 700; font-size: 9px; letter-spacing: 0.06em; color: #ff8a8a; }
.profile-booklet .mock-live i { width: 6px; height: 6px; border-radius: 50%; background: #ff5a5a; animation: mockLiveBlink 1.4s ease-in-out infinite; }
@keyframes mockLiveBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* A tiny week-view calendar strip in place of the old plain icon grid —
   day letters with a couple of "scheduled post" chips underneath. */
.profile-booklet .mock-week { display: flex; justify-content: space-between; align-items: flex-start; padding-top: 4px; }
.profile-booklet .mock-day { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.profile-booklet .mock-day-lbl { font-family: var(--rounded); font-weight: 700; font-size: 10px; color: rgba(227,254,105,0.55); }
.profile-booklet .mock-day--today .mock-day-lbl { color: var(--lime); background: rgba(227,254,105,0.18); width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.profile-booklet .mock-post { width: 60%; aspect-ratio: 1; border-radius: 5px; background: rgba(227,254,105,0.35); animation: mockAppPulse 3.2s ease-in-out infinite; }
.profile-booklet .mock-post--b { background: rgba(137,186,215,0.5); animation-delay: -1.6s; }
@keyframes mockAppPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

/* "Next scheduled post" preview card — fills what used to be dead space
   below the week strip so the tile reads as a finished panel instead of
   a calendar row floating in an empty box. */
.profile-booklet .mock-next-post {
  flex: 1;
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(227,254,105,0.18);
  border-radius: 10px;
  padding: 8px;
  margin-top: 8px;
  position: relative; z-index: 2;
}
.profile-booklet .mock-next-thumb {
  flex: none; width: 30px; height: 30px; border-radius: 7px;
  background: linear-gradient(145deg, var(--lime), var(--teal));
  opacity: 0.85;
}
.profile-booklet .mock-next-lines { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.profile-booklet .mock-next-lines span { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.18); }
.profile-booklet .mock-next-lines span:last-child { width: 62%; }
.profile-booklet .mock-next-badge {
  flex: none; font-family: var(--rounded); font-weight: 700; font-size: 8.5px;
  color: var(--lime); background: rgba(227,254,105,0.12);
  border-radius: 6px; padding: 4px 6px;
  white-space: nowrap;
}

/* Growth callout on the chart tile's title bar, plus a highlighted
   endpoint on the line — the chart alone (no headline number) was the
   part of that tile that read as unfinished. */
.profile-booklet .mock-stat-badge {
  margin-left: auto;
  font-family: var(--rounded); font-weight: 700; font-size: 10px;
  color: #1a9e5c;
  background: rgba(26,158,92,0.12);
  border-radius: 6px; padding: 2px 6px;
}
.profile-booklet .mock-chart-dot { fill: var(--lime); filter: drop-shadow(0 0 3px rgba(227,254,105,0.8)); animation: mockDotPulse 1.8s ease-in-out infinite; }
@keyframes mockDotPulse { 0%, 100% { r: 2.6; } 50% { r: 3.6; } }

.profile-booklet .page.light .tile-mock--engage {
  background-image: linear-gradient(rgba(1,21,49,0.35), rgba(1,21,49,0.75)), url('/images/profile/stock/social-media.jpg');
  background-size: cover; background-position: center;
}
.profile-booklet .mock-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%);
  width: 34%; height: 34%;
  background: var(--lime); color: var(--navy);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 0 rgba(227,254,105,0.55);
  animation: mockPlayPulse 2.4s ease-in-out infinite;
}
.profile-booklet .mock-play svg { width: 46%; height: 46%; margin-left: 4%; }
@keyframes mockPlayPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(227,254,105,0.5); }
  50% { box-shadow: 0 0 0 10px rgba(227,254,105,0); }
}
.profile-booklet .mock-bars { display: flex; align-items: flex-end; gap: 3px; height: 20%; position: relative; z-index: 2; }
.profile-booklet .mock-bars span { flex: 1; background: var(--lime); border-radius: 2px; animation: mockBar 1.6s ease-in-out infinite; }
.profile-booklet .mock-bars span:nth-child(odd) { background: var(--sky); }
.profile-booklet .mock-bars span:nth-child(1) { animation-delay: -1.4s; } .profile-booklet .mock-bars span:nth-child(2) { animation-delay: -1.2s; }
.profile-booklet .mock-bars span:nth-child(3) { animation-delay: -1s; } .profile-booklet .mock-bars span:nth-child(4) { animation-delay: -0.8s; }
.profile-booklet .mock-bars span:nth-child(5) { animation-delay: -0.6s; } .profile-booklet .mock-bars span:nth-child(6) { animation-delay: -0.4s; }
.profile-booklet .mock-bars span:nth-child(7) { animation-delay: -0.2s; }
@keyframes mockBar { 0%, 100% { height: 30%; } 50% { height: 100%; } }

.profile-booklet .tile-mock--chart { background: #ffffff; border-color: rgba(1,21,49,0.1); }
.profile-booklet .mock-chart-wrap { flex: 1; display: flex; flex-direction: column; }
/* `.tile svg { width: 38%; height: 38% }` (for the old plain centered
   icon tiles) beats a same-specificity `.mock-line-chart` rule on
   element-selector tie-break — was silently shrinking the chart to 38%
   width, so the line/area only ever occupied the left third of the card
   while the Mon–Sun axis below it spanned the full width. One more class
   in the selector to win outright. */
.profile-booklet .tile-mock--chart .mock-line-chart { flex: 1; width: 100%; height: auto; overflow: visible; }
.profile-booklet .mock-line-chart .mock-grid { stroke: rgba(1,21,49,0.08); stroke-width: 0.6; }
.profile-booklet .mock-today-line { stroke: rgba(1,21,49,0.18); stroke-width: 0.6; stroke-dasharray: 2 2; }
.profile-booklet .mock-line-chart polygon.mock-area { fill: var(--teal); }
.profile-booklet .mock-area--predicted { fill: var(--lime); }
/* Actual (solid, drawn in) continuing into Predicted (dashed, animated
   marching-ants) — one continuous line rather than the chart just
   stopping, so the "predictive" half of "Predictive Performance
   Modeling" actually shows. */
.profile-booklet .mock-line-actual {
  fill: none; stroke: var(--teal); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 90; stroke-dashoffset: 90;
  animation: mockDrawActual 1.6s ease-out forwards;
}
.profile-booklet .mock-line-predicted {
  fill: none; stroke: var(--lime); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 4 3;
  opacity: 0;
  animation: mockDrawPredicted 0.01s 1.6s forwards, mockMarch 1.2s linear 1.6s infinite;
}
@keyframes mockDrawActual { to { stroke-dashoffset: 0; } }
@keyframes mockDrawPredicted { to { opacity: 1; } }
@keyframes mockMarch { to { stroke-dashoffset: -14; } }
.profile-booklet .mock-axis { display: flex; justify-content: space-between; margin-top: 4px; }
.profile-booklet .mock-axis span { font-family: var(--rounded); font-size: 8.5px; color: rgba(1,21,49,0.4); }
.profile-booklet .mock-legend { display: flex; align-items: center; gap: 5px; font-family: var(--rounded); font-size: 9px; color: rgba(1,21,49,0.55); position: relative; z-index: 2; }
.profile-booklet .mock-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); display: inline-block; }
.profile-booklet .mock-legend b { width: 7px; height: 7px; border-radius: 50%; background: transparent; border: 1.4px dashed var(--lime); display: inline-block; margin-left: 8px; font-weight: normal; }
.profile-booklet .tile-mock--chart .mock-caption { background: rgba(1,21,49,0.85); }

.profile-booklet .tile-mock--toggles { background: #ffffff; border-color: rgba(1,21,49,0.1); justify-content: center; gap: 9px; }
.profile-booklet .mock-stat { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; }
.profile-booklet .mock-stat-num { font-family: var(--display); font-size: 20px; color: var(--teal); }
.profile-booklet .mock-stat-lbl { font-family: var(--rounded); font-size: 10px; color: rgba(1,21,49,0.55); }
.profile-booklet .mock-toggle-row { display: flex; align-items: center; gap: 8px; }
.profile-booklet .mock-toggle-ic {
  flex: none; width: 18px; height: 18px; border-radius: 6px;
  background: rgba(0,131,143,0.1); color: var(--teal);
  font-size: 10px; font-weight: 700; line-height: 18px; text-align: center;
}
.profile-booklet .mock-toggle-label { flex: 1; font-family: var(--rounded); font-size: 10.5px; color: rgba(1,21,49,0.75); }
.profile-booklet .mock-toggle { width: 26px; height: 14px; border-radius: 999px; background: rgba(1,21,49,0.15); position: relative; flex: none; }
.profile-booklet .mock-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: left 0.3s ease; }
.profile-booklet .mock-toggle.on { background: var(--teal); }
.profile-booklet .mock-toggle.on::after { left: 14px; }
.profile-booklet .tile-mock--toggles .mock-caption { background: rgba(1,21,49,0.85); align-self: stretch; text-align: center; }
.profile-booklet .badge-lime {
  display: inline-block; margin-top: 20px;
  background: var(--lime); color: var(--navy);
  font-family: var(--rounded); font-weight: 700; font-size: 12.5px;
  border-radius: 999px; padding: 8px 18px;
}
@media (max-width: 700px) { .profile-booklet .social-wrap { grid-template-columns: 1fr; } }

/* ================= PAGE 10 — CLOSING ================= */

.profile-booklet .closing-wrap { position: relative; z-index: 5; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }
.profile-booklet .closing-wrap img { width: min(280px, 50vw); margin-bottom: 18px; filter: brightness(0) invert(1); }
.profile-booklet .closing-wrap h1 { font-size: clamp(28px, 4vw, 50px); margin: 6px 0 0 0; }
.profile-booklet .contact-row { display: flex; gap: 22px; margin-top: 34px; flex-wrap: wrap; justify-content: center; }
.profile-booklet .contact-item {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px; padding: 10px 20px 10px 10px;
  font-family: var(--rounded); font-size: 13.5px;
  transition: all 0.2s ease;
  /* Now an <a> (tel:/mailto:/https: links), was a plain non-interactive
     div -- resetting the browser's default anchor styling (blue,
     underlined) so it keeps looking exactly like it did before. */
  color: inherit; text-decoration: none; cursor: pointer;
}
.profile-booklet .contact-item:hover { border-color: var(--lime); background: rgba(227,254,105,0.08); }
.profile-booklet .contact-icon-badge {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--lime); display: flex; align-items: center; justify-content: center; flex: none;
}
.profile-booklet .contact-icon-badge svg { width: 16px; height: 16px; color: var(--navy); }
.profile-booklet .divider-line { width: 70px; height: 3px; background: var(--lime); margin: 0 auto; }

/* ================= PAGE 11 — CLIENTS + FOOTER ================= */

/* #p11 overrides .page's default centering to justify-content:flex-start
   (see the inline style on that section) so its content packs toward the
   top instead -- but .clients-wrap is that flex column's only real child
   (.brand-mark/.page-index are position:absolute, out of the flow), so
   it just sits at its own natural height with the rest of the 100vh
   slide empty below it. flex:1 here makes it claim that leftover space
   instead of leaving it unused, and margin-top:auto on .marquee-track
   below then pushes just that one piece to the bottom of it -- everything
   above (heading, logos, footer) stays put at the top either way. */
.profile-booklet .clients-wrap { position: relative; z-index: 5; width: 100%; flex: 1; display: flex; flex-direction: column; }
.profile-booklet .clients-head { text-align: center; max-width: 600px; margin: 0 auto 46px auto; }
.profile-booklet .clients-head h1 { font-size: clamp(26px, 3.2vw, 40px); margin: 10px 0 0 0; }
.profile-booklet .marquee-track { width: 100%; overflow: hidden; margin-top: auto; padding-top: 30px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.profile-booklet .marquee-inner { display: flex; width: max-content; gap: 40px; animation: marquee 34s linear infinite; }
.profile-booklet .marquee-track:hover .marquee-inner { animation-play-state: paused; }
.profile-booklet .marquee-inner span.mq-item { font-family: var(--rounded); font-weight: 700; font-size: 16px; color: rgba(255,255,255,0.55); white-space: nowrap; transition: color 0.2s ease; }
.profile-booklet .marquee-inner span.mq-item:hover { color: var(--lime); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Static, non-moving row of real client logos (separate from the
   scrolling text marquee above -- moving too fast to actually look at).
   Redesigned on request (2026-08-18), three rounds:
   1) A deliberate 3x3 grid, not flex-wrap -- flex-wrap at that width
      produced an orphan tile stranded alone on its own row, an accident
      of container width rather than a composed layout.
   2) Full color, no card/box -- removed the white chip background,
      border and grayscale-until-hover filter. Real tradeoff worth
      knowing: several of these source files are opaque JPGs with their
      OWN solid white/black/cream background baked into the image (not
      transparent PNGs), so without a container each logo shows its own
      native background edge directly against this page's dark navy
      rather than blending into it -- a limit of the source photos, not
      something fixable in CSS.
   3) Two lines instead of three, on desktop specifically -- back to
      flex (not grid): CSS Grid does NOT auto-center a partial last row
      (a 4-item second row would sit flush left with empty space to its
      right), but flexbox DOES center each wrapped line independently,
      which is exactly what makes a 5-over-4 split read as a deliberate
      composition instead of a lopsided one. Fixed item width + a
      max-width tuned so precisely 5 fit per line is what forces the
      5/4 split at all -- percentage-based widths would just reflow
      instead of committing to two lines. Kept at 3-per-line on mobile
      (see the breakpoint below) rather than forcing the same 5/4 split
      down to a 390px-wide screen: at that width each logo would only
      get ~60px, too narrow to read the text-heavy ones. */
.profile-booklet .client-logos-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 25px; max-width: 900px; margin: 30px auto 34px auto;
}
.profile-booklet .client-logos-grid .logo-chip {
  display: flex; align-items: center; justify-content: center;
  width: 160px; height: 92px;
  transition: transform 0.3s ease;
}
.profile-booklet .client-logos-grid .logo-chip:hover {
  transform: translateY(-3px);
}
.profile-booklet .client-logos-grid .logo-chip img {
  max-height: 100%; max-width: 100%; width: auto; height: auto;
  object-fit: contain; display: block;
}

.profile-booklet .site-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.14); position: relative; z-index: 5; }
.profile-booklet .footer-copy { font-family: var(--rounded); font-size: 13px; color: rgba(255,255,255,0.55); }
.profile-booklet .footer-copy .accent { color: var(--sky); }
.profile-booklet .footer-social { display: flex; gap: 12px; }
.profile-booklet .footer-social a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); transition: all 0.2s ease; }
.profile-booklet .footer-social a:hover { border-color: var(--lime); color: var(--lime); transform: translateY(-3px); }
.profile-booklet .footer-social svg { width: 16px; height: 16px; }
@media (max-width: 700px) { .profile-booklet .site-footer { flex-direction: column; text-align: center; gap: 16px; } }

@media (max-width: 900px) {
  .profile-booklet .page { padding: 62px 6vw 36px 6vw; overflow-y: visible; }
  .profile-booklet .split, .profile-booklet .split.reverse { grid-template-columns: 1fr; gap: 34px; text-align: center; }
  .profile-booklet .split .textcol, .profile-booklet .split.reverse .textcol { order: 1; }
  .profile-booklet .split .imgcol, .profile-booklet .split.reverse .imgcol { order: 2; }
  .profile-booklet .toc-wrap { grid-template-columns: 1fr; }
  /* Stacking the list above the graphic means this page's height is the
     SUM of both — at the old 120px/70px desktop padding plus a 320px
     graphic, the two together ran to ~1137px inside an 844px viewport
     (35% taller than one screen). Tightened both sides to bring the total
     back close to one screen instead of one and a third. */
  .profile-booklet .toc-left { padding: 68px 6vw 24px 6vw; }
  .profile-booklet .toc-list { gap: 6px; }
  .profile-booklet .toc-list li a { padding: 10px 4px; }
  .profile-booklet .toc-right { min-height: 230px; }

  /* Tighter section spacing so content stops overflowing past 100vh and
     getting clipped/hidden behind the fixed corner buttons — the padding
     and gaps below were tuned for desktop's shorter, wider pages. */
  .profile-booklet .vm-head { margin: 0 auto 26px auto; }
  .profile-booklet .vm-card { padding: 24px; }
  .profile-booklet .vm-grid { gap: 16px; }
  .profile-booklet .tri { gap: 14px; margin: 22px 0; }
  .profile-booklet .tri-item { padding: 18px; }
  .profile-booklet .center-layout { gap: 18px; }
  .profile-booklet .social-wrap { gap: 26px; }
  .profile-booklet .clients-head { margin: 0 auto 26px auto; }
  /* 3 per line here, not desktop's 5/4 split -- see the long comment
     above the base rule for why: 5-per-line only works because there's
     enough width for a 160px tile, which a 390px screen doesn't have. */
  .profile-booklet .client-logos-grid { gap: 12px; max-width: 100%; }
  .profile-booklet .client-logos-grid .logo-chip { width: 100px; height: 56px; }
  .profile-booklet .stat-grid { margin-top: 22px; gap: 24px; }
  .profile-booklet .stat-chips { margin-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .profile-booklet .mascot-wrap, .profile-booklet .mascot-arm, .profile-booklet .mascot-eyes,
  .profile-booklet .mascot-rig, .profile-booklet .mascot-shadow,
  .profile-booklet .marquee-inner,
  .profile-booklet .toc-right::before, .profile-booklet .toc-shimmer, .profile-booklet .toc-particle,
  .profile-booklet .tc-line, .profile-booklet .toc-icon-tile,
  .profile-booklet .p3-frame, .profile-booklet .p3-orbit-dot,
  .profile-booklet .road-dash, .profile-booklet .road-stop-pulse { animation: none; }
  .profile-booklet .mascot-wrap { transition: none; }
  .profile-booklet .reveal { opacity: 1; transform: none; transition: none; }
}