:root {
  --ink: #2c2c34;
  --cream: #fffaed;
  --green: #2c2c34;
  --lime: #d1d161;
  --yellow: #ffde94;
  --lilac: #ffbde8;
  --blue: #99b0ed;
  --coral: #ff7d59;
  --peach: #faa894;
  --blush: #ffe5e0;
  --soft-pink: #ffedea;
  --soft-blue: #cddbf9;
  --line: rgba(44, 44, 52, 0.22);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: "DM Sans", sans-serif;
  line-height: 1.5;
}

a { color: inherit; }
.site-header {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4vw;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 250, 237, .92);
  backdrop-filter: blur(12px);
}
.logo {
  display: flex;
  gap: 8px;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
}
.logo-mark {
  width: 43px;
  height: 38px;
  position: relative;
  display: flex;
  place-items: center;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  background: var(--coral);
  border-radius: 50% 50% 12% 50%;
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-5deg);
  transition: transform .2s ease;
}
.logo:hover .logo-mark { transform: rotate(2deg) scale(1.04); }
.logo-mark b { font: 700 15px/1 "Space Grotesk"; letter-spacing: -.08em; }
.logo-mark i {
  width: 15px;
  height: 15px;
  position: absolute;
  right: -5px;
  top: -5px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--yellow);
  border-radius: 50%;
  font: normal 9px/1 "Space Grotesk";
}
.logo-word {
  display: flex;
  flex-direction: column;
  font: 700 17px/.85 "Space Grotesk";
  letter-spacing: -.04em;
}
.logo-word small {
  margin-top: 5px;
  color: var(--coral);
  font: 700 7px/1 "DM Sans";
  letter-spacing: .16em;
  text-transform: uppercase;
}
.footer-logo .logo-mark {
  color: var(--ink);
  background: var(--lilac);
}
.footer-logo .logo-word small {
  color: var(--ink);
}
nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
nav a { font-size: 14px; font-weight: 600; text-decoration: none; }
.nav-cta { padding: 11px 16px; border: 1px solid var(--ink); border-radius: 99px; }
.menu-button { display: none; }

h1, h2, h3 {
  font-family: "Space Grotesk", sans-serif;
  line-height: 1;
  letter-spacing: -.055em;
  margin: 0;
}
h1 { font-size: clamp(4rem, 8vw, 8.8rem); }
h2 { font-size: clamp(3rem, 5.5vw, 6.6rem); }
h3 { font-size: 2rem; }
em { color: var(--green); font-family: Georgia, serif; font-weight: 400; }
.eyebrow, .section-number {
  margin: 0 0 28px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
}
.section-number.light { color: var(--lime); }
.section-pad { padding: 120px 6vw; }

