:root {
  --color-blue: #01639A;
  --color-blue-light: #E8F4FA;
  --color-blue-mid: #0282C8;
  --color-blue-dark: #004D75;
  --color-red: #E24626;
  --color-red-light: #FDEAE5;
  --color-red-dark: #B8351D;
  --color-yellow: #FCF34B;
  --color-yellow-light: #FEF9D1;
  --color-yellow-dark: #D4C800;
  --color-warm-white: #FFFAF6;
  --color-cream: #F5EDE6;
  --color-grey-light: #E8DDD4;
  --color-grey-mid: #B8A99A;
  --color-grey-dark: #7A6B5D;
  --color-warm-black: #2D2420;
  --color-success: #22C55E;
  --font-display: 'Quicksand', 'Segoe UI', sans-serif;
  --font-body: 'Quicksand', 'Segoe UI', sans-serif;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem;
  --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 1.875rem; --text-3xl: 2.25rem;
  --text-4xl: 3rem; --text-5xl: 3.75rem;
  --leading-tight: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.65;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;
  --weight-bold: 700; --weight-black: 700;
  --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem;
  --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem; --space-5xl: 8rem;
  --max-width: 1428px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px;
  --shadow-sm: 0 1px 3px rgba(45,36,32,0.08); --shadow-md: 0 4px 12px rgba(45,36,32,0.1);
  --shadow-lg: 0 8px 30px rgba(45,36,32,0.12);
  --ease-out: cubic-bezier(0.22,1,0.36,1); --ease-bounce: cubic-bezier(0.34,1.56,0.64,1);
  --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms;
  --focus-ring: 0 0 0 3px rgba(1,99,154,0.4);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font-body); font-size:var(--text-base); font-weight:var(--weight-medium); line-height:var(--leading-normal); color:var(--color-warm-black); background:white; overflow-x:hidden; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--color-blue); text-decoration-thickness:1.5px; text-underline-offset:2px; transition:color var(--duration-fast) var(--ease-out); }
a:hover { color:var(--color-blue-mid); }
a:focus-visible { outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-sm); }
h1,h2,h3,h4 { font-family:var(--font-display); line-height:var(--leading-tight); font-weight:var(--weight-black); letter-spacing:-0.02em; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.container { max-width:var(--max-width); margin:0 auto; padding:0 var(--space-lg); }
@media (min-width:600px) { .container { padding:0 var(--space-2xl); } }
@media (min-width:900px) { .container { padding:0 var(--space-3xl); } }
.section { padding:var(--space-2xl) 0; }
@media (min-width:600px) { .section { padding:var(--space-3xl) 0; } }
@media (min-width:900px) { .section { padding:var(--space-4xl) 0; } }

.eyebrow { font-family:var(--font-body); font-size:var(--text-base); font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:var(--space-sm); }
.section-heading { font-size:var(--text-3xl); font-weight:var(--weight-bold); margin-bottom:var(--space-lg); }
@media (min-width:900px) { .section-heading { font-size:var(--text-4xl); } }

/* Friendly floating badge */
.badge {
  display:inline-flex; align-items:center; gap:var(--space-xs);
  font-family:var(--font-body); font-weight:var(--weight-bold); font-size:var(--text-base);
  padding:6px 16px; border-radius:var(--radius-full); white-space:nowrap;
  transform:rotate(var(--badge-rotate, -3deg));
  box-shadow:var(--shadow-sm);
}
.badge--yellow { background:var(--color-yellow); color:var(--color-warm-black); }
.badge--red { background:var(--color-red); color:white; }
.badge--blue { background:var(--color-blue); color:white; }
.badge--white { background:white; color:var(--color-warm-black); border:2px solid var(--color-grey-light); }
.badge--lg { font-size:var(--text-base); padding:8px 20px; }

/* BUTTONS */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-sm);
  font-family:var(--font-body); font-size:var(--text-base); font-weight:var(--weight-bold);
  line-height:1; padding:14px 28px; border:3px solid var(--color-warm-black); border-radius:var(--radius-full);
  cursor:pointer; text-decoration:none; transition:all var(--duration-normal) var(--ease-out);
  box-shadow:3px 3px 0 var(--color-warm-black);
}
.btn:active { transform:translateY(2px); box-shadow:1px 1px 0 var(--color-warm-black); }
.btn:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.btn--primary { background:var(--color-blue); color:white; }
.btn--primary:hover { background:var(--color-blue-dark); transform:translateY(-2px); box-shadow:5px 5px 0 var(--color-warm-black); color:white; }
.btn--secondary { background:var(--color-red); color:white; }
.btn--secondary:hover { background:var(--color-red-dark); transform:translateY(-2px); box-shadow:5px 5px 0 var(--color-warm-black); color:white; }
.btn--ghost { background:transparent; color:var(--color-blue); }
.btn--ghost:hover { background:var(--color-blue); color:white; transform:translateY(-2px); box-shadow:5px 5px 0 var(--color-warm-black); }
.btn--ghost-white { background:transparent; color:white; border-color:white; box-shadow:3px 3px 0 rgba(255,255,255,0.3); }
.btn--ghost-white:hover { background:white; color:var(--color-warm-black); transform:translateY(-2px); box-shadow:5px 5px 0 rgba(0,0,0,0.2); }
.btn--white-solid { background:white; color:var(--color-blue-dark); border-color:white; box-shadow:3px 3px 0 rgba(0,0,0,0.15); }
.btn--white-solid:hover { background:var(--color-blue-light); transform:translateY(-2px); box-shadow:5px 5px 0 rgba(0,0,0,0.2); color:var(--color-blue-dark); }
.btn--dark { background:var(--color-warm-black); color:white; }
.btn--dark:hover { background:var(--color-grey-dark); transform:translateY(-2px); box-shadow:5px 5px 0 var(--color-warm-black); color:white; }
.btn--yellow { background:var(--color-yellow); color:var(--color-warm-black); }
.btn--yellow:hover { background:var(--color-yellow-dark); color:var(--color-warm-black); transform:translateY(-2px); box-shadow:5px 5px 0 var(--color-warm-black); }
.btn--small { font-size:var(--text-base); padding:10px 20px; }
.btn--large { font-size:var(--text-md); padding:18px 36px; }

.arrow-link { font-size:var(--text-base); font-weight:var(--weight-bold); text-decoration:none; display:inline-flex; align-items:center; gap:var(--space-xs); transition:gap var(--duration-normal) var(--ease-bounce), color var(--duration-fast) var(--ease-out); }
.arrow-link span { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px; }
.arrow-link svg { width:16px; height:16px; transition:transform var(--duration-normal) var(--ease-bounce); }
.arrow-link:hover { gap:var(--space-sm); filter:brightness(0.75); }
.arrow-link:hover svg { transform:translateX(4px); }

/* ============================================================
   1. NAV — comic book panel, light
   ============================================================ */
.nav {
  position:sticky; top:0; z-index:100;
  background:var(--color-warm-white);
  border-bottom:4px solid var(--color-warm-black);
  height:76px;
}
.nav__inner { max-width:var(--max-width); margin:0 auto; padding:0 var(--space-lg); display:flex; align-items:center; justify-content:space-between; height:100%; gap:var(--space-md); }
@media (min-width:600px) { .nav__inner { padding:0 var(--space-2xl); } }

/* Brand / Logo */
.nav__brand { display:flex; align-items:center; text-decoration:none; flex-shrink:0; }
.nav__brand img {
  height:44px; width:auto;
  transition:transform var(--duration-normal) var(--ease-bounce);
}
.nav__brand:hover img { transform:scale(1.05); }

