/* ============================================================
   ASSIGNMENT PANEL — Surgical landing improvements
   Layered on top of /styles.css. Touches only:
     1. Safety cards: rounded edges, floating idle animation,
        staggered text reveal on scroll, counter-ready numbers.
     2. Section eyebrows promoted to big bold prominent headings.
     3. Realistic fluffy Persian cat that walks in, sits by the
        book, looks at the viewer, and turns the page on click.
   ============================================================ */


/* ─── 1. SAFETY CARDS — float + rounded + reveal stagger ─────────────── */

.safety-card {
  border-radius: 22px;
  box-shadow:
    0 18px 40px rgba(11, 95, 165, 0.18),
    0 4px 10px rgba(11, 95, 165, 0.08);
  animation: ap-float 6s ease-in-out infinite;
}
.safety-card.zest-bg {
  box-shadow:
    0 18px 40px rgba(228, 111, 46, 0.25),
    0 4px 10px rgba(228, 111, 46, 0.1);
}
.safety-grid .safety-card:nth-child(1)  { animation-delay: 0s;   }
.safety-grid .safety-card:nth-child(2)  { animation-delay: 0.4s; }
.safety-grid .safety-card:nth-child(3)  { animation-delay: 0.8s; }
.safety-grid .safety-card:nth-child(4)  { animation-delay: 1.2s; }
.safety-grid .safety-card:nth-child(5)  { animation-delay: 1.6s; }
.safety-grid .safety-card:nth-child(6)  { animation-delay: 2.0s; }
.safety-grid .safety-card:nth-child(7)  { animation-delay: 2.4s; }
.safety-grid .safety-card:nth-child(8)  { animation-delay: 2.8s; }
.safety-grid .safety-card:nth-child(9)  { animation-delay: 3.2s; }
.safety-grid .safety-card:nth-child(10) { animation-delay: 3.6s; }
.safety-card:hover { animation-play-state: paused; }

