/* Base Styles */
:root {
  --bg-primary: #0f172a;
  --bg-secondary: #111827;
  --accent: #38bdf8;
  --accent-soft: rgba(56, 189, 248, 0.15);
  --text-primary: #f9fafb;
  --text-muted: #94a3b8;
  --card-border: rgba(148, 163, 184, 0.2);
  --shadow-soft: 0 25px 50px -12px rgba(15, 23, 42, 0.55);
  --shadow-card: 0 20px 40px rgba(15, 23, 42, 0.45);
  --max-width: 1100px;
  --layer-offset: translate3d(0, 0, 0);
  --transition-base: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Manrope", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-primary);
  background: radial-gradient(circle at top, rgba(56, 189, 248, 0.1), transparent 55%),
    radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.12), transparent 40%),
    linear-gradient(135deg, var(--bg-primary) 0%, #0b1120 50%, #020617 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--accent);
}

img {
  max-width: 100%;
  display: block;
}

main {
  display: block;
  flex: 1 0 auto;
}

.site-footer {
  margin-top: auto;
}

/* Layout */
.wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.75rem;
}

header.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(2, 6, 23, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0;
}

.brand {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--text-primary);
}

nav.primary-nav ul {
  display: flex;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav.primary-nav a {
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  position: relative;
  padding-bottom: 0.25rem;
}

nav.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

nav.primary-nav a:focus::after,
nav.primary-nav a:hover::after,
nav.primary-nav a.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.hero {
  padding: 6rem 0 5rem;
  position: relative;
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem;
  align-items: center;
}

.hero-title {
  font-size: clamp(2.75rem, 5vw, 3.8rem);
  line-height: 1.1;
  margin: 0;
  font-weight: 700;
}

.hero-highlight {
  color: var(--accent);
  display: inline-block;
}

.hero-rotator-container {
  display: block;
  text-align: left;
  margin-top: 0.2em;
}

.hero-rotator {
  --rotator-duration: 0.82s;
  --rotator-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --rotator-depth: clamp(8px, calc(var(--rotator-width, 0px) / 3), 32px);
  display: inline-block;
  position: relative;
  perspective: 1100px;
  max-width: 100%;
  overflow: visible;
}

.hero-rotator__stage {
  position: relative;
  display: inline-grid;
  align-items: baseline;
  justify-items: start;
  min-width: var(--rotator-width, auto);
  min-height: var(--rotator-height, 1.2em);
  max-width: 100%;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--rotator-depth) * -1));
  will-change: transform;
}

.hero-rotator__face {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-start;
  line-height: inherit;
  word-break: keep-all;
  overflow-wrap: normal;
  white-space: nowrap;
  max-width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-origin: center;
  transition: transform var(--rotator-duration) var(--rotator-ease),
    opacity var(--rotator-duration) var(--rotator-ease);
  opacity: 1;
  will-change: transform, opacity;
}

.hero-rotator__face--front {
  transform: rotateY(0deg) translateZ(var(--rotator-depth));
}

.hero-rotator__face--back {
  transform: rotateY(-90deg) translateZ(var(--rotator-depth));
  opacity: 0;
}

.hero-rotator.is-animating .hero-rotator__face--front {
  transform: rotateY(90deg) translateZ(var(--rotator-depth));
  opacity: 0;
}

.hero-rotator.is-animating .hero-rotator__face--back {
  transform: rotateY(0deg) translateZ(var(--rotator-depth));
  opacity: 1;
}

/* Mobile-first responsive optimizations */
@media (max-width: 768px) {
  .hero-rotator {
    --rotator-duration: 0.6s;
    --rotator-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --rotator-depth: clamp(4px, calc(var(--rotator-width, 0px) / 4), 16px);
    font-size: inherit;
  }
  
  .hero-rotator__stage {
    transform: translateZ(calc(var(--rotator-depth) * -0.75));
  }
  
  .hero-rotator__face {
    transform-origin: center center;
    font-size: inherit;
    line-height: inherit;
    /* Use 2D transforms on mobile for better performance */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  
  .hero-rotator__face--front {
    transform: rotateY(0deg) translateZ(calc(var(--rotator-depth) * 0.75));
  }

  .hero-rotator__face--back {
    transform: rotateY(-90deg) translateZ(calc(var(--rotator-depth) * 0.75));
  }

  .hero-rotator.is-animating .hero-rotator__face--front {
    transform: rotateY(90deg) translateZ(calc(var(--rotator-depth) * 0.75));
  }

  .hero-rotator.is-animating .hero-rotator__face--back {
    transform: rotateY(0deg) translateZ(calc(var(--rotator-depth) * 0.75));
  }
  
  /* Ensure hero title remains responsive */
  .hero-title {
    font-size: clamp(2rem, 7vw, 2.75rem);
    line-height: 1.15;
  }
}

/* Extra small screens optimization */
@media (max-width: 480px) {
  .hero-rotator {
    --rotator-duration: 0.5s;
    --rotator-depth: 4px;
    /* Fallback to 2D on very small screens for maximum performance */
    perspective: none;
  }
  
  .hero-rotator__stage {
    transform: none;
    transform-style: flat;
    -webkit-transform-style: flat;
  }
  
  .hero-rotator__face {
    transform-style: flat;
    -webkit-transform-style: flat;
  }
  
  .hero-rotator__face--front {
    transform: translateX(0);
  }

  .hero-rotator__face--back {
    transform: translateX(100%);
  }

  .hero-rotator.is-animating .hero-rotator__face--front {
    transform: translateX(-100%);
  }

  .hero-rotator.is-animating .hero-rotator__face--back {
    transform: translateX(0);
  }
  
  .hero-title {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
  }
}

/* High-DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .hero-rotator__face {
    /* Improve text rendering on high-DPI screens */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
}