/* Desktop links */
.nav__links { display:flex; align-items:center; gap:4px; list-style:none; flex:1; justify-content:center; }
.nav__link {
  display:block; padding:6px 13px;
  font-size:var(--text-base); font-weight:var(--weight-bold); font-family:var(--font-body);
  color:var(--color-warm-black); text-decoration:none; white-space:nowrap;
  border:2px solid transparent; border-radius:var(--radius-sm);
  transition:all var(--duration-fast) var(--ease-bounce);
}
.nav__links li:nth-child(1) { --link-rotate: -2deg; }
.nav__links li:nth-child(2) { --link-rotate: 1.5deg; }
.nav__links li:nth-child(3) { --link-rotate: -1deg; }
.nav__links li:nth-child(4) { --link-rotate: 2.5deg; }
.nav__links li:nth-child(5) { --link-rotate: -2.5deg; }
.nav__links li:nth-child(6) { --link-rotate: 1deg; }
.nav__link:hover {
  color:white; background:var(--color-blue);
  border-color:var(--color-warm-black);
  box-shadow:2px 2px 0 var(--color-warm-black);
  transform:rotate(var(--link-rotate, -1.5deg)) translateY(-1px);
}
.nav__link:focus-visible { outline:none; box-shadow:var(--focus-ring); }

/* CTA button */
.nav__cta { margin-left:var(--space-sm); flex-shrink:0; }

/* Hamburger toggle — comic style */
.nav__toggle {
  display:none; background:var(--color-blue); cursor:pointer;
  width:44px; height:44px; align-items:center; justify-content:center;
  color:white; font-size:1.1rem;
  border:3px solid var(--color-warm-black); border-radius:var(--radius-md);
  box-shadow:2px 2px 0 var(--color-warm-black);
  transition:all var(--duration-fast) var(--ease-bounce); flex-shrink:0;
}
.nav__toggle:hover { transform:rotate(-8deg) scale(1.08); }
.nav__toggle[aria-expanded="true"] { background:var(--color-red); }

/* Mobile menu panel */
.nav__mobile {
  display:none; position:absolute; top:100%; left:0; right:0; z-index:98;
  background:var(--color-cream);
  border-bottom:4px solid var(--color-warm-black);
  padding:var(--space-md) var(--space-lg) var(--space-lg);
  animation:navDrop 0.25s var(--ease-out) both;
}
.nav__mobile > * { position:relative; z-index:1; }
.nav__mobile.is-open { display:block; }
@keyframes navDrop { from{opacity:0;transform:translateY(-12px);} to{opacity:1;transform:translateY(0);} }
.nav__mobile-links { list-style:none; display:flex; flex-direction:column; gap:var(--space-xs); margin-bottom:var(--space-md); }
.nav__mobile-link {
  display:block; padding:var(--space-sm) var(--space-md);
  font-size:var(--text-md); font-weight:var(--weight-bold); font-family:var(--font-body);
  color:var(--color-warm-black); text-decoration:none;
  border:2px solid transparent; border-radius:var(--radius-md);
  transition:all var(--duration-fast) var(--ease-bounce);
}
.nav__mobile-link:hover { background:var(--color-blue); color:white; border-color:var(--color-warm-black); box-shadow:2px 2px 0 var(--color-warm-black); transform:translateX(5px); }
.nav__mobile-divider { height:2px; background:var(--color-grey-light); border:none; margin:var(--space-xs) 0 var(--space-sm); }
.nav__mobile-cta { width:100%; text-align:center; justify-content:center; }

/* Lucide icon sizing in nav */
.nav__toggle svg { width:20px; height:20px; stroke-width:2.5; display:block; }
.nav__link svg { width:13px; height:13px; vertical-align:middle; margin-left:3px; margin-top:-1px; stroke-width:2.5; }
.nav__mobile-cta svg { width:15px; height:15px; vertical-align:middle; fill:currentColor; stroke:none; }

/* ============================================================
   2. HERO — comic book splash page
   ============================================================ */
.hero {
  position:relative; overflow:hidden; background:var(--color-blue-dark);
}

.hero__frame {
  position:relative; overflow:hidden; min-height:85vh;
  display:flex; align-items:flex-end;
}

.hero__video-bg { position:absolute; inset:0; z-index:0; }
.hero__video-bg video, .hero__video-bg img { width:100%; height:100%; object-fit:cover; }

/* Gradient for text readability */
.hero__overlay {
  position:absolute; inset:0; z-index:2;
  background: linear-gradient(to top, var(--color-blue-dark) 0%, rgba(0,77,117,0.7) 30%, transparent 65%);
}

/* Content wrapper — uses container for horizontal alignment */
.hero__content-wrap {
  position:relative; z-index:4; width:100%;
  max-width:var(--max-width); margin:0 auto;
  padding:0 var(--space-lg) var(--space-xl);
}
@media (min-width:600px) { .hero__content-wrap { padding:0 var(--space-2xl) var(--space-xl); } }
@media (min-width:900px) { .hero__content-wrap { padding:0 var(--space-3xl) var(--space-2xl); } }

.hero__content-panel {
  position:relative;
  background:white; color:var(--color-warm-black);
  border:5px solid var(--color-warm-black); border-radius:var(--radius-lg);
  padding:var(--space-xl) var(--space-2xl);
  box-shadow:8px 8px 0 var(--color-warm-black);
  max-width:640px; transform:rotate(-1deg);
}
/* Speech bubble tail */
.hero__content-panel::after {
  content:''; position:absolute; top:-22px; left:60px;
  width:0; height:0; border-style:solid;
  border-width:0 14px 22px 14px;
  border-color:transparent transparent white transparent;
  filter:drop-shadow(0 -5px 0 var(--color-warm-black));
}

.hero__heading {
  font-size:var(--text-4xl); font-weight:var(--weight-black); line-height:1.05;
  color:var(--color-warm-black); margin-bottom:var(--space-md);
}
@media (min-width:900px) { .hero__heading { font-size:var(--text-5xl); } }
.hero__heading em { font-style:normal; color:var(--color-red); }
.hero__text {
  font-size:var(--text-base); color:var(--color-warm-black); line-height:var(--leading-relaxed);
  margin-bottom:var(--space-lg); max-width:50ch;
}
.hero__bottom-row { display:flex; align-items:center; gap:var(--space-xl); flex-wrap:wrap; }
.hero__actions { display:flex; align-items:center; gap:var(--space-md); flex-wrap:wrap; }
.hero__reviews {
  display:inline-flex; align-items:center; gap:var(--space-sm);
  padding:6px 14px; font-size:var(--text-base); font-weight:var(--weight-bold);
  background:var(--color-yellow); color:var(--color-warm-black);
  border:3px solid var(--color-warm-black); border-radius:var(--radius-full);
}
.hero__stars { color:var(--color-warm-black); display:inline-flex; align-items:center; gap:2px; }
.hero__stars svg { width:16px; height:16px; fill:currentColor; stroke:none; transition:transform var(--duration-normal) var(--ease-bounce); }
.hero__reviews:hover .hero__stars svg { animation:starBounce 0.4s var(--ease-bounce) both; }
.hero__reviews:hover .hero__stars svg:nth-child(1) { animation-delay:0s; }
.hero__reviews:hover .hero__stars svg:nth-child(2) { animation-delay:0.06s; }
.hero__reviews:hover .hero__stars svg:nth-child(3) { animation-delay:0.12s; }
.hero__reviews:hover .hero__stars svg:nth-child(4) { animation-delay:0.18s; }
.hero__reviews:hover .hero__stars svg:nth-child(5) { animation-delay:0.24s; }
@keyframes starBounce { 0% { transform:scale(0) rotate(-30deg); } 60% { transform:scale(1.3) rotate(5deg); } 100% { transform:scale(1) rotate(0deg); } }


/* Floating badges — comic style with borders */
.hero__badge {
  position:absolute; z-index:5;
  border:3px solid var(--color-warm-black) !important;
  box-shadow:3px 3px 0 var(--color-warm-black) !important;
  animation:floatBadge 4s ease-in-out infinite;
}
.hero__badge--1 { top:12%; right:10%; --badge-rotate:-6deg; animation-delay:0s; }
.hero__badge--2 { top:50%; right:6%; --badge-rotate:4deg; animation-delay:1.5s; }
.hero__badge--3 { top:18%; right:26%; --badge-rotate:-2deg; animation-delay:0.8s; }
@keyframes floatBadge { 0%,100%{transform:translateY(0) rotate(var(--badge-rotate,-3deg));} 50%{transform:translateY(-8px) rotate(var(--badge-rotate,-3deg));} }