@keyframes ap-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.safety-card .safety-icon,
.safety-card h3,
.safety-card p,
.safety-card .safety-stat {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.safety-card.ap-in .safety-icon  { transition-delay: 0.05s; opacity: 1; transform: translateY(0); }
.safety-card.ap-in h3            { transition-delay: 0.18s; opacity: 1; transform: translateY(0); }
.safety-card.ap-in p             { transition-delay: 0.30s; opacity: 1; transform: translateY(0); }
.safety-card.ap-in .safety-stat  { transition-delay: 0.45s; opacity: 1; transform: translateY(0); }


/* ─── 2. SECTION EYEBROWS PROMOTED TO BIG BOLD HEADINGS ─────────────── */

.label,
.label-zest {
  display: block;
  font-family: var(--serif, 'EB Garamond', Georgia, serif);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-transform: none;
  color: var(--ink, #0A1628);
  margin-bottom: 14px;
}
.label-zest {
  color: var(--zest, #E46F2E);
  font-style: italic;
  font-weight: 600;
}
.sec-head .label + .h-1,
.sec-head .label-zest + .h-1,
.contact-left .label + .h-1,
.contact-left .label-zest + .h-1 {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 400;
  font-style: italic;
  color: var(--ink-2, #324A65);
  letter-spacing: -0.005em;
  line-height: 1.35;
  margin-bottom: 18px;
}


/* ─── 3. CAT — side-view, rigged walking SVG, page-turn on click ────── */

.cat {
  /* Wider so the side-view profile reads with all four legs visible */
  width: 280px;
  overflow: visible;
}

/* The whole-cat parent slides smoothly from off-screen left; the legs
   inside the SVG do the actual walking, so no bobs on the parent. */
.cat.ap-pre-walk {
  transform: translateX(-560px);
  opacity: 0;
}
.cat.ap-walk-in {
  animation: ap-cat-walk 4.0s cubic-bezier(0.45, 0, 0.45, 1) forwards;
}
@keyframes ap-cat-walk {
  0%   { transform: translateX(-560px); opacity: 0; }
  6%   { opacity: 1; }
  100% { transform: translateX(0);      opacity: 1; }
}

/* WALKING SVG — rigged. Each leg rotates at its hip (top of its bbox). */
.ap-cat-walk-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.ap-cat-w-leg {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  transition: transform 0.35s ease-out;  /* graceful settle after walk-in */
}

/* TROT GAIT — diagonal pairs swing in opposite phase.
   Pair A = front-left + back-right (these two legs move as one).
   Pair B = front-right + back-left.                                       */
.cat.ap-walk-in .ap-cat-w-leg-fl,
.cat.ap-walk-in .ap-cat-w-leg-br {
  animation: ap-leg-pair-a 0.42s linear infinite;
}
.cat.ap-walk-in .ap-cat-w-leg-fr,
.cat.ap-walk-in .ap-cat-w-leg-bl {
  animation: ap-leg-pair-b 0.42s linear infinite;
}
@keyframes ap-leg-pair-a {
  0%   { transform: rotate(28deg); }                      /* plant forward */
  50%  { transform: rotate(-28deg); }                     /* plant back   */
  75%  { transform: translateY(-4px) rotate(0deg); }      /* swing apex   */
  100% { transform: rotate(28deg); }
}
@keyframes ap-leg-pair-b {
  0%   { transform: rotate(-28deg); }                     /* plant back   */
  25%  { transform: translateY(-4px) rotate(0deg); }      /* swing apex   */
  50%  { transform: rotate(28deg); }                      /* plant forward */
  100% { transform: rotate(-28deg); }
}

/* BODY bobs twice per leg cycle — once for each diagonal pair planting */
.cat.ap-walk-in .ap-cat-w-body {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: ap-cat-w-body-bob 0.42s ease-in-out infinite;
}
@keyframes ap-cat-w-body-bob {
  0%, 50%, 100% { transform: translateY(2px); }   /* legs extended → hip lower */
  25%, 75%      { transform: translateY(0); }     /* legs vertical → hip higher */
}

/* TAIL sways at its own slower cadence, walking or idle. */
.ap-cat-w-tail {
  transform-box: fill-box;
  transform-origin: 100% 60%;
  animation: ap-cat-w-tail-sway 1.4s ease-in-out infinite;
}
@keyframes ap-cat-w-tail-sway {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(8deg); }
}

/* Ground shadow pulses with the body bob during the walk. */
.cat.ap-walk-in::after {
  animation: ap-cat-shadow-walk 0.42s ease-in-out infinite !important;
}
@keyframes ap-cat-shadow-walk {
  0%, 50%, 100% { transform: scale(0.92, 0.85); opacity: 0.5; }
  25%, 75%      { transform: scale(1.05, 0.95); opacity: 0.6; }
}

/* Soft pulsing "click me" tooltip when idle, more visible than the original */
.cat-tip {
  background: #1F3553 !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-weight: 500;
  border-radius: 100px !important;
  opacity: 0.95 !important;
  pointer-events: none;
  box-shadow: 0 8px 20px rgba(11, 95, 165, 0.25);
  animation: ap-tip-bob 2.6s ease-in-out infinite;
}
.cat-tip::after { display: none; }      /* drop the original triangle */
.cat:not(:hover) .cat-tip { opacity: 0.85 !important; }
@keyframes ap-tip-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-4px); }
}

/* Hover: cat slightly larger, hint at "click me" */
.cat:hover .cat-svg-real {
  transform: scale(1.05) translateY(-2px);
  filter: drop-shadow(0 12px 20px rgba(228, 111, 46, 0.35));
}
.cat-svg-real {
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    filter   0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.18));
}

/* Pounce when clicked — cat lunges toward the book then comes back */
.cat.ap-pounce {
  animation: ap-cat-pounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ap-cat-pounce {
  0%   { transform: translateX(0) scale(1); }
  20%  { transform: translateX(-12px) scale(1.04); }
  55%  { transform: translateX(-26px) scale(1.08) rotate(-3deg); }
  85%  { transform: translateX(-8px)  scale(1.02); }
  100% { transform: translateX(0)     scale(1); }
}

/* Soft ground shadow under the cat */
.cat::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -8px;
  height: 14px;
  background: rgba(0,0,0,0.18);
  border-radius: 50%;
  filter: blur(4px);
  pointer-events: none;
  animation: ap-cat-shadow 2.6s ease-in-out infinite;
}
@keyframes ap-cat-shadow {
  0%, 100% { transform: scale(1, 1);     opacity: 0.55; }
  50%      { transform: scale(0.92, 0.85); opacity: 0.4; }
}

