:root{
  --how-pink:#ff4f86;
  --how-orange:#ff8b00;
  --how-navy:#20344d;
  --how-cream:#fffaf5;
  --how-line:#ffd7ab;
  --how-yellow:#fff4d9;
}

body{
  font-family:"Quicksand",sans-serif;
  color:var(--how-navy);
  background:repeating-linear-gradient(45deg,#fff 0 34px,#fff7eb 34px 68px,#fff 68px 102px,#ffe8ef 102px 136px);
  background-attachment:fixed;
}

.how-page{width:min(94%,1220px);margin:18px auto 30px;display:flex;flex-direction:column;gap:14px}
.how-card{position:relative;overflow:hidden;background:#fff;border:6px solid var(--how-orange);border-radius:36px;box-shadow:0 8px 26px rgba(40,48,58,.05)}
.how-card h1,.how-card h2{font-family:"Pacifico",cursive;color:var(--how-pink);line-height:1.08;margin:0;font-weight:400;text-shadow:3px 3px 0 #fff,6px 6px 0 rgba(0,0,0,.035)}
.how-card h1{font-size:3.35rem}.how-card h2{font-size:2.45rem}.how-card h3{color:var(--how-navy)}
.how-card p{font-size:1rem;line-height:1.55}

/* Hero - same photographic frame language as builders/about */
.how-hero{min-height:360px;padding:40px 44px;display:flex;align-items:center}
.how-hero-copy{position:relative;z-index:3;width:57%}
.how-hero-copy h1{max-width:620px;margin-bottom:16px}
.how-hero-copy p{max-width:570px;margin:0;color:#56667b;font-size:1.05rem;font-weight:500}
.how-hero-photo{position:absolute;z-index:1;top:0;right:0;width:59%;height:100%;object-fit:cover;object-position:right top;-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 18%,#000 42%),linear-gradient(to bottom,#000 0%,#000 68%,rgba(0,0,0,.55) 86%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 18%,#000 42%),linear-gradient(to bottom,#000 0%,#000 68%,rgba(0,0,0,.55) 86%,transparent 100%);mask-composite:intersect}
.how-hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to right,#fff 0%,rgba(255,255,255,.98) 38%,rgba(255,255,255,.68) 52%,rgba(255,255,255,0) 70%),linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 70%,rgba(255,255,255,.55) 88%,#fff 100%)}
.hero-scribble{display:inline-block;margin-top:18px;font-family:"Pacifico",cursive;color:var(--how-orange);font-size:1.45rem;transform:rotate(-2deg)}
.hero-scribble::after{content:"";display:block;height:4px;border-radius:999px;background:#ffb000;transform:rotate(1deg);margin-top:2px}

/* Four-step journey */
.steps-card{padding:30px 34px 34px}.steps-card>h2{text-align:center;margin-bottom:7px}.steps-intro{text-align:center;color:#66758a;max-width:760px;margin:0 auto 26px!important}
.how-steps{display:grid;grid-template-columns:repeat(4,1fr);align-items:start}
.how-step{text-align:center;padding:0 22px 10px;position:relative}
.how-step+.how-step{border-left:1px solid var(--how-line)}
.step-number{width:88px;height:108px;margin:0 auto 6px;display:grid;place-items:center}
.step-number img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 7px 8px rgba(0,0,0,.12))}
.how-step:nth-child(1) .step-number img{filter:sepia(1) saturate(3) hue-rotate(290deg) brightness(.95) contrast(1.2) drop-shadow(0 7px 8px rgba(0,0,0,.12))}
.how-step:nth-child(2) .step-number img{filter:sepia(1) saturate(4) hue-rotate(185deg) brightness(.9) contrast(1.25) drop-shadow(0 7px 8px rgba(0,0,0,.12))}
.how-step:nth-child(3) .step-number img{filter:sepia(1) saturate(5) hue-rotate(5deg) brightness(1) contrast(1.1) drop-shadow(0 7px 8px rgba(0,0,0,.12))}
.how-step:nth-child(4) .step-number img{filter:sepia(1) saturate(5) hue-rotate(330deg) brightness(.95) contrast(1.15) drop-shadow(0 7px 8px rgba(0,0,0,.12))}
.how-step h3{font-size:1.1rem;margin:7px 0 7px}.how-step p{font-size:.9rem;color:#56667b;margin:0}
.step-pill{display:inline-block;margin-top:11px;border-radius:999px;padding:5px 11px;background:#fff5f7;border:1px solid #ffc2d3;color:#d94272;font-size:.68rem;font-weight:800}

/* Difference */
.difference-card{padding:30px 34px}
.difference-head{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:end;margin-bottom:28px}
.difference-head p{margin:0;color:#56667b}
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.benefit{
  --accent:#ff85a2;
  --soft:#fff5f7;
  position:relative;
  min-height:224px;
  overflow:hidden;
  padding:26px 24px 22px;
  border:2px solid color-mix(in srgb,var(--accent) 38%,white);
  border-radius:26px;
  background:
    radial-gradient(circle at 91% 8%,color-mix(in srgb,var(--accent) 12%,transparent) 0 72px,transparent 73px),
    linear-gradient(145deg,#fff 0%,var(--soft) 100%);
  box-shadow:0 7px 0 color-mix(in srgb,var(--accent) 10%,transparent);
  transition:transform .18s ease,box-shadow .18s ease;
}
.benefit:nth-child(2),.benefit:nth-child(5){transform:translateY(8px)}
.benefit:hover{transform:translateY(-3px) rotate(-.25deg);box-shadow:0 11px 0 color-mix(in srgb,var(--accent) 12%,transparent)}
.benefit:nth-child(2):hover,.benefit:nth-child(5):hover{transform:translateY(5px) rotate(.25deg)}
.benefit::after{
  content:"";
  position:absolute;
  width:112px;height:112px;
  border:2px solid color-mix(in srgb,var(--accent) 18%,transparent);
  border-radius:50%;
  right:-52px;bottom:-60px;
}
.benefit h3{position:relative;z-index:3;font-size:1.08rem;margin:12px 0 7px;color:var(--how-navy)}
.benefit p{position:relative;z-index:3;font-size:.86rem;color:#5e6d80;margin:0;max-width:92%}
.benefit strong{color:var(--how-pink)}
.benefit-colours{--accent:#ff7fa1;--soft:#fff5f8}
.benefit-quantities{--accent:#69adf4;--soft:#f4f9ff}
.benefit-air{--accent:#ff9418;--soft:#fff8ef}
.benefit-guidance{--accent:#52cdbb;--soft:#f1fcfa}
.benefit-extras{--accent:#a68af4;--soft:#f8f5ff}
.benefit-waste{--accent:#ffd166;--soft:#fffaf0}

.benefit-balloon-scene{position:relative;width:90px;height:84px;z-index:2}
.party-balloon{
  position:absolute;
  display:block;
  border-radius:50% 50% 50% 50% / 45% 45% 55% 55%;
  background-image:
    radial-gradient(circle at 34% 28%,rgba(255,255,255,.86) 0%,rgba(255,255,255,0) 34%),
    radial-gradient(circle at 50% 55%,rgba(255,255,255,.12) 0%,rgba(0,0,0,.09) 100%);
  filter:drop-shadow(0 6px 5px rgba(35,52,77,.12));
}
.party-balloon::after{
  content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:8px solid currentColor;filter:brightness(.9)
}
.party-balloon.main{left:2px;top:0;width:50px;height:62px}
.party-balloon.mini{left:47px;top:24px;width:31px;height:39px;transform:rotate(8deg)}
.party-balloon.mini-two{left:54px;top:-3px;width:27px;height:34px;transform:rotate(13deg)}
.party-balloon.pink{background-color:#ff7fa1;color:#ff7fa1}
.party-balloon.coral{background-color:#ff9a76;color:#ff9a76}
.party-balloon.blue{background-color:#69adf4;color:#69adf4}
.party-balloon.mint{background-color:#52cdbb;color:#52cdbb}
.party-balloon.orange{background-color:#ff9418;color:#ff9418}
.party-balloon.purple{background-color:#a68af4;color:#a68af4}
.party-balloon.yellow{background-color:#ffd166;color:#ffd166}
.balloon-string{
  position:absolute;left:26px;top:62px;width:26px;height:30px;
  border-left:1.5px solid color-mix(in srgb,var(--accent) 60%,#8c8c8c);
  border-radius:50%;transform:rotate(-11deg)
}
.balloon-string.long{height:39px}
.balloon-string.curl{border-left:0;border-bottom:1.5px solid color-mix(in srgb,var(--accent) 60%,#8c8c8c);border-radius:0 0 0 80%;transform:rotate(72deg);left:18px;top:61px}
.benefit-scribble{
  position:absolute;z-index:4;right:17px;top:16px;
  font-family:"Pacifico",cursive;color:var(--accent);font-size:.82rem;transform:rotate(4deg)
}
.mini-note{
  position:absolute;z-index:4;right:15px;top:18px;padding:5px 9px;
  background:#fff4d9;border:1px solid #ffd59a;border-radius:4px;
  font-size:.62rem;font-weight:800;color:#6a5870;transform:rotate(4deg);
  box-shadow:0 3px 6px rgba(0,0,0,.08)
}
.benefit-stamp{
  position:absolute;z-index:4;right:16px;top:18px;
  padding:5px 9px;border:2px dashed var(--accent);border-radius:999px;
  color:var(--accent);background:rgba(255,255,255,.82);
  font-size:.61rem;font-weight:800;transform:rotate(4deg)
}
.benefit-stamp.tilted{transform:rotate(-5deg)}
.spark{position:absolute;color:var(--accent);font-weight:900;line-height:1}
.spark-one{left:63px;top:9px;font-size:1rem}.spark-two{left:73px;top:38px;font-size:.65rem}

/* Safety ladder */
.safety-card{padding:30px 34px 34px}.safety-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:24px}.safety-head p{max-width:570px;margin:0;color:#56667b}.safety-ladder{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;align-items:stretch}.safety-step{border:3px solid #ffd6a8;border-radius:25px;padding:22px;background:#fffaf4;position:relative}.safety-step.whoopsie{background:#fff3f7;border-color:#ff9fba;transform:rotate(-1deg)}.safety-step h3{font-family:"Pacifico",cursive;color:var(--how-pink);font-size:1.55rem;font-weight:400;margin:10px 0 8px}.safety-step p{font-size:.9rem;color:#58687b;margin:0}.plan-tag{display:inline-block;border-radius:999px;padding:4px 11px;background:var(--how-orange);color:white;font-size:.68rem;font-weight:800}.whoopsie .plan-tag{background:var(--how-pink)}.ladder-arrow{display:grid;place-items:center;font-size:2.6rem;color:var(--how-orange);font-weight:300}.whoopsie-note{position:absolute;right:14px;top:12px;font-family:"Pacifico",cursive;color:#e64878;font-size:.95rem;transform:rotate(6deg)}

/* Inside the box */
.arrives-card{padding:32px 34px;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}.arrives-copy h2{margin-bottom:12px}.arrives-copy>p{color:#56667b;max-width:560px;margin-top:0}.check-list{display:grid;gap:9px;margin-top:18px}.check-row{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start}.check{width:30px;height:30px;border-radius:50%;background:#2ed573;color:#fff;display:flex!important;align-items:center!important;justify-content:center!important;font-weight:800;line-height:1!important;font-size:18px!important;padding:0!important;margin:0!important;text-align:center!important;transform:none!important}.check-row b{font-size:.93rem}.check-row span{display:block;color:#6a7889;font-size:.82rem;margin-top:2px}
.box-visual{position:relative;min-height:330px}.packing-photo{position:absolute;inset:0 35px 30px 0;border-radius:26px;border:5px solid var(--how-orange);box-shadow:0 10px 24px rgba(0,0,0,.1);object-fit:cover;width:calc(100% - 35px);height:calc(100% - 30px)}.packing-note{position:absolute;right:0;bottom:0;width:230px;padding:18px;background:#fff4d9;border:2px solid #ffd5a4;box-shadow:0 8px 18px rgba(0,0,0,.12);transform:rotate(3deg)}.packing-note strong{display:block;font-family:"Pacifico",cursive;color:var(--how-pink);font-size:1.25rem;margin-bottom:5px}.packing-note span{font-size:.8rem;line-height:1.4;font-weight:700;color:#586579}

/* CTA strip */
.cta-card{height:150px;min-height:0;padding:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch}.cta-image{overflow:hidden;position:relative}.cta-image img{width:100%;height:100%;object-fit:cover;display:block}.cta-image.left img{object-position:right center;-webkit-mask-image:linear-gradient(to right,#000 0%,#000 55%,rgba(0,0,0,.55) 78%,transparent 100%);mask-image:linear-gradient(to right,#000 0%,#000 55%,rgba(0,0,0,.55) 78%,transparent 100%)}.cta-image.right img{object-position:left center;-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 22%,#000 45%,#000 100%);mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 22%,#000 45%,#000 100%)}.cta-copy{display:flex;align-items:center;justify-content:center;gap:15px;padding:12px 20px;background:#fff;text-align:center;white-space:nowrap}.cta-copy h2{font-size:1.7rem}.cta-button{display:inline-block;background:#2ed573;color:#fff;text-decoration:none;border-radius:18px;padding:13px 18px;font-weight:800;box-shadow:0 4px 0 #26af5f;font-size:.85rem}.cta-button:hover{transform:translateY(2px);box-shadow:0 2px 0 #26af5f}

@media(max-width:900px){
  .benefit{min-height:220px}.benefit:nth-child(2),.benefit:nth-child(5){transform:none}
  .how-page{width:94%;gap:10px}.how-card{border-width:4px;border-radius:26px}.how-card h1{font-size:2.45rem}.how-card h2{font-size:2rem}
  .how-hero{min-height:340px;padding:28px 24px}.how-hero-copy{width:74%}.how-hero-photo{width:66%}
  .how-steps{grid-template-columns:1fr 1fr}.how-step{padding:18px}.how-step+.how-step{border-left:0}.how-step:nth-child(even){border-left:1px solid var(--how-line)}.how-step:nth-child(n+3){border-top:1px solid var(--how-line)}
  .difference-head{grid-template-columns:1fr}.benefit-grid{grid-template-columns:1fr 1fr}
  .safety-ladder{grid-template-columns:1fr}.ladder-arrow{height:28px;transform:rotate(90deg)}
  .arrives-card{grid-template-columns:1fr;padding:27px 22px 30px}.box-visual{min-height:300px}
  .cta-card{height:135px;grid-template-columns:1fr auto 1fr}.cta-copy{padding:8px 10px;gap:10px}.cta-copy h2{font-size:1.25rem}.cta-button{padding:10px 13px;font-size:.74rem}
}

@media(max-width:600px) and (orientation:portrait){
  /* Keep the desktop composition, just scaled intelligently for a phone */
  .how-page{width:96%;gap:10px}
  .how-card{border-width:4px;border-radius:26px}

  /* Hero: wider/shorter so more of the photograph survives */
  .how-hero{min-height:285px;padding:24px 18px}
  .how-hero-copy{width:76%}
  .how-hero-copy h1{font-size:2.05rem;max-width:80%;margin-bottom:12px}
  .how-hero-copy p{font-size:.86rem;line-height:1.45;max-width:68%}
  .how-hero-photo{width:62%;object-position:58% top}
  .hero-scribble{font-size:1.08rem;margin-top:10px}

  /* Four steps stay visible together as a 2 x 2 journey */
  .steps-card,.difference-card,.safety-card{padding:22px 14px}
  .steps-card>h2{font-size:1.9rem}
  .steps-intro{font-size:.84rem!important;line-height:1.45;margin-bottom:16px!important}
  .how-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .how-step{padding:14px 8px 16px}
  .how-step:nth-child(even){border-left:1px solid var(--how-line)}
  .how-step:nth-child(n+3){border-top:1px solid var(--how-line)}
  .step-number{width:58px;height:72px;margin-bottom:2px}
  .how-step h3{font-size:.93rem;margin:5px 0}
  .how-step p{font-size:.72rem;line-height:1.4}
  .step-pill{font-size:.56rem;padding:4px 7px;margin-top:8px}

  /* Six benefits remain a 2 x 3 visual grid */
  .difference-head{grid-template-columns:1fr;gap:7px;margin-bottom:16px}
  .difference-head h2{font-size:1.85rem}
  .difference-head p{font-size:.82rem;line-height:1.45}
  .benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .benefit{
    min-height:225px;
    padding:16px 13px 15px;
    border-radius:20px;
  }
  .benefit:nth-child(2),.benefit:nth-child(5){transform:none}
  .benefit-balloon-scene{width:70px;height:66px}
  .party-balloon.main{width:39px;height:49px}
  .party-balloon.mini{left:37px;top:19px;width:25px;height:31px}
  .party-balloon.mini-two{left:43px;top:-1px;width:22px;height:28px}
  .balloon-string{left:20px;top:49px;height:24px}
  .balloon-string.curl{left:13px;top:48px}
  .benefit h3{font-size:.88rem;margin:8px 0 5px}
  .benefit p{font-size:.69rem;line-height:1.42;max-width:100%}
  .benefit-scribble{right:10px;top:10px;font-size:.65rem}
  .mini-note{right:8px;top:10px;font-size:.5rem;padding:4px 6px}
  .benefit-stamp{right:8px;top:10px;font-size:.49rem;padding:4px 6px}
  .spark-one{left:49px;top:7px}.spark-two{left:57px;top:30px}

  /* Real-life section: keep Plan A/B/C compact but readable */
  .safety-head{display:block;margin-bottom:16px}
  .safety-head h2{margin-bottom:7px;font-size:1.9rem}
  .safety-head p{font-size:.82rem;line-height:1.45}
  .safety-ladder{grid-template-columns:1fr;gap:8px}
  .safety-step{padding:16px;border-radius:20px}
  .safety-step h3{font-size:1.3rem;margin:7px 0 5px}
  .safety-step p{font-size:.78rem;line-height:1.42}
  .ladder-arrow{height:20px;font-size:1.8rem;transform:rotate(90deg)}

  /* What arrives: keep image useful rather than over-cropping it */
  .arrives-card{grid-template-columns:1fr;padding:22px 16px 25px;gap:18px}
  .arrives-copy h2{font-size:1.9rem}
  .arrives-copy>p{font-size:.84rem;line-height:1.45}
  .check-list{gap:7px;margin-top:14px}
  .check-row{grid-template-columns:30px 1fr;gap:8px}
  .check{width:27px;height:27px;font-size:16px!important}
  .check-row b{font-size:.84rem}.check-row span{font-size:.74rem}
  .box-visual{min-height:245px}
  .packing-photo{
    inset:0 12px 38px 0;
    width:calc(100% - 12px);
    height:calc(100% - 38px);
    object-position:center center;
  }
  .packing-note{width:175px;padding:12px}
  .packing-note strong{font-size:1.05rem}.packing-note span{font-size:.7rem}

  /* CTA retains both photographs */
  .cta-card,.cta-image,.cta-image img{height:110px}
  .cta-card{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .cta-copy{padding:6px;gap:6px;flex-direction:column}
  .cta-copy h2{font-size:.9rem}
  .cta-button{padding:7px 8px;font-size:.57rem;border-radius:12px}
}

/* Canonical MPB header typography */
.how-hero-copy h1{
  font-family:"Pacifico",cursive !important;
  color:var(--mpb-header-pink,#ff4f86) !important;
  font-weight:400 !important;
  line-height:1.08 !important;
  text-shadow:var(--mpb-header-shadow,
    3px 3px 0 #fff,-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,7px 7px 0 rgba(0,0,0,.065)) !important;
}
.how-hero-copy p{
  font-family:"Quicksand",sans-serif !important;
  color:var(--mpb-header-copy,#56667b) !important;
  font-weight:500 !important;
}
@media(max-width:600px) and (orientation:portrait){
  .how-hero{min-height:285px !important;padding:24px 18px !important}
  .how-hero-copy{width:76% !important}
  .how-hero-copy h1{font-size:2.05rem !important;max-width:80% !important;margin-bottom:12px !important}
  .how-hero-copy p{font-size:.86rem !important;line-height:1.45 !important;max-width:68% !important}
  .how-hero-photo{width:62% !important}
}
.how-hero-copy h1{margin-bottom:24px !important}
@media(max-width:600px) and (orientation:portrait){.how-hero-copy h1{margin-bottom:18px !important}}