/* Performance fallback for low-end devices */
@media (max-width: 320px) {
  .hero-rotator {
    /* Completely disable 3D transforms on very small/old devices */
    perspective: none;
    --rotator-duration: 0.3s;
  }
  
  .hero-rotator__stage {
    transform: none;
    transform-style: flat;
    -webkit-transform-style: flat;
  }
  
  .hero-rotator__face {
    transform-style: flat;
    -webkit-transform-style: flat;
    transition: opacity var(--rotator-duration) ease;
  }
  
  .hero-rotator__face--front {
    transform: none;
    opacity: 1;
  }

  .hero-rotator__face--back {
    transform: none;
    opacity: 0;
  }

  .hero-rotator.is-animating .hero-rotator__face--front {
    transform: none;
    opacity: 0;
  }

  .hero-rotator.is-animating .hero-rotator__face--back {
    transform: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-rotator__stage,
  .hero-rotator__face {
    transition: none !important;
  }
}

.hero-subtitle {
  margin-top: 1.25rem;
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 32ch;
}

/* Full stop divider between headline and subtitle. Separate element so it doesn't flow with rotating text. */

.hero-fullstop {
  display: block; /* force own line between title and subtitle */
  /* keep visual appearance identical to original punctuation: inherit font and color from headline */
  /* Match the hero title sizing so the full stop is identical to apply page */
  font-size: clamp(2.75rem, 5vw, 3.8rem);
  color: inherit;
  margin: 0.6rem 0 0 0; /* vertical spacing; left aligned with headline */
  line-height: 1.1;
  font-weight: 700;
  width: auto;
  text-align: left; /* align to the same left edge as the headline */
  pointer-events: none; /* decorative */
}

.hero-actions {
  margin-top: 2.5rem;
  display: flex;
  gap: 1rem;
}

.button {
  border: 1px solid transparent;
  padding: 0.85rem 1.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  background: linear-gradient(135deg, var(--accent) 0%, #1d4ed8 100%);
  color: #020617;
  border-radius: 0.4rem;
  transition: var(--transition-base);
  box-shadow: var(--shadow-card);
}

.button.secondary {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: var(--text-primary);
  box-shadow: none;
}

.button:hover {
  transform: translateY(-4px);
  box-shadow: 0 32px 60px -24px rgba(56, 189, 248, 0.65);
}

.button.secondary:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.hero-visual {
  position: relative;
  perspective: 1200px;
}

.layer-stack {
  display: grid;
  gap: 1.5rem;
}

.layer-card {
  background: var(--bg-secondary);
  border: 1px solid var(--card-border);
  padding: 2rem;
  border-radius: 0.6rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: var(--transition-base);
  transform: translate3d(0, 0, 0);
}

.layer-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.08), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.layer-card:hover {
  transform: translate3d(-10px, -10px, 0) rotate3d(1, 1, 0, 4deg);
}

.layer-card:hover::after {
  opacity: 1;
}

.layer-title {
  font-size: 1.15rem;
  margin: 0 0 0.75rem;
}

.layer-text {
  color: var(--text-muted);
  line-height: 1.6;
}

.section {
  padding: 5rem 0;
  position: relative;
}

.rsvp-banner {
  padding: 1.5rem 0 0;
}

.rsvp-banner__inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.16), rgba(14, 165, 233, 0.05));
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 20px 40px rgba(8, 18, 44, 0.45);
}

.rsvp-banner__message {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.rsvp-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.rsvp-banner__actions .button {
  min-width: 96px;
}

@media (min-width: 640px) {
  .rsvp-banner__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .rsvp-banner__message {
    font-size: 1.15rem;
  }
}

.section-heading {
  margin-bottom: 3rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: end;
}

.section-title {
  font-size: clamp(2rem, 3vw, 2.5rem);
  margin: 0;
}

.section-subtitle {
  color: var(--text-muted);
  margin: 0;
  max-width: 40ch;
}

.storyline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  justify-items: start;
}

.story-card {
  padding: 1.75rem 1.75rem 1.85rem;
  border-radius: 0.75rem;
  border: 1px solid var(--card-border);
  background: linear-gradient(160deg, rgba(56, 189, 248, 0.06), rgba(15, 23, 42, 0.8));
  box-shadow: var(--shadow-soft);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  align-items: flex-start;
  width: min(100%, 320px);
}

.story-card::before {
  content: attr(data-step);
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.story-card h3 {
  margin: 0;
  font-size: 1.3rem;
}

.story-card p {
  margin: 0;
  color: var(--text-muted);
}

.split-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2.5rem;
  align-items: start;
}

.timeline {
  position: relative;
  padding-left: 2.5rem;
  border-left: 1px solid rgba(148, 163, 184, 0.25);
  display: grid;
  gap: 2rem;
}

.timeline-step {
  position: relative;
  padding: 1.5rem 1.75rem;
  border-radius: 0.65rem;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-card);
  transition: var(--transition-base);
}

.timeline-step::before {
  content: "";
  position: absolute;
  left: -2.5rem;
  top: 1.75rem;
  width: 1.25rem;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

.timeline-step strong {
  display: block;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  color: var(--accent);
  text-transform: uppercase;
}

.timeline-step:hover {
  transform: translateX(8px);
}

.form-card {
  background: rgba(15, 23, 42, 0.9);
  border-radius: 0.75rem;
  padding: 2.5rem;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-soft);
}