/* Subtle breathing for the whole cat body at rest */
.cat-svg-real {
  transform-origin: 50% 90%;
}
.cat:not(.ap-walk-in):not(.ap-pounce) .ap-cat-w-body {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: ap-cat-breathe 2.6s ease-in-out infinite;
}
@keyframes ap-cat-breathe {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50%      { transform: translateY(-2px) scaleY(1.012); }
}


/* ─── 4. SAFETY SHOWCASE — shuffling deck on left with per-card animated
       infographic + manual next arrow, stock-photo pane on right.
       Solid colours only — no gradients anywhere here.                ─── */

.safety-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  perspective: 1600px;
  perspective-origin: 50% 35%;
}

/* DECK + arrow wrapper holds the absolutely-positioned arrow at the bottom */
.safety-deck-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.safety-deck {
  position: relative;
  height: 520px;            /* taller so the infographic has room */
  transform-style: preserve-3d;
}

/* Cards: absolute-positioned, transitions all on the same curve so the
   shuffle reads as one continuous motion rather than separate steps. */
.safety-deck .safety-card {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
  transition:
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    opacity   0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.55s ease;
  animation: none !important;
}

/* Force inner content visible (overrides the grid-mode reveal stagger). */
.safety-deck .safety-card .safety-icon,
.safety-deck .safety-card h3,
.safety-deck .safety-card p,
.safety-deck .safety-card .safety-anim,
.safety-deck .safety-card .safety-stat {
  opacity: 1;
  transform: none;
  transition: none;
}

/* The infographic body — fills the middle of the card. */
.safety-deck .safety-card .safety-anim {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 18px -6px 14px;
  min-height: 150px;
}
.safety-deck .safety-card .safety-anim svg {
  width: 100%;
  max-width: 280px;
  height: auto;
  max-height: 170px;
}

/* Position 0 — front card, fully visible. */
.safety-deck .safety-card[data-pos="0"] {
  transform: translateY(0) translateZ(0) rotate(0);
  opacity: 1;
  z-index: 30;
  box-shadow:
    0 28px 60px rgba(11, 95, 165, 0.20),
    0 8px 20px rgba(11, 95, 165, 0.10);
  pointer-events: auto;
}

/* Positions 1-3 — cards peeking behind the front. */
.safety-deck .safety-card[data-pos="1"] {
  transform: translateY(10px) translateZ(-30px) rotate(-1.6deg);
  opacity: 1;
  z-index: 20;
  box-shadow: 0 18px 36px rgba(11, 95, 165, 0.12);
  pointer-events: none;
}
.safety-deck .safety-card[data-pos="2"] {
  transform: translateY(20px) translateZ(-60px) rotate(2deg);
  opacity: 0.95;
  z-index: 19;
  box-shadow: 0 12px 24px rgba(11, 95, 165, 0.08);
  pointer-events: none;
}
.safety-deck .safety-card[data-pos="3"] {
  transform: translateY(30px) translateZ(-90px) rotate(-1deg);
  opacity: 0.78;
  z-index: 18;
  box-shadow: 0 8px 16px rgba(11, 95, 165, 0.06);
  pointer-events: none;
}
.safety-deck .safety-card[data-pos="hidden"] {
  transform: translateY(38px) translateZ(-120px) rotate(0);
  opacity: 0;
  z-index: 10;
  pointer-events: none;
}
.safety-deck .safety-card[data-pos="leaving"] {
  transform: translateY(-220px) translateZ(60px) rotate(-9deg);
  opacity: 0;
  z-index: 40;
  pointer-events: none;
  transition:
    transform 0.7s cubic-bezier(0.55, 0, 0.78, 0.2),
    opacity   0.5s cubic-bezier(0.55, 0, 0.78, 0.2);
}