/* ============================================================
   COMIC SHARED — reusable panel style
   ============================================================ */
.comic-panel {
  border:4px solid var(--color-warm-black); border-radius:var(--radius-lg);
  box-shadow:5px 5px 0 var(--color-warm-black);
}
.comic-bg {
  position:relative;
}

/* ============================================================
   3. STATS — comic panels, each tilted
   ============================================================ */
.stats { background:white; padding:var(--space-2xl) 0; position:relative; }
@media (min-width:600px) { .stats { padding:var(--space-3xl) 0; } }
@media (min-width:900px) { .stats { padding:var(--space-4xl) 0; } }
.stats__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-lg); }
.stats__item {
  text-align:center; padding:var(--space-xl) var(--space-md);
  border:4px solid var(--color-warm-black); border-radius:var(--radius-lg);
  box-shadow:5px 5px 0 var(--color-warm-black); position:relative; overflow:hidden;
  transition:transform var(--duration-normal) var(--ease-bounce);
}
.stats__item.is-visible:hover { transform:scale(1.05) rotate(0deg) translateY(-4px); }
.stats__item:nth-child(1) { background:var(--color-blue); color:white; }
.stats__item:nth-child(2) { background:var(--color-red); color:white; }
.stats__item:nth-child(3) { background:var(--color-cream); color:var(--color-warm-black); }
.stats__item:nth-child(4) { background:var(--color-yellow); color:var(--color-warm-black); }
.stats__number { font-family:var(--font-display); font-size:var(--text-4xl); font-weight:var(--weight-black); line-height:1; margin-bottom:var(--space-sm); }
.stats__label { font-size:var(--text-base); font-weight:var(--weight-semibold); }

/* ============================================================
   4. MISSION — comic book panel layout
   ============================================================ */
.mission {
  position:relative; overflow:hidden;
  padding:var(--space-2xl) 0;
}
@media (min-width:600px) { .mission { padding:var(--space-3xl) 0; } }
@media (min-width:900px) { .mission { padding:var(--space-4xl) 0; } }

.mission .container { position:relative; z-index:1; }

.mission__panels {
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:var(--space-lg);
  grid-template-rows:auto auto;
}

/* Main image panel — big, tilted, thick black border */
.mission__panel-main {
  grid-row:1 / 3; position:relative;
  border:5px solid var(--color-warm-black); border-radius:var(--radius-lg);
  overflow:hidden; transform:rotate(-1.5deg);
  box-shadow:8px 8px 0 var(--color-warm-black);
  min-height:500px;
}
.mission__panel-main .splide { position:absolute; inset:0; }
.mission__panel-main .splide__track { height:100%; }
.mission__panel-main .splide__list { height:100%; }
.mission__panel-main .splide__slide { position:relative; }
.mission__panel-main .splide__slide img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }

/* Splide crossfade */
.mission__panel-main .splide__slide { opacity:0; transition:opacity 1s var(--ease-out); }
.mission__panel-main .splide__slide.is-active { opacity:1; }

/* Custom pagination — bottom right */
.mission__dots {
  position:absolute; bottom:var(--space-lg); right:var(--space-lg); z-index:3;
  display:flex; align-items:center; gap:6px;
}
.mission__dot {
  width:10px; height:10px; border-radius:var(--radius-full);
  background:rgba(255,255,255,0.5); border:2px solid var(--color-warm-black);
  cursor:pointer; padding:0; position:relative; overflow:hidden;
  transition:width var(--duration-normal) var(--ease-bounce), background var(--duration-normal) var(--ease-out);
}
.mission__dot::after {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:var(--color-red); transform:scaleX(0); transform-origin:left;
}
.mission__dot.is-active {
  width:36px; background:white;
}
.mission__dot.is-active::after {
  animation:dotFill 3s linear forwards;
}
@keyframes dotFill { from { transform:scaleX(0); } to { transform:scaleX(1); } }

/* Speech bubble on the image */
.mission__speech {
  position:absolute; bottom:var(--space-xl); left:var(--space-xl); z-index:2;
  background:white; border:3px solid var(--color-warm-black); border-radius:var(--radius-xl);
  padding:var(--space-md) var(--space-lg); max-width:280px;
  font-family:var(--font-display); font-size:var(--text-lg); font-weight:var(--weight-bold);
  color:var(--color-warm-black); line-height:1.3; transform:rotate(1deg);
}
.mission__speech::after {
  content:''; position:absolute; bottom:-16px; left:40px;
  width:0; height:0; border-style:solid;
  border-width:16px 12px 0 12px;
  border-color:white transparent transparent transparent;
  filter:drop-shadow(0 3px 0 var(--color-warm-black));
}
.mission__speech em { font-style:normal; color:var(--color-red); }

/* Text panel — top right */
.mission__panel-text {
  background:white; border:5px solid var(--color-warm-black); border-radius:var(--radius-lg);
  padding:var(--space-xl) var(--space-xl); transform:rotate(1deg);
  box-shadow:6px 6px 0 var(--color-warm-black); display:flex; flex-direction:column; justify-content:center;
}
.mission .eyebrow { color:var(--color-red); font-size:var(--text-base); margin-bottom:var(--space-sm); }
.mission__heading {
  font-family:var(--font-display); font-size:var(--text-3xl); font-weight:var(--weight-black);
  line-height:1.08; color:var(--color-warm-black); margin-bottom:var(--space-md);
}
@media (min-width:900px) { .mission__heading { font-size:var(--text-4xl); } }
.mission__heading em { font-style:normal; color:var(--color-blue); }
.mission__body {
  font-size:var(--text-base); color:var(--color-warm-black); line-height:var(--leading-relaxed);
  margin-bottom:var(--space-lg);
}
.mission__actions { display:flex; gap:var(--space-md); flex-wrap:wrap; }

/* Action panel — bottom right, bold colour */
.mission__panel-action {
  background:var(--color-blue); border:5px solid var(--color-warm-black); border-radius:var(--radius-lg);
  padding:var(--space-xl); transform:rotate(-0.5deg);
  box-shadow:6px 6px 0 var(--color-warm-black); color:white;
  display:flex; flex-direction:column; justify-content:center; gap:var(--space-md);
  position:relative; overflow:hidden;
}
.mission__panel-action::before {
  content:''; position:absolute; top:-30%; right:-20%; width:150px; height:150px;
  border-radius:50%; background:rgba(255,255,255,0.1);
}
.mission__action-heading {
  font-family:var(--font-display); font-size:var(--text-xl); font-weight:var(--weight-black);
  line-height:1.15; position:relative; z-index:1;
}
.mission__action-text {
  font-size:var(--text-base); color:rgba(255,255,255,0.9); line-height:var(--leading-relaxed);
  position:relative; z-index:1;
}

@media (max-width:900px) {
  .mission__panels { grid-template-columns:1fr; grid-template-rows:auto auto auto; }
  .mission__panel-main { grid-row:auto; min-height:350px; transform:rotate(-0.5deg); }
  .mission__panel-text { transform:rotate(0.5deg); }
  .mission__panel-action { transform:rotate(-0.3deg); }
}

/* ============================================================
   5. FEATURED IN — comic panel strip
   ============================================================ */
.featured-in { padding:var(--space-lg) 0; }
.featured-in__inner {
  display:flex; align-items:center; overflow:hidden;
  border:4px solid var(--color-warm-black); border-radius:var(--radius-lg);
  padding:var(--space-md) 0; box-shadow:4px 4px 0 var(--color-warm-black);
  background:white; transform:rotate(-0.3deg);
}
.featured-in__label { font-size:var(--text-base); font-weight:var(--weight-bold); color:var(--color-blue); letter-spacing:0.08em; text-transform:uppercase; white-space:nowrap; padding:0 var(--space-xl); flex-shrink:0; position:relative; z-index:2; }
.featured-in__marquee { flex:1; min-width:0; overflow:hidden; position:relative; }
.featured-in__marquee::before { content:''; position:absolute; left:0; top:0; bottom:0; width:60px; background:linear-gradient(to right, white, transparent); z-index:1; pointer-events:none; }
.featured-in__logo { display:flex; align-items:center; justify-content:center; opacity:0.5; transition:opacity var(--duration-normal) var(--ease-out); }
.featured-in__logo:hover { opacity:1; }
.featured-in__marquee .splide__slide { display:flex; align-items:center; justify-content:center; }
.featured-in__logo img { height:32px; width:auto; display:block; filter:invert(1) brightness(0.3); object-fit:contain; }