.form-grid {
  transition: var(--transition-base);
  /* Promote to its own layer to avoid subpixel seams when transformed */
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

label {
  display: block;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  color: var(--text-muted);
}

input,
textarea,
select {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 42, 0.7);
  color: var(--text-primary);
  font-family: inherit;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

.input-invalid,
.input-with-prefix.input-invalid {
  border-color: rgba(248, 113, 113, 0.6);
  background: rgba(127, 29, 29, 0.18);
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.22);
}

.input-with-prefix.input-invalid {
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18);
}

.input-with-prefix.input-invalid .input-prefix {
  background: linear-gradient(140deg, rgba(248, 113, 113, 0.35), rgba(248, 113, 113, 0.18));
  color: rgba(254, 226, 226, 0.95);
  text-shadow: 0 0 14px rgba(248, 113, 113, 0.5);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.35), 0 8px 18px rgba(248, 113, 113, 0.3);
}

.input-error-message {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: rgba(252, 165, 165, 0.95);
  letter-spacing: 0.04em;
}

textarea {
  resize: vertical;
  min-height: 160px;
}

.required-indicator {
  color: var(--accent);
  margin-left: 0.25rem;
}

.honeypot-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.already-registered-banner {
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(74, 222, 128, 0.35);
  border-radius: 0.75rem;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--text-primary);
  box-shadow: 0 18px 48px rgba(16, 185, 129, 0.18);
}

.already-registered-banner[hidden] {
  display: none;
}

.already-registered-inner {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.already-registered-message {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: rgba(236, 253, 245, 0.9);
}

.already-registered-name {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(190, 242, 217, 0.95);
  letter-spacing: 0.02em;
}

.input-is-locked {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(74, 222, 128, 0.45);
  color: var(--text-primary);
  cursor: default;
}

.input-is-locked:focus {
  border-color: rgba(74, 222, 128, 0.65);
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25);
}

.input-with-prefix {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.75rem 0.4rem 0.5rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 42, 0.7);
  box-shadow: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.input-with-prefix:hover {
  border-color: rgba(56, 189, 248, 0.7);
}

.input-prefix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  padding: 0.45rem 0.9rem;
  border-radius: 0.65rem;
  background: linear-gradient(140deg, rgba(56, 189, 248, 0.25), rgba(56, 189, 248, 0.08));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: rgba(125, 211, 252, 0.95);
  text-shadow: 0 0 12px rgba(56, 189, 248, 0.55);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.35), 0 8px 18px rgba(14, 165, 233, 0.3);
  pointer-events: none;
}

.input-with-prefix input {
  flex: 1;
  border: none;
  border-radius: 0.55rem;
  padding: 0.85rem 0.75rem 0.85rem 0.1rem;
  background: transparent;
  color: var(--text-primary);
  font-size: 1rem;
  letter-spacing: 0.03em;
}

.input-with-prefix input::placeholder {
  color: rgba(148, 163, 184, 0.65);
}

.input-with-prefix:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

.input-with-prefix:focus-within .input-prefix {
  background: linear-gradient(140deg, rgba(56, 189, 248, 0.45), rgba(14, 165, 233, 0.2));
  color: #bae6fd;
  text-shadow: 0 0 18px rgba(56, 189, 248, 0.8);
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.5), 0 10px 24px rgba(14, 165, 233, 0.35);
}

.input-with-prefix input:focus {
  outline: none;
  box-shadow: none;
}

.input-hint {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.major-other {
  margin-top: 1rem;
}

.major-other label {
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.form-consent {
  margin-top: 1.75rem;
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.consent-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.consent-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  background: rgba(15, 23, 42, 0.55);
  color: inherit;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  max-width: 100%;
}

.consent-toggle-track {
  position: relative;
  flex-shrink: 0;
  width: 2.9rem;
  height: 1.5rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.32);
  border: 1px solid rgba(148, 163, 184, 0.35);
  display: flex;
  align-items: center;
  padding: 0 0.2rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.consent-toggle-thumb {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  background: var(--text-primary);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
  transform: translateX(0);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.consent-toggle-text {
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text-primary);
  flex: 1 1 auto;
  min-width: 0;
}

.consent-toggle:hover {
  background: rgba(15, 23, 42, 0.65);
  border-color: rgba(148, 163, 184, 0.36);
}

.consent-toggle-input:focus-visible + .consent-toggle {
  outline: none;
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: 0 0 0 2px rgba(2, 6, 23, 0.85), 0 0 0 5px rgba(56, 189, 248, 0.28);
}

.consent-toggle-input:checked + .consent-toggle {
  border-color: rgba(56, 189, 248, 0.55);
  background: rgba(15, 23, 42, 0.72);
}

.consent-toggle-input:checked + .consent-toggle .consent-toggle-track {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.9), rgba(14, 165, 233, 0.75));
  border-color: rgba(14, 165, 233, 0.5);
}

.consent-toggle-input:checked + .consent-toggle .consent-toggle-thumb {
  transform: translateX(1.4rem);
  background: #e0f2fe;
  box-shadow: 0 6px 16px rgba(14, 165, 233, 0.3);
}

.consent-toggle-input:disabled + .consent-toggle {
  cursor: not-allowed;
  opacity: 0.6;
}

.consent-toggle-input:disabled + .consent-toggle .consent-toggle-track {
  background: rgba(148, 163, 184, 0.2);
  border-color: rgba(148, 163, 184, 0.22);
}

@media (max-width: 600px) {
  .form-consent {
    max-width: 100%;
    gap: 0.65rem;
  }

  .consent-toggle {
    padding: 0.65rem 0.85rem;
    gap: 0.65rem;
  }

  .consent-toggle-text {
    font-size: 0.9rem;
  }
}

