/* Disrepair Claims Hub: shared stylesheet used by every page. */

/* Base tokens, layout and components */
:root {
  --ink:#14263A;
  --bg:#F4F7F9;
  --card:#fff;
  --line:#D5DEE5;
  --green:#2A7A66;
  --green-d:#1F5E4E;
  --amber:#E8A317;
  --muted:#51647A;
  --onink:#fff;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --ink:#0E1B2A;
    --bg:#0B141E;
    --card:#142231;
    --line:#27394B;
    --green:#3DA38A;
    --green-d:#2F8A74;
    --muted:#9DB0C3;
    --onink:#EAF1F7;
  }
}
:root[data-theme="dark"] {
  --ink:#0E1B2A;
  --bg:#0B141E;
  --card:#142231;
  --line:#27394B;
  --green:#3DA38A;
  --green-d:#2F8A74;
  --muted:#9DB0C3;
  --onink:#EAF1F7;
}
html {
  scroll-padding-top:env(safe-area-inset-top,0px);
  scroll-behavior:smooth;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 17px/1.6 "Source Sans 3",system-ui,sans-serif;
}
:root[data-theme="dark"] body,:root:not([data-theme="light"]) body {
  color:var(--onink);
}
@media (prefers-color-scheme:light) {
  body {
    color:var(--ink);
  }
}
h1,h2,h3 {
  font-family:"Bricolage Grotesque","Segoe UI",sans-serif;
  line-height:1.15;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
h1 {
  font-size:clamp(2rem,6vw,3.4rem);
}
h2 {
  font-size:clamp(1.6rem,4vw,2.3rem);
}
h3 {
  font-size:1.15rem;
}
a {
  color:inherit;
}
.wrap {
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
}
header {
  border-bottom:1px solid var(--line);
}
.nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 0;
}
.logo {
  font:700 1.25rem "Bricolage Grotesque",sans-serif;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:10px;
}
.logo i {
  width:26px;
  height:26px;
  border:3px solid var(--green);
  border-radius:4px 4px 0 0;
  border-bottom:none;
  position:relative;
  display:inline-block;
  clip-path:polygon(50% 0,100% 45%,100% 100%,0 100%,0 45%);
  background:var(--green);
}
.nav a.tel {
  font-weight:600;
  text-decoration:none;
}
.btn {
  display:inline-block;
  background:var(--green);
  color:#fff;
  border:0;
  border-radius:8px;
  padding:13px 22px;
  font:600 1rem "Source Sans 3",sans-serif;
  cursor:pointer;
  text-decoration:none;
}
.btn:hover {
  background:var(--green-d);
}
:focus-visible {
  outline:3px solid var(--amber);
  outline-offset:2px;
}
.hero {
  padding:44px 0 56px;
  display:grid;
  gap:36px;
  grid-template-columns:1.05fr .95fr;
  align-items:start;
}
.hero p.lead {
  font-size:1.15rem;
  color:var(--muted);
  max-width:52ch;
}
.ticks {
  list-style:none;
  padding:0;
  margin:20px 0 0;
  display:grid;
  gap:8px;
}
.ticks li::before {
  content:"";
  display:inline-block;
  width:.7em;
  height:.7em;
  margin-right:10px;
  background:var(--amber);
  border-radius:2px;
}
form {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:24px;
}
form h2 {
  font-size:1.4rem;
}
fieldset {
  border:0;
  padding:0;
  margin:0 0 16px;
}
legend,label.l {
  font-weight:600;
  display:block;
  margin-bottom:6px;
  font-size:.95rem;
}
.opts {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.opts label {
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 14px;
  cursor:pointer;
  font-size:.95rem;
  display:flex;
  gap:6px;
  align-items:center;
}
.opts label:has(input:checked) {
  border-color:var(--green);
  background:color-mix(in srgb,var(--green) 14%,transparent);
}
input[type=text],input[type=email],input[type=tel],input[type=date],textarea {
  width:100%;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--bg);
  color:inherit;
  font:inherit;
}
.two {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
form .btn {
  width:100%;
  margin-top:6px;
}
.small {
  font-size:.85rem;
  color:var(--muted);
}
#done {
  display:none;
  padding:18px;
  border-radius:8px;
  background:color-mix(in srgb,var(--green) 16%,transparent);
  font-weight:600;
}
.band {
  background:var(--ink);
  color:var(--onink);
  padding:34px 0;
}
.band .grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
.band h3 {
  color:var(--amber);
}
.band p {
  margin:0;
  font-size:.95rem;
  opacity:.9;
}
section.s {
  padding:64px 0;
}
.cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.card {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:20px;
}
.card p {
  margin:0;
  color:var(--muted);
  font-size:.97rem;
}
.steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  counter-reset:s;
  border-top:3px solid var(--green);
}
.steps div {
  padding:20px 18px 0 0;
  counter-increment:s;
}
.steps div::before {
  content:counter(s);
  font:700 1.6rem "Bricolage Grotesque",sans-serif;
  color:var(--green);
}
.steps p {
  margin:0;
  color:var(--muted);
  font-size:.97rem;
}
.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}
details {
  border-bottom:1px solid var(--line);
  padding:14px 0;
}
summary {
  cursor:pointer;
  font-weight:600;
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:12px;
}
summary::after {
  content:"+";
  font-size:1.3rem;
  line-height:1;
}
details[open] summary::after {
  content:"–";
}
details p {
  margin:10px 0 0;
  color:var(--muted);
}
.rights {
  background:var(--card);
  border-block:1px solid var(--line);
}
footer {
  background:var(--ink);
  color:var(--onink);
  padding:36px 0;
  font-size:.88rem;
}
footer p {
  max-width:85ch;
  opacity:.85;
  margin:.4em 0;
}
footer a {
  margin-right:16px;
}
@media (max-width:860px) {
  .hero,.split {
    grid-template-columns:1fr;
  }
  .band .grid,.steps {
    grid-template-columns:1fr 1fr;
  }
  .cards {
    grid-template-columns:1fr 1fr;
  }
  .steps div {
    padding-bottom:16px;
  }
}
@media (max-width:520px) {
  .cards,.band .grid,.steps,.two {
    grid-template-columns:1fr;
  }
  body {
    font-size:16px;
  }
}
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
}