/* ============================================================
   6. INFO BAR — blue comic panel
   ============================================================ */
.info-bar { padding:var(--space-xl) 0; }
.info-bar__inner {
  display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:var(--space-xl); align-items:start;
  background:var(--color-blue); color:white;
  border:4px solid var(--color-warm-black); border-radius:var(--radius-lg);
  padding:var(--space-xl) var(--space-2xl); box-shadow:6px 6px 0 var(--color-warm-black);
  transform:rotate(0.3deg); position:relative; overflow:hidden;
}
.info-bar__label { font-size:var(--text-base); font-weight:var(--weight-bold); color:rgba(255,255,255,0.85); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:var(--space-xs); position:relative; z-index:1; }
.info-bar__status { display:flex; align-items:center; gap:var(--space-sm); position:relative; z-index:1; }
.info-bar__dot { width:10px; height:10px; border-radius:50%; background:var(--color-success); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }
.info-bar__open { font-weight:var(--weight-bold); font-size:var(--text-base); }
.info-bar__until { font-size:var(--text-base); color:rgba(255,255,255,0.85); margin-top:var(--space-xs); }
.info-bar__hours { font-size:var(--text-base); line-height:2; position:relative; z-index:1; }
.info-bar__hours-day { font-weight:var(--weight-medium); }
.info-bar__hours-time { font-weight:var(--weight-bold); margin-left:var(--space-sm); }
.info-bar__address { font-size:var(--text-base); font-weight:var(--weight-medium); line-height:var(--leading-relaxed); position:relative; z-index:1; }
.info-bar__ctas { display:flex; flex-direction:column; gap:var(--space-md); position:relative; z-index:1; }

/* ============================================================
   7. WHO WE ARE — comic panel cards
   ============================================================ */
.who-we-are__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-xl); }
.who-we-are__cards { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-xl); }
.who-card {
  border:4px solid var(--color-warm-black); border-radius:var(--radius-lg); overflow:hidden; background:white;
  box-shadow:5px 5px 0 var(--color-warm-black); transition:all var(--duration-normal) var(--ease-out);
  position:relative;
}
.who-card.is-visible:hover { --card-rotate:0deg; transform:translateX(0) translateY(-6px) rotate(0deg) scale(1); box-shadow:8px 8px 0 var(--color-warm-black); }
.who-card__image { aspect-ratio:16/10; background:var(--color-blue-light); overflow:hidden; position:relative; }
.who-card__number { position:absolute; top:var(--space-md); left:var(--space-md); width:36px; height:36px; border-radius:50%; border:3px solid var(--color-warm-black); box-shadow:2px 2px 0 var(--color-warm-black); color:white; font-family:var(--font-display); font-size:var(--text-base); font-weight:var(--weight-bold); display:flex; align-items:center; justify-content:center; z-index:1; }
.who-card:nth-child(1) .who-card__number { background:var(--color-blue); }
.who-card:nth-child(2) .who-card__number { background:var(--color-red); }
.who-card:nth-child(3) .who-card__number { background:var(--color-yellow); color:var(--color-warm-black); }
.who-card__image img { width:100%; height:100%; object-fit:cover; transition:transform var(--duration-slow) var(--ease-out); }
.who-card:hover .who-card__image img { transform:scale(1.05); }
.who-card__body { padding:var(--space-lg); background:white; }
.who-card:nth-child(1) .who-card__body { border-top:5px solid var(--color-blue); }
.who-card:nth-child(2) .who-card__body { border-top:5px solid var(--color-red); }
.who-card:nth-child(3) .who-card__body { border-top:5px solid var(--color-yellow); }
.who-card__title { font-family:var(--font-display); font-size:var(--text-lg); font-weight:var(--weight-bold); color:var(--color-warm-black); }
.who-card__text { font-size:var(--text-base); color:var(--color-warm-black); line-height:var(--leading-relaxed); margin-top:var(--space-sm); }
.who-card__text span { display:block; }

/* Hover devices: overlay + reveal */
@media (hover:hover) {
  .who-card__image { aspect-ratio:4/5; }
  .who-card__body { position:absolute; bottom:0; left:0; right:0; transition:transform var(--duration-normal) var(--ease-out); }
  .who-card__text { display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--duration-normal) var(--ease-out), margin var(--duration-normal) var(--ease-out); margin-top:0; }
  .who-card__text span { overflow:hidden; }
  .who-card:hover .who-card__text { grid-template-rows:1fr; margin-top:var(--space-sm); }
}

/* ============================================================
   8. EVENTS — light blue bg, comic cards
   ============================================================ */
.events { background:var(--color-blue-light); position:relative; }
.events .container { position:relative; z-index:1; }
.events .eyebrow { color:var(--color-red); }
.events__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-xl); }
.events__nav { display:flex; align-items:center; gap:var(--space-sm); }
.events__nav-btn {
  width:44px; height:44px; border-radius:50%; border:3px solid var(--color-warm-black);
  background:white; cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--color-warm-black); transition:all var(--duration-fast) var(--ease-out);
  box-shadow:3px 3px 0 var(--color-warm-black);
}
.events__nav-btn:hover:not(:disabled) { background:var(--color-red); color:white; border-color:var(--color-warm-black); }
.events__nav-btn:disabled { opacity:0.35; cursor:default; }
.events__featured { margin-bottom:var(--space-lg); }
.events__featured .splide { overflow:hidden; padding:8px 16px 16px; margin:0 -16px; }
.events__featured .splide__track { overflow:visible; }
.events__featured .splide__list { display:flex; }
.event-card {
  display:flex; overflow:hidden; background:white; text-decoration:none; color:var(--color-warm-black);
  border:4px solid var(--color-warm-black); border-radius:var(--radius-lg);
  box-shadow:5px 5px 0 var(--color-warm-black); transition:all var(--duration-normal) var(--ease-out);
  cursor:pointer;
}
.event-card:hover { transform:translateY(-4px); box-shadow:8px 8px 0 var(--color-warm-black); }
.event-card__date {
  background:var(--color-red); color:white;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:var(--space-lg) var(--space-xl); min-width:110px; flex-shrink:0;
}
.event-card__day { font-family:var(--font-display); font-size:var(--text-3xl); font-weight:var(--weight-black); line-height:1; }
.event-card__month { font-size:var(--text-base); margin-top:var(--space-xs); }
.event-card__body { padding:var(--space-lg); display:flex; flex-direction:column; justify-content:center; gap:var(--space-xs); }
.event-card__title { font-family:var(--font-display); font-size:var(--text-lg); font-weight:var(--weight-bold); line-height:var(--leading-tight); }
.event-card__meta { font-size:var(--text-base); color:var(--color-warm-black); font-weight:var(--weight-regular); }
.event-card__cta { font-size:var(--text-base); font-weight:var(--weight-bold); color:var(--color-red); display:inline-flex; align-items:center; gap:var(--space-xs); transition:gap var(--duration-normal) var(--ease-bounce); }
.event-card__cta span { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px; }
.event-card__cta svg { width:16px; height:16px; transition:transform var(--duration-normal) var(--ease-bounce); }
.event-card:hover .event-card__cta { gap:var(--space-sm); }
.event-card:hover .event-card__cta svg { transform:translateX(4px); }
.events__weekly {
  background:white; border:4px solid var(--color-warm-black); border-radius:var(--radius-lg);
  padding:var(--space-lg) var(--space-xl); box-shadow:4px 4px 0 var(--color-warm-black);
  display:flex; align-items:center; gap:var(--space-2xl); flex-wrap:wrap;
}
.events__weekly-heading { font-family:var(--font-display); font-size:var(--text-lg); font-weight:var(--weight-bold); }
.events__weekly-item { font-size:var(--text-base); font-weight:var(--weight-regular); color:var(--color-warm-black); }
.events__weekly-item strong { color:var(--color-red); font-weight:var(--weight-bold); }

