/* Shared IPC field-guide poster styles — brand-parameterised (violet default = Mould Assassins). */
:root{
  --ground:#ECE9F5; --surface:#ffffff; --ink:#160B2E; --ink-2:#241645;
  --muted:#5C5473; --faint:#8A82A0; --line:#DFDAEC; --line-soft:#EDEAF6;
  --brand:#6A4FC0; --brand-deep:#4A2FA0; --brand-tint:#EEEAFA;
  --green:#0E8F62; --green-tint:#E4F4EC; --amber:#B9800C; --amber-tint:#FBF3E1;
  --red:#C33A2E; --red-tint:#FBECEA;
  --sev-line:#7C4FD6;
  --shadow:0 1px 2px rgba(22,11,46,.06),0 14px 34px -16px rgba(22,11,46,.24);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0}
.ig{background:var(--ground);color:var(--ink);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased;padding:18px 14px 30px;display:flex;justify-content:center}
.sheet{width:1120px;max-width:100%;display:flex;flex-direction:column;gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.pad{padding:24px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--brand-deep);font-weight:600}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
.lede{color:var(--muted);font-size:14.5px}
svg{display:block}
b{font-weight:600}

/* hero */
.hero{position:relative;overflow:hidden;border:none;border-radius:16px;min-height:300px;display:flex;color:#F0ECFA;background:#160B2E}
.hero::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--sev-line);z-index:3}
.hero .photo{position:absolute;inset:0}
.hero .photo img{width:100%;height:100%;object-fit:cover;object-position:center 42%;filter:saturate(.7) brightness(.66)}
.hero .veil{position:absolute;inset:0;background:linear-gradient(90deg, rgba(22,11,46,.97) 0%, rgba(22,11,46,.9) 42%, rgba(22,11,46,.45) 72%, rgba(22,11,46,.28) 100%)}
.hero .inner{position:relative;padding:28px 30px;display:flex;flex-direction:column;justify-content:center;width:100%}
.brandrow{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.wordmark{display:flex;align-items:baseline;gap:8px;font-weight:800;letter-spacing:.02em;font-size:15px}
.wordmark b{color:#B7A6EE}
.wordmark span{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.2em;color:#A99CC6;text-transform:uppercase}
.seal{display:flex;align-items:center;gap:10px}
.seal .ring{width:50px;height:50px;border-radius:50%;border:1.5px solid rgba(183,166,238,.55);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;background:rgba(22,11,46,.4)} /* seal-ring-fit: 42px clipped 0.5µg + /100cm² */
.seal .ring b{font-size:9px;letter-spacing:.04em;font-weight:800}
.seal .ring i{font-style:normal;font-size:8px;letter-spacing:.02em;color:#B7A6EE;margin-top:2px}
.seal small{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:#A99CC6;line-height:1.4;text-align:right;text-transform:uppercase}
.hero .eyebrow{color:#B7A6EE}
.titleblock{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin:8px 0 12px}
.titleblock h1{font-size:clamp(30px,5.4vw,46px);font-weight:800;line-height:1.02;color:#fff}
.titleblock h1 em{font-style:normal;color:#B7A6EE}
.chip{display:inline-flex;align-items:center;gap:8px;background:rgba(124,79,214,.24);border:1px solid rgba(160,120,240,.5);color:#CBB8F5;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border-radius:999px;font-weight:600;white-space:nowrap}
.chip .dot{width:8px;height:8px;border-radius:50%;background:#9B78E8;box-shadow:0 0 0 4px rgba(155,120,232,.22)}
.chip.red{background:rgba(195,58,46,.22);border-color:rgba(230,110,95,.5);color:#F4ADA4}
.chip.red .dot{background:#E96A5A;box-shadow:0 0 0 4px rgba(233,106,90,.22)}
.hero .lede{color:#D6CEEA;font-size:14.5px;max-width:58ch}
.hero .lede b{color:#fff;font-weight:600}

/* section head */
.sechead{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.sechead h2{font-size:15px;font-weight:800}
.sechead .bar{width:22px;height:3px;border-radius:2px;background:var(--brand)}

/* rows / facts */
.row{display:grid;gap:16px}
.row.two{grid-template-columns:1fr 1fr}
.row.two-a{grid-template-columns:1.15fr 1fr}
.row.three{grid-template-columns:repeat(3,1fr)}
.fact{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line-soft)}
.fact:first-of-type{border-top:none}
.fact .ic{flex:none;width:36px;height:36px;border-radius:9px;background:var(--brand-tint);color:var(--brand-deep);display:flex;align-items:center;justify-content:center}
.fact .ic.g{background:var(--green-tint);color:var(--green)}
.fact .ic.r{background:var(--red-tint);color:var(--red)}
.fact b{font-weight:600;font-size:13.5px;display:block}
.fact small{color:var(--muted);font-size:12.5px}

/* triad: mould needs three things / mini quick facts */
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.triad div{display:flex;align-items:center;gap:12px;border:1px solid var(--line-soft);border-radius:11px;padding:12px 14px;background:#FAF9FE}
.triad .ic{width:34px;height:34px;color:var(--brand);flex:none}
.triad b{font-size:13.5px}
.triad small{display:block;color:var(--muted);font-size:11.5px}

/* action columns (FIND/FIX/DRY) */
.acthead{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.acthead .n{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;color:#fff;font-size:15px;flex:none}
.acthead h3{font-size:19px;font-weight:800}
.acthead .sub{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-top:1px}
.list{display:flex;flex-direction:column;gap:9px}
.list .li{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-2)}
.list .li .ic{width:20px;height:20px;flex:none;margin-top:1px}

/* process flow */
.flowwrap{}
.flow{display:flex;align-items:stretch;gap:0}
.fstep{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 5px}
.medal{width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(160deg,var(--brand),var(--brand-deep));box-shadow:0 8px 18px -8px rgba(74,47,160,.7);position:relative;margin-bottom:12px}
.medal .num{position:absolute;top:-8px;left:-8px;width:22px;height:22px;border-radius:50%;background:#160B2E;color:#B7A6EE;font-family:var(--mono);font-weight:700;font-size:11px;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.fstep h3{font-size:11.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;margin-bottom:7px;color:var(--ink);min-height:28px;display:flex;align-items:center}
.fstep ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px;text-align:left}
.fstep li{position:relative;padding-left:13px;font-size:11px;color:var(--muted);line-height:1.4}
.fstep li::before{content:"";position:absolute;left:0;top:6px;width:4px;height:4px;border-radius:50%;background:var(--brand)}
.conn{flex:none;width:22px;display:flex;align-items:flex-start;justify-content:center;padding-top:15px;color:#C6BEDC}

/* compare (bad vs good) */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.col{border-radius:14px;padding:18px;border:1px solid var(--line)}
.col.bad{background:#FDF4F3;border-color:#F0D2CE}
.col.good{background:#F1F9F4;border-color:#CFE9D9}
.colhead{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.colhead .ic{width:30px;height:30px;flex:none}
.col.bad .colhead .ic{color:var(--red)} .col.good .colhead .ic{color:var(--green)}
.colhead h3{font-size:16px;font-weight:800}
.colhead .tag{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-top:1px}
.col.bad .colhead h3,.col.bad .colhead .tag{color:var(--red)}
.col.good .colhead h3,.col.good .colhead .tag{color:var(--green)}
.citem{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid rgba(0,0,0,.05)}
.citem:first-of-type{border-top:none}
.citem .ic{width:18px;height:18px;flex:none;margin-top:2px}
.col.bad .citem .ic{color:var(--red)} .col.good .citem .ic{color:var(--green)}
.citem b{font-size:13px;font-weight:700;display:block}
.citem small{font-size:12px;color:var(--muted)}

/* cause rows */
.causes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cause{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:#fff}
.cause .n{width:26px;height:26px;border-radius:50%;background:var(--brand-tint);color:var(--brand-deep);font-family:var(--mono);font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;flex:none}
.cause .ic{width:26px;height:26px;color:var(--brand);flex:none;margin-top:1px}
.cause b{font-size:13.5px;display:block}
.cause small{font-size:12px;color:var(--muted);line-height:1.4}

/* big stat */
.bigstat{display:flex;flex-direction:column;justify-content:center;text-align:center;background:linear-gradient(160deg,#160B2E,#241645);color:#F0ECFA;border:none}
.bigstat .pad{padding:22px}
.bigstat .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#B7A6EE;font-weight:600}
.bigstat .num{font-size:clamp(40px,8vw,64px);font-weight:800;line-height:1;margin:8px 0;color:#fff}
.bigstat .num.red{color:#FF8B7E}
.bigstat .cap{font-size:13px;color:#CBBFE4}

/* principles grid */
.princ{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.princ div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:12px 6px}
.princ .ic{width:34px;height:34px;border-radius:10px;background:var(--brand-tint);color:var(--brand-deep);display:flex;align-items:center;justify-content:center}
.princ b{font-size:12px;font-weight:600}
.princ small{font-size:11px;color:var(--muted);line-height:1.35}

/* callout */
.callout{display:flex;gap:14px;align-items:center;border-radius:14px;padding:16px 18px}
.callout .ic{flex:none}
.callout.brand{background:var(--brand-tint);border:1px solid rgba(106,79,192,.28)}
.callout.brand .ic{color:var(--brand-deep)} .callout.brand b{color:var(--brand-deep);font-weight:700}
.callout.brand p{font-size:13px;color:#3A2A66}
.callout.red{background:var(--red-tint);border:1px solid rgba(195,58,46,.28)}
.callout.red .ic{color:var(--red)} .callout.red b{color:var(--red);font-weight:700}
.callout.red p{font-size:13px;color:#5E241D}
.callout.green{background:var(--green-tint);border:1px solid rgba(14,143,98,.25)}
.callout.green .ic{color:var(--green)} .callout.green b{color:var(--green);font-weight:700}
.callout.green p{font-size:13px;color:#2F5344}

/* footer */
.foot{background:#160B2E;color:#CBBFE4;border:none}
.foot .pad{padding:18px 24px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.foot small{font-size:11px;line-height:1.5;max-width:58ch;color:#A99CC6}
.foot small b{color:#F0ECFA;font-weight:600}
.foot .wm{font-weight:800;font-size:13px;color:#fff;white-space:nowrap}
.foot .wm em{font-style:normal;color:#B7A6EE}

@media (max-width:760px){
  .row.two,.row.two-a,.row.three,.triad,.compare,.causes{grid-template-columns:1fr}
  /* !important so it also beats an inline grid-template-columns:repeat(5,1fr)
     (mould-why-still) that otherwise keeps 5 columns crammed on a phone. */
  .princ{grid-template-columns:repeat(2,1fr)!important}
  .common{grid-template-columns:repeat(2,1fr)!important}
  /* Brand header overflowed ~26-40px on 13 guides (wordmark + tagline + S520 seal
     don't fit 440px side by side). A plain flex-wrap fixed the overflow but read
     badly — the tagline broke mid-phrase and the seal orphaned bottom-left. So
     stack it deliberately: brand NAME on its own line, tagline on the line under
     it (flex-basis:100% forces the span down while MOULD/ASSASSINS stay together),
     then the seal as its own left-aligned row. */
  .brandrow{flex-direction:column;align-items:flex-start;gap:13px}
  .brandrow .wordmark{flex-wrap:wrap;min-width:0}
  .brandrow .wordmark span{flex-basis:100%;margin-top:3px}
  .brandrow .seal small{text-align:left}
  /* Footer brand line is white-space:nowrap ("Flood Responders · Integrated
     Property Care · Brisbane" = 364px), so it can't shrink and forces ~42px of
     horizontal scroll on a 360px phone. Let it wrap on mobile. */
  .foot .wm{white-space:normal}
}

/* THE STEPPER. `.flow` is a horizontal row of steps (display:flex, gap:0) with no
   mobile treatment — 8 steps at flex:1 in a 440px phone become ~26px each, so the
   labels overflow and collide. On a phone it stacks: each step full-width, medal
   on the LEFT, title + bullets on the right; chevron connectors hidden.
   Its OWN breakpoint at 820px (wider than the 760px used for everything else):
   the widest flow — mould-spray-pray, 8 steps — is still ~66px per step in the
   horizontal row at 762px and the titles collide by ~1px; it's clean by 820px. So
   the stepper keeps stacking up to 820 while the rest of the page reflows at 760.
   !important because flood-cat1/2/3 carry a LOCAL copy of the flow CSS with no
   mobile rule — the shared rule has to override those too. */
@media (max-width:820px){
  .flow{flex-direction:column!important;align-items:stretch!important}
  .flow .conn{display:none!important}
  .flow .fstep{flex:none!important;width:100%!important;display:grid!important;grid-template-columns:auto 1fr!important;column-gap:14px;align-items:start;text-align:left!important;padding:12px 0!important;border-top:1px solid var(--line-soft)}
  .flow .fstep:first-child{border-top:none!important;padding-top:2px!important}
  .flow .fstep .medal{grid-row:1 / span 2;margin-bottom:0!important}
  .flow .fstep h3{min-height:0!important;align-self:center;margin-bottom:6px!important}
}

/* ---- Flood Responders theme (blue) — add class="theme-flood" to <body> ---- */
.theme-flood{
  --brand:#2E7CC4; --brand-deep:#1C5B96; --brand-tint:#EAF2FB; --sev-line:#3E8FDD;
  --ground:#E9EFF6; --ink:#0A2136; --ink-2:#12324D; --line:#D7E2ED; --line-soft:#E7EEF5; --muted:#586E82;
}
.theme-flood .hero{background:#0A2136}
.theme-flood .hero .veil{background:linear-gradient(90deg, rgba(8,26,44,.97) 0%, rgba(8,26,44,.9) 42%, rgba(8,26,44,.45) 72%, rgba(8,26,44,.28) 100%)}
.theme-flood .wordmark b,.theme-flood .titleblock h1 em,.theme-flood .hero .eyebrow,.theme-flood .seal .ring i,.theme-flood .foot .wm em{color:#8FC0F0}
.theme-flood .wordmark span,.theme-flood .seal small,.theme-flood .foot small{color:#9FB6CC}
.theme-flood .seal .ring{border-color:rgba(143,192,240,.55);background:rgba(8,26,44,.4)}
.theme-flood .chip{background:rgba(46,124,196,.24);border-color:rgba(120,175,235,.5);color:#BBD6F2}
.theme-flood .chip .dot{background:#5EA0E0;box-shadow:0 0 0 4px rgba(94,160,224,.22)}
.theme-flood .hero .lede{color:#CFDCEA}
.theme-flood .medal .num{background:#0A2136;color:#8FC0F0}
.theme-flood .foot{background:#0A2136;color:#C4D6E8}

/* ---- SafeSpace theme (teal) — add class="theme-safespace" to <body> ---- */
.theme-safespace{
  --brand:#0F9D77; --brand-deep:#0B7A5C; --brand-tint:#E4F5EF; --sev-line:#19B98D;
  --ground:#E8F2EE; --ink:#062B21; --ink-2:#0D3D30; --line:#D2E5DD; --line-soft:#E4F0EA; --muted:#4F6E63;
}
.theme-safespace .hero{background:#062B21}
.theme-safespace .hero .veil{background:linear-gradient(90deg, rgba(5,38,29,.97) 0%, rgba(5,38,29,.9) 42%, rgba(5,38,29,.45) 72%, rgba(5,38,29,.28) 100%)}
.theme-safespace .wordmark b,.theme-safespace .titleblock h1 em,.theme-safespace .hero .eyebrow,.theme-safespace .seal .ring i,.theme-safespace .foot .wm em{color:#7EDABD}
.theme-safespace .wordmark span,.theme-safespace .seal small,.theme-safespace .foot small{color:#96BDB0}
.theme-safespace .seal .ring{border-color:rgba(126,218,189,.55);background:rgba(5,38,29,.4)}
.theme-safespace .chip{background:rgba(15,157,119,.24);border-color:rgba(90,205,170,.5);color:#A9E8D2}
.theme-safespace .chip .dot{background:#34C599;box-shadow:0 0 0 4px rgba(52,197,153,.22)}
.theme-safespace .hero .lede{color:#CDE4DB}
.theme-safespace .medal{background:linear-gradient(160deg,#14B287,#0B7A5C);box-shadow:0 8px 18px -8px rgba(11,122,92,.7)}
.theme-safespace .medal .num{background:#062B21;color:#7EDABD}
.theme-safespace .foot{background:#062B21;color:#BFDBD1}

.theme-safespace .bigstat{background:linear-gradient(160deg,#062B21,#0D3D30)}
.theme-safespace .bigstat .k{color:#7EDABD}
.theme-safespace .bigstat .cap{color:#BFDBD1}

/* ---- IPC master theme (navy) — add class="theme-ipc" to <body> ---- */
.theme-ipc{
  --brand:#1F5FA8; --brand-deep:#124479; --brand-tint:#E8F0F9; --sev-line:#D85A30;
  --ground:#EAEEF4; --ink:#042C53; --ink-2:#123A63; --line:#D5DEE9; --line-soft:#E6ECF3; --muted:#54697F;
}
.theme-ipc .hero{background:#042C53}
.theme-ipc .hero .veil{background:linear-gradient(90deg, rgba(4,32,60,.97) 0%, rgba(4,32,60,.9) 42%, rgba(4,32,60,.45) 72%, rgba(4,32,60,.28) 100%)}
.theme-ipc .wordmark b,.theme-ipc .titleblock h1 em,.theme-ipc .hero .eyebrow,.theme-ipc .seal .ring i,.theme-ipc .foot .wm em{color:#8FB8E8}
.theme-ipc .wordmark span,.theme-ipc .seal small,.theme-ipc .foot small{color:#9AB1C9}
.theme-ipc .seal .ring{border-color:rgba(143,184,232,.55);background:rgba(4,32,60,.4)}
.theme-ipc .chip{background:rgba(31,95,168,.24);border-color:rgba(110,160,220,.5);color:#B6D0EE}
.theme-ipc .chip .dot{background:#5E96D8;box-shadow:0 0 0 4px rgba(94,150,216,.22)}
.theme-ipc .hero .lede{color:#CBD9E8}
.theme-ipc .medal{background:linear-gradient(160deg,#2E76C8,#124479);box-shadow:0 8px 18px -8px rgba(18,68,121,.7)}
.theme-ipc .medal .num{background:#042C53;color:#8FB8E8}
.theme-ipc .foot{background:#042C53;color:#C2D3E4}

/* ---- real photos ---- */
.shot{border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:0 8px 20px -10px rgba(0,0,0,.35);position:relative;background:#0c1018}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot .cap{position:absolute;left:0;right:0;bottom:0;padding:16px 10px 8px;font-size:10.5px;font-weight:700;color:#fff;background:linear-gradient(transparent, rgba(0,0,0,.78));font-family:var(--mono);letter-spacing:.05em;text-transform:uppercase}
.shots{display:grid;gap:10px}
.shots.g4{grid-template-columns:repeat(4,1fr)}
.shots.g3{grid-template-columns:repeat(3,1fr)}
.shots.g2{grid-template-columns:repeat(2,1fr)}
.r43{aspect-ratio:4/3}.r169{aspect-ratio:16/9}.r11{aspect-ratio:1/1}.r32{aspect-ratio:3/2}
/* photo tucked into a fact/cause/compare row */
.cause .thumb,.fact .thumb,.citem .thumb{width:74px;height:56px;border-radius:9px;overflow:hidden;flex:none;border:1px solid var(--line);background:#0c1018;margin-left:auto}
.cause .thumb img,.fact .thumb img,.citem .thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* explanatory illustration tile (cropped from the pictorial guides) */
.illus{border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:0 8px 20px -10px rgba(0,0,0,.3);background:#fff}
.illus img{width:100%;height:100%;object-fit:cover;display:block}
.illrow{display:grid;gap:14px;align-items:center}
/* before/after pair */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ba .shot .tag{position:absolute;top:8px;left:8px;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border-radius:999px;color:#fff}
.ba .shot .tag.b{background:rgba(195,58,46,.9)} .ba .shot .tag.a{background:rgba(14,143,98,.92)}
@media (max-width:760px){.shots.g4,.shots.g3{grid-template-columns:repeat(2,1fr)}}

/* landscape windows (the in-page viewer): use the width, run shorter */
@media (min-width:1360px){.sheet{width:1330px}}