.form-actions {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.form-status {
  min-height: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--text-muted);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.form-status.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.form-status__icon {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  border: 2px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  transform: scale(0.6);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.form-status.is-visible .form-status__icon {
  transform: scale(1);
  opacity: 1;
}

.form-status__text {
  display: inline-block;
  max-width: 32ch;
}

.form-status--success {
  color: #34d399;
}

.form-status--success .form-status__icon::after {
  content: "";
  position: absolute;
  width: 0.45rem;
  height: 0.9rem;
  border: solid currentColor;
  border-width: 0 0.2rem 0.2rem 0;
  transform: rotate(45deg);
  top: 0.2rem;
}

.form-status--error {
  color: #f87171;
}

.form-status--error .form-status__icon::before,
.form-status--error .form-status__icon::after {
  content: "";
  position: absolute;
  width: 0.85rem;
  height: 0.12rem;
  background-color: currentColor;
  border-radius: 999px;
}

.form-status--error .form-status__icon::before {
  transform: rotate(45deg);
}

.form-status--error .form-status__icon::after {
  transform: rotate(-45deg);
}

.callout {
  border-radius: 0.7rem;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(15, 23, 42, 0.88));
  border: 1px solid rgba(56, 189, 248, 0.25);
  box-shadow: var(--shadow-card);
}

.callout-centered {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
  padding: 2.75rem 3rem;
  background: linear-gradient(145deg, rgba(56, 189, 248, 0.28), rgba(15, 23, 42, 0.92));
  border: 1px solid rgba(148, 197, 242, 0.35);
  box-shadow: 0 30px 70px rgba(8, 47, 73, 0.45);
}

.callout-centered .section-title {
  margin-bottom: 0;
  font-size: clamp(1.5rem, 2.75vw, 2.1rem);
}

.callout-actions {
  display: flex;
  justify-content: center;
}

.callout-centered p {
  margin: 0;
  color: var(--text-muted);
  max-width: 540px;
}

.callout-actions .button {
  min-width: 180px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pdf-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  background: rgba(2, 6, 23, 0.82);
  backdrop-filter: blur(14px);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  /* Improve mobile touch handling: contain overscroll so parent navigation isn't triggered */
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.pdf-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

.pdf-modal {
  max-width: min(900px, 100%);
  width: 100%;
  border-radius: 1.1rem;
  background: linear-gradient(165deg, rgba(15, 23, 42, 0.95), rgba(8, 47, 73, 0.92));
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 40px 80px rgba(2, 6, 23, 0.7);
  overflow: hidden;
  overscroll-behavior: contain;
}

.pdf-frame-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pdf-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.75rem;
  border-bottom: 1px solid rgba(56, 189, 248, 0.25);
}

.pdf-modal-header h2 {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pdf-close {
  background: rgba(15, 23, 42, 0.75);
  color: var(--text-primary);
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 999px;
  width: 2rem;
  height: 2rem;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition-base);
}

.pdf-close:hover,
.pdf-close:focus {
  background: rgba(56, 189, 248, 0.2);
  color: var(--accent);
}

.pdf-poster {
  padding: 1.75rem;
  background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.35), transparent 55%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.95));
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.pdf-poster iframe {
  width: 100%;
  min-height: clamp(420px, 60vh, 640px);
  border: none;
  border-radius: 0.85rem;
  box-shadow: inset 0 0 0 1px rgba(148, 197, 242, 0.4), 0 25px 45px rgba(15, 23, 42, 0.45);
  background: rgba(15, 23, 42, 0.8);
  /* Hint to browsers that vertical panning should be used inside the iframe */
  touch-action: pan-y;
}

/* Make iframe transformable for our pinch-zoom shim on mobile */
.pdf-poster iframe {
  transform-origin: center center;
  will-change: transform;
  transition: transform 0.06s linear;
}

.pdf-overlay[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .callout-centered {
    padding: 2.25rem 1.75rem;
  }

  .pdf-modal {
    border-radius: 0.85rem;
  }

  .pdf-modal-header {
    padding: 1rem 1.25rem;
  }

  .pdf-poster {
    padding: 1.25rem;
  }
}

.callout h3 {
  margin-top: 0;
  font-size: 1.4rem;
}

.callout p {
  color: var(--text-muted);
  margin-bottom: 0;
}

footer.site-footer {
  padding: 3rem 0;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(2, 6, 23, 0.85);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.footer-nav {
  display: flex;
  gap: 1.25rem;
}

.footer-nav a {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
}

/* Animations */
[data-animate] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate].visible {
  opacity: 1;
  transform: translateY(0);
}

.section-divider {
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.25), transparent);
  opacity: 0.6;
}

.section-divider.top {
  top: 0;
}

.section-divider.bottom {
  bottom: 0;
}

/* Media Queries */
@media (max-width: 900px) {
  .header-inner {
    flex-direction: column;
    gap: 1rem;
  }

  nav.primary-nav ul {
    gap: 1.1rem;
  }

  .section-heading {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  .wrapper {
    padding: 0 1.1rem;
  }

  .hero {
    padding-top: 5rem;
  }

  .hero-actions {
    flex-direction: column;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 4rem 0;
  }
}

/* Utility */
.text-muted {
  color: var(--text-muted);
}

.grid-gap-large {
  gap: 3rem;
}

.offset-panel {
  position: relative;
  padding: 2rem;
  border-radius: 0.75rem;
  border: 1px solid var(--card-border);
  background: rgba(15, 23, 42, 0.92);
  box-shadow: var(--shadow-card);
}

/* Lift offset panels inside hero areas so they visually align with the first line of the headline.
   Uses a responsive negative translate to keep alignment across viewports while preserving layout flow. */
.hero .offset-panel {
  transform: translateY(-78%); /* move upward relative to its height */
}

@media (max-width: 1024px) {
  .hero .offset-panel {
    transform: translateY(-22%);
  }
}

@media (max-width: 720px) {
  /* On narrow screens stack normally to avoid collisions with long rotated phrases */
  .hero .offset-panel {
    transform: translateY(0);
    margin-top: 1.5rem;
  }
}

.offset-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(56, 189, 248, 0.25);
  transform: translate(18px, 18px);
  opacity: 0.35;
  pointer-events: none;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
}