/* Animated illustrations and icons */
.art {
  margin-top:28px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--card);
  overflow:hidden;
}
.art svg {
  display:block;
  width:100%;
  height:auto;
}
.ico {
  width:46px;
  height:46px;
  margin-bottom:10px;
  display:block;
}
.tb {
  transform-box:fill-box;
  transform-origin:center;
}
.cloud {
  animation:drift 9s ease-in-out infinite alternate;
}
.rain {
  animation:fall 1.3s linear infinite;
}
.stain {
  animation:stain 9s ease-in-out infinite;
}
.badge {
  animation:badge 9s ease-in-out infinite;
}
.gd {
  animation:drop 1.6s ease-in infinite;
}
.pu {
  animation:pulse 2.6s ease-in-out infinite;
}
.d2 {
  animation-delay:.8s;
}
.d3 {
  animation-delay:1.6s;
}
.flame {
  transform-origin:50% 100%;
  transform-box:fill-box;
  animation:flick .9s ease-in-out infinite;
}
.zap {
  animation:zap 2.2s linear infinite;
}
.crk {
  stroke-dashoffset:40;
  animation:crack 3.2s ease-in-out infinite;
}
.bug {
  animation:wob 1.4s ease-in-out infinite;
}
.hv {
  animation:hv 3s ease-in-out infinite;
}
@keyframes drift {
  from {
    transform:translateX(-26px);
  }
  to {
    transform:translateX(26px);
  }
}
@keyframes fall {
  0% {
    transform:translateY(0);
    opacity:0;
  }
  15% {
    opacity:1;
  }
  100% {
    transform:translateY(58px);
    opacity:0;
  }
}
@keyframes stain {
  0%,6% {
    transform:scale(.1);
    opacity:0;
  }
  48%,64% {
    transform:scale(1);
    opacity:.75;
  }
  76%,100% {
    transform:scale(.1);
    opacity:0;
  }
}
@keyframes badge {
  0%,68% {
    transform:scale(0);
    opacity:0;
  }
  77% {
    transform:scale(1.2);
    opacity:1;
  }
  84%,94% {
    transform:scale(1);
    opacity:1;
  }
  100% {
    transform:scale(0);
    opacity:0;
  }
}
@keyframes flick {
  0%,100% {
    transform:scaleY(1) scaleX(1);
  }
  50% {
    transform:scaleY(1.16) scaleX(.93);
  }
}
@keyframes zap {
  0%,40%,56%,100% {
    opacity:1;
  }
  46%,52% {
    opacity:.15;
  }
}
@keyframes crack {
  0% {
    stroke-dashoffset:40;
    opacity:1;
  }
  55%,85% {
    stroke-dashoffset:0;
    opacity:1;
  }
  100% {
    stroke-dashoffset:0;
    opacity:0;
  }
}
@keyframes wob {
  0%,100% {
    transform:translateX(-4px);
  }
  50% {
    transform:translateX(5px);
  }
}
@keyframes pulse {
  0%,100% {
    transform:scale(.7);
  }
  50% {
    transform:scale(1.15);
  }
}
@keyframes drop {
  0% {
    transform:translateY(0);
    opacity:0;
  }
  25% {
    opacity:1;
  }
  100% {
    transform:translateY(14px);
    opacity:0;
  }
}
@keyframes hv {
  0%,100% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(-4px);
  }
}
@media (prefers-reduced-motion:reduce) {
  .art *,.ico * {
    animation:none!important;
  }
  .stain {
    opacity:.6;
  }
  .crk {
    stroke-dashoffset:0;
  }
}
html {
  -webkit-text-size-adjust:100%;
}
body {
  overflow-x:clip;
}
.hero>*,.two>*,.cards>*,.split>*,.steps>*,.band .grid>* {
  min-width:0;
}
input[type=text],input[type=email],input[type=tel],input[type=date] {
  font-size:16px;
  min-height:46px;
  -webkit-appearance:none;
  appearance:none;
}
input[type=radio],input[type=checkbox] {
  width:18px;
  height:18px;
  accent-color:var(--green);
  flex:none;
}
.opts label {
  min-height:44px;
  padding:8px 16px;
}
summary {
  min-height:44px;
  align-items:center;
}
.mbar {
  display:none;
}
@media (max-width:860px) {
  .hero {
    padding:28px 0 40px;
    gap:18px;
  }
  .hero>div:first-child {
    display:contents;
  }
  .hero form {
    order:1;
  }
  .hero .art {
    order:2;
    margin-top:4px;
  }
  section.s {
    padding:44px 0;
  }
  .band {
    padding:28px 0;
  }
  .card {
    padding:18px;
  }
}
@media (max-width:700px) {
  body {
    padding-bottom:84px;
  }
  .nav a.tel {
    display:none;
  }
  .wrap {
    padding:0 16px;
  }
  form {
    padding:18px;
  }
  .btn {
    padding:15px 22px;
  }
  .mbar {
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:20;
    display:flex;
    gap:10px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    background:var(--card);
    border-top:1px solid var(--line);
  }
  .mbar a {
    flex:1;
    text-align:center;
    padding:13px 8px;
    border-radius:8px;
    font-weight:600;
    text-decoration:none;
  }
  .mbar .c {
    border:1px solid var(--line);
    color:inherit;
  }
  .mbar .g {
    background:var(--green);
    color:#fff;
  }
}

