:root {
  --navy: #173d78;
  --navy-deep: #102d5e;
  --blue: #4f91d7;
  --blue-mid: #73afea;
  --blue-light: #e5f1ff;
  --blue-pale: #f1f7ff;
  --paper: #f8faff;
  --white: #fff;
  --ink: #203f70;
  --muted: #657b9b;
  --red: #df5554;
  --yellow: #f3d66f;
  --line: #cbdcf0;
  --shadow: 0 16px 42px rgba(23, 61, 120, .10);
  --shadow-strong: 0 24px 60px rgba(23, 61, 120, .17);
  --radius: 24px;
  --max: 1120px;
}

* { box-sizing: border-box; min-width: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  width: 100%;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 8% 8%, rgba(111, 171, 231, .13), transparent 34%),
    radial-gradient(ellipse at 94% 42%, rgba(111, 171, 231, .10), transparent 34%),
    var(--paper);
  font-family: 'Nunito', system-ui, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .42;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.11'/%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
::selection { color: #fff; background: var(--navy); }
.paper-grain { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"); }
.section-wrap { width: min(var(--max), calc(100% - 40px)); margin-inline: auto; }
.skip-link { position: absolute; top: -60px; left: 12px; z-index: 100; padding: 10px 16px; color: #fff; background: var(--navy); border-radius: 10px; }
.skip-link:focus { top: 12px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 35; border-bottom: 1px solid rgba(203, 220, 240, .8); background: rgba(248, 250, 255, .91); backdrop-filter: blur(14px); }
.nav-shell { width: min(var(--max), calc(100% - 40px)); min-height: 76px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex: 0 0 auto; }
.brand strong { display: block; color: var(--navy); font-size: 14px; font-weight: 1000; letter-spacing: 2px; line-height: 1.2; }
.brand small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; letter-spacing: .25px; }
.brand-mark { width: 36px; height: 36px; display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding: 7px; border-radius: 11px; background: var(--navy); transform: rotate(-5deg); }
.brand-mark span { width: 5px; border-radius: 8px; background: #fff; }
.brand-mark span:nth-child(1) { height: 12px; }
.brand-mark span:nth-child(2) { height: 19px; background: #8bc0f6; }
.brand-mark span:nth-child(3) { height: 15px; background: var(--yellow); }
.main-nav { display: flex; align-items: center; justify-content: flex-end; gap: clamp(12px, 2vw, 25px); }
.main-nav a { color: #506888; text-decoration: none; font-size: 12px; font-weight: 900; white-space: nowrap; transition: color .2s ease, background .2s ease; }
.main-nav a:hover { color: var(--blue); }
.main-nav .nav-cta { padding: 11px 17px; color: #fff; border-radius: 999px; background: var(--navy); box-shadow: 0 6px 16px rgba(23, 61, 120, .16); }
.main-nav .nav-cta:hover { color: #fff; background: var(--blue); }
.menu-toggle { display: none; width: 42px; height: 42px; padding: 9px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; }
.menu-toggle span { display: block; width: 20px; height: 2px; margin: 4px auto; border-radius: 4px; background: var(--navy); }

/* Hero — poster-first visual direction */
.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .72fr); align-items: center; gap: clamp(28px, 5vw, 68px); padding-top: clamp(56px, 8vw, 100px); padding-bottom: 68px; }
.hero::before { content: ""; position: absolute; z-index: -2; top: 34px; left: 0; right: 0; height: 500px; border-radius: 48% 52% 40% 60% / 30% 38% 62% 70%; background: linear-gradient(115deg, rgba(218, 237, 255, .2), rgba(202, 227, 255, .72), rgba(229, 241, 255, .32)); transform: rotate(-2deg); }
.hero::after { content: ""; position: absolute; z-index: -1; width: 180px; height: 140px; left: 0; bottom: 115px; border-radius: 48% 52% 39% 61%; background: rgba(88, 151, 218, .12); transform: rotate(-20deg); }
.hero-copy { padding-block: 18px; }
.eyebrow, .section-kicker { color: var(--blue); font-size: 10px; font-weight: 1000; letter-spacing: 1.8px; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.eyebrow-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px rgba(223, 85, 84, .12); }
.hero h1 { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0 0 22px; line-height: .82; letter-spacing: -.075em; font-weight: 1000; }
.stop-word { color: var(--navy); font-size: clamp(82px, 10.8vw, 132px); text-shadow: 2px 3px 0 rgba(23, 61, 120, .08); }
.bullying-word { color: #5d9edc; font-size: clamp(48px, 6.9vw, 82px); letter-spacing: -.065em; text-shadow: 2px 3px 0 #fff, 4px 6px 0 rgba(23, 61, 120, .13); white-space: nowrap; }
.exclaim { color: var(--red); }
.hero-lead { max-width: 540px; margin: 0 0 9px; color: var(--navy); font-family: 'Kalam', cursive; font-size: clamp(19px, 2vw, 25px); font-weight: 700; line-height: 1.35; }
.hero-lead strong { color: #396fae; }
.hero-sub { max-width: 535px; margin: 0; color: #5d7291; font-size: 14px; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 25px; }
.btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 19px; border: 1px solid transparent; border-radius: 999px; font-size: 12px; font-weight: 1000; text-decoration: none; text-align: center; cursor: pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: #fff; background: var(--navy); box-shadow: 0 9px 20px rgba(23, 61, 120, .18); }
.btn-primary:hover { background: #245493; box-shadow: 0 12px 25px rgba(23, 61, 120, .22); }
.btn-quiet { color: var(--navy); border-color: #b9d1ed; background: rgba(255,255,255,.72); }
.btn-quiet:hover { background: #fff; }
.hero-note { display: flex; align-items: center; gap: 9px; margin-top: 25px; color: #617895; font-family: 'Kalam', cursive; font-size: 15px; }
.note-star { color: var(--red); font-size: 20px; }
.hero-art { position: relative; justify-self: center; width: min(100%, 350px); padding: 14px; }
.hero-art::before { content: ""; position: absolute; inset: 12% 0 7% 0; z-index: -1; border-radius: 43% 57% 56% 44% / 36% 46% 54% 64%; background: #8dbce9; opacity: .48; transform: rotate(-7deg); }
.poster-frame { position: relative; padding: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.95); border-radius: 19px; background: #fff; box-shadow: var(--shadow-strong); transform: rotate(1.2deg); }
.poster-frame img { width: 100%; height: auto; border-radius: 11px; }
.hero-sticker { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; max-width: 152px; padding: 10px 13px; border: 2px solid #fff; border-radius: 15px; color: var(--navy); background: #fff; box-shadow: 0 9px 25px rgba(23,61,120,.15); font-family: 'Kalam', cursive; font-size: 13px; line-height: 1.1; transform: rotate(-6deg); }
.hero-sticker span { color: var(--red); font-size: 24px; }
.sticker-top { top: 7%; right: 0; }
.sticker-bottom { bottom: 8%; left: 0; transform: rotate(5deg); }
.hero-bottomline { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 12px; color: #4b78ae; font-size: 10px; font-weight: 1000; letter-spacing: 2px; }
.hero-bottomline i { width: 5px; height: 5px; border-radius: 50%; background: var(--red); }

/* Shared section heading and layout */
.section { padding-top: 96px; }
.section-heading { display: grid; grid-template-columns: minmax(0, .92fr) minmax(250px, .72fr); align-items: end; gap: 40px; margin-bottom: 35px; }
.section-heading h2, .quiz-header h2, .team-heading h2 { margin: 9px 0 0; color: var(--navy); font-size: clamp(36px, 4.5vw, 54px); font-weight: 1000; letter-spacing: -.055em; line-height: 1.03; }
.section-heading h2 em, .team-heading h2 em { color: var(--blue); font-family: 'Kalam', cursive; font-style: normal; font-weight: 700; letter-spacing: -.04em; }
.section-heading > p { max-width: 490px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.85; }

/* Intro strip */
.intro-strip { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; align-items: center; gap: 18px; margin-top: 18px; padding: 22px 26px; border: 1px solid #c9def5; border-radius: 21px; background: rgba(255,255,255,.88); box-shadow: var(--shadow); }
.intro-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--red); font-size: 25px; font-weight: 1000; }
.intro-strip strong { color: var(--navy); font-size: 16px; }
.intro-strip p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.text-link { color: var(--blue); font-size: 11px; font-weight: 1000; text-decoration: none; white-space: nowrap; }
.text-link:hover { text-decoration: underline; }

/* Types of bullying */
.type-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 17px; }
.type-card { position: relative; display: flex; flex-direction: column; min-height: 295px; padding: 23px; overflow: hidden; border: 1px solid var(--line); border-radius: 21px; background: rgba(255,255,255,.94); box-shadow: 0 8px 25px rgba(23,61,120,.055); transition: transform .22s ease, box-shadow .22s ease; }
.type-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.type-card::after { content: ""; position: absolute; width: 115px; height: 100px; top: 0; right: 0; border-radius: 0 0 0 100%; background: rgba(116,174,230,.15); }
.type-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.type-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 14px; color: var(--navy); background: #e7f2ff; font-size: 22px; font-weight: 1000; }
.type-number { color: #8aa6c8; font-size: 11px; font-weight: 1000; letter-spacing: 1px; }
.type-card h3 { margin: 0; color: var(--navy); font-size: 18px; font-weight: 1000; line-height: 1.2; }
.type-alias { margin: 4px 0 11px !important; color: var(--blue) !important; font-family: 'Kalam', cursive; font-size: 14px !important; }
.type-card > p:not(.type-alias) { margin: 0 0 13px; color: #607592; font-size: 12px; line-height: 1.75; }
.example-box { margin-top: auto; padding: 12px 13px; border-left: 3px solid #75aee7; border-radius: 0 11px 11px 0; color: #536c8e; background: #f0f6ff; font-size: 11px; line-height: 1.65; }
.example-box b { color: var(--navy); }
.type-tag { align-self: flex-start; margin-top: 13px; padding: 5px 10px; border-radius: 30px; color: #4779b1; background: #eaf4ff; font-size: 9px; font-weight: 1000; }
.small-note { display: flex; align-items: flex-start; gap: 12px; margin-top: 22px; padding: 16px 19px; border-radius: 15px; background: #fff5df; color: #725a26; }
.small-note > span { color: #d4a839; font-size: 20px; }
.small-note p { margin: 0; font-size: 12px; line-height: 1.7; }
.small-note strong { color: #5c4518; }

/* Poster message band */
.quote-band { position: relative; margin-top: 95px; padding: 50px 26px 55px; overflow: hidden; border: 1px solid rgba(255,255,255,.3); border-radius: 26px; color: #fff; background: var(--navy); text-align: center; box-shadow: var(--shadow-strong); }
.quote-band::before, .quote-band::after { content: ""; position: absolute; z-index: 0; width: 260px; height: 200px; border-radius: 50%; background: rgba(103,163,226,.28); }
.quote-band::before { top: 0; left: 0; }
.quote-band::after { bottom: 0; right: 0; }
.quote-band > * { position: relative; z-index: 1; }
.quote-scribble { position: absolute !important; top: 14px; right: 11%; color: rgba(255,255,255,.32); font-size: 47px; transform: rotate(-15deg); }
.quote-label { margin: 0 0 9px; color: #9dcaff; font-size: 10px; font-weight: 1000; letter-spacing: 2px; }
.quote-band h2 { margin: 0; color: #fff; font-family: 'Kalam', cursive; font-size: clamp(25px, 3.5vw, 40px); font-weight: 700; line-height: 1.25; }
.quote-band h2 em { color: var(--yellow); font-style: normal; }
.quote-underline { width: min(280px, 65%); height: 5px; display: block; margin: 15px auto 0; border-radius: 50%; background: var(--yellow); transform: rotate(-2deg); }

/* Impact */
.impact-layout { display: grid; grid-template-columns: minmax(220px,.78fr) minmax(0,1.22fr); align-items: center; gap: clamp(28px, 5vw, 65px); }
.impact-visual { position: relative; min-height: 380px; display: grid; place-items: center; overflow: hidden; border-radius: 27px; background: linear-gradient(145deg, #e7f2ff, #c7e1fb); }
.impact-circle { position: absolute; border-radius: 50%; }
.circle-back { width: 84%; height: auto; aspect-ratio: 1; background: rgba(89,151,218,.23); transform: rotate(-15deg); }
.circle-front { width: 68%; height: auto; aspect-ratio: 1; border: 2px dashed rgba(23,61,120,.35); background: rgba(255,255,255,.42); }
.impact-heart { z-index: 1; color: var(--red); font-size: clamp(78px, 10vw, 150px); line-height: 1; text-shadow: 0 8px 0 rgba(23,61,120,.08); }
.impact-visual-copy { position: absolute; right: 22px; bottom: 22px; z-index: 2; color: var(--navy); font-family: 'Kalam', cursive; font-size: 22px; font-weight: 700; line-height: 1.05; text-align: right; transform: rotate(-5deg); }
.impact-doodle { position: absolute; top: 22px; right: 27px; color: var(--red); font-size: 32px; }
.impact-list { display: grid; gap: 3px; }
.impact-item { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 15px; padding: 18px 0; border-bottom: 1px solid #dbe7f4; }
.impact-item:last-child { border-bottom: 0; }
.impact-index { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--blue); font-size: 13px; font-weight: 1000; }
.impact-item h3 { margin: 0 0 4px; color: var(--navy); font-size: 16px; font-weight: 1000; }
.impact-item p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.support-callout { display: flex; align-items: center; gap: 15px; margin-top: 25px; padding: 18px 22px; border: 1px solid #f1d4d4; border-radius: 16px; background: #fff8f8; }
.support-symbol { flex: 0 0 auto; color: var(--red); font-size: 27px; }
.support-callout p { margin: 0; color: #6b6070; font-size: 12px; line-height: 1.7; }
.support-callout strong { color: var(--navy); }

/* Statistics */
.data-section { padding-bottom: 20px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.stat-card { display: flex; flex-direction: column; min-height: 260px; padding: 21px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 8px 26px rgba(23,61,120,.06); }
.stat-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--blue); font-size: 9px; font-weight: 1000; letter-spacing: .6px; text-transform: uppercase; }
.stat-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #5aa58a; box-shadow: 0 0 0 4px rgba(90,165,138,.13); }
.stat-number { margin: 20px 0 3px; color: var(--navy); font-size: clamp(36px, 4vw, 48px); font-weight: 1000; letter-spacing: -.06em; line-height: 1; }
.stat-card h3 { margin: 9px 0 7px; color: var(--navy); font-size: 15px; font-weight: 1000; line-height: 1.35; }
.stat-card p { margin: 0 0 16px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.stat-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid #e5edf7; color: #7388a3; font-size: 9px; }
.stat-foot a { color: var(--blue); font-weight: 1000; text-decoration: none; }
.stat-foot a:hover { text-decoration: underline; }
.data-warning { display: flex; align-items: flex-start; gap: 13px; margin-top: 20px; padding: 18px; border: 1px solid #f0dfb6; border-radius: 16px; background: #fffaf0; }
.warning-mark { width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #d5a53d; font-weight: 1000; }
.data-warning strong { color: #6f551e; font-size: 13px; }
.data-warning p { margin: 4px 0; color: #806d49; font-size: 11px; line-height: 1.7; }
.data-warning small { color: #9b895f; font-size: 9px; }
.methodology { margin-top: 15px; padding: 18px 20px; border-radius: 16px; background: #edf5ff; }
.methodology h3 { margin: 0 0 8px; color: var(--navy); font-size: 14px; }
.methodology ul { margin: 0; padding-left: 18px; color: #617895; font-size: 11px; line-height: 1.8; }
.methodology p { margin: 10px 0 0; color: #7b8fa9; font-size: 10px; }
.methodology code { padding: 2px 5px; border-radius: 5px; color: var(--navy); background: #fff; }

/* Legal timeline */
.law-section { margin-top: 75px; padding: 90px 0; background: linear-gradient(135deg, #eaf4ff, #dcecff); }
.law-section .section-heading { margin-bottom: 32px; }
.law-timeline { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.law-card { display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 16px; padding: 22px; border: 1px solid rgba(151,187,227,.65); border-radius: 19px; background: rgba(255,255,255,.91); box-shadow: 0 8px 25px rgba(23,61,120,.06); }
.law-card.law-current { border: 2px solid #6eaae5; box-shadow: 0 10px 30px rgba(79,145,215,.13); }
.law-year { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; color: #fff; background: var(--navy); font-size: 16px; font-weight: 1000; }
.law-content { min-width: 0; }
.law-label { margin-bottom: 5px; color: var(--blue); font-size: 9px; font-weight: 1000; letter-spacing: 1px; }
.law-content h3 { margin: 0 0 9px; color: var(--navy); font-size: 17px; line-height: 1.35; }
.law-content p { margin: 0 0 9px; color: #617895; font-size: 11px; line-height: 1.8; }
.law-link { display: inline-block; margin-top: 4px; color: #347ac0; font-size: 10px; font-weight: 1000; text-decoration: none; }
.law-link:hover { text-decoration: underline; }
.legal-disclaimer { margin: 20px 0 0; color: #7186a3; font-size: 10px; line-height: 1.7; }

/* Action guidance */
.action-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.action-card { position: relative; min-height: 285px; padding: 21px 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: #fff; box-shadow: 0 8px 25px rgba(23,61,120,.055); }
.action-card::after { content: ""; position: absolute; width: 100px; height: 90px; top: 0; right: 0; border-radius: 0 0 0 100%; background: rgba(114,174,234,.17); }
.action-icon { display: block; margin-bottom: 14px; color: var(--blue); font-size: 29px; line-height: 1; }
.action-step { position: absolute; top: 20px; right: 18px; color: #8da8c9; font-size: 10px; font-weight: 1000; }
.action-card h3 { margin: 0 0 12px; color: var(--navy); font-size: 15px; font-weight: 1000; line-height: 1.35; }
.action-card ul { margin: 0; padding-left: 16px; color: #647a98; font-size: 10px; line-height: 1.8; }
.action-card li + li { margin-top: 5px; }
.action-card-blue { border-color: #9cc3ed; background: #edf6ff; }
.action-card-blue .action-icon { color: var(--navy); }

/* Help & report */
.help-section { padding-bottom: 30px; }
.help-panel { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 205px; align-items: center; gap: 35px; padding: clamp(26px, 4vw, 48px); overflow: hidden; border-radius: 27px; color: #fff; background: var(--navy); box-shadow: var(--shadow-strong); }
.help-panel::before, .help-panel::after { content: ""; position: absolute; width: 250px; height: 210px; border-radius: 50%; background: rgba(110,171,232,.17); }
.help-panel::before { top: 0; left: 25%; }
.help-panel::after { bottom: 0; right: 0; }
.help-copy { position: relative; z-index: 1; }
.help-copy .section-kicker { color: #9bc8f7; }
.help-copy h2 { margin: 9px 0 12px; color: #fff; font-size: clamp(30px, 4vw, 44px); font-weight: 1000; letter-spacing: -.05em; line-height: 1.08; }
.help-copy h2 em { color: var(--yellow); font-family: 'Kalam', cursive; font-style: normal; }
.help-copy > p { max-width: 660px; color: #d2e1f5; font-size: 12px; line-height: 1.8; }
.help-contact { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 15px 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 15px; background: rgba(255,255,255,.09); }
.contact-icon { width: 52px; height: 52px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 14px; color: var(--navy); background: var(--yellow); font-size: 19px; font-weight: 1000; }
.help-contact small, .help-contact strong, .help-contact span { display: block; }
.help-contact small { color: #a9c9ee; font-size: 9px; font-weight: 1000; letter-spacing: .8px; }
.help-contact strong { margin: 2px 0; color: #fff; font-size: 22px; line-height: 1.2; }
.help-contact div > span { color: #d1e2f8; font-size: 11px; }
.help-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 17px; }
.btn-yellow { color: var(--navy); background: var(--yellow); }
.btn-yellow:hover { background: #ffe68d; }
.btn-outline-light { color: #fff; border-color: rgba(255,255,255,.4); background: transparent; }
.btn-outline-light:hover { background: rgba(255,255,255,.1); }
.help-copy .help-small { margin: 15px 0 0; color: #a9bfdd; font-size: 10px; }
.help-stamp { position: relative; z-index: 1; justify-self: center; width: 184px; height: 184px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px dashed rgba(255,255,255,.55); border-radius: 50%; outline: 1px solid rgba(255,255,255,.4); outline-offset: 8px; color: #fff; transform: rotate(8deg); }
.help-stamp span { color: var(--yellow); font-size: 11px; font-weight: 1000; letter-spacing: 4px; }
.help-stamp strong { color: #fff; font-size: 28px; line-height: .92; text-align: center; }
.help-stamp i { margin-top: 6px; color: var(--yellow); font-size: 23px; font-style: normal; }
.report-template { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); align-items: center; gap: 17px; margin-top: 16px; padding: 22px; border: 1px dashed #9bbde2; border-radius: 18px; background: #edf6ff; }
.report-template .section-kicker { font-size: 9px; }
.report-template h3 { margin: 5px 0; color: var(--navy); font-size: 18px; }
.report-template p { margin: 0; color: #637995; font-size: 11px; line-height: 1.7; }
.report-template blockquote { margin: 0; padding: 15px 17px; border-left: 3px solid var(--blue); border-radius: 0 12px 12px 0; color: #294b79; background: #fff; font-family: 'Kalam', cursive; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.copy-template { grid-column: 2; justify-self: start; padding: 0; border: 0; color: var(--blue); background: transparent; font-size: 11px; font-weight: 1000; cursor: pointer; }
.copy-template:hover { text-decoration: underline; }

/* Poster download */
.poster-section { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(210px,300px); align-items: center; gap: clamp(25px, 5vw, 60px); margin-top: 60px; margin-bottom: 95px; padding: clamp(25px, 4.5vw, 48px); overflow: hidden; border: 1px solid #c7ddf5; border-radius: 25px; background: #e7f2ff; }
.poster-section::before { content: ""; position: absolute; top: -245px; right: 5%; width: 400px; height: 400px; border-radius: 50%; background: #cfe5fd; }
.poster-copy { position: relative; z-index: 1; }
.poster-copy h2 { margin: 10px 0; color: var(--navy); font-size: clamp(32px, 4vw, 48px); font-weight: 1000; letter-spacing: -.05em; line-height: 1.04; }
.poster-copy p { max-width: 520px; margin: 0 0 20px; color: #627995; font-size: 12px; line-height: 1.8; }
.poster-preview { position: relative; z-index: 1; display: block; width: 100%; padding: 8px; border: 1px solid #fff; border-radius: 13px; background: #fff; box-shadow: var(--shadow-strong); transform: rotate(1.5deg); transition: transform .2s ease; }
.poster-preview:hover { transform: rotate(0) translateY(-4px); }
.poster-preview img { width: 100%; height: auto; border-radius: 5px; }

/* Quiz */
.quiz-section { padding-bottom: 92px; }
.quiz-header { display: grid; grid-template-columns: minmax(0,1fr) minmax(240px,.7fr); align-items: end; gap: 30px; margin-bottom: 24px; }
.quiz-header h2 { font-size: clamp(34px, 4.4vw, 50px); }
.quiz-header > p { max-width: 440px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.quiz-card { padding: 16px 27px 24px; border: 1px solid var(--line); border-radius: 21px; background: #fff; box-shadow: var(--shadow); }
.quiz-question { margin: 0; padding: 19px 0; border: 0; border-bottom: 1px solid #e4edf7; }
.quiz-question legend { display: flex; gap: 11px; margin-bottom: 12px; color: var(--navy); font-size: 13px; font-weight: 1000; line-height: 1.55; }
.quiz-question legend span { color: var(--blue); }
.quiz-question label { display: flex; align-items: flex-start; gap: 10px; margin: 7px 0; padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; color: #5e7390; background: #f5f9fe; font-size: 11px; line-height: 1.5; cursor: pointer; transition: .2s ease; }
.quiz-question label:hover { border-color: #a8c7ea; background: #eff6ff; }
.quiz-question input { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--blue); }
.quiz-question label:has(input:checked) { border-color: #9fc4ee; color: var(--navy); background: #e7f2ff; font-weight: 900; }
.quiz-submit-row { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.quiz-result { margin: 0; color: #6d8098; font-size: 11px; }
.quiz-result.success { color: #27815c; font-weight: 1000; }
.quiz-result.error { color: var(--red); font-weight: 1000; }

/* Closing banner */
.closing { position: relative; margin-bottom: 80px; padding: 58px 25px 64px; overflow: hidden; border-radius: 27px; background: #e4f1ff; text-align: center; }
.closing::before, .closing::after { content: ""; position: absolute; width: 210px; height: 165px; border-radius: 50%; background: rgba(111,171,231,.32); }
.closing::before { top: 0; left: 0; }
.closing::after { right: 0; bottom: 0; }
.closing-sparks { position: relative; color: var(--red); font-size: 22px; letter-spacing: 11px; }
.closing > p { position: relative; margin: 7px 0; color: var(--blue); font-size: 9px; font-weight: 1000; letter-spacing: 2px; }
.closing h2 { position: relative; margin: 10px 0 19px; color: var(--navy); font-size: clamp(34px, 5vw, 54px); font-weight: 1000; letter-spacing: -.05em; line-height: 1.05; }
.closing-link { position: relative; display: inline-flex; padding: 10px 18px; border-radius: 999px; color: #fff; background: var(--navy); font-size: 11px; font-weight: 1000; text-decoration: none; }

/* Group project credits */
.team-section { position: relative; display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); gap: clamp(25px, 5vw, 65px); align-items: start; padding: 12px 0 105px; }
.team-heading { position: sticky; top: 112px; }
.team-heading h2 { font-size: clamp(36px, 4vw, 49px); }
.team-heading > p { max-width: 330px; margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.team-members { display: flex; flex-direction: column; gap: 58px; }
.team-member { position: relative; display: flex; align-items: center; gap: 18px; width: min(100%, 520px); padding: 21px 23px; border: 1px solid #c8dcf2; border-radius: 20px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); }
.member-first { align-self: flex-start; }
.member-second { align-self: flex-end; }
.member-avatar { width: 60px; height: 60px; flex: 0 0 auto; display: grid; place-items: center; border: 3px solid #fff; border-radius: 18px; color: #fff; background: linear-gradient(145deg, #75b3ec, #315f9d); box-shadow: 0 4px 12px rgba(23,61,120,.18); font-size: 27px; font-weight: 1000; }
.member-info { min-width: 0; }
.member-role { display: block; color: #6d96c3; font-size: 9px; font-weight: 1000; letter-spacing: 1px; }
.member-info h3 { margin: 3px 0 5px; color: var(--navy); font-size: clamp(16px, 1.8vw, 20px); font-weight: 1000; line-height: 1.25; overflow-wrap: anywhere; }
.member-info a { display: inline-flex; align-items: center; gap: 7px; color: #4d86c2; font-size: 11px; font-weight: 900; text-decoration: none; overflow-wrap: anywhere; }
.member-info a:hover { color: var(--red); text-decoration: underline; }
.member-arrow { margin-left: 2px; }
.team-connector { display: flex; align-items: center; gap: 12px; width: min(100%, 360px); align-self: center; color: #89a4c4; font-size: 8px; font-weight: 1000; letter-spacing: 1.4px; }
.team-connector span { height: 1px; flex: 1; background: repeating-linear-gradient(90deg, #aac4e2 0 5px, transparent 5px 10px); }

/* Footer */
.site-footer { padding: 35px 0 20px; color: #fff; background: var(--navy-deep); }
.footer-main { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 23px; border-bottom: 1px solid rgba(255,255,255,.15); }
.footer-brand strong { color: #fff; }
.footer-brand small { color: #9cb4d7; }
.footer-main p { margin: 0; color: #b9c9e0; font-size: 11px; }
.footer-main > a:last-child { color: var(--yellow); font-size: 11px; font-weight: 1000; text-decoration: none; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 15px; color: #91a8ca; font-size: 9px; }
.footer-bottom a { color: #b6c8e4; text-decoration: none; }
.footer-bottom a:hover { text-decoration: underline; }
.toast { position: fixed; z-index: 60; bottom: 20px; left: 50%; max-width: calc(100% - 30px); padding: 11px 17px; border-radius: 999px; color: #fff; background: var(--navy); box-shadow: var(--shadow); font-size: 11px; font-weight: 900; text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%, 18px); transition: .25s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.reveal { opacity: 1; transform: none; }
.reveal.visible { opacity: 1; transform: none; }

/* Responsive desktop/tablet */
@media (max-width: 980px) {
  .main-nav { gap: 13px; }
  .main-nav a { font-size: 11px; }
  .hero { grid-template-columns: minmax(0,1fr) minmax(225px,.68fr); gap: 28px; }
  .type-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .action-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .law-timeline { grid-template-columns: 1fr; }
  .team-section { grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 72px; }
  .section-wrap, .nav-shell { width: min(var(--max), calc(100% - 32px)); }
  .nav-shell { min-height: 68px; }
  .menu-toggle { display: block; }
  .main-nav { position: absolute; top: 68px; left: 16px; right: 16px; display: none; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow-strong); }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 10px 12px; border-radius: 9px; font-size: 13px; }
  .main-nav a:hover { background: var(--blue-pale); }
  .main-nav .nav-cta { margin-top: 5px; text-align: center; }
  .hero { grid-template-columns: minmax(0,1fr); gap: 23px; padding-top: 47px; padding-bottom: 46px; }
  .hero-copy { text-align: center; }
  .eyebrow { justify-content: center; margin-bottom: 17px; font-size: 9px; letter-spacing: 1.3px; }
  .hero h1 { align-items: center; margin-bottom: 19px; }
  .stop-word { font-size: clamp(76px, 18vw, 120px); }
  .bullying-word { font-size: clamp(43px, 11.6vw, 76px); }
  .hero-lead { max-width: 560px; margin-inline: auto; font-size: clamp(19px, 5vw, 23px); }
  .hero-sub { max-width: 560px; margin-inline: auto; font-size: 12px; }
  .hero-actions { justify-content: center; margin-top: 20px; }
  .hero-note { justify-content: center; margin-top: 17px; font-size: 13px; }
  .hero-art { width: min(76%, 315px); padding: 10px; }
  .hero-sticker { padding: 8px 10px; font-size: 11px; }
  .hero-sticker span { font-size: 20px; }
  .sticker-top { right: 25px; }
  .sticker-bottom { left: 25px; }
  .hero-bottomline { gap: 12px; margin-top: 2px; font-size: 8px; letter-spacing: 1.3px; }
  .intro-strip { grid-template-columns: 42px minmax(0,1fr); gap: 12px; padding: 17px; }
  .intro-icon { width: 39px; height: 39px; font-size: 21px; }
  .intro-strip strong { font-size: 14px; }
  .intro-strip p { font-size: 11px; }
  .text-link { grid-column: 2; justify-self: start; }
  .section { padding-top: 76px; }
  .section-heading { grid-template-columns: minmax(0,1fr); gap: 13px; margin-bottom: 24px; }
  .section-heading h2 { font-size: clamp(38px, 10vw, 48px); }
  .section-heading > p { font-size: 12px; }
  .type-grid { gap: 12px; }
  .type-card { min-height: 0; padding: 19px; }
  .type-card h3 { font-size: 17px; }
  .type-card > p:not(.type-alias) { font-size: 11px; }
  .example-box { font-size: 10px; }
  .quote-band { margin-top: 70px; padding: 39px 18px 43px; border-radius: 21px; }
  .quote-band h2 { font-size: clamp(23px, 6vw, 31px); }
  .impact-layout { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .impact-visual { min-height: 280px; }
  .circle-back { width: 78%; height: auto; aspect-ratio: 1; }
  .circle-front { width: 63%; height: auto; aspect-ratio: 1; }
  .impact-heart { font-size: 120px; }
  .impact-visual-copy { right: 13px; bottom: 9px; font-size: 18px; }
  .impact-item { padding: 14px 0; }
  .impact-item h3 { font-size: 14px; }
  .impact-item p { font-size: 11px; }
  .support-callout { align-items: flex-start; padding: 15px; }
  .support-callout p { font-size: 11px; }
  .stats-grid { grid-template-columns: minmax(0,1fr); gap: 11px; }
  .stat-card { min-height: 0; padding: 19px; }
  .stat-number { margin-top: 14px; font-size: 42px; }
  .stat-card h3 { font-size: 15px; }
  .stat-card p { font-size: 11px; }
  .data-warning { padding: 15px; }
  .data-warning p { font-size: 10px; }
  .law-section { margin-top: 70px; padding: 72px 0; }
  .law-timeline { gap: 12px; }
  .law-card { grid-template-columns: 49px minmax(0,1fr); gap: 12px; padding: 16px 14px; }
  .law-year { width: 46px; height: 46px; border-radius: 13px; font-size: 14px; }
  .law-content h3 { font-size: 15px; }
  .law-content p { font-size: 10px; }
  .legal-disclaimer { font-size: 9px; }
  .action-grid { gap: 11px; }
  .action-card { min-height: 0; padding: 18px 16px; }
  .action-card h3 { font-size: 14px; }
  .action-card ul { font-size: 10px; }
  .help-panel { grid-template-columns: minmax(0,1fr); gap: 20px; padding: 27px 21px; border-radius: 22px; }
  .help-copy h2 { font-size: clamp(29px, 8vw, 38px); }
  .help-copy > p { font-size: 11px; }
  .help-stamp { display: none; }
  .help-contact { padding: 13px; }
  .help-contact strong { font-size: 20px; }
  .help-buttons { flex-direction: column; align-items: stretch; }
  .help-buttons .btn { width: 100%; }
  .report-template { grid-template-columns: minmax(0,1fr); padding: 17px; }
  .report-template h3 { font-size: 16px; }
  .report-template blockquote { font-size: 13px; }
  .copy-template { grid-column: 1; }
  .poster-section { grid-template-columns: minmax(0,1fr); gap: 22px; margin-top: 48px; margin-bottom: 72px; padding: 23px; }
  .poster-copy h2 { font-size: 38px; }
  .poster-copy p { font-size: 11px; }
  .poster-preview { width: min(78%, 280px); justify-self: center; }
  .quiz-section { padding-bottom: 70px; }
  .quiz-header { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .quiz-header h2 { font-size: 39px; }
  .quiz-header > p { font-size: 11px; }
  .quiz-card { padding: 9px 16px 18px; }
  .quiz-question { padding: 16px 0; }
  .quiz-question legend { font-size: 12px; }
  .quiz-question label { font-size: 10px; }
  .quiz-submit-row { align-items: flex-start; flex-direction: column; }
  .closing { margin-bottom: 61px; padding: 47px 16px 53px; }
  .closing h2 { font-size: clamp(34px, 9vw, 43px); }
  .team-section { grid-template-columns: minmax(0,1fr); gap: 25px; padding-bottom: 75px; }
  .team-heading { position: static; }
  .team-heading h2 { font-size: 42px; }
  .team-heading > p { font-size: 11px; }
  .team-members { gap: 46px; }
  .team-member { width: min(100%, 440px); gap: 13px; padding: 17px; }
  .member-avatar { width: 52px; height: 52px; border-radius: 15px; font-size: 23px; }
  .member-info h3 { font-size: 16px; }
  .member-info a { font-size: 10px; }
  .team-connector { width: 70%; font-size: 7px; }
  .member-second { align-self: flex-end; }
  .footer-main { align-items: flex-start; flex-direction: column; gap: 11px; }
  .footer-main p { margin: 0; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 5px; }
}
@media (max-width: 420px) {
  .section-wrap, .nav-shell { width: calc(100% - 26px); }
  .brand strong { font-size: 12px; }
  .brand small { font-size: 9px; }
  .brand-mark { width: 32px; height: 32px; }
  .hero { padding-top: 37px; }
  .eyebrow { font-size: 8px; }
  .stop-word { font-size: clamp(70px, 18.5vw, 82px); }
  .bullying-word { font-size: clamp(39px, 10.9vw, 48px); }
  .hero-art { width: min(82%, 285px); }
  .hero-sticker { max-width: 125px; font-size: 10px; }
  .hero-bottomline { gap: 8px; font-size: 7px; letter-spacing: 1px; }
  .type-grid, .action-grid { grid-template-columns: minmax(0,1fr); }
  .law-card { grid-template-columns: 42px minmax(0,1fr); gap: 10px; padding: 14px 12px; }
  .law-year { width: 41px; height: 41px; font-size: 12px; }
  .member-info h3 { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}