.metric-card {
  position: relative;
  border-radius: 0.85rem;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.2);
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 0.6rem;
  min-height: 200px;
}

.metric-card strong {
  font-size: 1.58rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.25;
  margin: 0;
}

.metric-card span {
  font-size: 0.95rem;
  color: var(--text-muted);
}

.cadence-card {
  --card-radius: 0.95rem;
  --flip-duration: 0.32s;
  --flip-easing: cubic-bezier(0.55, 0, 0.55, 0.2);
  --layer-shift-x: 0px;
  --layer-shift-y: 0px;
  --cadence-tracer-duration: 2.75s;
  isolation: isolate;
  display: block;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: 0 24px 48px rgba(6, 12, 24, 0.45);
  perspective: 1600px;
  min-height: 200px;
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
  opacity: 0;
  transform: translateY(28px);
  position: relative;
  overflow: hidden;
  transition:
    opacity 0.65s cubic-bezier(0.33, 1, 0.68, 1) var(--card-reveal-delay, 0ms),
    transform 0.65s cubic-bezier(0.33, 1, 0.68, 1) var(--card-reveal-delay, 0ms),
    box-shadow 0.45s cubic-bezier(0.33, 1, 0.68, 1),
    filter 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}

.callout.visible .cadence-card {
  opacity: 1;
  transform: translateY(0);
}

.cadence-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.45), 0 28px 58px rgba(10, 20, 40, 0.55);
}

.cadence-card::after {
  /* highlight removed */
  content: none;
}

.cadence-tracer {
  /* tracer exists but hidden by default; becomes visible when card is flipped */
  position: absolute;
  inset: 0;
  border-radius: calc(var(--card-radius) + 1.5px);
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  z-index: 3;
  transition: opacity 220ms ease;
}

/* If browser doesn't support offset-path, we'll still show a fallback rotated dot when flipped */
@supports not (offset-path: path("M 0 0")) {
  /* offset-path not supported — fallback animations applied later when flipped */
}

.cadence-card .card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--flip-duration, 0.32s) var(--flip-easing, cubic-bezier(0.55, 0, 0.55, 0.2));
  z-index: 2;
}

.cadence-card .card-inner::after {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: calc(var(--card-radius) - 0.45rem);
  background: radial-gradient(circle at 50% 35%, rgba(56, 189, 248, 0.18), transparent 70%);
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.33, 1, 0.68, 1);
  pointer-events: none;
  z-index: 1;
}

.cadence-card .card-face {
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
  border: 1px solid rgba(148, 163, 184, 0.24);
  backface-visibility: hidden;
  display: grid;
  align-content: center;
  justify-items: start;
  padding: 1.55rem;
  box-shadow: 0 20px 48px rgba(6, 12, 24, 0.45);
  text-align: left;
  z-index: 2;
}

/* Border-only glow on hover and keyboard focus - keeps card interior unchanged */
.cadence-card:hover .card-face,
.cadence-card:focus-visible .card-face {
  border-color: rgba(254, 254, 254, 0.95);
  /* subtle outer ring plus regular drop shadow to emphasize the glow */
  box-shadow: 0 0 0 6px rgba(56, 189, 248, 0.06), 0 24px 56px rgba(6, 12, 24, 0.52);
  transition: border-color 220ms ease, box-shadow 260ms ease;
}

/* Slightly stronger glow when flipped to maintain emphasis */
.cadence-card.is-flipped:hover .card-face,
.cadence-card.is-flipped:focus-visible .card-face {
  border-color: rgba(56, 189, 248, 1);
  box-shadow: 0 0 0 8px rgba(56, 189, 248, 0.10), 0 30px 72px rgba(6, 12, 24, 0.56);
}

@media (prefers-reduced-motion: reduce) {
  .cadence-card:hover .card-face,
  .cadence-card:focus-visible .card-face,
  .cadence-card.is-flipped:hover .card-face,
  .cadence-card.is-flipped:focus-visible .card-face {
    transition: none;
    box-shadow: 0 18px 40px rgba(6, 12, 24, 0.45);
  }
}

.cadence-card .card-front {
  transform: rotateY(0deg);
  background: linear-gradient(150deg, rgba(21, 30, 52, 0.96) 0%, rgba(12, 19, 36, 0.92) 100%);
}

.cadence-card .card-back {
  transform: rotateY(180deg);
  background: linear-gradient(180deg, rgba(14, 22, 42, 0.94) 0%, rgba(9, 13, 26, 0.9) 100%);
  text-align: left;
}

.cadence-card .card-back::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(148, 163, 184, 0.04)),
    repeating-linear-gradient(0deg, rgba(148, 163, 184, 0.05) 0, rgba(148, 163, 184, 0.05) 1px, transparent 1px, transparent 2px);
  opacity: 0.15;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}

.cadence-card .card-surface {
  position: relative;
  display: grid;
  gap: 0.75rem;
  transform: translate3d(var(--layer-shift-x, 0px), calc(var(--layer-shift-y, 0px) + var(--card-depth, 0px)), 0);
  transition: transform 0.55s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.45s ease;
  z-index: 2;
}