/* Inner stagger — text fades up when a card lands at the front. */
.safety-card.is-just-arrived .safety-icon,
.safety-card.is-just-arrived h3,
.safety-card.is-just-arrived p,
.safety-card.is-just-arrived .safety-anim,
.safety-card.is-just-arrived .safety-stat {
  animation: ap-card-line-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.safety-card.is-just-arrived .safety-icon { animation-delay: 0.05s; }
.safety-card.is-just-arrived h3            { animation-delay: 0.12s; }
.safety-card.is-just-arrived p             { animation-delay: 0.20s; }
.safety-card.is-just-arrived .safety-anim  { animation-delay: 0.28s; }
.safety-card.is-just-arrived .safety-stat  { animation-delay: 0.38s; }
@keyframes ap-card-line-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* DECK CONTROLS — proper UI strip below the deck.
   Counter on left, dot indicators in the middle, next button on the right.
   Reads as a deliberate control, not a stray button. */

.safety-controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
  padding: 12px 18px;
  background: #FAF8F3;
  border-radius: 100px;
  border: 1px solid rgba(11, 95, 165, 0.14);
  box-shadow: 0 6px 18px rgba(11, 95, 165, 0.08);
}

/* "1 / 10" counter — serif italic, mirrors the heading style */
.safety-count {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  font-style: italic;
  color: #0A1628;
  letter-spacing: -0.01em;
  padding: 0 4px 0 6px;
  min-width: 56px;
}
.safety-count [data-safety-current] {
  font-size: 22px;
  color: #E46F2E;
}
.safety-count .safety-count-sep {
  color: rgba(11, 95, 165, 0.3);
  margin: 0 2px;
}
.safety-count .safety-count-total {
  color: rgba(11, 95, 165, 0.65);
}

/* Dot row — 10 small clickable indicators centred between counter and button */
.safety-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.safety-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(11, 95, 165, 0.2);
  cursor: pointer;
  transition:
    background-color 0.25s ease,
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.safety-dot:hover {
  background: rgba(11, 95, 165, 0.5);
  transform: scale(1.2);
}
.safety-dot.is-active {
  background: #E46F2E;
  width: 26px;       /* the active dot stretches into a pill */
  border-radius: 6px;
}

/* Next button — full-width, prominent, matches the rest of the site's CTAs */
.safety-next-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 22px;
  background: #0B5FA5;
  color: #FAF8F3;
  border: 0;
  border-radius: 100px;
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(11, 95, 165, 0.28);
  transition:
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.22s ease,
    box-shadow 0.22s ease;
}
.safety-next-btn svg {
  width: 16px;
  height: 16px;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.safety-next-btn:hover {
  background: #0A1628;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(11, 95, 165, 0.35);
}
.safety-next-btn:hover svg {
  transform: translateX(5px);
}
.safety-next-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(11, 95, 165, 0.22);
}
.safety-next-btn:focus-visible {
  outline: 2px solid #E46F2E;
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .safety-controls {
    grid-template-columns: 1fr;
    border-radius: 22px;
    gap: 14px;
    padding: 16px 18px;
  }
  .safety-count, .safety-next-btn { justify-self: center; }
  .safety-next-btn { width: 100%; justify-content: center; }
}

/* PER-CARD INFOGRAPHIC ANIMATIONS — each runs only while its card is at
   the front. data-pos="0" gates the keyframes so they don't burn cycles
   for cards the visitor can't see.                                    */

