/* =========================================================
   GLOBAL HEALTH EXPLORERS
   GLOBAL AWARENESS — SHARED CSS
   Production-oriented responsive design

   Pages:
   01 — Our Interconnected World
   02 — Global Health Threats & Information
   03 — From Awareness to Action

   Design language follows the Indigenous Health pathway.
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {

  --gaw-navy: #0b2d4d;
  --gaw-navy-deep: #071f35;
  --gaw-blue: #174d73;
  --gaw-blue-soft: #eaf3f8;

  --gaw-teal: #167b78;
  --gaw-teal-soft: #e8f4f2;

  --gaw-earth: #6b5945;
  --gaw-earth-soft: #f2ede6;

  --gaw-purple: #51456f;
  --gaw-purple-soft: #f0edf7;

  --gaw-gold: #c59a45;
  --gaw-gold-soft: #f8f0df;

  --gaw-ink: #173042;
  --gaw-text: #405563;
  --gaw-muted: #6e7d86;

  --gaw-white: #ffffff;
  --gaw-light: #f5f8fa;
  --gaw-border: #dbe4e8;

  --gaw-shadow:
    0 18px 45px rgba(11, 45, 77, 0.10);

  --gaw-shadow-soft:
    0 10px 28px rgba(11, 45, 77, 0.07);

  --gaw-radius: 18px;
  --gaw-radius-small: 12px;

  --gaw-container: 1180px;

}


/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--gaw-white);
  color: var(--gaw-text);
  font-family:
    Inter,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  line-height: 1.7;
}

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

a {
  color: inherit;
}

button,
input {
  font: inherit;
}


/* =========================================================
   CONTAINER
========================================================= */

.gaw-container {
  width: min(
    calc(100% - 40px),
    var(--gaw-container)
  );

  margin-inline: auto;
}


/* =========================================================
   TOP BAR
========================================================= */

.gaw-topbar {
  background:
    linear-gradient(
      135deg,
      var(--gaw-navy-deep),
      var(--gaw-navy)
    );

  color: var(--gaw-white);
}

.gaw-topbar-inner {
  min-height: 82px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;
}


/* =========================================================
   BRAND
========================================================= */

.gaw-brand {
  display: inline-flex;
  align-items: center;

  gap: 13px;

  color: inherit;
  text-decoration: none;
}

.gaw-brand-mark {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 13px;

  background: rgba(255,255,255,0.08);

  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.gaw-brand-text {
  display: flex;
  flex-direction: column;
}

.gaw-brand-text strong {
  font-size: 17px;
  line-height: 1.2;
}

.gaw-brand-text small {
  margin-top: 3px;

  color: rgba(255,255,255,0.70);

  font-size: 11px;
  letter-spacing: 0.02em;
}


.gaw-tag {
  padding: 8px 15px;

  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;

  background: rgba(255,255,255,0.07);

  color: rgba(255,255,255,0.88);

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
}


/* =========================================================
   NAVIGATION
========================================================= */

.gaw-nav {
  position: sticky;
  top: 0;
  z-index: 100;

  background: var(--gaw-navy);

  box-shadow:
    0 8px 25px rgba(5, 25, 42, 0.12);
}

.gaw-nav-inner {
  min-height: 62px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 5px;

  overflow-x: auto;
  scrollbar-width: none;
}

.gaw-nav-inner::-webkit-scrollbar {
  display: none;
}

.gaw-nav a {
  flex: 0 0 auto;

  padding: 9px 14px;

  border-radius: 999px;

  color: rgba(255,255,255,0.78);

  text-decoration: none;

  font-size: 12px;
  font-weight: 700;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.gaw-nav a:hover {
  color: var(--gaw-white);
  background: rgba(255,255,255,0.10);
}

.gaw-nav a.active {
  color: var(--gaw-navy);
  background: var(--gaw-white);
}


/* =========================================================
   BREADCRUMB
========================================================= */

.gaw-breadcrumb-section {
  background: var(--gaw-light);

  border-bottom: 1px solid var(--gaw-border);
}

.gaw-breadcrumb {
  min-height: 52px;

  display: flex;
  align-items: center;

  gap: 9px;

  color: var(--gaw-muted);

  font-size: 12px;
}

.gaw-breadcrumb a {
  color: var(--gaw-blue);

  text-decoration: none;

  font-weight: 700;
}

.gaw-breadcrumb a:hover {
  text-decoration: underline;
}

.gaw-breadcrumb span {
  color: #9aa7ae;
}


/* =========================================================
   HERO
========================================================= */

.gaw-hero {
  position: relative;

  overflow: hidden;

  padding:
    76px
    0
    82px;

  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(22,123,120,0.10),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #f5f9fb 0%,
      #ffffff 100%
    );
}

.gaw-hero::after {
  content: "";

  position: absolute;

  width: 360px;
  height: 360px;

  right: -180px;
  bottom: -210px;

  border-radius: 50%;

  border: 1px solid rgba(22,123,120,0.12);

  pointer-events: none;
}

.gaw-hero-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(420px, 0.9fr);

  gap: 70px;

  align-items: center;
}

