@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');

/* ============================================
   ILFORD inCOLOUR 2026 — donate-a-wall.css
   Donate a Wall page only

   @import must stay on line 1 — any rule above it
   and the browser drops it silently.
   ============================================ */

/* ============================================
   HERO
   Full-bleed background photo + cream wash.
   Splats sit ABOVE the wash (z-index 2).
   ============================================ */
.ic-dhero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 620px;
  max-height: 800px;
  padding: 80px 20px;
  overflow: hidden;
  background: var(--ic-cream) url('/wp-content/uploads/2026/07/donate-a-wall.jpg') center right / cover no-repeat;
}

.ic-dhero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(247,244,238,.97) 0%,
    rgba(247,244,238,.95) 38%,
    rgba(247,244,238,.6) 48%,
    rgba(247,244,238,0) 72%
  );
}

/* ---------- Paint decor ---------- */
.ic-dhero .ic-splat { z-index: 2; }

.ic-dhero__splat-1 {
  --splat-w: 230px; --splat-h: 230px;
  --splat-r: -22deg; --splat-o: .85;
  top: 8%; left: -85px;
}
.ic-dhero__splat-2 {
  --splat-w: 190px; --splat-h: 190px;
  --splat-r: 28deg; --splat-o: .8;
  bottom: 8%; left: -70px;
}

.ic-dhero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1320px;
}

/* ---------- Title ---------- */
.ic-dhero__title {
  color: var(--ic-navy) !important;
  line-height: 1;
  margin-bottom: 26px !important;
}

.ic-dhero__l1,
.ic-dhero__l2 { display: block; }

.ic-dhero__l1 {
  font-weight: 700;
  font-size: clamp(2.6rem, 6.4vw, 4.8rem);
  letter-spacing: -1px;
  color: var(--ic-navy);
}

/* Kaushan Script ships at 400 only. Deep descenders,
   so line-height stays generous. */
.ic-dhero__l2 {
  position: relative;
  font-family: 'Kaushan Script', cursive !important;
  font-weight: 400;
  font-size: clamp(2.8rem, 7vw, 5.2rem);
  line-height: 1.2;
  letter-spacing: 0;
  padding-bottom: 16px;
}

.ic-dhero__l2 em,
.ic-dhero__l2 i { font-style: normal; }

/* Let's — reds/warm */
.ic-dhero__l2 em:nth-of-type(1) { color: var(--ic-red); }
.ic-dhero__l2 em:nth-of-type(2) { color: var(--ic-red); }
.ic-dhero__l2 em:nth-of-type(3) { color: var(--ic-orange); }
.ic-dhero__l2 em:nth-of-type(4) { color: var(--ic-orange); }
.ic-dhero__l2 em:nth-of-type(5) { color: var(--ic-orange); }
/* Colour — spectrum */
.ic-dhero__l2 em:nth-of-type(6)  { color: var(--ic-purple); }
.ic-dhero__l2 em:nth-of-type(7)  { color: var(--ic-purple); }
.ic-dhero__l2 em:nth-of-type(8)  { color: var(--ic-teal); }
.ic-dhero__l2 em:nth-of-type(9)  { color: var(--ic-green); }
.ic-dhero__l2 em:nth-of-type(10) { color: var(--ic-yellow); }
.ic-dhero__l2 em:nth-of-type(11) { color: var(--ic-orange); }
/* It — teal, exclamation navy */
.ic-dhero__l2 em:nth-of-type(12) { color: var(--ic-teal); }
.ic-dhero__l2 em:nth-of-type(13) { color: var(--ic-teal); }
.ic-dhero__l2 i { color: var(--ic-navy); }

.ic-dhero__l2::after {
  content: '';
  position: absolute;
  left: 4px;
  bottom: 0;
  width: min(300px, 52%);
  height: 5px;
  border-radius: 4px;
  background: var(--ic-navy);
  transform: rotate(-1deg);
}

/* ---------- Copy ---------- */
.ic-dhero__lead {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ic-navy);
  max-width: 440px;
  margin-bottom: 18px !important;
}