/* ============================================================
   9. WHAT WE OFFER — blue bg, white comic panel cards
   ============================================================ */
.offer { background:var(--color-blue); color:white; position:relative; overflow:hidden; }
.offer .container { position:relative; z-index:1; }
.offer .eyebrow { color:var(--color-yellow); }
.offer .section-heading { color:white; }
.offer__intro { text-align:center; max-width:50ch; margin:0 auto var(--space-2xl); }
.offer__subtitle { font-size:var(--text-md); color:rgba(255,255,255,0.8); line-height:var(--leading-relaxed); }
.offer__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-lg); }
.offer-card {
  background:white; color:var(--color-warm-black);
  border:4px solid var(--color-warm-black); border-radius:var(--radius-lg);
  padding:var(--space-xl) var(--space-lg); display:flex; flex-direction:column; gap:var(--space-md);
  box-shadow:5px 5px 0 rgba(0,0,0,0.3); transition:all var(--duration-normal) var(--ease-out);
}
.offer-card.is-visible:hover { transform:translateY(-6px) rotate(0deg) scale(1); box-shadow:8px 8px 0 rgba(0,0,0,0.3); }
.offer-card__icon { width:48px; height:48px; border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; }
.offer-card__icon svg { width:24px; height:24px; transition:transform var(--duration-normal) var(--ease-bounce); }
.offer-card:hover .offer-card__icon svg { transform:translateY(-3px) rotate(-6deg) scale(1.1); }
.offer-card:nth-child(1) .offer-card__icon { background:var(--color-blue-light); color:var(--color-blue); }
.offer-card:nth-child(2) .offer-card__icon { background:var(--color-yellow-light); color:var(--color-yellow-dark); }
.offer-card:nth-child(3) .offer-card__icon { background:var(--color-red-light); color:var(--color-red); }
.offer-card:nth-child(4) .offer-card__icon { background:var(--color-blue-light); color:var(--color-blue); }
.offer-card__title { font-family:var(--font-display); font-size:var(--text-lg); font-weight:var(--weight-bold); color:var(--color-warm-black); }
.offer-card__text { font-size:var(--text-base); color:var(--color-warm-black); line-height:var(--leading-relaxed); flex:1; }
.offer-card__link { font-size:var(--text-base); font-weight:var(--weight-bold); color:var(--color-blue); text-decoration:none; display:inline-flex; align-items:center; gap:var(--space-xs); margin-top:auto; transition:gap var(--duration-normal) var(--ease-bounce), color var(--duration-fast) var(--ease-out); }
.offer-card__link span { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px; }
.offer-card__link svg { width:16px; height:16px; transition:transform var(--duration-normal) var(--ease-bounce); }
.offer-card__link:hover { gap:var(--space-sm); color:var(--color-blue-dark); }
.offer-card__link:hover svg { transform:translateX(4px); }

/* ============================================================
   10. THE PEOPLE — comic panel cards
   ============================================================ */
.people { position:relative; }
.people__header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:var(--space-xl); }
.people .eyebrow { color:var(--color-red); }
.people__carousel { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-xl); }
.people-card {
  border:4px solid var(--color-warm-black); border-radius:var(--radius-lg); overflow:hidden; background:white;
  box-shadow:5px 5px 0 var(--color-warm-black); transition:all var(--duration-normal) var(--ease-out);
}
.people-card.is-visible:hover { transform:translateX(0) translateY(-6px) rotate(0deg) scale(1); box-shadow:8px 8px 0 var(--color-warm-black); }
.people-card__media {
  aspect-ratio:3/4; background:var(--color-blue-light);
  position:relative; overflow:hidden;
}
.people-card__media img { width:100%; height:100%; object-fit:cover; transition:transform var(--duration-slow) var(--ease-out); }
.people-card:hover .people-card__media img { transform:scale(1.05); }
.people-card__info { padding:var(--space-lg); }
.people-card:nth-child(1) .people-card__info { border-top:5px solid var(--color-red); }
.people-card:nth-child(2) .people-card__info { border-top:5px solid var(--color-blue); }
.people-card:nth-child(3) .people-card__info { border-top:5px solid var(--color-yellow); }
.people-card__name { font-family:var(--font-display); font-size:var(--text-md); font-weight:var(--weight-bold); }
.people__nav { display:flex; gap:var(--space-sm); }
.people__nav-btn {
  width:44px; height:44px; border-radius:50%; border:3px solid var(--color-warm-black);
  background:white; cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--color-warm-black); transition:all var(--duration-fast) var(--ease-out);
  box-shadow:3px 3px 0 var(--color-warm-black);
}
.people__nav-btn:hover { background:var(--color-blue); color:white; border-color:var(--color-warm-black); }
.people__badge { position:absolute; top:0; right:var(--space-3xl); }

/* ============================================================
   11. SUPPORT — red bg, comic speech bubble cards
   ============================================================ */
.support { background:var(--color-red); color:white; position:relative; overflow:hidden; }
.support .container { position:relative; z-index:1; }
.support .eyebrow { color:rgba(255,255,255,0.9); }
.support .section-heading { color:white; }
.support__grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3xl); align-items:start; }
.support__body { font-size:var(--text-md); color:rgba(255,255,255,0.9); line-height:var(--leading-relaxed); margin-bottom:var(--space-xl); }
.support__actions { display:flex; gap:var(--space-md); flex-wrap:wrap; }
.support__cards { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-md); }
.support-card {
  background:white; color:var(--color-warm-black);
  border:3px solid var(--color-warm-black); border-radius:var(--radius-lg);
  padding:var(--space-xl) var(--space-lg); box-shadow:4px 4px 0 var(--color-warm-black);
  display:flex; flex-direction:column; gap:var(--space-sm);
  transition:all var(--duration-normal) var(--ease-out);
}
.support-card.is-visible:hover { transform:translateY(-4px) rotate(0deg) scale(1); box-shadow:7px 7px 0 var(--color-warm-black); }
.support-card__icon { font-size:1.75rem; display:flex; }
.support-card__icon svg { width:28px; height:28px; transition:transform var(--duration-normal) var(--ease-bounce); }
.support-card:hover .support-card__icon svg { transform:translateY(-3px) rotate(-6deg) scale(1.1); }
.support-card__title { font-family:var(--font-display); font-size:var(--text-base); font-weight:var(--weight-bold); color:var(--color-warm-black); }
.support-card__text { font-size:var(--text-base); color:var(--color-warm-black); line-height:var(--leading-relaxed); }

/* ============================================================
   12. TESTIMONIALS — white bg, coloured comic speech bubbles
   ============================================================ */
.testimonials__header { text-align:center; margin-bottom:var(--space-xl); }
.testimonials .eyebrow { color:var(--color-red); }
.testimonials__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-lg); }
.testimonial-card {
  border:4px solid var(--color-warm-black); border-radius:var(--radius-xl);
  padding:var(--space-xl) var(--space-lg); box-shadow:5px 5px 0 var(--color-warm-black);
  transition:all var(--duration-normal) var(--ease-out); position:relative;
}
.testimonial-card:nth-child(1) { background:var(--color-blue-light); }
.testimonial-card:nth-child(2) { background:var(--color-cream); }
.testimonial-card:nth-child(3) { background:var(--color-red-light); }
.testimonial-card:nth-child(4) { background:var(--color-blue-light); }
.testimonial-card.is-visible:hover { transform:translateX(0) translateY(-4px) rotate(0deg) scale(1); box-shadow:8px 8px 0 var(--color-warm-black); }
/* Speech bubble tail */
.testimonial-card::after {
  content:''; position:absolute; bottom:-14px; left:30px;
  width:0; height:0; border-style:solid; border-width:14px 10px 0 10px;
  border-color:var(--color-warm-black) transparent transparent transparent;
}
.testimonial-card::before {
  content:''; position:absolute; bottom:-9px; left:32px; z-index:1;
  width:0; height:0; border-style:solid; border-width:10px 8px 0 8px;
}
.testimonial-card:nth-child(1)::before { border-color:var(--color-blue-light) transparent transparent transparent; }
.testimonial-card:nth-child(2)::before { border-color:var(--color-cream) transparent transparent transparent; }
.testimonial-card:nth-child(3)::before { border-color:var(--color-red-light) transparent transparent transparent; }
.testimonial-card:nth-child(4)::before { border-color:var(--color-blue-light) transparent transparent transparent; }
.testimonial-card__stars { color:var(--color-yellow-dark); margin-bottom:var(--space-md); display:flex; gap:3px; }
.testimonial-card__stars svg { width:16px; height:16px; fill:currentColor; stroke:none; }
.testimonial-card__quote {
  font-family:var(--font-display); font-size:var(--text-base); font-weight:var(--weight-bold);
  line-height:1.4; margin-bottom:var(--space-lg); color:var(--color-warm-black);
}
.testimonial-card__author { font-size:var(--text-base); color:var(--color-warm-black); font-weight:var(--weight-semibold); }