.gaw-hero-content {
  max-width: 650px;
}

.gaw-kicker {
  display: flex;
  align-items: center;

  gap: 11px;

  margin-bottom: 18px;

  color: var(--gaw-teal);

  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.gaw-kicker-num {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  background: var(--gaw-teal);

  color: white;

  font-size: 11px;
  letter-spacing: 0;
}

.gaw-hero h1 {
  margin: 0;

  color: var(--gaw-navy);

  font-size:
    clamp(42px, 5vw, 70px);

  line-height: 1.03;

  letter-spacing: -0.045em;
}

.gaw-hero h1 span {
  display: block;

  color: var(--gaw-teal);
}

.gaw-lead {
  max-width: 680px;

  margin:
    27px
    0
    15px;

  color: var(--gaw-ink);

  font-size: 21px;
  line-height: 1.6;
}

.gaw-support {
  max-width: 650px;

  margin: 0;

  color: var(--gaw-muted);

  font-size: 15px;
  line-height: 1.75;
}

.gaw-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 12px;

  margin-top: 30px;
}


/* =========================================================
   BUTTONS
========================================================= */

.gaw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  min-height: 48px;

  padding:
    0
    20px;

  border-radius: 999px;

  text-decoration: none;

  font-size: 13px;
  font-weight: 800;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.gaw-btn:hover {
  transform: translateY(-2px);
}

.gaw-btn-primary {
  background: var(--gaw-navy);
  color: white;

  box-shadow:
    0 9px 22px rgba(11,45,77,0.18);
}

.gaw-btn-primary:hover {
  background: var(--gaw-blue);
}

.gaw-btn-secondary {
  border: 1px solid var(--gaw-border);

  background: white;

  color: var(--gaw-navy);
}

.gaw-btn-secondary:hover {
  border-color: #b9cbd3;
  box-shadow: var(--gaw-shadow-soft);
}


/* =========================================================
   HERO IMAGE
========================================================= */

.gaw-hero-visual {
  position: relative;
}

.gaw-image-wrap {
  position: relative;

  padding: 12px;

  border-radius: 26px;

  background: white;

  box-shadow:
    0 30px 70px rgba(11,45,77,0.16);

  transform: rotate(1deg);
}

.gaw-image {
  width: 100%;

  aspect-ratio: 4 / 3;

  object-fit: cover;

  border-radius: 18px;
}