.cadence-card .card-front .card-surface {
  --card-depth: 0px;
  opacity: 1;
}

.cadence-card .card-back .card-surface {
  --card-depth: 2px;
  opacity: 0;
}

.cadence-card.is-flipped .card-back .card-surface {
  --card-depth: 0px;
  opacity: 1;
}

.cadence-card.is-flipped .card-front .card-surface {
  opacity: 0;
}

.cadence-card strong {
  color: #e0f2ff;
  letter-spacing: 0.01em;
  text-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}

.cadence-card .card-week {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.78);
}

.cadence-card .card-back-tag {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(148, 197, 255, 0.95);
}

.orientation-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.orientation-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  opacity: 0;
  transform: translateY(-2px) scale(0.6) rotate(-6deg);
  color: rgba(195, 239, 255, 0.95);
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.55));
}

.orientation-icon::before {
  content: "🎬";
  font-size: 0.85rem;
}

.orientation-icon.is-playing {
  animation: clapboardTick 0.55s ease-out forwards;
}

.cadence-card .card-back-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.cadence-card .card-back-lead {
  font-size: 0.94rem;
  color: #f1f5f9;
}

.cadence-card .card-back-text + .card-back-text {
  margin-top: 0.35rem;
}

.cadence-card.is-flipped.is-engaged {
  /* keep engaged visual if card is flipped and engaged */
  box-shadow: 0 32px 72px rgba(10, 20, 40, 0.6);
  filter: brightness(1.02);
}

.cadence-card.is-flipped.is-engaged::after,
.cadence-card.is-flipped.is-engaged .card-inner::after {
  opacity: 1;
}

.cadence-card.is-flipped .cadence-tracer {
  opacity: 1;
}

.cadence-card.is-flipped .cadence-tracer::before,
.cadence-card.is-flipped .cadence-tracer::after {
  opacity: 1;
}

.cadence-card.is-flipped .card-inner {
  transform: rotateY(180deg);
}

@media (hover: hover) {
  .cadence-card:hover .card-inner,
  .cadence-card:focus-visible .card-inner {
    transform: rotateY(180deg);
  }
}

.cadence-card:focus-visible .card-face {
  border-color: rgba(56, 189, 248, 0.6);
}

/* Border-following glow using an inline SVG stroke so the highlight travels
   exactly along the card edges. The SVG is embedded as a data URI; it draws
   a rounded rect stroke and animates the stroke-dashoffset so the visible
   segment moves around the perimeter. The card interior is untouched. */
.cadence-card { position: relative; }

.cadence-card::before {
  content: "";
  position: absolute;
  inset: -8px; /* extend beyond the border so blur is visible */
  border-radius: calc(var(--card-radius) + 8px);
  pointer-events: none;
  z-index: 4;
  opacity: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* animated SVG: a rect with a dashed stroke and an internal SMIL animation
      stroke-dasharray values sum to the rect perimeter so animating by the
      perimeter produces a continuous loop with no pause. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200' preserveAspectRatio='none'><rect x='6' y='6' width='288' height='188' rx='12' fill='none' stroke='rgba(56,189,248,0.95)' stroke-width='7' stroke-linecap='round' stroke-dasharray='60 892'><animate attributeName='stroke-dashoffset' from='0' to='-952' dur='6.6s' repeatCount='indefinite'/></rect></svg>");
  filter: blur(8px);
  /* no show delay by default; hover/focus will add a delay so glow appears after 1s */
  transition: opacity 220ms ease;
}

.cadence-card:hover::before,
.cadence-card:focus-visible::before {
  /* delay showing the glow so it only appears after 1s of hover/focus */
  opacity: 1;
  transition-delay: 0.2s;
}

/* Reduced-motion fallback: replace animated SVG with a static stroke so the
   ring is visible but doesn't animate. */
@media (prefers-reduced-motion: reduce) {
  .cadence-card::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200' preserveAspectRatio='none'><rect x='6' y='6' width='288' height='188' rx='12' fill='none' stroke='rgba(56,189,248,0.6)' stroke-width='6' stroke-linecap='round' /></svg>");
    opacity: 1;
    transition: none;
    filter: blur(4px);
  }
}