/* ============================================================
   13. BLOG — comic panel cards
   ============================================================ */
.blog__header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:var(--space-xl); }
.blog__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-xl); }
.blog-card {
  border:4px solid var(--color-warm-black); border-radius:var(--radius-lg); overflow:hidden; background:white;
  box-shadow:5px 5px 0 var(--color-warm-black); transition:all var(--duration-normal) var(--ease-out);
}
.blog-card.is-visible:hover { transform:translateX(0) translateY(-6px) rotate(0deg) scale(1); box-shadow:8px 8px 0 var(--color-warm-black); }
.blog-card__image { aspect-ratio:16/10; background:var(--color-blue-light); overflow:hidden; }
.blog-card__image img { width:100%; height:100%; object-fit:cover; transition:transform var(--duration-slow) var(--ease-out); }
.blog-card:hover .blog-card__image img { transform:scale(1.05); }
.blog-card__body { padding:var(--space-lg); }
.blog-card__tag {
  display:inline-block; font-size:var(--text-base); font-weight:var(--weight-bold);
  padding:4px 14px; border-radius:var(--radius-full); text-transform:uppercase;
  letter-spacing:0.05em; margin-bottom:var(--space-md);
  border:2px solid var(--color-warm-black);
}
.blog-card:nth-child(1) .blog-card__tag { background:var(--color-yellow); }
.blog-card:nth-child(2) .blog-card__tag { background:var(--color-red); color:white; border-color:var(--color-red-dark); }
.blog-card:nth-child(3) .blog-card__tag { background:var(--color-blue); color:white; border-color:var(--color-blue-dark); }
.blog-card__title { font-family:var(--font-display); font-size:var(--text-md); font-weight:var(--weight-bold); line-height:var(--leading-tight); margin-bottom:var(--space-sm); }
.blog-card__excerpt { font-size:var(--text-base); color:var(--color-warm-black); line-height:var(--leading-relaxed); margin-bottom:var(--space-md); }
.blog-card__footer { border-top:2px solid var(--color-warm-black); padding-top:var(--space-md); display:flex; justify-content:space-between; align-items:center; }
.blog-card__date { font-size:var(--text-base); color:var(--color-warm-black); font-weight:var(--weight-bold); }
.blog-card__read { font-size:var(--text-base); font-weight:var(--weight-bold); color:var(--color-blue); text-decoration:none; display:inline-flex; align-items:center; gap:var(--space-xs); transition:gap var(--duration-normal) var(--ease-bounce), color var(--duration-fast) var(--ease-out); }
.blog-card__read span { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px; }
.blog-card__read svg { width:16px; height:16px; transition:transform var(--duration-normal) var(--ease-bounce); }
.blog-card__read:hover { gap:var(--space-sm); color:var(--color-blue-dark); }
.blog-card__read:hover svg { transform:translateX(4px); }

/* ============================================================
   14. INSTA — comic grid
   ============================================================ */
.insta { background:var(--color-blue-light); position:relative; }
.insta .container { position:relative; z-index:1; }
.insta .eyebrow { color:var(--color-red); }
.insta__heading { font-family:var(--font-display); font-size:var(--text-4xl); font-weight:var(--weight-black); margin-bottom:var(--space-xl); }
.insta__heading em { font-style:normal; color:var(--color-red); }
.insta__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-md); }
.insta__item {
  aspect-ratio:1/1; overflow:hidden; position:relative; cursor:pointer;
  border:4px solid var(--color-warm-black); border-radius:var(--radius-lg);
  box-shadow:4px 4px 0 var(--color-warm-black);
  transition:all var(--duration-normal) var(--ease-out);
}
.insta__item:hover { transform:translateY(-4px) rotate(-1deg) !important; box-shadow:7px 7px 0 var(--color-warm-black); }
.insta__item img { width:100%; height:100%; object-fit:cover; }

/* ============================================================
   15. PARTNERS — comic panel logos
   ============================================================ */
.partners__header { text-align:center; margin-bottom:var(--space-xl); }
.partners__subtitle { font-size:var(--text-base); color:var(--color-warm-black); max-width:50ch; margin:0 auto; }
.partners__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-lg); max-width:1000px; margin:0 auto; }
.partner-logo {
  border:3px solid var(--color-warm-black); border-radius:var(--radius-lg);
  aspect-ratio:3/1; display:flex; align-items:center; justify-content:center;
  font-size:var(--text-base); font-weight:var(--weight-bold); color:var(--color-grey-dark);
  background:white; box-shadow:3px 3px 0 var(--color-warm-black);
  transition:all var(--duration-fast) var(--ease-out);
}
.partner-logo:hover { transform:translateY(-3px) rotate(-1deg) !important; box-shadow:5px 5px 0 var(--color-warm-black); }

/* ============================================================
   16. FOOTER
   ============================================================ */
.footer { background:var(--color-blue); color:white; position:relative; }
.footer__top { padding:var(--space-3xl) 0; display:grid; grid-template-columns:2fr 1fr; gap:var(--space-3xl); align-items:end; border-bottom:1px solid rgba(255,255,255,0.08); }
.footer__logo { height:40px; width:auto; filter:brightness(0) invert(1); margin-bottom:var(--space-md); }
.footer__tagline { font-family:var(--font-display); font-size:var(--text-3xl); font-weight:var(--weight-bold); line-height:var(--leading-tight); }
.footer__tagline em { font-style:normal; color:var(--color-yellow); }
.footer__social { display:flex; align-items:center; gap:var(--space-md); justify-self:end; }
.footer__social-icon { width:44px; height:44px; background:rgba(255,255,255,0.1); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; color:white; text-decoration:none; transition:all var(--duration-fast) var(--ease-out); }
.footer__social-icon svg { width:20px; height:20px; }
.footer__social-icon:hover { background:var(--color-red); color:white; }
.footer__social-handle { font-size:var(--text-base); font-weight:var(--weight-medium); color:var(--color-grey-light); }
.footer__columns { padding:var(--space-2xl) 0; display:grid; grid-template-columns:1fr 1fr 1fr 1.5fr; gap:var(--space-2xl); border-bottom:1px solid rgba(255,255,255,0.08); }
.footer__col-title { font-family:var(--font-display); font-size:var(--text-md); font-weight:var(--weight-bold); color:white; letter-spacing:0.02em; margin-bottom:var(--space-md); }
.footer__address { font-style:normal; font-size:var(--text-base); color:rgba(255,255,255,0.85); line-height:var(--leading-relaxed); margin-bottom:var(--space-md); }
.footer__col-links { list-style:none; display:flex; flex-direction:column; gap:var(--space-sm); }
.footer__col-link { font-size:var(--text-base); font-weight:var(--weight-medium); color:rgba(255,255,255,0.85); text-decoration:none; transition:color var(--duration-fast) var(--ease-out); }
.footer__col-link:hover { color:white; }
.footer__hours-status { display:flex; align-items:center; gap:var(--space-sm); margin-bottom:var(--space-sm); }
.footer__hours-dot { width:8px; height:8px; border-radius:50%; background:var(--color-success); animation:pulse 2s infinite; }
.footer__hours-open { font-size:var(--text-base); font-weight:var(--weight-bold); }
.footer__hours-divider { border:none; border-top:1px solid rgba(255,255,255,0.08); margin:var(--space-md) 0; }
.footer__hours-list { font-size:var(--text-base); font-weight:var(--weight-medium); color:rgba(255,255,255,0.85); line-height:2; }
.footer__menu-btn { margin-top:var(--space-lg); }
.footer__bottom { padding:var(--space-lg) 0; display:flex; justify-content:space-between; align-items:center; font-size:var(--text-base); color:var(--color-grey-light); }
.footer__legal-links { display:flex; gap:var(--space-xl); }
.footer__legal-link { font-size:var(--text-base); color:var(--color-grey-light); text-decoration:none; }
.footer__legal-link:hover { color:white; }
.made-by { padding:var(--space-sm) 0; font-size:var(--text-base); color:rgba(255,255,255,0.4); background:rgba(0,0,0,0.1); }
.made-by__link { color:rgba(255,255,255,0.5); text-decoration:none; transition:color var(--duration-fast) var(--ease-out); }
.made-by__link:hover { color:white; }