.gaw-caption {
  display: flex;
  align-items: center;

  gap: 8px;

  padding:
    12px
    4px
    2px;

  color: var(--gaw-muted);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.gaw-caption-dot {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: var(--gaw-teal);
}


/* =========================================================
   SECTIONS
========================================================= */

.gaw-section {
  padding:
    82px
    0;
}

.gaw-light {
  background: var(--gaw-light);
}

.gaw-earth {
  background:
    linear-gradient(
      135deg,
      #f3eee7,
      #faf8f5
    );
}

.gaw-blue {
  background:
    linear-gradient(
      135deg,
      #e9f3f8,
      #f4f8fa
    );
}

.gaw-purple {
  background:
    linear-gradient(
      135deg,
      #f0edf7,
      #faf9fc
    );
}


/* =========================================================
   SECTION HEADING
========================================================= */

.gaw-heading {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, 0.7fr);

  gap: 55px;

  align-items: end;

  margin-bottom: 40px;
}

.gaw-eyebrow {
  display: block;

  margin-bottom: 10px;

  color: var(--gaw-teal);

  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.gaw-heading h2 {
  margin: 0;

  color: var(--gaw-navy);

  font-size:
    clamp(30px, 4vw, 46px);

  line-height: 1.12;

  letter-spacing: -0.035em;
}

.gaw-heading > p {
  margin: 0;

  color: var(--gaw-muted);

  font-size: 15px;
}


/* =========================================================
   TWO-COLUMN GRID
========================================================= */

.gaw-grid-2 {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 24px;
}


/* =========================================================
   GENERAL CARDS
========================================================= */

.gaw-card {
  padding: 30px;

  border:
    1px solid
    var(--gaw-border);

  border-radius:
    var(--gaw-radius);

  background:
    rgba(255,255,255,0.92);

  box-shadow:
    var(--gaw-shadow-soft);
}

.gaw-card h3 {
  margin:
    10px
    0
    12px;

  color: var(--gaw-navy);

  font-size: 23px;
  line-height: 1.25;
}

.gaw-card p {
  margin:
    0
    0
    13px;

  font-size: 15px;
}

.gaw-card p:last-child {
  margin-bottom: 0;
}

.gaw-number {
  color: var(--gaw-teal);

  font-size: 10px;
  font-weight: 900;

  letter-spacing: 0.14em;
}


/* =========================================================
   CONCEPT GRID
========================================================= */

.gaw-concepts {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 16px;
}

.gaw-concept {
  min-height: 150px;

  padding: 22px;

  border:
    1px solid
    rgba(11,45,77,0.09);

  border-radius:
    var(--gaw-radius-small);

  background:
    rgba(255,255,255,0.78);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.gaw-concept:hover {
  transform: translateY(-3px);

  box-shadow:
    var(--gaw-shadow-soft);
}

.gaw-concept strong {
  display: block;

  margin-bottom: 9px;

  color: var(--gaw-navy);

  font-size: 15px;
}

.gaw-concept span {
  display: block;

  color: var(--gaw-muted);

  font-size: 13px;
  line-height: 1.6;
}


/* =========================================================
   QUOTE
========================================================= */

.gaw-quote {
  margin-top: 22px;

  padding:
    20px
    24px;

  border-left:
    4px solid
    var(--gaw-teal);

  border-radius:
    0
    12px
    12px
    0;

  background:
    rgba(255,255,255,0.72);

  color: var(--gaw-ink);

  font-size: 15px;
}


/* =========================================================
   HEALTH EVENT FLOW
========================================================= */

.gaw-flow {
  display: grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap: 12px;
}

.gaw-flow-item {
  position: relative;

  min-height: 140px;

  padding:
    24px
    18px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  border-radius:
    var(--gaw-radius-small);

  background:
    var(--gaw-navy);

  color: white;

  text-align: center;

  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.09em;
}

.gaw-flow-item:not(:last-child)::after {
  content: "→";

  position: absolute;

  right: -13px;
  top: 50%;

  transform:
    translateY(-50%);

  z-index: 2;

  color: var(--gaw-teal);

  font-size: 18px;
  font-weight: 900;
}

.gaw-flow-item small {
  margin-top: 9px;

  color: rgba(255,255,255,0.72);

  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;

  line-height: 1.5;
}


/* =========================================================
   THREAT GRID
========================================================= */

.gaw-threat-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 18px;
}

.gaw-threat {
  padding: 26px;

  border:
    1px solid
    var(--gaw-border);

  border-radius:
    var(--gaw-radius-small);

  background: white;

  box-shadow:
    var(--gaw-shadow-soft);
}

.gaw-threat .term {
  margin-bottom: 9px;

  color: var(--gaw-navy);

  font-size: 20px;
  font-weight: 800;
}

.gaw-threat small {
  display: block;

  color: var(--gaw-muted);

  font-size: 13px;
  line-height: 1.65;
}


/* =========================================================
   AUTHORITY BOX
========================================================= */

.gaw-authority {
  margin-top: 22px;

  padding:
    17px
    20px;

  border-radius:
    var(--gaw-radius-small);

  background:
    rgba(11,45,77,0.06);

  color: var(--gaw-ink);

  font-size: 13px;
}


/* =========================================================
   INFORMATION SOURCE BOX
========================================================= */

.gaw-source-box {
  padding: 30px;

  border:
    1px solid
    rgba(22,123,120,0.20);

  border-radius:
    var(--gaw-radius);

  background:
    linear-gradient(
      145deg,
      #f1f8f7,
      #ffffff
    );

  box-shadow:
    var(--gaw-shadow-soft);
}

.gaw-source-box h3 {
  margin:
    8px
    0
    20px;

  color: var(--gaw-navy);

  font-size: 23px;
  line-height: 1.25;
}

.gaw-check {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 10px;
}

.gaw-check > div {
  padding:
    14px;

  border:
    1px solid
    rgba(11,45,77,0.09);

  border-radius:
    10px;

  background:
    rgba(255,255,255,0.85);

  color: var(--gaw-muted);

  font-size: 12px;
  line-height: 1.5;
}

.gaw-check b {
  color: var(--gaw-teal);

  font-size: 10px;
  letter-spacing: 0.1em;
}


/* =========================================================
   MINI NOTE
========================================================= */

.gaw-mini-note {
  margin-top: 18px;

  padding:
    13px
    15px;

  border-left:
    3px solid
    var(--gaw-gold);

  background:
    rgba(197,154,69,0.08);

  color: var(--gaw-ink);

  font-size: 12px;
}


/* =========================================================
   ACTION LEVELS
========================================================= */

.gaw-levels {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 15px;
}

.gaw-level {
  min-height: 220px;

  padding: 23px;

  display: flex;
  flex-direction: column;

  gap: 10px;

  border:
    1px solid
    var(--gaw-border);

  border-radius:
    var(--gaw-radius-small);

  background: white;

  box-shadow:
    var(--gaw-shadow-soft);
}

.gaw-level .level {
  margin-bottom: 5px;

  color: var(--gaw-teal);

  font-size: 12px;
  font-weight: 900;

  letter-spacing: 0.12em;
}

.gaw-level span {
  color: var(--gaw-muted);

  font-size: 12px;
  line-height: 1.55;
}

.gaw-level b {
  color: var(--gaw-navy);
}


/* =========================================================
   ACTION STRIP
========================================================= */

.gaw-action-strip {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 15px;
}

.gaw-action {
  padding: 24px;

  border:
    1px solid
    rgba(11,45,77,0.10);

  border-radius:
    var(--gaw-radius-small);

  background:
    rgba(255,255,255,0.85);
}

.gaw-action strong {
  display: block;

  margin-bottom: 9px;

  color: var(--gaw-teal);

  font-size: 11px;
  letter-spacing: 0.13em;
}

.gaw-action span {
  color: var(--gaw-text);

  font-size: 13px;
  line-height: 1.6;
}


/* =========================================================
   MCQ HEADER
========================================================= */

.gaw-mcq-header {
  max-width: 760px;

  margin:
    0
    auto
    38px;

  text-align: center;
}

.gaw-mcq-header h2 {
  margin:
    0
    10px;

  color: var(--gaw-navy);

  font-size:
    clamp(29px, 4vw, 43px);

  line-height: 1.15;
}

.gaw-mcq-header p {
  margin: 0;

  color: var(--gaw-muted);

  font-size: 15px;
}


/* =========================================================
   MCQ QUESTIONS
========================================================= */

.gaw-mcq-list {
  display: grid;

  gap: 17px;
}

.gaw-question {
  position: relative;

  padding:
    27px
    30px
    29px
    78px;

  border:
    1px solid
    var(--gaw-border);

  border-radius:
    var(--gaw-radius-small);

  background: white;

  box-shadow:
    var(--gaw-shadow-soft);
}

.gaw-question > span {
  position: absolute;

  left: 25px;
  top: 27px;

  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  background:
    var(--gaw-navy);

  color: white;

  font-size: 11px;
  font-weight: 900;
}

.gaw-question h3 {
  margin:
    0
    0
    17px;

  color: var(--gaw-navy);

  font-size: 17px;
  line-height: 1.45;
}

.gaw-question label {
  display: block;

  margin-top: 9px;

  padding:
    10px
    12px;

  border:
    1px solid
    transparent;

  border-radius: 9px;

  background:
    #f7f9fa;

  color: var(--gaw-text);

  font-size: 13px;

  cursor: pointer;

  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.gaw-question label:hover {
  background:
    var(--gaw-teal-soft);

  border-color:
    rgba(22,123,120,0.18);
}

.gaw-question input {
  margin-right: 9px;

  accent-color:
    var(--gaw-teal);
}


/* =========================================================
   FINAL MESSAGE
========================================================= */

.gaw-final-message {
  max-width: 820px;

  margin-inline: auto;

  padding:
    45px
    50px;

  border-radius:
    24px;

  background:
    rgba(255,255,255,0.75);

  text-align: center;

  box-shadow:
    var(--gaw-shadow-soft);
}

.gaw-final-message h2 {
  margin:
    5px
    0
    15px;

  color: var(--gaw-navy);

  font-size:
    clamp(30px, 4vw, 46px);

  line-height: 1.12;
}

.gaw-final-message p {
  max-width: 700px;

  margin-inline: auto;

  color: var(--gaw-muted);

  font-size: 15px;
}


/* =========================================================
   NEXT CARD
========================================================= */

.gaw-next {
  padding:
    35px
    0
    70px;

  background: white;
}

.gaw-next-card {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;

  padding:
    35px
    40px;

  border-radius:
    22px;

  background:
    linear-gradient(
      135deg,
      var(--gaw-navy),
      var(--gaw-blue)
    );

  color: white;

  box-shadow:
    0 22px 55px
    rgba(11,45,77,0.20);
}

.gaw-next-card .gaw-eyebrow {
  color:
    rgba(255,255,255,0.62);
}

.gaw-next-card h2 {
  margin:
    3px
    0
    8px;

  color: white;

  font-size:
    clamp(25px, 3vw, 36px);

  line-height: 1.15;
}

.gaw-next-card p {
  margin: 0;

  color:
    rgba(255,255,255,0.75);

  font-size: 14px;
}

.gaw-next-card > a {
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;

  gap: 10px;

  padding:
    13px
    18px;

  border-radius: 999px;

  background: white;

  color: var(--gaw-navy);

  text-decoration: none;

  font-size: 13px;
  font-weight: 800;
}

.gaw-next-card > a:hover {
  transform: translateX(2px);
}


/* =========================================================
   FOOTER
========================================================= */

.gaw-footer {
  padding:
    60px
    0
    25px;

  background:
    var(--gaw-navy-deep);

  color: white;
}

.gaw-footer-grid {
  display: grid;

  grid-template-columns:
    1.4fr
    1fr
    1fr;

  gap: 55px;
}

.gaw-footer .gaw-brand {
  margin-bottom: 20px;
}

.gaw-footer p {
  max-width: 330px;

  margin: 0;

  color:
    rgba(255,255,255,0.60);

  font-size: 13px;
}

.gaw-footer h3 {
  margin:
    0
    0
    14px;

  color: white;

  font-size: 13px;

  letter-spacing: 0.05em;
}

.gaw-footer-grid > div > a {
  display: block;

  margin-top: 8px;

  color:
    rgba(255,255,255,0.62);

  text-decoration: none;

  font-size: 12px;
}

.gaw-footer-grid > div > a:hover {
  color: white;
}

.gaw-bottom {
  margin-top: 45px;
  padding-top: 20px;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  gap: 10px;

  border-top:
    1px solid
    rgba(255,255,255,0.10);

  color:
    rgba(255,255,255,0.42);

  font-size: 10px;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1050px) {

  .gaw-hero-grid {
    grid-template-columns: 1fr 0.85fr;
    gap: 40px;
  }

  .gaw-concepts {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .gaw-levels {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .gaw-action-strip {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .gaw-flow {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .gaw-flow-item:not(:last-child)::after {
    display: none;
  }

  .gaw-threat-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 760px) {

  .gaw-container {
    width:
      min(
        calc(100% - 28px),
        var(--gaw-container)
      );
  }


  .gaw-topbar-inner {
    min-height: 72px;
  }

  .gaw-tag {
    display: none;
  }

  .gaw-brand-text strong {
    font-size: 15px;
  }

  .gaw-brand-text small {
    font-size: 9px;
  }


  .gaw-nav-inner {
    justify-content: flex-start;

    min-height: 56px;
  }

  .gaw-nav a {
    padding:
      8px
      11px;

    font-size: 11px;
  }


  .gaw-breadcrumb {
    min-height: 46px;

    overflow-x: auto;

    white-space: nowrap;
  }


  .gaw-hero {
    padding:
      50px
      0
      55px;
  }

  .gaw-hero-grid {
    grid-template-columns: 1fr;

    gap: 40px;
  }

  .gaw-hero h1 {
    font-size:
      clamp(39px, 12vw, 56px);
  }

  .gaw-lead {
    font-size: 18px;
  }

  .gaw-image-wrap {
    transform: none;
  }


  .gaw-section {
    padding:
      58px
      0;
  }


  .gaw-heading {
    grid-template-columns: 1fr;

    gap: 15px;

    margin-bottom: 28px;
  }


  .gaw-grid-2 {
    grid-template-columns: 1fr;
  }


  .gaw-concepts {
    grid-template-columns: 1fr;
  }


  .gaw-flow {
    grid-template-columns: 1fr;
  }

  .gaw-flow-item {
    min-height: auto;

    padding: 22px;
  }


  .gaw-threat-grid {
    grid-template-columns: 1fr;
  }


  .gaw-levels {
    grid-template-columns: 1fr;
  }

  .gaw-level {
    min-height: auto;
  }


  .gaw-action-strip {
    grid-template-columns: 1fr;
  }


  .gaw-check {
    grid-template-columns: 1fr;
  }


  .gaw-question {
    padding:
      23px
      20px
      23px
      65px;
  }

  .gaw-question > span {
    left: 18px;
    top: 22px;
  }


  .gaw-final-message {
    padding:
      32px
      22px;
  }


  .gaw-next {
    padding:
      25px
      0
      50px;
  }

  .gaw-next-card {
    align-items: flex-start;
    flex-direction: column;

    padding:
      28px
      25px;
  }


  .gaw-footer-grid {
    grid-template-columns: 1fr;

    gap: 30px;
  }

  .gaw-bottom {
    flex-direction: column;

    gap: 7px;
  }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.gaw-nav a:focus-visible,
.gaw-btn:focus-visible,
.gaw-breadcrumb a:focus-visible,
.gaw-next-card a:focus-visible,
.gaw-footer a:focus-visible,
.gaw-question label:focus-within {
  outline:
    3px solid
    rgba(197,154,69,0.65);

  outline-offset: 3px;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }

}