@keyframes cadenceTracerOrbit {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

@keyframes clapboardTick {
  0% {
    opacity: 0;
    transform: translateY(-2px) scale(0.6) rotate(-8deg);
  }
  45% {
    opacity: 1;
    transform: translateY(0) scale(0.98) rotate(0deg);
  }
  70% {
    opacity: 1;
    transform: translateY(-1px) scale(0.92) rotate(5deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-4px) scale(0.65) rotate(-10deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cadence-card {
    transition: none;
    opacity: 1;
    transform: none;
    filter: none;
  }

  .cadence-card::after,
  .cadence-card .card-inner::after {
    animation: none;
    opacity: 0;
  }

  .cadence-card.is-engaged::after,
  .cadence-card.is-engaged .card-inner::after {
    opacity: 0;
  }

  .cadence-tracer,
  .cadence-tracer::before,
  .cadence-tracer::after {
    animation: none !important;
    opacity: 0 !important;
  }

  .cadence-card .card-inner {
    transform: none !important;
    transition: none;
  }

  .cadence-card .card-face {
    position: relative;
    transform: none !important;
    backface-visibility: visible;
    display: grid;
  }

  .cadence-card .card-back {
    display: none;
  }

  .cadence-card.is-flipped .card-front {
    display: none;
  }

  .cadence-card.is-flipped .card-back {
    display: grid;
  }

  .cadence-card .card-surface {
    transform: none !important;
    opacity: 1 !important;
  }

  .orientation-icon.is-playing {
    animation: none;
  }

  .cadence-card.is-flipped .orientation-icon {
    opacity: 1;
    transform: none;
  }
}
.officer-details {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(148, 163, 184, 0.25);
  display: grid;
  gap: 1.5rem;
}

.officer-heading {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.officer-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  justify-items: center;
}

.officer-list-item {
  display: grid;
  gap: 0.35rem;
  text-align: center;
}

.officer-list-item dt {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

.officer-list-item dd {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text-primary);
}

@media (min-width: 720px) {
  .officer-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.75rem;
}

.resource-card {
  padding: 1.75rem;
  border-radius: 0.6rem;
  border: 1px solid var(--card-border);
  background: rgba(15, 23, 42, 0.85);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

.resource-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(56, 189, 248, 0.15), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.resource-card:hover::after {
  opacity: 1;
}

.resource-card h4 {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.resource-card p {
  margin: 0;
  color: var(--text-muted);
}

.team-section {
  position: relative;
}

.team-group + .team-group {
  margin-top: 3rem;
}

.team-group-title {
  margin: 0 0 1.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.team-grid {
  display: grid;
  gap: 1.5rem;
  align-items: stretch;
}

.team-grid-leadership {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

@media (min-width: 960px) {
  .team-grid-leadership {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.team-grid-members {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

@media (min-width: 960px) {
  .team-grid-members {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.team-subsections {
  display: grid;
  gap: 3rem;
}

.team-subsection {
  display: grid;
  gap: 1.75rem;
}

.team-subsection-title {
  margin: 0;
  font-size: clamp(1.45rem, 2.25vw, 1.7rem);
  font-weight: 600;
  letter-spacing: 0.015em;
}

.team-subsection-description {
  margin: 0.35rem 0 0;
  color: var(--text-muted);
  max-width: 48ch;
}

@media (max-width: 720px) {
  .team-subsections {
    gap: 2.5rem;
  }


    /* On smaller screens keep the fullstop between blocks and size it appropriately */
    .hero-fullstop {
      font-size: clamp(2rem, 7vw, 2.75rem);
      margin: 0.5rem 0 0 0;
      display: block;
      text-align: left;
    }
  .team-subsection-title {
    font-size: clamp(1.3rem, 4vw, 1.45rem);
  }
}

.team-card {
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid var(--card-border);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: var(--transition-base);
  outline: none;
}

.team-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(150deg, rgba(56, 189, 248, 0.12), transparent 55%);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 1;
}

.team-card-leader {
  display: block;
  padding: 0;
}

.team-card-leader .team-image {
  position: relative;
}

.team-card-info {
  /* Move captions on top of the portrait so text remains legible */
  position: absolute;
  inset: 0;
  padding: 1.8rem 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.45rem;
  z-index: 3;
  background: transparent;
  isolation: isolate;
  transform: translateY(0);
  transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.team-card-leader .team-card-info::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Premium continuous fade that keeps officer details anchored within a high-contrast zone. */
  background: linear-gradient(
    to top,
    rgba(2, 6, 23, 0.92) 0%,
    rgba(2, 6, 23, 0.86) 18%,
    rgba(2, 6, 23, 0.72) 36%,
    rgba(2, 6, 23, 0.52) 54%,
    rgba(2, 6, 23, 0.28) 72%,
    rgba(2, 6, 23, 0.12) 86%,
    rgba(2, 6, 23, 0) 100%
  );
  opacity: 0.98;
  transition: opacity 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.team-card-leader .team-role,
.team-card-leader .team-name {
  text-align: left;
}

.team-card-leader .team-name {
  font-size: 1.2rem;
}

.team-card:focus-visible {
  outline: 2px solid rgba(56, 189, 248, 0.65);
  outline-offset: 4px;
}

.team-card:is(:hover, :focus-visible) {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -35px rgba(56, 189, 248, 0.75);
}

.team-card:is(:hover, :focus-visible)::after {
  opacity: 1;
}

.team-card-leader {
  --leader-lift: -10px;
  --leader-scale: 1.015;
  --leader-shadow: 0 34px 70px -34px rgba(56, 189, 248, 0.82);
  transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1),
    box-shadow 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.team-card-leader .team-image,
.team-card-leader .team-card-info,
.team-card-leader .team-image img {
  transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Leader portrait rendering: use a background layer via --portrait so we can add a sheen and mask on top of the image.
   We keep the <img> in the DOM (opacity: 0) for accessibility but render the visual with ::before. */
.team-card-leader .team-image {
  will-change: transform;
  transform-origin: center bottom;
  position: relative;
}

.team-card-leader .team-image {
  will-change: transform;
  transform-origin: center bottom;
  position: relative;
}

/* Ensure the actual <img> is visible again and used as the visual source */
.team-card-leader .team-image img {
  opacity: 1;
  /* Anchor and size the image so it always covers the container. Making the
     img absolutely positioned ensures scaling never exposes an empty gap at
     the bottom when we transform the image for the pop effect. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.42s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: block;
  z-index: 0; /* keep the image under the overlays */
  /* Small oversize to prevent a 1px seam from appearing due to subpixel
     rounding during transforms on some browsers. This keeps the visual
     fully covering the container even when scaled or when the parent is
     translated on hover. */
  min-height: 104%;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Hover / focus interactions use the real image and the existing ::after overlay for sheen */
.team-card-leader .team-image img {
  /* Ensure scaling anchors at the bottom so growth doesn't reveal a gap */
  transform-origin: center bottom;
}

.team-card-leader:is(:hover, :focus-visible) .team-image img {
  /* Scale the portrait up from the bottom without translating it vertically.
     The overall card lift is handled by the parent so the image appears to
     pop forward while the background remains visually anchored. */
  transform: scale(1.05);
}

.team-card-leader .team-role,
.team-card-leader .team-name {
  transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.team-card-leader:is(:hover, :focus-visible) {
  transform: translateY(var(--leader-lift)) scale(var(--leader-scale));
  box-shadow: var(--leader-shadow);
}

.team-card-leader:is(:hover, :focus-visible)::after {
  opacity: 1;
}

.team-card-leader:is(:hover, :focus-visible) .team-card-info {
  transform: translateY(-4px);
}

.team-card-leader:is(:hover, :focus-visible) .team-card-info::before {
  opacity: 1;
}

.team-card-leader:is(:hover, :focus-visible) .team-image img {
  /* Remove vertical translation here to avoid exposing a gap at the bottom
     of the card when the portrait grows. Scaling from the bottom is enough
     to achieve the pop effect while the parent card handles the lift. */
  transform: scale(1.05);
}

.team-card-leader:is(:hover, :focus-visible) .team-role,
.team-card-leader:is(:hover, :focus-visible) .team-name {
  transform: translateY(-2px);
}

.team-grid-leadership .team-card-leader:first-child {
  --leader-lift: -11px;
  --leader-scale: 1.02;
  --leader-shadow: 0 38px 78px -34px rgba(56, 189, 248, 0.86);
}

.team-image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  /* Base dark fill so tiny gaps during transforms show the intended background
     instead of a light seam. The radial gradient remains for the highlight. */
  background-color: rgba(2, 6, 23, 1);
  background: radial-gradient(circle at top, rgba(56, 189, 248, 0.25), transparent 65%);
}

.team-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(2, 6, 23, 0.4) 0%,
    rgba(2, 6, 23, 0.34) 10%,
    rgba(2, 6, 23, 0.22) 22%,
    rgba(2, 6, 23, 0.12) 32%,
    rgba(2, 6, 23, 0.04) 38%,
    rgba(2, 6, 23, 0) 42%
  );
  mask-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.95) 6%,
    rgba(0, 0, 0, 0.78) 16%,
    rgba(0, 0, 0, 0.52) 26%,
    rgba(0, 0, 0, 0.24) 34%,
    rgba(0, 0, 0, 0.08) 38%,
    rgba(0, 0, 0, 0) 42%
  );
  -webkit-mask-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.95) 6%,
    rgba(0, 0, 0, 0.78) 16%,
    rgba(0, 0, 0, 0.52) 26%,
    rgba(0, 0, 0, 0.24) 34%,
    rgba(0, 0, 0, 0.08) 38%,
    rgba(0, 0, 0, 0) 42%
  );
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

/* Small bottom mask to hide any subpixel seam that may appear when the
   portrait scales. Layered above the image but below the info overlay. */
.team-image::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(to top, rgba(2,6,23,1), rgba(2,6,23,0));
}

@media (max-width: 720px) {
  .team-image::after {
    mask-image: linear-gradient(
      to top,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.92) 6%,
      rgba(0, 0, 0, 0.7) 14%,
      rgba(0, 0, 0, 0.42) 22%,
      rgba(0, 0, 0, 0.18) 30%,
      rgba(0, 0, 0, 0.06) 34%,
      rgba(0, 0, 0, 0) 36%
    );
    -webkit-mask-image: linear-gradient(
      to top,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.92) 6%,
      rgba(0, 0, 0, 0.7) 14%,
      rgba(0, 0, 0, 0.42) 22%,
      rgba(0, 0, 0, 0.18) 30%,
      rgba(0, 0, 0, 0.06) 34%,
      rgba(0, 0, 0, 0) 36%
    );
  }
}

@media (max-width: 520px) {
  .team-image::after {
    mask-image: linear-gradient(
      to top,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.9) 6%,
      rgba(0, 0, 0, 0.64) 12%,
      rgba(0, 0, 0, 0.36) 20%,
      rgba(0, 0, 0, 0.14) 26%,
      rgba(0, 0, 0, 0.05) 30%,
      rgba(0, 0, 0, 0) 32%
    );
    -webkit-mask-image: linear-gradient(
      to top,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.9) 6%,
      rgba(0, 0, 0, 0.64) 12%,
      rgba(0, 0, 0, 0.36) 20%,
      rgba(0, 0, 0, 0.14) 26%,
      rgba(0, 0, 0, 0.05) 30%,
      rgba(0, 0, 0, 0) 32%
    );
  }
}

@supports not ((backdrop-filter: blur(0)) or (-webkit-backdrop-filter: blur(0))) {
  .team-image::after {
    background: linear-gradient(
      to top,
      rgba(2, 6, 23, 0.46) 0%,
      rgba(2, 6, 23, 0.34) 14%,
      rgba(2, 6, 23, 0.18) 26%,
      rgba(2, 6, 23, 0.08) 34%,
      rgba(2, 6, 23, 0) 40%
    );
  }

  @media (max-width: 520px) {
    .team-image::after {
      background: linear-gradient(
        to top,
        rgba(2, 6, 23, 0.42) 0%,
        rgba(2, 6, 23, 0.3) 12%,
        rgba(2, 6, 23, 0.16) 22%,
        rgba(2, 6, 23, 0.06) 30%,
        rgba(2, 6, 23, 0) 32%
      );
    }
  }
}

.team-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-card-body {
  padding: 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.team-card-body p {
  margin: 0;
}

.team-role {
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
}

.team-name {
  font-size: 1.1rem;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}