.hero {
  min-height: calc(100vh - 78px);
  padding: 7vh 6vw 6vh;
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 4% 8%, var(--lilac) 0 8%, transparent 8.2%),
    radial-gradient(circle at 96% 95%, var(--yellow) 0 13%, transparent 13.2%),
    var(--cream);
}
.hero-copy { position: relative; z-index: 2; }
.hero .eyebrow { width: fit-content; padding: 10px 15px; border: 1px solid var(--ink); border-radius: 99px; background: var(--yellow); transform: rotate(-1deg); }
.hero .eyebrow span { color: var(--coral); }
.hero h1 { font-size: clamp(3.9rem, 7.1vw, 8.4rem); line-height: .88; }
.hero h1 em { display: inline-block; color: var(--coral); transform: rotate(-2deg); }
.hero-intro { max-width: 540px; padding-left: 20px; font-size: 18px; margin: 35px 0; border-left: 4px solid var(--blue); }
.hero-actions { display: flex; gap: 28px; align-items: center; }
.hero-proof { max-width: 670px; margin-top: 34px; display: flex; flex-wrap: wrap; gap: 10px; }
.hero-proof span { padding: 10px 13px; color: var(--ink); background: var(--soft-blue); border-radius: 99px; font-size: 12px; font-weight: 700; }
.hero-proof span:nth-child(2) { background: var(--lilac); }
.hero-proof span:nth-child(3) { background: var(--yellow); }
.button {
  border: 0;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 35px;
  padding: 15px 18px 15px 22px;
  border-radius: 99px;
  font: 700 14px "DM Sans";
  text-decoration: none;
  cursor: pointer;
}
.button span { font-size: 20px; }
.button-primary { color: var(--cream); background: var(--coral); box-shadow: 6px 6px 0 var(--ink); }
.button-primary:hover { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--ink); }
.text-link { font-size: 14px; font-weight: 600; text-underline-offset: 5px; }
.hero-art {
  min-height: 620px;
  position: relative;
}
.hero-shape {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: 700 18px/1 "Space Grotesk";
  letter-spacing: -.05em;
  box-shadow: 12px 14px 0 rgba(44,44,52,.1);
}
.shape-main {
  width: min(37vw, 470px);
  height: min(37vw, 470px);
  top: 11%;
  left: 7%;
  color: var(--cream);
  background: var(--ink);
  border-radius: 50% 50% 14% 50%;
  transform: rotate(-5deg);
}
.shape-main span { color: var(--lilac); font-size: clamp(2rem, 4vw, 4.5rem); }
.shape-main strong { font-size: clamp(3rem, 6.5vw, 7rem); letter-spacing: -.09em; }
.shape-main small { margin-top: 18px; color: var(--yellow); font-size: 9px; letter-spacing: .18em; }
.shape-talk {
  width: 165px; height: 145px;
  left: -5%; bottom: 8%;
  color: var(--ink); background: var(--lilac);
  border-radius: 50% 50% 50% 10%;
  font-size: 25px; transform: rotate(8deg);
}
.shape-safe {
  width: 120px; height: 120px;
  right: 0; top: 5%;
  color: var(--ink); background: var(--yellow);
  border-radius: 50%; transform: rotate(12deg);
}
.shape-honest {
  width: 155px; height: 80px;
  right: -3%; bottom: 13%;
  color: var(--cream); background: var(--coral);
  border-radius: 50%; transform: rotate(-10deg);
}
.hero-squiggle {
  position: absolute;
  width: 160px; height: 70px;
  left: 0; top: 5%;
  border-top: 18px solid var(--blue);
  border-radius: 50%;
  transform: rotate(-15deg);
}
.star { position: absolute; right: 5%; top: 35%; z-index: 4; color: var(--blue); font-size: 75px; transform: rotate(12deg); }

.ticker { overflow: hidden; background: var(--green); color: var(--lime); padding: 15px 0; }
.ticker div { width: max-content; display: flex; gap: 26px; animation: slide 28s linear infinite; }
.ticker span { font: 600 13px "Space Grotesk"; letter-spacing: .1em; }
@keyframes slide { to { transform: translateX(-25%); } }

.intro { min-height: 620px; position: relative; display: grid; grid-template-columns: .7fr 2.3fr; align-items: center; overflow: hidden; background: var(--yellow); }
.intro::before, .intro::after { content: ""; position: absolute; pointer-events: none; }
.intro::before { width: 290px; height: 290px; left: -80px; bottom: -90px; border-radius: 50%; background: var(--lilac); }
.intro::after { width: 150px; height: 340px; right: 5vw; top: -130px; border-radius: 0 0 100px 100px; background: var(--coral); transform: rotate(24deg); }
.intro .section-number { align-self: start; position: relative; z-index: 1; }
.intro > div { max-width: 1000px; position: relative; z-index: 1; padding: 70px; border-radius: 180px 20px 180px 20px; background: var(--cream); box-shadow: 16px 16px 0 var(--peach); transform: rotate(-1deg); }
.intro h2 { margin-bottom: 35px; font-size: clamp(3rem, 5vw, 6rem); }
.intro p:last-child { max-width: 670px; margin-left: auto; font-size: 18px; }