/* How it works animation */
.steps {
  position:relative;
  border-top-color:var(--line);
}
.steps::after {
  content:"";
  position:absolute;
  left:0;
  top:-3px;
  height:3px;
  background:var(--green);
  animation:fillbar 12s linear infinite;
}
.steps>div {
  opacity:.6;
  animation:actv 12s linear infinite;
  animation-delay:calc(var(--i)*3s);
}
.steps>div::before {
  display:block;
}
.si {
  width:46px;
  height:46px;
  display:block;
  margin:4px 0 8px;
}
.ln {
  stroke-dasharray:26;
  animation:ln 3s ease-out infinite;
}
.ln2 {
  animation-delay:.5s;
}
.ln3 {
  animation-delay:1s;
}
.sw {
  animation:sweep 3s ease-in-out infinite;
}
.flip {
  transform-box:fill-box;
  transform-origin:center;
  animation:flip 3s ease-in-out infinite;
}
@keyframes fillbar {
  0% {
    width:0;
    opacity:1;
  }
  88% {
    width:100%;
    opacity:1;
  }
  98% {
    width:100%;
    opacity:0;
  }
  100% {
    width:0;
    opacity:0;
  }
}
@keyframes actv {
  0% {
    opacity:.6;
  }
  4%,22% {
    opacity:1;
  }
  28%,100% {
    opacity:.6;
  }
}
@keyframes ln {
  0% {
    stroke-dashoffset:26;
  }
  50%,100% {
    stroke-dashoffset:0;
  }
}
@keyframes sweep {
  0%,100% {
    transform:translate(-4px,2px);
  }
  50% {
    transform:translate(5px,-3px);
  }
}
@keyframes flip {
  0%,100% {
    transform:scaleX(1);
  }
  50% {
    transform:scaleX(.15);
  }
}
@media (max-width:860px) {
  .steps::after {
    display:none;
  }
}
@media (prefers-reduced-motion:reduce) {
  .steps>div {
    opacity:1;
  }
  .steps::after {
    width:100%;
  }
  .ln {
    stroke-dashoffset:0;
  }
}