/* 1. Redaction sweep */
@keyframes anim-redact {
  0%, 5%   { width: 0; }
  45%      { width: 142px; }
  80%, 100% { width: 142px; opacity: 0.92; }
  85%      { opacity: 0.92; }
  100%     { width: 142px; opacity: 0; }
}
.safety-card[data-pos="0"] .anim-redact-bar {
  animation: anim-redact 3.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* 2. PhDs caps fade in one by one */
@keyframes anim-cap-pop {
  0%, 10% { opacity: 0; transform: translateY(8px); }
  20%, 100% { opacity: 1; transform: translateY(0); }
}
.safety-card[data-pos="0"] .anim-cap-1 { animation: anim-cap-pop 3.2s 0.0s ease-out infinite; }
.safety-card[data-pos="0"] .anim-cap-2 { animation: anim-cap-pop 3.2s 0.3s ease-out infinite; }
.safety-card[data-pos="0"] .anim-cap-3 { animation: anim-cap-pop 3.2s 0.6s ease-out infinite; }
.safety-card[data-pos="0"] .anim-cap-4 { animation: anim-cap-pop 3.2s 0.9s ease-out infinite; }
.safety-card .anim-cap { transform-origin: 50% 100%; transform-box: fill-box; opacity: 0; }

/* 3. Checkmark draw */
.safety-card .anim-check {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
}
@keyframes anim-check-draw {
  0%, 10% { stroke-dashoffset: 60; }
  45%, 100% { stroke-dashoffset: 0; }
}
.safety-card[data-pos="0"] .anim-check {
  animation: anim-check-draw 2.6s ease-out infinite;
}

/* 4. Citations tick in sequence */
@keyframes anim-cite-in {
  0%, 8% { opacity: 0; transform: translateX(-12px); }
  18%, 100% { opacity: 1; transform: translateX(0); }
}
.safety-card .anim-cite { transform-box: fill-box; opacity: 0; }
.safety-card[data-pos="0"] .anim-cite-1 { animation: anim-cite-in 3.6s 0.0s ease-out infinite; }
.safety-card[data-pos="0"] .anim-cite-2 { animation: anim-cite-in 3.6s 0.45s ease-out infinite; }
.safety-card[data-pos="0"] .anim-cite-3 { animation: anim-cite-in 3.6s 0.9s ease-out infinite; }

/* 5. Donut gauge fills to 2.4% */
.safety-card .anim-gauge {
  stroke-dasharray: 314;   /* circumference of r=50 */
  stroke-dashoffset: 314;
}
@keyframes anim-gauge-fill {
  0%, 5%  { stroke-dashoffset: 314; }
  50%     { stroke-dashoffset: 306.5; }  /* 2.4% filled */
  90%, 100% { stroke-dashoffset: 306.5; }
}
.safety-card[data-pos="0"] .anim-gauge {
  animation: anim-gauge-fill 3.4s ease-out infinite;
}

/* 6. Timeline rail draws and marker rides it */
@keyframes anim-rail-draw {
  0%, 5%  { stroke-dasharray: 0 180; }
  60%, 100% { stroke-dasharray: 180 0; }
}
.safety-card[data-pos="0"] .anim-rail {
  animation: anim-rail-draw 3.2s cubic-bezier(0.4, 0, 0.4, 1) infinite;
  stroke-dasharray: 0 180;
}
@keyframes anim-marker-ride {
  0%, 5%   { cx: 20; }
  60%, 100% { cx: 200; }
}
.safety-card[data-pos="0"] .anim-marker {
  animation: anim-marker-ride 3.2s cubic-bezier(0.4, 0, 0.4, 1) infinite;
}

/* 7. Book page flip */
.safety-card .anim-page-flip {
  transform-origin: 110px 80px;
  transform-box: fill-box;
}
@keyframes anim-page-flip {
  0%, 30% { transform: rotateY(0deg); }
  65%     { transform: rotateY(-160deg); }
  100%    { transform: rotateY(-160deg); }
}
.safety-card[data-pos="0"] .anim-page-flip {
  animation: anim-page-flip 3.6s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}

/* 8. Drafts stack in one by one */
@keyframes anim-draft-in {
  0%, 5%  { opacity: 0; transform: translateY(-8px); }
  20%, 100% { opacity: 1; transform: translateY(0); }
}
.safety-card .anim-draft { opacity: 0; transform-box: fill-box; }
.safety-card[data-pos="0"] .anim-draft-1 { animation: anim-draft-in 3.6s 0.0s ease-out infinite; }
.safety-card[data-pos="0"] .anim-draft-2 { animation: anim-draft-in 3.6s 0.4s ease-out infinite; }
.safety-card[data-pos="0"] .anim-draft-3 { animation: anim-draft-in 3.6s 0.8s ease-out infinite; }

/* 9. 50/50 bars fill */
@keyframes anim-fill-50 {
  0%, 5%  { width: 0; }
  45%, 100% { width: 90px; }
}
@keyframes anim-fill-50-late {
  0%, 30% { width: 0; }
  70%, 100% { width: 90px; }
}
.safety-card[data-pos="0"] .anim-fill-1 {
  animation: anim-fill-50 3.2s ease-out infinite;
}
.safety-card[data-pos="0"] .anim-fill-2 {
  animation: anim-fill-50-late 3.2s ease-out infinite;
}

/* 10. Instalments tick on */
@keyframes anim-inst-in {
  0%, 5%  { opacity: 0; transform: scale(0.4); }
  20%, 100% { opacity: 1; transform: scale(1); }
}
.safety-card .anim-inst { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
.safety-card[data-pos="0"] .anim-inst-1 { animation: anim-inst-in 3.6s 0.0s ease-out infinite; }
.safety-card[data-pos="0"] .anim-inst-2 { animation: anim-inst-in 3.6s 0.4s ease-out infinite; }
.safety-card[data-pos="0"] .anim-inst-3 { animation: anim-inst-in 3.6s 0.8s ease-out infinite; }

/* PHOTO PANE ────────────────────────────────────────────────────────── */
.safety-photo-pane {
  position: relative;
}
.safety-photo-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 28px;
  overflow: hidden;
  background: #F2D199;    /* solid warm fallback if photos fail to load */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 24px 48px rgba(228, 111, 46, 0.18),
    0 6px 16px rgba(228, 111, 46, 0.10);
}
.safety-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.safety-photo.is-active {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 900px) {
  .safety-showcase {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .safety-photo-frame { max-width: 420px; margin: 0 auto; }
  .safety-deck { height: 480px; }
  .safety-next-btn { align-self: center; }
}


/* ─── 5. HOW IT WORKS — horizontal step infographic with animated road ── */

.how-flow {
  position: relative;
  max-width: 1180px;
  margin: 60px auto 0;
  padding: 30px 20px 0;
}

/* Decorative road SVG sits behind the steps and draws itself when the
   section reveals. Ghost dashed path + active gradient path. */
.how-road {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  width: 100%;
  height: 180px;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.how-road-active {
  /* Path length is roughly 1240 for the wave; over-allocate so dash math
     hides cleanly until JS measures and corrects. */
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  transition: stroke-dashoffset 3.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.how-flow.is-revealed .how-road-active {
  stroke-dashoffset: 0;
}
.how-road-dot {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
.how-flow.is-revealed .how-road-dot {
  opacity: 1;
  animation: how-road-dot-move 3.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes how-road-dot-move {
  0%   { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}

.how-steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.how-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 8px;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.how-flow.is-revealed .how-step:nth-child(1) { transition-delay: 0.15s; opacity: 1; transform: translateY(0); }
.how-flow.is-revealed .how-step:nth-child(2) { transition-delay: 0.85s; opacity: 1; transform: translateY(0); }
.how-flow.is-revealed .how-step:nth-child(3) { transition-delay: 1.55s; opacity: 1; transform: translateY(0); }
.how-flow.is-revealed .how-step:nth-child(4) { transition-delay: 2.25s; opacity: 1; transform: translateY(0); }
.how-flow.is-revealed .how-step:nth-child(5) { transition-delay: 2.95s; opacity: 1; transform: translateY(0); }

.how-step-circle {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: #FFF6E0;
  border: 2px solid rgba(11, 95, 165, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  box-shadow:
    0 12px 28px rgba(11, 95, 165, 0.15),
    inset 0 1px 0 rgba(255,255,255,0.7);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.how-step:hover .how-step-circle {
  transform: translateY(-4px) scale(1.04);
  box-shadow:
    0 18px 36px rgba(11, 95, 165, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.8);
}
.how-step-circle svg {
  width: 38px;
  height: 38px;
  color: #0B5FA5;
}
.how-step-num {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #E46F2E;
  color: #FFFFFF;
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 12px rgba(228, 111, 46, 0.35);
}
.how-step-title {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 21px;
  font-weight: 600;
  color: var(--ink, #0A1628);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.how-step-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2, #324A65);
  max-width: 200px;
  margin-bottom: 10px;
}
.how-step-meta {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 12px;
  color: #E46F2E;
  font-weight: 600;
  padding: 4px 10px;
  background: rgba(228, 111, 46, 0.10);
  border-radius: 100px;
}

@media (max-width: 900px) {
  .how-steps {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .how-road { display: none; }
  .how-step-desc { max-width: 320px; }
}


/* ─── 6. PORTAL PITCH — dark premium section with mocked live dashboard.
       Visually distinct from CareerPanel (which is light/cream): deep navy
       with orange glow, glassy panels, animated live indicators.        ── */

.portal-pitch {
  position: relative;
  background: #0A1628;       /* solid navy — no gradients */
  padding: 100px 0 130px;
  overflow: hidden;
  color: #F0F5FA;
}
.portal-pitch::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: none;
  pointer-events: none;
}
.portal-pitch-bg .portal-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.portal-orb-1 {
  width: 380px; height: 380px;
  background: rgba(228, 111, 46, 0.25);
  top: -120px; right: -60px;
  animation: portal-orb-drift 14s ease-in-out infinite;
}
.portal-orb-2 {
  width: 320px; height: 320px;
  background: rgba(11, 95, 165, 0.35);
  bottom: -100px; left: -80px;
  animation: portal-orb-drift 16s ease-in-out infinite reverse;
}
@keyframes portal-orb-drift {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(40px, 30px); }
}

.portal-pitch-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 72px;
  align-items: center;
}

/* ── LEFT — copy, features, CTAs ────────────────────────────────────── */

.portal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  background: rgba(228, 111, 46, 0.14);
  color: #FFB37A;
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  font-weight: 600;
  border-radius: 100px;
  border: 1px solid rgba(228, 111, 46, 0.3);
  margin-bottom: 22px;
}
.portal-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 10px #10B981;
  animation: portal-pulse 1.6s ease-in-out infinite;
}
@keyframes portal-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.5); }
}

.portal-h {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: clamp(40px, 5.5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 22px 0;
  color: #FFFFFF;
}
.portal-h em {
  font-style: italic;
  color: #FFB37A;
}
.portal-sub {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(240, 245, 250, 0.78);
  margin-bottom: 36px;
  max-width: 520px;
}

.portal-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 36px;
}
.portal-feat {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  transition: background 0.3s ease, transform 0.3s ease;
}
.portal-feat:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-3px);
}
.portal-feat-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #E46F2E;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(228, 111, 46, 0.35);
}
.portal-feat-icon svg {
  width: 18px;
  height: 18px;
  color: #FFFFFF;
}
.portal-feat-title {
  font-size: 14.5px;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 3px;
}
.portal-feat-desc {
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(240, 245, 250, 0.62);
}