.free-tool { display: grid; grid-template-columns: 1.1fr .9fr; gap: 8vw; align-items: center; overflow: hidden; background: var(--soft-blue); }
.tool-card { padding: 58px; border-radius: 18px 150px 18px 18px; background: var(--cream); box-shadow: 14px 14px 0 var(--blue); transform: rotate(-1deg); }
.tool-card h2 { margin-bottom: 28px; font-size: clamp(3rem, 5vw, 6rem); }
.tool-card p:not(.section-number) { max-width: 620px; margin-bottom: 28px; font-size: 17px; }
.tool-preview {
  min-height: 420px;
  padding: 38px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  color: var(--cream);
  background: var(--coral);
  border-radius: 150px 22px 150px 22px;
  box-shadow: 14px 14px 0 var(--ink);
  transform: rotate(4deg);
}
.tool-preview span { color: var(--yellow); font: 700 12px "DM Sans"; letter-spacing: .18em; text-transform: uppercase; }
.tool-preview strong { margin: 20px 0; font: 700 clamp(3rem, 6vw, 6.5rem)/.85 "Space Grotesk"; letter-spacing: -.08em; }
.tool-preview small { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

.themes { position: relative; overflow: hidden; background: var(--soft-pink); }
.themes::after { content: "✦"; position: absolute; right: 2vw; top: 35%; color: var(--coral); font-size: clamp(5rem, 10vw, 11rem); opacity: .22; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 65px; }
.section-heading h2 { text-align: right; }
.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; position: relative; z-index: 1; }
.theme-card {
  min-height: 390px;
  padding: 28px;
  border-radius: 90px 14px 14px 14px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 0 rgba(44,44,52,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.theme-card:nth-child(2), .theme-card:nth-child(5) { border-radius: 130px 18px 130px 18px; text-align: left; }
.theme-card:nth-child(3), .theme-card:nth-child(6) { border-radius: 14px 14px 90px 14px; }
.theme-card:nth-child(odd) { transform: rotate(-1deg); }
.theme-card:nth-child(even) { transform: rotate(1deg); }
.theme-card:hover { transform: translateY(-10px) rotate(0); box-shadow: 0 20px 0 rgba(44,44,52,.08); }
.card-icon { margin: auto; font: 500 90px "Space Grotesk"; }
.theme-card p { font-size: 11px; font-weight: 700; letter-spacing: .15em; }
.theme-card h3 { margin-bottom: 15px; font-size: clamp(1.65rem, 2.1vw, 2.2rem); }
.theme-card > span:last-child { font-size: 14px; }
.card-yellow { background: var(--yellow); }
.card-lilac { background: var(--lilac); }
.card-blue { background: var(--blue); }
.card-coral { background: var(--peach); }
.card-green { color: var(--cream); background: var(--green); }
.card-cream { background: var(--soft-blue); }
.themes-note { width: fit-content; margin: 55px auto 0; padding: 15px 24px; position: relative; z-index: 1; text-align: center; font-size: 14px; border: 1px solid var(--ink); border-radius: 99px; background: var(--cream); transform: rotate(-1deg); }

.approach {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10vw;
  color: var(--cream);
  background: var(--green);
}
.approach::after { content: "?"; position: absolute; left: -2vw; bottom: -8vw; color: var(--lilac); font: 700 clamp(15rem, 31vw, 32rem)/.7 "Space Grotesk"; opacity: .12; transform: rotate(-12deg); }
.approach-copy { position: sticky; top: 150px; align-self: start; }
.approach-copy h2 { margin-bottom: 30px; position: relative; z-index: 1; }
.approach-copy p:last-child { max-width: 440px; color: var(--blush); }
.steps { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; display: grid; gap: 18px; }
.steps li { display: grid; grid-template-columns: 45px 1fr; gap: 18px; padding: 28px; color: var(--ink); border-radius: 14px 70px 14px 14px; background: var(--yellow); transition: transform .25s ease; }
.steps li:nth-child(2) { background: var(--lilac); border-radius: 70px 14px 14px 14px; transform: translateX(-25px); }
.steps li:nth-child(3) { background: var(--blue); transform: translateX(18px); }
.steps li:nth-child(4) { color: var(--cream); background: var(--coral); border-radius: 14px 14px 70px 14px; transform: translateX(-12px); }
.steps li:hover { transform: translateX(0) rotate(-1deg); }
.steps span { color: var(--ink); font-size: 11px; font-weight: 700; }
.steps h3 { margin-bottom: 10px; font-size: 27px; letter-spacing: -.03em; }
.steps p { color: inherit; margin: 0; font-size: 14px; }
.choice-helper {
  grid-column: 2;
  padding: 28px;
  position: relative;
  z-index: 1;
  color: var(--ink);
  background: var(--cream);
  border-radius: 80px 14px 14px 14px;
  box-shadow: 10px 10px 0 var(--lilac);
  transform: rotate(1deg);
}
.choice-helper p { margin: 0 0 12px; color: var(--coral); font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.choice-helper h3 { margin-bottom: 12px; font-size: clamp(1.8rem, 2.5vw, 3rem); }
.choice-helper span { display: block; margin-bottom: 18px; font-size: 14px; }
.choice-helper a { font-weight: 700; text-underline-offset: 5px; }

.for-who { overflow: hidden; background: var(--cream); }
.for-who h2 { max-width: 900px; margin-bottom: 75px; }
.audience-grid { display: grid; grid-template-columns: 1.05fr .95fr 1fr; grid-template-rows: auto auto; gap: 22px; align-items: stretch; }
.audience-grid article {
  min-height: 285px;
  padding: 27px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 10px 0 rgba(44,44,52,.06);
}
.audience-grid article:hover { transform: translateY(-8px) rotate(0); box-shadow: 0 18px 0 rgba(44,44,52,.08); }
.audience-grid p, .format-grid span { margin: 0; color: var(--coral); font-size: 11px; font-weight: 700; letter-spacing: .15em; }
.audience-grid b { margin: auto; font: 500 clamp(4rem, 7vw, 7.5rem)/1 "Space Grotesk"; }
.audience-grid h3 { margin: 0 0 14px; font-size: clamp(1.8rem, 2.7vw, 3.2rem); }
.audience-grid span { max-width: 390px; font-size: 14px; }
.audience-youth { grid-row: span 2; color: var(--cream); background: var(--ink); border-radius: 140px 140px 16px 16px; transform: rotate(-1.5deg); }
.audience-youth p { color: var(--lilac); }
.audience-youth b { color: var(--lilac); }
.audience-education { background: var(--yellow); border-radius: 12px 100px 12px 12px; transform: rotate(1deg); }
.audience-education b { color: var(--coral); }
.audience-care { background: var(--blue); border-radius: 130px 18px 130px 18px; text-align: left; transform: rotate(-1deg); }
.audience-care span { margin-inline: auto; }
.audience-care b { color: var(--cream); }
.audience-parents { background: var(--lilac); border-radius: 100px 12px 12px 12px; transform: rotate(1.5deg); }
.audience-parents b { color: var(--coral); }
.audience-organisations { color: var(--cream); background: var(--coral); border-radius: 12px 12px 100px 12px; transform: rotate(-1deg); }
.audience-organisations p { color: var(--cream); }
.audience-organisations b { color: var(--yellow); }

.trust { position: relative; overflow: hidden; background: var(--soft-pink); }
.trust::before { content: ""; width: 260px; height: 260px; position: absolute; right: -80px; top: 80px; border-radius: 50%; background: var(--yellow); opacity: .65; }
.trust-heading { position: relative; z-index: 1; }
.trust-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; position: relative; z-index: 1; }
.trust-grid article { min-height: 320px; padding: 34px; display: flex; flex-direction: column; color: var(--ink); box-shadow: 0 12px 0 rgba(44,44,52,.06); transition: transform .25s ease; }
.trust-grid article:hover { transform: translateY(-8px) rotate(0); }
.trust-grid span { color: var(--coral); font-size: 11px; font-weight: 700; letter-spacing: .15em; }
.trust-grid h3 { margin: auto 0 16px; font-size: clamp(1.6rem, 2.3vw, 2.8rem); }
.trust-grid p { margin: 0; font-size: 14px; }
.trust-grid blockquote { margin: auto 0 18px; font: 500 clamp(1.6rem, 2.2vw, 2.6rem)/1.05 "Space Grotesk"; letter-spacing: -.05em; }
.trust-social { grid-column: span 3; background: var(--yellow); border-radius: 130px 14px 14px 14px; transform: rotate(-1deg); }
.trust-authority { grid-column: span 3; color: var(--cream) !important; background: var(--ink); border-radius: 14px 14px 130px 14px; transform: rotate(1deg); }
.trust-authority span { color: var(--lilac); }
.trust-unity { grid-column: span 2; background: var(--blue); border-radius: 120px 16px 120px 16px; text-align: left; transform: rotate(-1deg); }
.trust-liking { grid-column: span 2; background: var(--lilac); border-radius: 14px 100px; transform: rotate(1deg); }
.trust-scarcity { grid-column: span 2; color: var(--cream) !important; background: var(--coral); border-radius: 100px 14px; transform: rotate(-1deg); }
.trust-scarcity span { color: var(--cream); }

.formats { position: relative; overflow: hidden; color: var(--cream); background: var(--green); }
.formats::after { content: ""; width: 280px; height: 280px; position: absolute; right: -80px; top: -80px; border: 70px solid var(--lilac); border-radius: 50%; opacity: .8; }
.formats h2 { max-width: 900px; margin-bottom: 70px; position: relative; z-index: 1; }
.format-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; position: relative; z-index: 1; }
.format-grid article { min-height: 270px; padding: 25px; display: flex; flex-direction: column; color: var(--ink); background: var(--cream); transition: transform .25s ease; }
.format-grid article:nth-child(1) { grid-column: span 2; border-radius: 100px 12px 12px 12px; background: var(--lilac); transform: rotate(-1deg); }
.format-grid article:nth-child(2) { grid-column: span 2; border-radius: 120px 16px 120px 16px; background: var(--yellow); text-align: left; transform: rotate(1deg); }
.format-grid article:nth-child(3) { grid-column: span 2; border-radius: 12px 12px 100px 12px; background: var(--blue); transform: rotate(-1deg); }
.format-grid article:nth-child(4) { grid-column: 2 / span 2; border-radius: 12px 100px; background: var(--peach); transform: rotate(1deg); }
.format-grid article:nth-child(5) { grid-column: span 2; border-radius: 100px 12px; background: var(--lime); transform: rotate(-1deg); }
.format-grid article:hover { transform: translateY(-8px) rotate(0); }
.format-grid span { color: var(--coral); }
.format-grid h3 { margin: auto 0 14px; font-size: clamp(1.55rem, 2vw, 2.2rem); }
.format-grid p { margin: 0; color: var(--ink); font-size: 13px; }

.who-we-are { display: grid; grid-template-columns: .8fr 1.2fr; gap: 9vw; position: relative; overflow: hidden; background: var(--soft-blue); }
.who-we-are::after { content: "◎"; position: absolute; left: -60px; bottom: -100px; color: var(--blue); font: 500 350px/1 "Space Grotesk"; opacity: .65; }
.who-heading { align-self: start; position: sticky; top: 150px; }
.who-heading h2 { font-size: clamp(3rem, 4.7vw, 5.8rem); }
.who-content { padding-top: 38px; position: relative; z-index: 1; }
.who-intro { max-width: 700px; margin: 0 0 55px; padding: 35px; font: 500 clamp(1.5rem, 2.4vw, 2.8rem)/1.2 "Space Grotesk"; letter-spacing: -.045em; border-radius: 14px 100px 14px 14px; background: var(--cream); box-shadow: 12px 12px 0 var(--blue); transform: rotate(1deg); }
.motivation-grid { display: grid; gap: 18px; }
.motivation-grid article { display: grid; grid-template-columns: 45px .8fr 1.2fr; gap: 22px; padding: 27px; border-radius: 14px 70px 14px 14px; background: rgba(255,250,237,.72); }
.motivation-grid article:nth-child(2) { border-radius: 70px 14px 14px 14px; transform: translateX(-25px); background: var(--lilac); }
.motivation-grid article:nth-child(3) { border-radius: 14px 14px 70px 14px; background: var(--yellow); transform: translateX(15px); }
.motivation-grid span { color: var(--coral); font-size: 11px; font-weight: 700; letter-spacing: .15em; }
.motivation-grid h3 { font-size: clamp(1.45rem, 2vw, 2.2rem); letter-spacing: -.04em; }
.motivation-grid p { margin: 0; font-size: 14px; }

.about { display: grid; grid-template-columns: 1.2fr .8fr; gap: 8vw; position: relative; overflow: hidden; background: var(--yellow); }
.about::after { content: "✦"; position: absolute; right: 2vw; bottom: -5vw; color: var(--coral); font-size: 18vw; opacity: .25; }
.about-statement { min-height: 520px; padding: 65px; display: flex; align-items: center; position: relative; z-index: 1; border-radius: 170px 24px 170px 24px; background: var(--lilac); transform: rotate(-2deg); }
.quote-mark { align-self: flex-start; font: 140px Georgia; line-height: .7; }
blockquote { margin: 0; font: 500 clamp(2.3rem, 4vw, 5rem)/1.05 "Space Grotesk"; letter-spacing: -.06em; }
.about-copy { align-self: center; position: relative; z-index: 1; padding: 40px; border-radius: 14px 90px 14px 14px; background: var(--cream); box-shadow: 12px 12px 0 var(--peach); transform: rotate(1deg); }
.about-copy h2 { margin-bottom: 30px; font-size: clamp(3rem, 4vw, 5rem); }
.about-copy p:last-child { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }

.contact {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12vw;
  color: var(--cream);
  background: var(--ink);
}
.contact::before { content: ""; width: 430px; height: 430px; position: absolute; left: -220px; bottom: -210px; border: 95px solid var(--blue); border-radius: 50%; opacity: .75; }
.contact > div { position: relative; z-index: 1; }
.contact h2 { margin-bottom: 30px; }
.contact > div > p:not(.section-number) { color: var(--blush); max-width: 470px; }
.contact-stickers { margin-top: 55px; display: flex; flex-wrap: wrap; gap: 12px; }
.contact-stickers span { padding: 14px 18px; color: var(--ink); background: var(--yellow); border-radius: 50%; font: 700 11px "Space Grotesk"; letter-spacing: .12em; transform: rotate(-6deg); }
.contact-stickers span:nth-child(2) { background: var(--lilac); transform: rotate(5deg); }
.contact-stickers span:nth-child(3) { background: var(--blue); transform: rotate(-2deg); }
form { padding: 40px; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 24px; color: var(--ink); border-radius: 100px 14px 14px 14px; background: var(--cream); box-shadow: 14px 14px 0 var(--coral); transform: rotate(-1deg); }
label { display: flex; flex-direction: column; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
input, textarea, select {
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 8px 0 13px;
  outline: 0;
  resize: vertical;
  color: var(--ink);
  background: transparent;
  font: 16px "DM Sans";
}
select { appearance: none; cursor: pointer; }
input:focus, textarea:focus, select:focus { border-color: var(--coral); }
input::placeholder, textarea::placeholder { color: #8c8583; }
.button-light { margin-top: 8px; color: var(--green); background: var(--lime); }
.form-status { min-height: 22px; margin: 0; color: var(--lime); font-size: 13px; }

footer { display: flex; justify-content: space-between; align-items: center; padding: 35px 6vw; background: var(--lime); font-size: 12px; font-weight: 600; }

@media (max-width: 900px) {
  nav { display: none; position: absolute; top: 78px; left: 0; right: 0; padding: 25px 4vw; flex-direction: column; align-items: stretch; background: var(--cream); border-bottom: 1px solid var(--line); }
  nav.open { display: flex; }
  .menu-button { display: block; border: 1px solid var(--ink); border-radius: 50px; padding: 8px 14px; background: transparent; font-weight: 700; }
  .hero { grid-template-columns: 1fr; padding-top: 75px; }
  .hero-art { min-height: 500px; margin-top: 10px; }
  .shape-main { width: 390px; height: 390px; max-width: 78vw; max-height: 78vw; left: 12%; }
  .intro, .free-tool, .approach, .who-we-are, .about, .contact { grid-template-columns: 1fr; gap: 65px; }
  .intro p:last-child { margin-left: 0; }
  .intro > div { padding: 50px; border-radius: 100px 18px 100px 18px; }
  .approach-copy { position: static; }
  .steps li:nth-child(n) { transform: none; }
  .choice-helper { grid-column: auto; transform: none; }
  .who-heading { position: static; }
  .theme-grid { grid-template-columns: 1fr 1fr; }
  .theme-card { min-height: 320px; }
  .audience-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .audience-youth { grid-row: auto; }
  .audience-organisations { grid-column: span 2; }
  .format-grid { grid-template-columns: 1fr 1fr; }
  .format-grid article:nth-child(n) { grid-column: auto; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-grid article:nth-child(n) { grid-column: auto; }
  .motivation-grid article:nth-child(n) { transform: none; }
  .about-statement { min-height: 440px; padding: 55px; }
  form { transform: none; }
}

@media (max-width: 560px) {
  .section-pad { padding: 80px 6vw; }
  h1 { font-size: 3.8rem; }
  h2 { font-size: 3.1rem; }
  .hero { min-height: auto; }
  .hero h1 { font-size: 3.55rem; }
  .hero-intro { font-size: 16px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .hero-proof { flex-direction: column; align-items: flex-start; }
  .hero-art { min-height: 390px; }
  .shape-main { width: 285px; height: 285px; max-width: none; max-height: none; left: 6%; }
  .shape-main strong { font-size: 3.6rem; }
  .shape-main span { font-size: 2.4rem; }
  .shape-talk { width: 110px; height: 100px; left: 0; font-size: 18px; }
  .shape-safe { width: 80px; height: 80px; right: 2%; font-size: 12px; }
  .shape-honest { width: 110px; height: 62px; right: 0; font-size: 13px; }
  .hero-squiggle { width: 100px; height: 50px; }
  .star { font-size: 45px; }
  .intro { min-height: auto; }
  .intro > div { padding: 35px 26px; border-radius: 60px 14px 60px 14px; box-shadow: 8px 8px 0 var(--peach); transform: none; }
  .intro::after { display: none; }
  .tool-card { padding: 34px 26px; border-radius: 60px 14px; box-shadow: 8px 8px 0 var(--blue); transform: none; }
  .tool-preview { min-height: 320px; padding: 26px; transform: none; }
  .theme-grid { grid-template-columns: 1fr; }
  .audience-grid, .trust-grid, .format-grid { grid-template-columns: 1fr; }
  .audience-organisations { grid-column: auto; }
  .audience-grid article { min-height: 300px; transform: none; border-radius: 55px 12px; }
  .audience-care { border-radius: 55px 12px; min-height: 300px; }
  .trust-grid article:nth-child(n) { border-radius: 55px 12px; transform: none; text-align: left; }
  .trust-unity { min-height: 300px; border-radius: 55px 12px !important; text-align: left !important; }
  .section-heading { align-items: start; flex-direction: column; gap: 20px; }
  .section-heading h2 { text-align: left; }
  .theme-card { min-height: 300px; }
  .theme-card:nth-child(n) { border-radius: 55px 12px; transform: none; text-align: left; }
  .card-icon { font-size: 70px; }
  .steps li:nth-child(n) { border-radius: 45px 12px; }
  .formats h2 { margin-bottom: 45px; }
  .format-grid article:nth-child(n) { min-height: 250px; border-radius: 55px 12px; transform: none; text-align: left; }
  .who-intro { padding: 27px; transform: none; }
  .motivation-grid article:nth-child(n) { border-radius: 45px 12px; }
  .about { gap: 40px; }
  .about-statement { min-height: 390px; padding: 38px; border-radius: 70px 12px; transform: none; }
  .about-copy { padding: 30px; transform: none; }
  .motivation-grid article { grid-template-columns: 35px 1fr; }
  .motivation-grid article p { grid-column: 2; }
  form { padding: 30px 24px; border-radius: 55px 12px; box-shadow: 8px 8px 0 var(--coral); }
  footer { align-items: flex-start; flex-direction: column; gap: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; }
}