/* Multi-step form, legal sections, cookie banner, WhatsApp */
[hidden] {
  display:none!important;
}
.prog {
  height:6px;
  background:var(--line);
  border-radius:3px;
  overflow:hidden;
  margin:6px 0;
}
.prog i {
  display:block;
  height:100%;
  width:25%;
  background:var(--green);
  transition:width .35s;
}
.nav2 {
  display:flex;
  gap:10px;
  margin-top:8px;
}
.nav2 .btn {
  margin-top:0;
  width:auto;
  flex:1;
}
.nav2 .ghost {
  background:transparent;
  color:inherit;
  border:1px solid var(--line);
  flex:0 0 auto;
}
.err {
  color:#C8501E;
  font-size:.9rem;
  min-height:1.2em;
  margin:6px 0 0;
}
.res {
  background:color-mix(in srgb,var(--green) 14%,transparent);
  padding:14px;
  border-radius:8px;
  margin-bottom:14px;
  font-size:.97rem;
}
.chk {
  display:flex;
  gap:8px;
  font-size:.85rem;
  color:var(--muted);
  margin:10px 0;
  align-items:flex-start;
}
.vgrid {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:40px;
  align-items:center;
}
.phone {
  aspect-ratio:9/16;
  max-width:250px;
  width:100%;
  margin:0 auto;
  border:6px solid var(--ink);
  border-radius:26px;
  background:linear-gradient(160deg,#2A7A66,#14263A);
  display:grid;
  place-items:center;
  color:#fff;
  text-align:center;
  padding:16px;
  font-size:.9rem;
}
.play {
  width:64px;
  height:64px;
  border-radius:50%;
  background:#fff;
  display:grid;
  place-items:center;
  margin:0 auto 12px;
  animation:ring 2s ease-in-out infinite;
}
.play::after {
  content:"";
  border-left:18px solid #14263A;
  border-block:11px solid transparent;
  margin-left:5px;
}
@keyframes ring {
  0%,100% {
    box-shadow:0 0 0 0 rgba(255,255,255,.55);
  }
  50% {
    box-shadow:0 0 0 14px rgba(255,255,255,0);
  }
}
.chips {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chips span {
  border:1px solid var(--line);
  background:var(--card);
  border-radius:999px;
  padding:6px 14px;
  font-size:.95rem;
}
.ph {
  border-style:dashed;
}
.ph b {
  display:block;
  margin-top:10px;
  font-size:.9rem;
}
.cred {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin:18px 0 26px;
}
.cred .card {
  text-align:center;
  font-weight:600;
  padding:14px;
}
.trust3 {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-bottom:26px;
}
.wa {
  position:fixed;
  right:18px;
  bottom:18px;
  width:54px;
  height:54px;
  border-radius:50%;
  background:#25D366;
  display:grid;
  place-items:center;
  z-index:25;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.cc {
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:30;
  max-width:560px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px 16px;
  box-shadow:0 6px 24px rgba(0,0,0,.25);
  font-size:.9rem;
}
.cc div {
  display:flex;
  gap:8px;
  margin-top:10px;
}
.cc .btn {
  padding:9px 16px;
  margin:0;
}
footer button {
  background:none;
  border:0;
  color:inherit;
  font:inherit;
  text-decoration:underline;
  cursor:pointer;
  margin-right:16px;
  padding:0;
}
@media (max-width:860px) {
  .vgrid {
    grid-template-columns:1fr;
  }
  .cred {
    grid-template-columns:1fr 1fr;
  }
}
@media (max-width:700px) {
  .trust3 {
    grid-template-columns:1fr;
  }
  .wa {
    display:none;
  }
  .mbar a {
    font-size:.92rem;
    padding:13px 4px;
  }
  .cc {
    bottom:calc(84px + env(safe-area-inset-bottom,0px));
  }
}

/* Trading style and regulation bar */
.ts {
  display:block;
  font:400 .72rem "Source Sans 3",sans-serif;
  color:var(--muted);
  margin-top:2px;
}
.regbar {
  background:var(--card);
  border-bottom:1px solid var(--line);
  font-size:.85rem;
}
.regbar .wrap {
  display:flex;
  gap:12px;
  align-items:center;
  padding-top:8px;
  padding-bottom:8px;
}
.sra {
  border:1px solid var(--green);
  border-radius:6px;
  padding:3px 9px;
  text-decoration:none;
  font-weight:600;
  white-space:nowrap;
  color:var(--green);
}
.legal p,.legal li {
  max-width:75ch;
}

/* Colour theme (edit colours here) */
:root {
  --green:#0A7F64;
  --green-d:#07634E;
  --c1:#0A8F72;
  --c2:#FF6B4A;
  --c3:#FFC233;
  --c4:#2D9CDB;
  --c5:#7B5CFA;
  --c6:#14B8A6;
  --tint1:#E4F6EF;
  --tint2:#F0ECFF;
  --sky1:#BFE6FF;
  --sky2:#EAF8FF;
  --grass:#8CCB8E;
  --roof:#E8643F;
  --blob1:rgba(255,194,51,.38);
  --blob2:rgba(45,156,219,.28);
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --green:#3DA38A;
    --green-d:#2F8A74;
    --tint1:#10261F;
    --tint2:#1A1736;
    --sky1:#1B3E63;
    --sky2:#102842;
    --grass:#2C5A3A;
    --roof:#C4512F;
    --blob1:rgba(255,194,51,.12);
    --blob2:rgba(45,156,219,.14);
  }
}
:root[data-theme="dark"] {
  --green:#3DA38A;
  --green-d:#2F8A74;
  --tint1:#10261F;
  --tint2:#1A1736;
  --sky1:#1B3E63;
  --sky2:#102842;
  --grass:#2C5A3A;
  --roof:#C4512F;
  --blob1:rgba(255,194,51,.12);
  --blob2:rgba(45,156,219,.14);
}
body {
  background:linear-gradient(180deg,var(--tint1) 0,var(--bg) 820px) no-repeat,var(--bg);
}
.logo i {
  background:linear-gradient(135deg,var(--c1),var(--c4));
  border-color:var(--c1);
}
.btn {
  background:linear-gradient(135deg,#0A7F64,#0B8A8F);
  box-shadow:0 4px 14px rgba(10,127,100,.32);
  transition:transform .15s,box-shadow .15s;
}
.btn:hover {
  background:linear-gradient(135deg,#07634E,#0A7479);
  transform:translateY(-1px);
}
.nav2 .ghost {
  background:transparent;
  box-shadow:none;
}
.hero {
  position:relative;
  isolation:isolate;
}
.hero::before,.hero::after {
  content:"";
  position:absolute;
  z-index:-1;
  border-radius:50%;
  pointer-events:none;
}
.hero::before {
  width:420px;
  height:420px;
  top:-80px;
  left:-140px;
  background:radial-gradient(circle,var(--blob1),transparent 70%);
}
.hero::after {
  width:460px;
  height:460px;
  top:60px;
  right:-160px;
  background:radial-gradient(circle,var(--blob2),transparent 70%);
}
form {
  background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,var(--c1),var(--c4),var(--c3),var(--c2)) border-box;
  border:3px solid transparent;
  box-shadow:0 10px 30px rgba(20,38,58,.12);
}
.ticks li:nth-child(3n+1)::before {
  background:var(--c2);
}
.ticks li:nth-child(3n+2)::before {
  background:var(--c4);
}
.ticks li:nth-child(3n)::before {
  background:var(--c3);
}
.ticks li::before {
  border-radius:50%;
}
.art {
  background:linear-gradient(180deg,var(--sky1),var(--sky2) 62%,var(--grass));
  border:0;
  box-shadow:0 10px 30px rgba(20,38,58,.14);
}
.art svg>rect:first-child {
  fill:transparent;
}
.art svg rect[y="248"] {
  fill:var(--grass);
}
.art svg polygon {
  fill:var(--roof);
}
.art .cloud {
  fill:#fff;
  fill-opacity:.9;
}
.band {
  background:linear-gradient(110deg,#0B5E78,#0A7F64 55%,#1F8FCF);
}
.band h3 {
  color:#FFD25A;
}
.band p {
  opacity:1;
}
.band .grid>div::before {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:50%;
  margin-bottom:10px;
  font-weight:700;
  font-size:1.1rem;
  color:#14263A;
}
.band .grid>div:nth-child(1)::before {
  content:"\2713";
  background:#FFD25A;
}
.band .grid>div:nth-child(2)::before {
  content:"\00A3";
  background:#FFA58E;
}
.band .grid>div:nth-child(3)::before {
  content:"\2605";
  background:#9AD9FF;
}
.band .grid>div:nth-child(4)::before {
  content:"\00A7";
  background:#CABDFF;
}
section.s h2::after {
  content:"";
  display:block;
  width:56px;
  height:5px;
  border-radius:3px;
  margin-top:10px;
  background:linear-gradient(90deg,var(--c2),var(--c3));
}
.cards .card {
  border-top:5px solid var(--c1);
  background:color-mix(in srgb,var(--c1) 8%,var(--card));
}
.cards .card:nth-child(6n+2) {
  border-top-color:var(--c4);
  background:color-mix(in srgb,var(--c4) 8%,var(--card));
}
.cards .card:nth-child(6n+3) {
  border-top-color:var(--c2);
  background:color-mix(in srgb,var(--c2) 8%,var(--card));
}
.cards .card:nth-child(6n+4) {
  border-top-color:var(--c3);
  background:color-mix(in srgb,var(--c3) 12%,var(--card));
}
.cards .card:nth-child(6n+5) {
  border-top-color:var(--c5);
  background:color-mix(in srgb,var(--c5) 8%,var(--card));
}
.cards .card:nth-child(6n) {
  border-top-color:var(--c6);
  background:color-mix(in srgb,var(--c6) 8%,var(--card));
}
.steps>div::before {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--c);
  color:#fff;
  font-size:1.15rem;
  margin-bottom:6px;
}
.steps>div:nth-child(1) {
  --c:#0A7F64;
}
.steps>div:nth-child(2) {
  --c:#1F7FB8;
}
.steps>div:nth-child(3) {
  --c:#6A4AE0;
}
.steps>div:nth-child(4) {
  --c:#D6451F;
}
.steps::after {
  background:linear-gradient(90deg,#0A7F64,#1F7FB8,#6A4AE0,#D6451F);
}
.steps {
  border-top-color:var(--line);
}
.rights {
  background:linear-gradient(120deg,var(--tint1),var(--tint2));
  border-block:0;
}
.cred .card:nth-child(1) {
  border-top:5px solid var(--c1);
}
.cred .card:nth-child(2) {
  border-top:5px solid var(--c2);
}
.cred .card:nth-child(3) {
  border-top:5px solid var(--c4);
}
.cred .card:nth-child(4) {
  border-top:5px solid var(--c5);
}
.chips span:nth-child(4n+1) {
  border-color:var(--c1);
  background:color-mix(in srgb,var(--c1) 10%,var(--card));
}
.chips span:nth-child(4n+2) {
  border-color:var(--c4);
  background:color-mix(in srgb,var(--c4) 10%,var(--card));
}
.chips span:nth-child(4n+3) {
  border-color:var(--c2);
  background:color-mix(in srgb,var(--c2) 10%,var(--card));
}
.chips span:nth-child(4n) {
  border-color:var(--c5);
  background:color-mix(in srgb,var(--c5) 10%,var(--card));
}
details[open] {
  border-left:4px solid var(--c1);
  padding-left:12px;
}
details[open] summary {
  color:var(--green);
}
.regbar {
  background:linear-gradient(90deg,var(--tint1),var(--tint2));
}
.opts label:has(input:checked) {
  border-color:var(--c1);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--c1) 30%,transparent);
}
footer {
  background:linear-gradient(120deg,#0E2238,#0B4A55);
}
.mbar {
  box-shadow:0 -6px 20px rgba(20,38,58,.12);
}
@media (prefers-reduced-motion:reduce) {
  .btn {
    transition:none;
  }
}

/* Text colour */
:root {
  --text:#14263A;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --text:#EAF1F7;
  }
}
:root[data-theme="dark"] {
  --text:#EAF1F7;
}
:root[data-theme="light"] {
  --text:#14263A;
}
body,:root:not([data-theme="none"]) body,:root[data-theme="dark"] body {
  color:var(--text);
}
.cc {
  padding:12px 14px;
  font-size:.88rem;
}
.cc span {
  display:block;
}

/* Guide content and links */
.guide h3 {
  margin:1.4em 0 .3em;
}
.guide p {
  max-width:75ch;
}
.chips a,.cards h3 a {
  text-decoration:none;
}
.chips a:hover,.cards h3 a:hover {
  text-decoration:underline;
}

/* Keep scrolled-to fields clear of the sticky mobile bar */
html {
  scroll-padding-bottom: 96px;
}

/* Haven the house: mascot */
.fh{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.fh h2{margin:0}
.mood{opacity:0;transition:opacity .3s}
[data-mood="worried"] .m-worried,[data-mood="curious"] .m-curious,[data-mood="hopeful"] .m-hopeful,[data-mood="happy"] .m-happy,[data-mood="wave"] .m-happy{opacity:1}
.dmp{opacity:0;transition:opacity .6s}
[data-mood="worried"] .dmp,[data-mood="curious"] .dmp{opacity:.85}
[data-mood="hopeful"] .dmp{opacity:.35}
.sweat{opacity:0}
[data-mood="worried"] .sweat{opacity:1;animation:bead 2.2s ease-in infinite}
.sun{opacity:0;transition:opacity .6s}
[data-mood="happy"] .sun,[data-mood="wave"] .sun{opacity:1}
.tickb{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
[data-mood="happy"] .tickb,[data-mood="wave"] .tickb{transform:scale(1)}
.hbob{animation:bob 3.2s ease-in-out infinite}
.eyes{transform-box:fill-box;transform-origin:center;animation:blink 5s infinite}
.arm{transform-origin:330px 200px;transform-box:view-box;transform:rotate(75deg);transition:transform .4s}
[data-mood="wave"] .arm{animation:wv .6s ease-in-out infinite alternate}
.marm{transform-origin:53px 44px;transform-box:view-box;transform:rotate(60deg);transition:transform .4s}
.mini[data-mood="wave"] .marm{animation:mwv .6s ease-in-out infinite alternate}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.08)}}
@keyframes bead{0%{transform:translateY(0);opacity:1}100%{transform:translateY(10px);opacity:0}}
@keyframes wv{from{transform:rotate(-14deg)}to{transform:rotate(26deg)}}
@keyframes mwv{from{transform:rotate(-10deg)}to{transform:rotate(28deg)}}
@media (prefers-reduced-motion:reduce){.hbob,.eyes,.sweat,.mini *,.hv *{animation:none!important}.arm,.marm{transform:rotate(-10deg)}}

/* Site menu */
html {
  scroll-padding-top: 76px;
}
header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.logo {
  margin-right: auto;
}
.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 14px;
  min-height: 44px;
  padding: 8px 16px;
  background: var(--card);
  color: inherit;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 600 .95rem "Source Sans 3", sans-serif;
  cursor: pointer;
}
.menu-btn:hover {
  border-color: var(--green);
}
.bars {
  display: block;
  width: 16px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}