.ic-dhero__intro {
  font-size: 1rem;
  line-height: 1.75;
  color: #444;
  max-width: 440px;
  margin-bottom: 0 !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .ic-dhero__splat-1 { --splat-w: 165px; --splat-h: 165px; left: -80px; }
  .ic-dhero__splat-2 { --splat-w: 145px; --splat-h: 145px; left: -70px; }
}

@media (max-width: 860px) {
  .ic-dhero {
    min-height: auto;
    max-height: none;
    padding: 64px 20px 58px;
    background-position: 72% center;
  }
  .ic-dhero::before {
    background: linear-gradient(
      160deg,
      rgba(247,244,238,.97) 0%,
      rgba(247,244,238,.93) 58%,
      rgba(247,244,238,.8) 100%
    );
  }
  .ic-dhero__lead,
  .ic-dhero__intro { max-width: 100%; }
  .ic-dhero__splat-2 { display: none; }
}

@media (max-width: 520px) {
  .ic-dhero__l2 { padding-bottom: 12px; }
  .ic-dhero__l2::after { width: 62%; height: 4px; }
  .ic-dhero__splat-1 { --splat-w: 120px; --splat-h: 120px; --splat-o: .7; left: -68px; }
}

/* ============================================
   WHY DONATE A WALL
   Strapline heading + accent label + four
   splat-backed icons. Carries the hero drip, so
   padding-top clears the 70 / 48 / 34px heights.
   ============================================ */
.ic-dwhy {
  position: relative;
  background: #fff;
  padding: 118px 20px 84px;
  overflow: hidden;
}

.ic-dwhy .ic-wrap {
  position: relative;
  z-index: 1;
  max-width: 1320px;
}

/* ---------- Paint decor ---------- */
.ic-dwhy__splat-1 {
  --splat-w: 250px; --splat-h: 250px;
  --splat-r: -20deg; --splat-o: 1;
  top: 150px; left: -85px;
}
.ic-dwhy__splat-2 {
  --splat-w: 230px; --splat-h: 230px;
  --splat-r: 26deg; --splat-o: 1;
  bottom: -50px; right: -80px;
}

/* ---------- Strapline heading ----------
   Purple painted band, script type. The band is
   rotated; the text is counter-rotated back to level
   so long lines don't swing off the left edge. */

.ic-dwhy__heading {
  position: relative;
  width: 100%;
  max-width: 1250px;
  margin: 0 auto 60px;
  padding: 0 160px;
  box-sizing: border-box;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('/wp-content/uploads/2026/07/Asset-9.png') center center / 100% 100% no-repeat;
  font-family: 'Kaushan Script', cursive !important;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.7rem) !important;
  line-height: 1.25;
  text-align: center;
  text-transform: none;
  color: #fff !important;
  white-space: nowrap;
}

.ic-dwhy__heading em {
  font-style: normal;
  color: var(--ic-yellow);
}

.ic-dwhy__heading { transform: none; }

/* ---------- Accent label ---------- */
.ic-dwhy__accent {
  font-family: 'Fredoka', sans-serif !important;
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 2.8vw, 1.9rem) !important;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--ic-navy);
  margin-bottom: 44px !important;
}

/* ---------- Icon row ---------- */
.ic-dwhy__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  align-items: start;
  margin-bottom: 0 !important;
}

.ic-dwhy__item {
  position: relative;
  text-align: center;
  padding: 0 14px;
}

/* divider between items */
.ic-dwhy__item + .ic-dwhy__item::before {
  content: '';
  position: absolute;
  left: -13px;
  top: 14%;
  width: 1px;
  height: 72%;
  background: #e6e2d8;
}

/* ---------- Splat-backed icon ----------
   Splat is a ::before layer so the glyph can sit dead
   centre independently — the PNGs aren't centred within
   their own canvas, so background-position on the glyph's
   own box would throw it off. */