.portal-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.btn-portal-primary,
.btn-portal-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.2s ease;
}
.btn-portal-primary {
  background: #E46F2E;
  color: #FFFFFF;
  box-shadow: 0 8px 22px rgba(228, 111, 46, 0.4);
  border: none;
}
.btn-portal-primary svg { width: 14px; height: 14px; }
.btn-portal-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(228, 111, 46, 0.55);
}
.btn-portal-ghost {
  background: transparent;
  color: #F0F5FA;
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.btn-portal-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ── RIGHT — mocked browser-framed dashboard ────────────────────────── */

.portal-dash {
  position: relative;
  padding-top: 30px;  /* leave room for the floating notif chip */
}
.portal-dash-frame {
  background: #FFFFFF;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.5),
    0 12px 30px rgba(11, 95, 165, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transform: perspective(1400px) rotateY(-4deg) rotateX(2deg);
  transform-origin: 50% 50%;
}
.portal-dash-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  background: #E5E7EB;
  border-bottom: 1px solid #D1D5DB;
}
.portal-dash-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-red    { background: #FF5F57; }
.dot-yellow { background: #FEBC2E; }
.dot-green  { background: #28C840; }
.dot-blue   { background: #0B5FA5; }
.dot-orange { background: #E46F2E; }
.portal-dash-url {
  margin-left: 16px;
  font-size: 12px;
  color: #6B7280;
  font-family: ui-monospace, monospace;
}

.portal-dash-body {
  padding: 22px 24px 24px;
  color: #0A1628;
}
.portal-dash-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.portal-dash-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #1F3553;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
}
.portal-dash-greet {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
}
.portal-dash-sub {
  font-size: 12px;
  color: #6B7280;
  margin-top: 1px;
}
.portal-dash-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(16, 185, 129, 0.12);
  color: #10B981;
  font-size: 12px;
  font-weight: 600;
  border-radius: 100px;
}
.portal-dash-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
  animation: portal-pulse 1.6s ease-in-out infinite;
}

.portal-dash-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.portal-dash-stat {
  background: #FAF8F3;
  border: 1px solid #E5E7EB;
  padding: 12px 14px;
  border-radius: 10px;
}
.portal-dash-stat .n {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  color: #0A1628;
  letter-spacing: -0.02em;
}
.portal-dash-stat .n small {
  font-size: 14px;
  font-weight: 600;
}
.portal-dash-stat .l {
  font-size: 10.5px;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

.portal-dash-order {
  background: #FFF6E0;
  border: 1px solid rgba(228, 111, 46, 0.25);
  border-radius: 12px;
  padding: 14px 14px;
  margin-bottom: 16px;
}
.portal-dash-order-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.portal-dash-order-title {
  font-weight: 600;
  font-size: 14px;
  color: #0A1628;
}
.portal-dash-order-badge {
  padding: 3px 10px;
  border-radius: 100px;
  background: #E46F2E;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
}
.portal-dash-progress {
  height: 6px;
  background: rgba(11, 95, 165, 0.14);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 7px;
}
.portal-dash-progress-bar {
  height: 100%;
  background: #E46F2E;
  border-radius: 100px;
  width: 75%;
  animation: portal-progress-grow 2.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes portal-progress-grow {
  from { width: 0; }
  to   { width: 75%; }
}
.portal-dash-order-meta {
  font-size: 11.5px;
  color: #6B7280;
}

.portal-dash-feed {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.portal-dash-feed-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #FAF8F3;
  border-radius: 8px;
  font-size: 12.5px;
  color: #0A1628;
}
.portal-dash-feed-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.portal-dash-feed-text {
  flex: 1;
}
.portal-dash-feed-time {
  font-size: 11px;
  color: #6B7280;
  font-weight: 500;
  flex-shrink: 0;
}

/* Floating notification chip on top-left of the dashboard frame */
.portal-notif {
  position: absolute;
  top: 0;
  left: -34px;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 12px 16px 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.35),
    0 4px 10px rgba(11, 95, 165, 0.2);
  z-index: 2;
  animation: portal-notif-float 3.6s ease-in-out infinite;
}
.portal-notif-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #10B981;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.4);
}
.portal-notif-icon svg { width: 16px; height: 16px; }
.portal-notif-title {
  font-size: 13px;
  font-weight: 600;
  color: #0A1628;
}
.portal-notif-sub {
  font-size: 11px;
  color: #6B7280;
  margin-top: 2px;
}
@keyframes portal-notif-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

@media (max-width: 900px) {
  .portal-pitch-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .portal-dash-frame {
    transform: none;
  }
  .portal-features {
    grid-template-columns: 1fr;
  }
  .portal-notif {
    left: 10px;
  }
}


/* ─── Reduced-motion respect ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .safety-card,
  .cat,
  .cat-svg-real,
  .ap-cat-w-leg,
  .ap-cat-w-body,
  .ap-cat-w-tail,
  .cat::after,
  .cat-tip { animation: none !important; }
  .cat.ap-pre-walk { transform: none; opacity: 1; }
}