.sitemenu {
  position: absolute;
  top: 100%;
  right: max(12px, calc((100% - 1100px) / 2 + 20px));
  width: min(360px, calc(100% - 24px));
  max-height: calc(100vh - 100px);
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 14px 40px rgba(20, 38, 58, .22);
}
.sitemenu[hidden] {
  display: none;
}
.sitemenu .mh {
  margin: 12px 6px 4px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--muted);
}
.sitemenu a {
  display: block;
  padding: 11px 10px;
  min-height: 44px;
  border-radius: 8px;
  text-decoration: none;
}
.sitemenu a:hover, .sitemenu a:focus-visible {
  background: color-mix(in srgb, var(--c1) 12%, var(--card));
}
.sitemenu a[aria-current="page"] {
  font-weight: 600;
  color: var(--green);
}
.more {
  display: inline-block;
  margin-top: 10px;
  font-weight: 600;
  color: var(--green);
  text-decoration: underline;
}

/* Stop decorative glows from widening the page on phones */
main {
  overflow-x: clip;
}

/* Themed illustrations for the problem pages */
.art.room {
  background: linear-gradient(180deg, #EEF2F6, #E1E8EF);
}
.flk {
  animation: flicker 3s infinite;
}
.snow {
  animation: fall 4s linear infinite;
}
.dripd {
  animation: dripfall 1.8s ease-in infinite;
}
.rip {
  transform-box: fill-box;
  transform-origin: center;
  animation: ripple 1.8s ease-out infinite;
  animation-delay: 1.4s;
}
.peek {
  animation: peek 6s ease-in-out infinite;
}
.crawl {
  animation: crawl 7s linear infinite alternate;
}
.crk2 {
  stroke-dasharray: 320;
  animation: drawcrack 5s ease-in-out infinite;
}
.spore {
  animation: spore 4s ease-out infinite;
}
@keyframes flicker {
  0%, 100% { opacity: 1; }
  8% { opacity: .35; }
  12% { opacity: 1; }
  55% { opacity: .6; }
  58% { opacity: 1; }
}
@keyframes dripfall {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateY(136px); opacity: 0; }
}
@keyframes ripple {
  0% { transform: scale(.3); opacity: .9; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes peek {
  0%, 100% { transform: translateX(0); }
  40%, 70% { transform: translateX(80px); }
}
@keyframes crawl {
  from { transform: translateX(-70px); }
  to { transform: translateX(110px); }
}
@keyframes drawcrack {
  0% { stroke-dashoffset: 320; }
  60%, 100% { stroke-dashoffset: 0; }
}
@keyframes spore {
  0% { transform: translateY(0); opacity: 0; }
  30% { opacity: .7; }
  100% { transform: translateY(-50px); opacity: 0; }
}

/* "Other" problem box */
#otherBox {
  margin-top: 12px;
}
#otherBox textarea {
  font-size: 16px;
  resize: vertical;
  min-height: 84px;
}