/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */
@media (max-width:900px) {
  .nav__links { display:none; }
  .nav__cta { display:none; }
  .nav__toggle { display:flex; }
  .hero__heading { font-size:var(--text-3xl); }
  .hero__frame { min-height:65vh; }
  .hero__badge { display:none; }
  .hero__content-panel { padding:var(--space-lg); transform:rotate(-0.5deg); }
  .stats__grid { grid-template-columns:repeat(2,1fr); }
  .featured-in__inner { gap:var(--space-lg); }
  .info-bar__inner { grid-template-columns:1fr 1fr; }
  .who-we-are__cards { grid-template-columns:1fr 1fr; }
  .events__featured { padding-bottom:0; }
  .events__weekly { flex-direction:column; align-items:flex-start; gap:var(--space-md); }
  .offer__grid { grid-template-columns:1fr 1fr; }
  .people__carousel { grid-template-columns:1fr 1fr; }
  .support__grid { grid-template-columns:1fr; }
  .testimonials__grid { grid-template-columns:1fr 1fr; }
  .blog__grid { grid-template-columns:1fr 1fr; }
  .partners__grid { grid-template-columns:repeat(3,1fr); }
  .footer__top { grid-template-columns:1fr; }
  .footer__social { justify-self:start; }
  .footer__columns { grid-template-columns:1fr 1fr; }
}

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */
@media (max-width:600px) {
  .hero__frame { min-height:55vh; }
  .hero__heading { font-size:var(--text-2xl); }
  .hero__content-panel { padding:var(--space-md) var(--space-lg); box-shadow:5px 5px 0 var(--color-warm-black); }
  .hero__content-panel::after { left:30px; }
  .stats__grid { grid-template-columns:1fr 1fr; }
  .stats__number { font-size:var(--text-3xl); }
  .who-we-are__cards { grid-template-columns:1fr; }
  .who-we-are__header, .events__header, .people__header, .blog__header { flex-direction:column; align-items:flex-start; gap:var(--space-md); }
  .offer__grid { grid-template-columns:1fr; }
  .people__carousel { grid-template-columns:1fr; }
  .support__cards { grid-template-columns:1fr; }
  .testimonials__grid { grid-template-columns:1fr; }
  .blog__grid { grid-template-columns:1fr; }
  .insta__grid { grid-template-columns:repeat(2,1fr); }
  .insta__heading { font-size:var(--text-3xl); }
  .info-bar__inner { grid-template-columns:1fr; }
  .partners__grid { grid-template-columns:1fr 1fr; }
  .footer__columns { grid-template-columns:1fr; }
  .footer__bottom { flex-direction:column; gap:var(--space-md); text-align:center; }
  .footer__legal-links { flex-wrap:wrap; justify-content:center; gap:var(--space-md); }
  .section-heading { font-size:var(--text-2xl); }
  .people__badge { display:none; }
}

/* ============================================================
   COMIC BOOK SCROLL ANIMATIONS
   ============================================================ */

/* Elements start hidden, animate when .is-visible is added */
.comic-reveal {
  opacity:0;
  transform:scale(0.85) rotate(-3deg);
  transition:all 0.6s var(--ease-bounce);
}
.comic-reveal.is-visible {
  opacity:1;
  transform:scale(1) rotate(-1deg);
}

/* Slam in from left */
.comic-slam-left {
  opacity:0;
  transform:translateX(-80px) rotate(-5deg);
  transition:all 0.5s var(--ease-bounce);
}
.comic-slam-left.is-visible {
  opacity:1;
  transform:translateX(0) rotate(var(--card-rotate, 0deg));
}

/* Slam in from right */
.comic-slam-right {
  opacity:0;
  transform:translateX(80px) rotate(5deg);
  transition:all 0.5s var(--ease-bounce);
}
.comic-slam-right.is-visible {
  opacity:1;
  transform:translateX(0) rotate(var(--card-rotate, 0deg));
}

/* Pop up with overshoot bounce */
.comic-pop {
  opacity:0;
  transform:scale(0) rotate(-8deg);
  transition:all 0.5s var(--ease-bounce);
}
.comic-pop.is-visible {
  opacity:1;
  transform:scale(1) rotate(var(--card-rotate, 0deg));
}

/* Drop from above like a panel falling into place */
.comic-drop {
  opacity:0;
  transform:translateY(-60px) rotate(3deg);
  transition:all 0.5s var(--ease-bounce);
}
.comic-drop.is-visible {
  opacity:1;
  transform:translateY(0) rotate(var(--card-rotate, 0deg));
}

/* Stagger children delay */
.stagger-1 { transition-delay:0s; }
.stagger-2 { transition-delay:0.1s; }
.stagger-3 { transition-delay:0.2s; }
.stagger-4 { transition-delay:0.3s; }

/* Section headings — slam in from left */
.comic-heading {
  opacity:0;
  transform:translateX(-40px);
  transition:opacity 0.5s var(--ease-out), transform 0.5s var(--ease-bounce);
}
.comic-heading.is-visible {
  opacity:1;
  transform:translateX(0);
}

/* Eyebrow badge slam */
.comic-eyebrow {
  opacity:0;
  transform:translateY(10px);
  transition:opacity 0.3s var(--ease-out), transform 0.3s var(--ease-bounce);
}
.comic-eyebrow.is-visible {
  opacity:1;
  transform:translateY(0);
}

/* Hero loads immediately (no scroll trigger needed) */
.hero .comic-reveal { animation:heroSlam 0.7s var(--ease-bounce) 0.3s both; }
@keyframes heroSlam {
  0% { opacity:0; transform:scale(0.8) rotate(-4deg); }
  100% { opacity:1; transform:scale(1) rotate(-1deg); }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce) {
  .comic-reveal, .comic-slam-left, .comic-slam-right, .comic-pop, .comic-drop, .comic-heading, .comic-eyebrow {
    opacity:1 !important; transform:none !important; clip-path:none !important;
    transition:none !important; animation:none !important;
  }
  .floatBadge { animation:none !important; }
}

/* ============================================================
   MEGA NAV — Our Café full-width dropdown
   ============================================================ */

/* Reset button defaults so nav__link styles apply cleanly */
.nav__mega-trigger {
  appearance:none;
  -webkit-appearance:none;
  background:none;
  border:2px solid transparent; /* matches nav__link base border */
  cursor:pointer;
  font-family:var(--font-body);
  font-size:var(--text-base);
  font-weight:var(--weight-bold);
  color:var(--color-warm-black);
  text-align:left;
  line-height:inherit;
}

/* Chevron rotates when dropdown is open */
.nav__mega-trigger i[data-lucide="chevron-down"] {
  transition:transform var(--duration-fast) var(--ease-out);
  display:inline-block;
}
.nav__mega-trigger[aria-expanded="true"] i[data-lucide="chevron-down"] {
  transform:rotate(180deg);
}