.ic-dwhy__icon {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.ic-dwhy__icon::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.ic-dwhy__icon svg {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  display: block;
}

.ic-dwhy__icon--red::before    { background-image: url('/wp-content/uploads/2026/07/s3.png'); }
.ic-dwhy__icon--teal::before   { background-image: url('/wp-content/uploads/2026/07/s1.png'); }
.ic-dwhy__icon--green::before  { background-image: url('/wp-content/uploads/2026/07/s4.png'); }
.ic-dwhy__icon--orange::before { background-image: url('/wp-content/uploads/2026/07/s5.png'); }

.ic-dwhy__item h3 {
  font-size: 1.02rem !important;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--ic-navy) !important;
  margin-bottom: 10px !important;
}

.ic-dwhy__item p {
  font-size: .9rem;
  line-height: 1.65;
  color: #555;
  margin-bottom: 0 !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .ic-dwhy__list { grid-template-columns: repeat(2, 1fr); gap: 40px 22px; }
  .ic-dwhy__item + .ic-dwhy__item::before { display: none; }
  .ic-dwhy__splat-1 { --splat-w: 180px; --splat-h: 180px; left: -80px; }
  .ic-dwhy__splat-2 { --splat-w: 165px; --splat-h: 165px; right: -78px; }
}

@media (max-width: 900px) {
  .ic-dwhy { padding-top: 96px; }
  .ic-dwhy__splat-1 { top: 120px; }
    .ic-dwhy__heading {
    max-width: 700px;
    min-height: 180px;
    padding: 0 90px;
    font-size: 1.5rem !important;
  }
}

@media (max-width: 768px) {
  .ic-dwhy { padding: 88px 20px 62px; }
  .ic-dwhy__heading { padding: 16px 40px 20px; }
  .ic-dwhy__icon { width: 128px; height: 128px; }
  .ic-dwhy__icon svg { width: 40px; height: 40px; }
  .ic-dwhy__splat-1 { --splat-w: 145px; --splat-h: 145px; --splat-o: .7; left: -80px; }
  .ic-dwhy__splat-2 { --splat-w: 135px; --splat-h: 135px; --splat-o: .7; right: -72px; }
  .ic-dwhy__heading {
    min-height: 140px;
    padding: 30px 30px;
    font-size: 1.15rem !important;
    line-height: 1.35;
    white-space: normal;   /* let it wrap on phones */
  }
}

@media (max-width: 560px) {
  .ic-dwhy { padding-top: 70px; }
  .ic-dwhy__list { grid-template-columns: 1fr; gap: 34px; }
   .ic-dwhy__heading {
    min-height: 120px;
    font-size: 1rem !important;
  }
}

/* ============================================
   WE TRANSFORM SPACES
   ============================================ */
.ic-transform {
  position: relative;
  background: #fff;
  padding: 20px 20px 20px;
  overflow: hidden;
}

.ic-transform__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 52px;
  align-items: start;
  max-width: 1320px;
}

/* ---------- Paint decor ---------- */
.ic-transform__splat-1 {
  --splat-w: 240px; --splat-h: 240px;
  --splat-r: -22deg; --splat-o: 1;
  top: -50px; left: -85px;
}
.ic-transform__splat-2 {
  --splat-w: 220px; --splat-h: 220px;
  --splat-r: 28deg; --splat-o: 1;
  bottom: -60px; right: -80px;
}

/* ---------- Title ---------- */
.ic-transform__title {
  line-height: 1.05;
  margin-bottom: 28px !important;
}

.ic-transform__l1,
.ic-transform__l2 { display: block; }

.ic-transform__l1 {
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: -.3px;
  color: var(--ic-navy);
}

.ic-transform__l2 {
  font-family: 'Kaushan Script', cursive !important;
  font-weight: 400;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  line-height: 1.2;
}
.ic-transform__l2 em { font-style: normal; color: var(--ic-navy); }
.ic-transform__l2 b  { font-weight: 400; color: var(--ic-orange); }

/* ---------- Checklist ---------- */
.ic-transform__checks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
  margin-bottom: 0 !important;
}

.ic-transform__checks li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ic-navy);
}

.ic-transform__checks svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  stroke-width: 4;
}