/* Attachments */
.attach {
  margin: 14px 0 4px;
}
.attach input[type=file] {
  width: 100%;
  padding: 10px;
  border: 1.5px dashed var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: inherit;
  font: inherit;
  font-size: 16px;
}
.attach input[type=file]::file-selector-button {
  margin-right: 12px;
  padding: 9px 14px;
  border: 0;
  border-radius: 6px;
  background: var(--green);
  color: #fff;
  font: 600 .95rem "Source Sans 3", sans-serif;
  cursor: pointer;
}
.flist {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.flist li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: .9rem;
  word-break: break-all;
}
.flist button {
  flex: none;
  min-height: 36px;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: inherit;
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
}
.ferr {
  color: #C8501E;
  font-size: .9rem;
  min-height: 1.1em;
  margin: 6px 0 0;
}

/* Call language question */
.langsel {
  margin: 0 0 14px;
}
select {
  width: 100%;
  min-height: 46px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: inherit;
  font: inherit;
  font-size: 16px;
}

/* Guide tables */
.tbl-wrap {
  overflow-x: auto;
}
.tbl {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
}
.tbl th, .tbl td {
  padding: 10px;
  border: 1px solid var(--line);
  text-align: start;
  vertical-align: top;
}
.tbl th {
  background: color-mix(in srgb, var(--c1) 12%, var(--card));
}
.tbl td {
  height: 44px;
}

/* Warning box */
.warn {
  padding: 20px 22px;
  border: 1px solid color-mix(in srgb, var(--c2) 50%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--c2) 9%, var(--card));
}
.warn h2 {
  margin-top: 0;
}
.warn h2::after {
  display: none;
}