/* Panel — fixed below nav, full viewport width */
.mega-nav {
  position:fixed;
  top:76px; /* nav height */
  left:0;
  right:0;
  background:white;
  border-bottom:4px solid var(--color-warm-black);
  box-shadow:0 8px 0 rgba(0,0,0,0.12);
  z-index:99; /* just below nav z-index:100 so nav stays on top */
  visibility:hidden;
  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity 0.2s var(--ease-out), transform 0.25s var(--ease-bounce), visibility 0s linear 0.25s;
}
.mega-nav.is-open {
  visibility:visible;
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
  transition:opacity 0.2s var(--ease-out), transform 0.25s var(--ease-bounce), visibility 0s linear 0s;
}

/* Inner container padding */
.mega-nav > .container {
  padding-top:var(--space-xl);
  padding-bottom:var(--space-lg);
}

/* Three-column grid */
.mega-nav__columns {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
}
.mega-nav__col {
  padding:0 var(--space-2xl);
}
.mega-nav__col:first-child {
  padding-left:0;
}
.mega-nav__col:last-child {
  padding-right:0;
}
.mega-nav__col + .mega-nav__col {
  border-left:2px solid var(--color-grey-light);
}

/* Column eyebrow label */
.mega-nav__col-label {
  font-family:var(--font-body);
  font-size:var(--text-base);
  font-weight:var(--weight-bold);
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--color-grey-dark);
  margin-bottom:var(--space-md);
}

/* Nav items */
.mega-nav__item {
  display:flex;
  align-items:flex-start;
  gap:var(--space-md);
  padding:var(--space-sm) var(--space-md);
  border-radius:var(--radius-md);
  text-decoration:none;
  color:var(--color-warm-black);
  border:2px solid transparent;
  box-shadow:none;
  transition:border-color var(--duration-fast) var(--ease-out),
             box-shadow var(--duration-fast) var(--ease-out),
             transform var(--duration-fast) var(--ease-bounce);
  margin-bottom:4px;
}
.mega-nav__item:hover {
  border-color:var(--color-warm-black);
  box-shadow:3px 3px 0 var(--color-warm-black);
  transform:translate(-2px, -2px);
}
.mega-nav__item:has(.mega-nav__item-icon--blue):hover {
  background:rgba(1, 99, 154, 0.08);
}
.mega-nav__item:has(.mega-nav__item-icon--red):hover {
  background:rgba(226, 70, 38, 0.08);
}
.mega-nav__item:has(.mega-nav__item-icon--yellow):hover {
  background:rgba(252, 243, 75, 0.35);
}
.mega-nav__item:hover .mega-nav__item-icon {
  transform:none; /* item already lifts — no double movement */
}
.mega-nav__item:focus-visible {
  outline:none;
  border-color:var(--color-blue);
  box-shadow:3px 3px 0 var(--color-blue);
  transform:translate(-2px, -2px);
}

/* Icon box */
.mega-nav__item-icon {
  width:40px;
  height:40px;
  flex-shrink:0;
  border:2px solid var(--color-warm-black);
  border-radius:var(--radius-md);
  box-shadow:2px 2px 0 var(--color-warm-black);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform var(--duration-fast) var(--ease-bounce), box-shadow var(--duration-fast) var(--ease-bounce);
}
.mega-nav__item-icon svg {
  width:18px;
  height:18px;
  stroke-width:2;
}
.mega-nav__item-icon--blue   { background:var(--color-blue);   color:white; }
.mega-nav__item-icon--red    { background:var(--color-red);    color:white; }
.mega-nav__item-icon--yellow { background:var(--color-yellow); color:var(--color-warm-black); }

/* Item text */
.mega-nav__item-text {
  display:flex;
  flex-direction:column;
  gap:3px;
  padding-top:2px;
}
.mega-nav__item-title {
  font-family:var(--font-display);
  font-size:var(--text-base);
  font-weight:var(--weight-bold);
  color:var(--color-warm-black);
  line-height:1.2;
}
.mega-nav__item-desc {
  font-size:var(--text-base);
  font-weight:var(--weight-medium);
  color:var(--color-grey-dark);
  line-height:var(--leading-relaxed);
}

/* Footer bar */
.mega-nav__footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-lg);
  padding-top:var(--space-md);
  margin-top:var(--space-md);
  border-top:2px solid var(--color-grey-light);
}
.mega-nav__hours {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  font-size:var(--text-base);
  font-weight:var(--weight-medium);
  color:var(--color-grey-dark);
}
.mega-nav__open-now {
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--color-warm-black);
  font-weight:var(--weight-bold);
}
.mega-nav__open-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--color-success);
  flex-shrink:0;
  animation:pulse 2s infinite;
}
.mega-nav__contact {
  white-space:nowrap;
  color:var(--color-blue);
  flex-shrink:0;
}

/* Hide on mobile — mega nav is desktop only */
@media (max-width:900px) {
  .mega-nav { display:none; }
}

/* ============================================================
   MOBILE ACCORDION — Our Café sub-menu
   ============================================================ */

/* Reset button, match nav__mobile-link appearance */
.nav__mobile-trigger {
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:none;
  border:2px solid transparent;
  border-radius:var(--radius-md);
  cursor:pointer;
  font-family:var(--font-body);
  font-size:var(--text-md);
  font-weight:var(--weight-bold);
  color:var(--color-warm-black);
  text-align:left;
  padding:var(--space-sm) var(--space-md);
  transition:all var(--duration-fast) var(--ease-bounce);
}
.nav__mobile-trigger:hover {
  background:var(--color-blue);
  color:white;
  border-color:var(--color-warm-black);
  box-shadow:2px 2px 0 var(--color-warm-black);
  transform:translateX(5px);
}
/* Open state — tinted blue to show it's the active parent */
.nav__mobile-trigger[aria-expanded="true"] {
  background:var(--color-blue-light);
  color:var(--color-blue);
  border-color:var(--color-warm-black);
}
.nav__mobile-trigger svg {
  width:16px;
  height:16px;
  flex-shrink:0;
  transition:transform var(--duration-fast) var(--ease-out);
}
.nav__mobile-trigger[aria-expanded="true"] svg {
  transform:rotate(180deg);
}

/* Sub-list — height-based accordion */
.nav__mobile-sub {
  list-style:none;
  max-height:0;
  overflow:hidden;
  transition:max-height 0.35s ease;
  padding-left:var(--space-md);
  padding-top:0;
}
.nav__mobile-sub.is-open {
  max-height:500px; /* enough for 6 items */
  padding-top:var(--space-xs);
}

/* Sub-items */
.nav__mobile-sub-link {
  display:flex;
  align-items:center;
  gap:var(--space-md);
  padding:var(--space-sm) var(--space-md);
  font-family:var(--font-body);
  font-size:var(--text-base);
  font-weight:var(--weight-bold);
  color:var(--color-warm-black);
  text-decoration:none;
  border:2px solid transparent;
  border-radius:var(--radius-md);
  transition:all var(--duration-fast) var(--ease-bounce);
}
.nav__mobile-sub-link:hover {
  background:var(--color-blue);
  color:white;
  border-color:var(--color-warm-black);
  box-shadow:2px 2px 0 var(--color-warm-black);
  transform:translateX(5px);
}

/* Icon boxes — smaller than desktop mega nav */
.nav__mobile-sub-icon {
  width:32px;
  height:32px;
  flex-shrink:0;
  border:2px solid var(--color-warm-black);
  border-radius:var(--radius-md);
  box-shadow:2px 2px 0 var(--color-warm-black);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:box-shadow var(--duration-fast) var(--ease-bounce);
}
.nav__mobile-sub-icon svg { width:14px; height:14px; stroke-width:2; }
.nav__mobile-sub-icon--blue   { background:var(--color-blue);   color:white; }
.nav__mobile-sub-icon--red    { background:var(--color-red);    color:white; }
.nav__mobile-sub-icon--yellow { background:var(--color-yellow); color:var(--color-warm-black); }

/* Only show on mobile */
@media (min-width:901px) {
  .nav__mobile-trigger,
  .nav__mobile-sub { display:none; }
}