.ic-transform__checks li:nth-child(1) svg { stroke: var(--ic-red); }
.ic-transform__checks li:nth-child(2) svg { stroke: var(--ic-teal); }
.ic-transform__checks li:nth-child(3) svg { stroke: var(--ic-green); }
.ic-transform__checks li:nth-child(4) svg { stroke: var(--ic-orange); }
.ic-transform__checks li:nth-child(5) svg { stroke: var(--ic-purple); }
.ic-transform__checks li:nth-child(6) svg { stroke: var(--ic-red); }

.ic-transform__l2 b i { font-style: normal; }
.ic-transform__l2 b i:nth-of-type(1) { color: var(--ic-red); }
.ic-transform__l2 b i:nth-of-type(2) { color: var(--ic-orange); }
.ic-transform__l2 b i:nth-of-type(3) { color: #c99400; }
.ic-transform__l2 b i:nth-of-type(4) { color: var(--ic-green); }
.ic-transform__l2 b i:nth-of-type(5) { color: var(--ic-teal); }
.ic-transform__l2 b i:nth-of-type(6) { color: var(--ic-purple); }
.ic-transform__l2 b i:nth-of-type(7) { color: var(--ic-red); }
.ic-transform__l2 b i:nth-of-type(8) { color: var(--ic-orange); }
.ic-transform__l2 b i:nth-of-type(9) { color: var(--ic-green); }

/* ---------- Media ---------- */
.ic-transform__media {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.ic-transform__media img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  max-height: 460px;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .ic-transform__grid { gap: 36px; }
  .ic-transform__splat-1 { --splat-w: 175px; --splat-h: 175px; left: -80px; }
  .ic-transform__splat-2 { --splat-w: 160px; --splat-h: 160px; right: -76px; }
}

@media (max-width: 860px) {
  .ic-transform { padding: 56px 20px 62px; }
  .ic-transform__grid { grid-template-columns: 1fr; gap: 32px; }
   .ic-transform__media { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .ic-transform__media img { min-height: 160px; }
}

@media (max-width: 480px) {
  .ic-transform__checks { grid-template-columns: 1fr; }
  .ic-transform__media { grid-template-columns: 1fr; }
  .ic-transform__media img { max-height: none; }
  .ic-transform__media img { min-height: 120px; }
}

/* ============================================
   LET'S TALK CANVAS
   ============================================ */
.ic-canvas {
  padding: 34px 20px 38px;
  overflow: hidden;
  background: linear-gradient(
    100deg,
    var(--ic-red) 0%,
    var(--ic-orange) 22%,
    var(--ic-yellow) 42%,
    var(--ic-green) 60%,
    var(--ic-teal) 80%,
    var(--ic-purple) 100%
  );
}

.ic-canvas__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 22px 56px;
  max-width: 1240px;
}

.ic-canvas__title {
  font-family: 'Kaushan Script', cursive !important;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem) !important;
  line-height: 1.1;
  text-transform: none;
  color: #fff !important;
  margin-bottom: 0 !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.18);
}

.ic-canvas__contact {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 40px;
  margin-bottom: 0 !important;
}
.ic-canvas__contact li { display: flex; align-items: center; gap: 14px; }

.ic-canvas__icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ic-canvas__icon svg { width: 22px; height: 22px; display: block; }

.ic-canvas__icon--yellow { background: var(--ic-yellow); color: var(--ic-navy); }
.ic-canvas__icon--purple { background: var(--ic-purple); color: #fff; }

.ic-canvas__contact strong {
  display: block;
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .5px;
  color: #fff;
  opacity: .9;
}

.ic-canvas__contact a {
  display: block;
  font-size: 1.16rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  transition: opacity .2s;
}
.ic-canvas__contact a:hover { color: #fff; opacity: .82; }

@media (max-width: 860px) {
  .ic-canvas__inner { flex-direction: column; text-align: center; gap: 20px; }
  .ic-canvas__contact { justify-content: center; }
}

@media (max-width: 480px) {
  .ic-canvas__contact { flex-direction: column; align-items: flex-start; gap: 16px; }
  .ic-canvas__contact a { font-size: 1.05rem; word-break: break-word; }
}