/* ---------------------------------------------------------------------------
IMMERSIVE SERVICE-PAGE LAYER
---------------------------------------------------------------------------
Ported 2026-07-31 from design-mockups/immersive.css — Saad's Mockup D, the
design the PM approved for the programmatic service pages.
Every selector is `im-` prefixed. That is not cosmetic: this site has already
lost a day to a bare `.steps` selector in styles.css silently dimming a
same-named component in pages.css to 45% opacity, live, for weeks
(knowledge/fixes/web/generic-class-name-collides-across-stylesheets).
Checked before porting — 310 of 312 selectors carry the prefix, and neither
of the two that do not exists anywhere in styles.css or pages.css.
Keep it that way. Anything added here gets the prefix.
The mockup's own switcher bar (.mockbar) is deliberately NOT ported; it only
existed to flip between mockups.
--------------------------------------------------------------------------- */
/* =========================================================
IMMERSIVE — Saad's service-page design
Everything is prefixed .im- so it cannot collide with the
site's own component CSS (see fixes/web/generic-class-name-
collides-across-stylesheets — a bare .steps cost us a day).
========================================================= */
.im{
--depth: rgba(30,27,23,.10);
--glass: rgba(255,255,255,.72);
--ring: rgba(224,87,63,.28);
--grid: rgba(30,27,23,.055);
}
/* reveal-on-scroll: real 3D lift, not a fade */
.im-rise{
opacity:0;
transform:perspective(1200px) translateY(46px) rotateX(9deg);
transform-origin:50% 100%;
transition:opacity .9s cubic-bezier(.22,.7,.18,1), transform 1.05s cubic-bezier(.22,.7,.18,1);
will-change:opacity, transform;
}
.im-rise.in{opacity:1;transform:perspective(1200px) translateY(0) rotateX(0)}
.im-d1{transition-delay:.09s}
.im-d2{transition-delay:.18s}
.im-d3{transition-delay:.27s}
.im-d4{transition-delay:.36s}
.im-d5{transition-delay:.45s}
.im-d6{transition-delay:.54s}
/* ---------- section shell ---------- */
.im-sec{position:relative;padding:clamp(80px,9vw,140px) 0;overflow:hidden}
.im-sec--tint{background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 22%,var(--paper-2) 78%,var(--paper) 100%)}
.im-sec--dark{background:radial-gradient(120% 90% at 50% 0%,#2C251F 0%,#1a1613 70%);color:#fff}
.im-sec--dark h2,.im-sec--dark h3,.im-sec--dark h4,.im-sec--dark b{color:#fff}
.im-sec--dark p,.im-sec--dark li{color:rgba(255,255,255,.74)}
.im-sec--dark .im-num{color:rgba(255,255,255,.14)}
.im-sec--dark .im-card{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.13)}
.im-sec--dark .im-card p{color:rgba(255,255,255,.68)}
/* faint blueprint grid, parallaxed */
.im-grid-bg{
position:absolute;inset:-20% -10%;z-index:0;pointer-events:none;
background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
background-size:46px 46px;
mask-image:radial-gradient(80% 60% at 50% 40%,#000 0%,transparent 78%);
transform:translateY(var(--gy,0px));
}
.im-sec--dark .im-grid-bg{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)}
.im-sec>.wrap{position:relative;z-index:1}
/* ---------- section heads ---------- */
.im-head{max-width:760px}
.im-head.center{margin:0 auto;text-align:center}
.im-head h2{font-size:clamp(2rem,4.2vw,3.35rem);line-height:1.03;letter-spacing:-.032em;margin-top:16px}
.im-head .im-dek{margin-top:18px;font-size:1.06rem;line-height:1.7}
.im-num{
font-family:var(--serif);font-style:italic;font-weight:400;
font-size:clamp(3.2rem,6vw,5.2rem);line-height:.85;color:var(--accent);opacity:.22;
letter-spacing:-.05em;display:block;margin-bottom:-6px;
}
/* ---------- the 3D stage + tilt cards ---------- */
.im-stage{perspective:1400px;perspective-origin:50% 40%}
.im-tilt{
transform-style:preserve-3d;
transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
transition:transform .45s cubic-bezier(.22,.7,.18,1);
}
.im-tilt.live{transition:transform .12s linear}
.im-card{
position:relative;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
padding:30px 28px;box-shadow:0 1px 2px var(--depth),0 24px 50px -30px rgba(30,27,23,.4);
transform-style:preserve-3d;
}
.im-card h4{font-size:1.06rem;letter-spacing:-.015em;margin-bottom:9px}
.im-card p{font-size:.95rem;line-height:1.62}
.im-card__lift{transform:translateZ(34px)}
/* ---------- HERO ---------- */
/* the site's breadcrumb separators collapse without a gap here */
.im-hero .breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.im-hero{
position:relative;padding:clamp(56px,7vw,96px) 0 clamp(70px,8vw,120px);
background:linear-gradient(165deg,#FBF6EF 0%,#F6EDE2 42%,var(--paper) 100%);
overflow:hidden;
}
.im-hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,64px);align-items:center}
@media (max-width:1000px){.im-hero__grid{grid-template-columns:1fr;gap:44px}}
.im-hero h1{font-size:clamp(2.5rem,5.6vw,4.5rem);line-height:1.0;letter-spacing:-.038em}
.im-hero__sub{margin-top:22px;font-size:clamp(1.02rem,1.5vw,1.16rem);line-height:1.62;max-width:52ch}
.im-hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
/* word-by-word headline reveal */
.im-w{display:inline-block;opacity:0;transform:translateY(28px) rotateX(38deg);transform-origin:50% 100%;
transition:opacity .7s cubic-bezier(.22,.7,.18,1),transform .8s cubic-bezier(.22,.7,.18,1)}
.im-w.in{opacity:1;transform:translateY(0) rotateX(0)}
/* the floating 3D scene */
.im-scene{position:relative;perspective:1500px;perspective-origin:50% 45%;
min-height:clamp(430px,46vw,580px);display:flex;align-items:center;justify-content:center}
.im-scene__inner{position:absolute;inset:0;transform-style:preserve-3d;
transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
transition:transform .5s cubic-bezier(.22,.7,.18,1)}
.im-scene__inner.live{transition:transform .14s linear}
.im-plate{
position:absolute;left:50%;top:50%;translate:-50% -50%;
background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
box-shadow:0 30px 70px -34px rgba(30,27,23,.5),0 2px 6px var(--depth);
transform-style:preserve-3d;
}
.im-plate--main{width:min(372px,74%);padding:22px 24px 20px;transform:translateZ(70px)}
.im-plate--main::before{content:"";position:absolute;left:0;top:0;width:100%;height:5px;border-radius:var(--r-lg) var(--r-lg) 0 0;background:linear-gradient(90deg,var(--accent),var(--gold))}
.im-plate--back{width:min(380px,80%);height:230px;transform:translate3d(38px,26px,10px);opacity:.55}
.im-plate--back2{width:min(350px,74%);height:210px;transform:translate3d(70px,52px,-42px);opacity:.3}
.im-chip{
position:absolute;display:inline-flex;align-items:center;gap:8px;
background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff;
font-weight:800;font-size:.84rem;letter-spacing:-.01em;padding:10px 15px;border-radius:13px;
box-shadow:var(--shadow-coral);white-space:nowrap;
}
.im-chip small{display:block;font-size:.63rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;opacity:.86}
/* the chips ring the plate — kept clear of its box so nothing overlaps the
numbers, which are the point of the card */
.im-chip--a{left:0;top:4%;transform:translateZ(130px)}
.im-chip--b{right:0;top:78%;transform:translateZ(160px);background:linear-gradient(135deg,#3E5C8A,#2f486d)}
.im-chip--c{left:2%;bottom:4%;transform:translateZ(110px);background:linear-gradient(135deg,var(--olive),var(--olive-2))}
@media (max-width:1000px){.im-chip--b{top:auto;bottom:4%;right:2%}}
/* On a phone the perspective pushes a translateZ'd chip past the viewport
edge, so the depth is dropped and the chips are pulled inside the frame. */
@media (max-width:640px){
.im-chip{font-size:.75rem;padding:8px 11px;transform:none!important}
.im-chip--a{left:6%;top:2%}
.im-chip--b{right:6%;bottom:2%;top:auto}
.im-chip--c{left:6%;bottom:2%}
/* ⚠ Only the first chip survives a phone. The mockup's chips were hand-written
short ("as-of-right"); the built ones carry each key fact's own label
verbatim, because condensing a sourced figure is not this layout's job. Those
run 200px+, and --b and --c both sit in the bottom band — at 375px they land
on top of each other. The card directly beneath lists every fact in full, so
dropping two chips costs the reader nothing. */
.im-chip--b,.im-chip--c{display:none}
}
/* The card's header. The mockup styled this block with inline attributes, and
the port turned them into class names without bringing the declarations
across — so the city name and its tag rendered as one unstyled run of text
("Toronto What's allowed"), with no rule under them and the rows flush to
the header. Restored here from the mockup, verbatim. */
.im-plate__head{display:flex;align-items:center;gap:9px;padding-bottom:13px;border-bottom:1px solid var(--line-2)}
.im-plate__head b{font-weight:800;letter-spacing:-.01em}
.im-plate__tag{margin-left:auto;font-size:.62rem;font-weight:800;letter-spacing:.1em;
text-transform:uppercase;color:var(--accent-deep);background:var(--accent-soft);
padding:4px 9px;border-radius:100px;white-space:nowrap}
.im-plate__rows{margin-top:14px}
.im-rowline{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.im-rowline:last-child{border-bottom:none}
.im-rowline span{font-size:.87rem;color:var(--ink-2)}
.im-rowline b{font-size:.95rem;color:var(--ink);white-space:nowrap}
.im-rowline b.hi{color:var(--accent-deep)}
/* ---------- quick answer ---------- */
.im-answer{
position:relative;background:linear-gradient(135deg,var(--accent-soft),#FDF1EC);
border-radius:var(--r-lg);padding:clamp(28px,3.4vw,44px);
box-shadow:0 30px 60px -40px rgba(196,67,46,.5);
}
.im-answer p{font-size:clamp(1.12rem,1.9vw,1.42rem);font-weight:600;line-height:1.48;color:var(--ink)}
.im-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
@media (max-width:900px){.im-facts{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.im-facts{grid-template-columns:1fr}}
.im-fact{background:#fff;border:1px solid var(--line-2);border-radius:var(--r);padding:24px 22px;
box-shadow:0 1px 2px var(--depth),0 20px 40px -32px rgba(30,27,23,.45);transform-style:preserve-3d}
.im-fact b{display:block;font-size:1.85rem;font-weight:800;letter-spacing:-.035em;line-height:1;margin-bottom:10px}
.im-fact span{font-size:.92rem;color:var(--ink-2);line-height:1.55;display:block}
/* ---------- the interactive lot ---------- */
.im-lot{display:grid;grid-template-columns:1fr .92fr;gap:clamp(26px,4vw,56px);align-items:center}
@media (max-width:960px){.im-lot{grid-template-columns:1fr}}
.im-lot__viz{position:relative;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
padding:18px;box-shadow:0 30px 70px -40px rgba(30,27,23,.42)}
.im-lot__viz svg{width:100%;height:auto;display:block}
.im-toggles{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.im-toggle{font-size:.85rem;font-weight:700;color:var(--ink-2);background:var(--paper-2);
border:1px solid var(--line);border-radius:100px;padding:9px 15px;cursor:pointer;transition:.22s var(--ease)}
.im-toggle:hover{border-color:var(--accent);color:var(--accent-deep)}
.im-toggle.on{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:var(--shadow-coral)}
/* svg pieces animate in/out */
.im-unit{opacity:0;transform:translateY(-16px);transform-origin:50% 100%;
transition:opacity .5s var(--ease),transform .6s cubic-bezier(.34,1.4,.5,1)}
.im-unit.on{opacity:1;transform:translateY(0)}
.im-park{opacity:0;transition:opacity .45s var(--ease)}
.im-park.on{opacity:1}
.im-lot__note{margin-top:14px;font-size:.85rem;color:var(--ink-3);text-align:center}
/* ---------- before / after wipe ---------- */
.im-wipe{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);
background:#fff;box-shadow:0 30px 70px -40px rgba(30,27,23,.42);touch-action:none;cursor:ew-resize}
.im-wipe svg{display:block;width:100%;height:auto}
.im-wipe__b{position:absolute;inset:0;clip-path:inset(0 0 0 var(--split,50%))}
.im-wipe__bar{position:absolute;top:0;bottom:0;left:var(--split,50%);width:2px;background:var(--accent);
box-shadow:0 0 0 1px rgba(255,255,255,.6)}
.im-wipe__grab{position:absolute;top:50%;left:var(--split,50%);translate:-50% -50%;
width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;display:flex;
align-items:center;justify-content:center;box-shadow:var(--shadow-coral);font-weight:800;font-size:.8rem}
.im-wipe__lbl{position:absolute;top:14px;font-size:.68rem;font-weight:800;letter-spacing:.12em;
text-transform:uppercase;padding:6px 11px;border-radius:100px;background:rgba(255,255,255,.9);color:var(--ink-2)}
.im-wipe__lbl.l{left:14px}
.im-wipe__lbl.r{right:14px;background:var(--accent);color:#fff}
/* ---------- flip cards ---------- */
.im-flips{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
@media (max-width:900px){.im-flips{grid-template-columns:1fr}}
.im-flip{perspective:1200px;min-height:230px;cursor:pointer}
.im-flip__in{position:relative;width:100%;height:100%;min-height:230px;transform-style:preserve-3d;
transition:transform .8s cubic-bezier(.22,.7,.18,1)}
.im-flip.on .im-flip__in{transform:rotateY(180deg)}
.im-flip__f,.im-flip__b{position:absolute;inset:0;backface-visibility:hidden;
border-radius:var(--r-lg);padding:26px 24px;border:1px solid var(--line-2);background:#fff;
box-shadow:0 1px 2px var(--depth),0 22px 46px -32px rgba(30,27,23,.42);display:flex;flex-direction:column;gap:11px}
.im-flip__b{transform:rotateY(180deg);background:linear-gradient(150deg,#241F1A,#312923);border-color:rgba(255,255,255,.12)}
.im-flip__b h4,.im-flip__b b{color:#fff}
.im-flip__b p{color:rgba(255,255,255,.74)}
.im-flip__n{width:38px;height:38px;border-radius:11px;background:var(--accent);color:#fff;
display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0}
.im-flip__hint{margin-top:auto;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.im-flip__b .im-flip__hint{color:var(--accent-2)}
/* ---------- fee receipt ---------- */
.im-receipt{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;
box-shadow:0 34px 70px -40px rgba(30,27,23,.45)}
.im-receipt__h{display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:18px 24px;background:linear-gradient(120deg,#241F1A,#332B24);color:#fff}
.im-receipt__h b{color:#fff;font-size:1rem}
.im-receipt__h span{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2)}
.im-fee{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 24px;
border-bottom:1px solid var(--line-2);opacity:0;transform:translateX(-14px);
transition:opacity .55s var(--ease),transform .6s var(--ease)}
.im-fee.in{opacity:1;transform:translateX(0)}
.im-fee:last-of-type{border-bottom:none}
.im-fee span{font-size:.95rem;color:var(--ink-2)}
.im-fee b{font-size:.98rem;white-space:nowrap}
.im-receipt__t{display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:20px 24px;background:var(--accent-soft)}
.im-receipt__t span{font-weight:700;color:var(--accent-deep)}
.im-receipt__t b{font-size:1.5rem;color:var(--accent-deep);letter-spacing:-.03em}
/* ---------- rent bars ---------- */
.im-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:end;
margin-top:38px;min-height:290px}
@media (max-width:760px){.im-bars{grid-template-columns:1fr 1fr;min-height:0}}
.im-bar{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:310px}
@media (max-width:760px){.im-bar{height:220px}}
.im-bar__v{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;margin-bottom:10px}
.im-bar__fill{height:0;border-radius:14px 14px 0 0;background:linear-gradient(180deg,#4a3f36,#2b241f);
transition:height 1.25s cubic-bezier(.22,.7,.18,1);box-shadow:0 -10px 30px -18px rgba(0,0,0,.6)}
.im-bar--hi .im-bar__fill{background:linear-gradient(180deg,var(--accent),var(--accent-deep))}
.im-bar__l{margin-top:14px;font-size:.86rem;line-height:1.45}
.im-bar__tag{display:inline-block;align-self:flex-start;font-size:.63rem;font-weight:800;letter-spacing:.09em;
text-transform:uppercase;padding:4px 9px;border-radius:100px;background:var(--accent);color:#fff;margin-bottom:9px}
/* every bar carries a tag so the value baselines line up across the row */
.im-bar__tag--mute{background:#fff;color:var(--ink-3);border:1px solid var(--line)}
/* ---------- do / don't ---------- */
.im-dd{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px}
@media (max-width:820px){.im-dd{grid-template-columns:1fr}}
.im-dd__col{border-radius:var(--r-lg);padding:30px 28px;border:1px solid var(--line-2);background:#fff;
box-shadow:0 1px 2px var(--depth),0 24px 50px -34px rgba(30,27,23,.4)}
.im-dd__col--no{background:var(--paper-2)}
.im-dd__tag{display:inline-flex;align-items:center;gap:8px;font-size:.7rem;font-weight:800;letter-spacing:.13em;
text-transform:uppercase;color:var(--accent-deep);background:var(--accent-soft);padding:6px 12px;border-radius:100px}
.im-dd__col--no .im-dd__tag{color:var(--ink-2);background:#fff}
.im-dd__col p{margin-top:16px;line-height:1.7}
/* ---------- chips ---------- */
.im-chips{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;margin-top:30px;perspective:900px}
.im-areachip{display:inline-flex;align-items:center;font-size:.95rem;font-weight:700;color:var(--ink);
background:#fff;border:1px solid var(--line);border-radius:100px;padding:11px 19px;
box-shadow:0 1px 2px var(--depth),0 14px 30px -22px rgba(30,27,23,.5);
transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .25s;transform-style:preserve-3d}
.im-areachip:hover{transform:translateY(-4px) rotateX(-12deg) scale(1.04);border-color:var(--accent);
box-shadow:0 20px 34px -20px rgba(224,87,63,.55)}
/* ---------- FAQ ---------- */
.im-faq{max-width:900px;margin:36px auto 0;perspective:1400px}
.im-q{border:1px solid var(--line-2);background:#fff;border-radius:var(--r);margin-bottom:12px;
overflow:hidden;transform-style:preserve-3d;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.im-q.on{transform:translateZ(28px);box-shadow:0 30px 60px -34px rgba(30,27,23,.5)}
.im-q__b{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
padding:22px 24px;text-align:left;font-size:1.06rem;font-weight:700;letter-spacing:-.012em;color:var(--ink)}
.im-q__ic{flex-shrink:0;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);
display:flex;align-items:center;justify-content:center;transition:.35s var(--ease)}
.im-q.on .im-q__ic{background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(135deg)}
.im-q__a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.im-q__a p{padding:0 24px 24px;font-size:.98rem;line-height:1.7;max-width:70ch}
/* ---------- closing / sources ---------- */
.im-sources{max-width:860px;margin:0 auto;padding:26px 28px;border-radius:var(--r);
background:var(--paper-2);border-left:3px solid var(--olive)}
.im-sources span{display:block;font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
color:var(--ink-3);margin-bottom:11px}
.im-sources p{font-size:.87rem;line-height:1.65}
.im-final{position:relative;padding:clamp(70px,8vw,120px) 0}
.im-final__card{position:relative;max-width:900px;margin:0 auto;border-radius:var(--r-xl);
padding:clamp(38px,5vw,66px) clamp(26px,4vw,54px);text-align:center;color:#fff;overflow:hidden;
background:radial-gradient(120% 120% at 20% 0%,#4a2018 0%,#241512 55%,#1a1210 100%);
box-shadow:0 50px 90px -40px rgba(30,27,23,.6)}
.im-final__card h2{color:#fff;font-size:clamp(1.9rem,3.6vw,2.9rem);letter-spacing:-.03em;line-height:1.06}
.im-final__card p{color:rgba(255,255,255,.78);margin-top:18px;max-width:60ch;margin-left:auto;margin-right:auto;line-height:1.65}
.im-final__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:30px}
.im-final__note{margin-top:20px;font-size:.84rem;color:rgba(255,255,255,.55)}
/* prose inside sections */
.im-prose p{font-size:1.02rem;line-height:1.75;color:var(--ink-2);margin-top:18px;max-width:68ch}
.im-prose p:first-child{margin-top:0}
.im-prose strong{color:var(--ink);font-weight:700}
.im-sec--dark .im-prose strong{color:#fff}
.im-prose a{color:var(--accent);font-weight:600;border-bottom:1px solid var(--ring)}
.im-prose a:hover{border-bottom-color:var(--accent)}
/* the mockup switcher */
background:#fff;border:1px solid var(--line);border-radius:100px;box-shadow:var(--shadow-lg);padding:6px}
.im-w{opacity:1;transform:none;transition:none}
.im-tilt,.im-scene__inner{transform:none!important;transition:none}
.im-unit,.im-park{opacity:1;transform:none;transition:none}
.im-fee{opacity:1;transform:none;transition:none}
.im-flip__in{transition:none}
.im-bar__fill{transition:none}
.im-areachip:hover{transform:none}
.im-q.on{transform:none}
.im-grid-bg{transform:none!important}
}
/* =========================================================
PHOTOGRAPHY LAYER — the cartoon diagrams are gone; the page
is carried by real images with data laid over them.
========================================================= */
/* a framed photo with real depth */
.im-photo{position:relative;border-radius:var(--r-lg);overflow:hidden;
box-shadow:0 40px 80px -38px rgba(30,27,23,.62),0 2px 6px var(--depth)}
.im-photo img{display:block;width:100%;height:100%;object-fit:cover}
.im-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.im-photo--tall img{height:clamp(380px,44vw,560px)}
.im-photo--wide img{height:clamp(300px,34vw,460px)}
/* caption plate that straddles the photo edge */
.im-cap{position:absolute;left:0;bottom:0;right:0;padding:26px 26px 22px;
background:linear-gradient(0deg,rgba(20,16,14,.88) 0%,rgba(20,16,14,.55) 55%,transparent 100%);color:#fff}
.im-cap b{display:block;font-size:1.02rem;color:#fff;letter-spacing:-.015em}
.im-cap span{display:block;margin-top:5px;font-size:.87rem;color:rgba(255,255,255,.76);line-height:1.5}
/* ---------- hero photo panel ---------- */
.im-hero__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.im-hero__media img{width:100%;height:100%;object-fit:cover;object-position:60% 60%}
.im-hero__media::after{content:"";position:absolute;inset:0;
background:linear-gradient(100deg,#FBF6EF 0%,rgba(251,246,239,.97) 34%,rgba(248,238,227,.72) 52%,rgba(30,22,18,.18) 78%,rgba(30,22,18,.34) 100%)}
@media (max-width:1000px){
.im-hero__media::after{background:linear-gradient(180deg,rgba(251,246,239,.97) 0%,rgba(251,246,239,.9) 46%,rgba(30,22,18,.3) 100%)}
}
/* ---------- interactive photo hotspots (replaces the diagram) ---------- */
.im-hot{position:relative}
.im-hot__pin{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;
padding:9px 14px 9px 10px;border-radius:100px;background:rgba(255,255,255,.96);
box-shadow:0 14px 30px -12px rgba(0,0,0,.6);white-space:nowrap;
opacity:0;transform:translateY(10px) scale(.94);transform-origin:0 50%;
transition:opacity .45s var(--ease),transform .55s cubic-bezier(.34,1.35,.5,1)}
.im-hot__pin.on{opacity:1;transform:translateY(0) scale(1)}
.im-hot__pin i{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;
align-items:center;justify-content:center;font-style:normal;font-weight:800;font-size:.86rem;
background:var(--accent);color:#fff}
.im-hot__pin b{font-size:.9rem;color:var(--ink);letter-spacing:-.01em}
.im-hot__pin small{display:block;font-size:.72rem;font-weight:600;color:var(--ink-3);margin-top:1px}
.im-hot__pin--b i{background:#3E5C8A}
.im-hot__pin--c i{background:var(--olive)}
/* the thread from a pin down to the thing it marks */
.im-hot__pin::before{content:"";position:absolute;left:24px;top:100%;width:1.5px;height:var(--lead,26px);
background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,0))}
.im-hot__pin--up::before{top:auto;bottom:100%;background:linear-gradient(0deg,rgba(255,255,255,.95),rgba(255,255,255,0))}
@media (max-width:560px){.im-hot__pin{padding:7px 11px 7px 8px}
.im-hot__pin b{font-size:.8rem}
.im-hot__pin small{display:none}}
/* ---------- before / after, now photographic ---------- */
.im-wipe img{display:block;width:100%;height:clamp(320px,38vw,520px);object-fit:cover}
.im-wipe__b img{position:relative}
/* ---------- full-bleed image band ---------- */
.im-band{position:relative;min-height:clamp(420px,48vw,600px);display:flex;align-items:center;
overflow:hidden;isolation:isolate}
.im-band__img{position:absolute;inset:0;z-index:-2}
.im-band__img img{width:100%;height:100%;object-fit:cover}
.im-band::before{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(180deg,rgba(18,14,12,.82) 0%,rgba(18,14,12,.62) 45%,rgba(18,14,12,.86) 100%)}
.im-band h2,.im-band h3,.im-band b{color:#fff}
.im-band p,.im-band li{color:rgba(255,255,255,.78)}
.im-band .im-num{color:rgba(255,255,255,.2)}
/* ---------- editorial split: photo one side, content the other ---------- */
.im-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.im-split--narrow{grid-template-columns:.85fr 1.15fr}
@media (max-width:960px){.im-split,.im-split--narrow{grid-template-columns:1fr;gap:34px}}
/* a stat plate that overlaps the photo corner */
.im-overlay-stat{position:absolute;right:-18px;bottom:-22px;z-index:4;background:#fff;
border-radius:var(--r);padding:20px 24px;box-shadow:0 30px 60px -26px rgba(30,27,23,.55);min-width:180px}
.im-overlay-stat b{display:block;font-size:1.9rem;font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--ink)}
.im-overlay-stat span{display:block;margin-top:7px;font-size:.83rem;color:var(--ink-2);line-height:1.45}
@media (max-width:560px){.im-overlay-stat{right:8px;bottom:-16px;padding:15px 17px;min-width:0}
.im-overlay-stat b{font-size:1.45rem}}
/* A light card inside a dark section must re-assert its own colours: the
.im-sec--dark b rule was painting the fee values white on white. */
.im-receipt .im-fee b{color:var(--ink)}
.im-receipt .im-fee span{color:var(--ink-2)}
.im-receipt__t b,.im-receipt__t span{color:var(--accent-deep)}
.im-receipt__h b{color:#fff}
/* ---------- paired rent comparison ---------- */
.im-pairs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);
max-width:960px;margin:44px auto 0}
@media (max-width:760px){.im-pairs{grid-template-columns:1fr;gap:38px}}
.im-pair__plot{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:end;height:250px}
.im-pair__col{display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.im-pair__v{font-size:1.5rem;font-weight:800;letter-spacing:-.035em;color:var(--ink);margin-bottom:10px}
.im-pair__v--mute{color:var(--ink-3);font-size:1.3rem}
.im-pair__k{margin-top:12px;font-size:.75rem;font-weight:800;letter-spacing:.1em;
text-transform:uppercase;color:var(--ink-3)}
.im-pair .im-bar__fill{height:0;border-radius:14px 14px 0 0;
background:linear-gradient(180deg,#4a3f36,#2b241f);
transition:height 1.25s cubic-bezier(.22,.7,.18,1)}
.im-pair .im-bar__fill--hi{background:linear-gradient(180deg,var(--accent),var(--accent-deep))}
.im-pair__foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.im-pair__foot b{font-size:1.02rem;letter-spacing:-.015em}
.im-delta{font-size:.78rem;font-weight:800;letter-spacing:.03em;color:#fff;
background:var(--accent);padding:5px 11px;border-radius:100px}
.im-pair__note{grid-column:1/-1;margin-top:8px;text-align:center;font-size:1rem;
line-height:1.7;color:var(--ink-2);max-width:64ch;margin-left:auto;margin-right:auto}
.im-pair__note b{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.im-pair .im-bar__fill{transition:none}}
/* the photograph should dominate this section, not sit beside the copy */
.im-lot{grid-template-columns:.88fr 1.12fr}
.im-photo--tall img{height:clamp(420px,48vw,620px)}
/* =========================================================
THE MYTH SECTION — the accuracy moat, designed like it matters
========================================================= */
.im-myth{position:relative;overflow:hidden}
.im-myth__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4.5vw,70px);align-items:start}
@media (max-width:980px){.im-myth__grid{grid-template-columns:1fr;gap:40px}}
/* claim -> correction */
.im-claim{position:relative;border-radius:var(--r-lg);padding:26px 28px;background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.14)}
.im-claim__tag{display:inline-flex;align-items:center;gap:8px;font-size:.68rem;font-weight:800;
letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.im-claim__tag i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);font-style:normal}
.im-claim q{display:block;margin-top:13px;font-family:var(--serif);font-style:italic;font-weight:400;
font-size:clamp(1.35rem,2.6vw,1.95rem);line-height:1.2;color:#fff;quotes:none}
.im-claim--true{background:linear-gradient(135deg,rgba(224,87,63,.22),rgba(224,87,63,.08));
border-color:rgba(224,87,63,.42);margin-top:16px}
.im-claim--true .im-claim__tag{color:var(--accent-2)}
.im-claim--true .im-claim__tag i{background:var(--accent)}
/* 25 wards, 9 of them */
.im-wards{border-radius:var(--r-lg);padding:28px 30px;background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.13)}
.im-wards__grid{display:grid;grid-template-columns:repeat(9,1fr);gap:7px;margin-top:18px}
.im-ward{aspect-ratio:1;border-radius:5px;background:rgba(255,255,255,.13)}
.im-ward.on{background:linear-gradient(160deg,var(--accent),var(--accent-deep));
box-shadow:0 6px 16px -6px rgba(224,87,63,.9)}
.im-wards__key{display:flex;flex-wrap:wrap;gap:18px;margin-top:20px}
.im-wards__key span{display:inline-flex;align-items:center;gap:9px;font-size:.83rem;color:rgba(255,255,255,.72)}
.im-wards__key i{width:13px;height:13px;border-radius:4px;background:rgba(255,255,255,.16);flex-shrink:0}
.im-wards__key i.on{background:var(--accent)}
.im-wards b{font-size:1.02rem;color:#fff;letter-spacing:-.015em}
/* the two dates that actually changed the rules */
.im-time{margin-top:20px;border-radius:var(--r-lg);padding:26px 30px;background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.13)}
.im-time__row{display:grid;grid-template-columns:96px 1fr;gap:18px;padding:14px 0;
border-bottom:1px solid rgba(255,255,255,.1)}
.im-time__row:last-child{border-bottom:none;padding-bottom:0}
.im-time__row:first-of-type{padding-top:4px}
.im-time__d{font-family:var(--serif);font-style:italic;font-size:1.12rem;color:var(--accent-2);line-height:1.25}
.im-time__t b{display:block;font-size:.98rem;color:#fff;letter-spacing:-.015em}
.im-time__t span{display:block;margin-top:4px;font-size:.87rem;color:rgba(255,255,255,.66);line-height:1.5}
/* =========================================================
THE CLOSE — a full-bleed finish, not a box on a page
========================================================= */
.im-close{position:relative;min-height:clamp(520px,58vw,680px);display:flex;align-items:center;
overflow:hidden;isolation:isolate}
.im-close__img{position:absolute;inset:0;z-index:-2}
.im-close__img img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.im-close::before{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(96deg,rgba(16,11,9,.94) 0%,rgba(16,11,9,.86) 42%,rgba(16,11,9,.5) 72%,rgba(16,11,9,.34) 100%)}
.im-close__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,5vw,74px);align-items:center}
@media (max-width:980px){.im-close__grid{grid-template-columns:1fr;gap:38px}
.im-close::before{background:linear-gradient(180deg,rgba(16,11,9,.92) 0%,rgba(16,11,9,.88) 60%,rgba(16,11,9,.8) 100%)}}
.im-close h2{color:#fff;font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.02;letter-spacing:-.035em;margin-top:16px}
.im-close p{color:rgba(255,255,255,.8);margin-top:20px;font-size:1.06rem;line-height:1.68;max-width:56ch}
.im-close__note{margin-top:16px;font-size:.86rem;color:rgba(255,255,255,.52)}
/* the address field, matching the rest of the site's report CTA */
.im-addr{display:flex;gap:10px;margin-top:30px;background:rgba(255,255,255,.97);border-radius:100px;
padding:7px 7px 7px 20px;max-width:520px;box-shadow:0 24px 50px -22px rgba(0,0,0,.8)}
.im-addr input{flex:1;min-width:0;border:none;outline:none;background:none;font-family:inherit;
font-size:1rem;color:var(--ink)}
.im-addr input::placeholder{color:var(--ink-3)}
@media (max-width:560px){.im-addr{flex-direction:column;border-radius:var(--r);padding:16px;gap:12px}
.im-addr .btn{justify-content:center}}
.im-close__checks{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:24px;padding:0;list-style:none}
.im-close__checks li{display:flex;align-items:center;gap:9px;font-size:.92rem;color:rgba(255,255,255,.82)}
.im-close__checks li::before{content:"";width:19px;height:19px;border-radius:50%;flex-shrink:0;
background:rgba(224,87,63,.9) url("data:image/svg+xml;utf8,") center/11px no-repeat}
/* the report mock that closes the loop with the hero */
.im-closecard{background:#fff;border-radius:var(--r-lg);padding:24px 26px 22px;position:relative;
box-shadow:0 50px 90px -34px rgba(0,0,0,.75)}
.im-closecard::before{content:"";position:absolute;left:0;top:0;width:100%;height:5px;
border-radius:var(--r-lg) var(--r-lg) 0 0;background:linear-gradient(90deg,var(--accent),var(--gold))}
.im-closecard__h{display:flex;align-items:center;gap:9px;padding-bottom:13px;border-bottom:1px solid var(--line-2)}
.im-closecard__h b{font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.im-closecard__h span{margin-left:auto;font-size:.62rem;font-weight:800;letter-spacing:.1em;
text-transform:uppercase;color:var(--accent-deep);background:var(--accent-soft);padding:4px 9px;border-radius:100px}
.im-closecard .im-rowline b{color:var(--ink)}
.im-closecard .im-rowline b.hi{color:var(--accent-deep)}
.im-closecard__f{margin-top:15px;font-size:.72rem;color:var(--ink-3);text-align:center}
/* THIRD time this pattern has bitten: a section-wide colour rule (.im-close p)
out-specifies a light card's own rule and paints its text white on white.
The card re-asserts its colours explicitly. */
.im-closecard p.im-closecard__f{color:var(--ink-3);font-size:.72rem;margin-top:16px;max-width:none;line-height:1.5}
.im-closecard .im-rowline span{color:var(--ink-2);font-size:.87rem}
/* 25 wards read cleanest as a square — a 9-wide grid left a ragged row of 7 */
.im-wards__grid{grid-template-columns:repeat(5,1fr);gap:9px;max-width:260px}
/* the placeholder was being clipped by the button */
.im-addr{max-width:560px}
.im-addr input{min-width:0;width:100%}
.im-addr .btn{flex-shrink:0;white-space:nowrap}
/* =========================================================
POLISH PASS — spacing, balance and the clipping bug
========================================================= */
/* An overlay stat is meant to hang OUTSIDE the photo, but .im-photo clips
its children to get rounded corners — so the stat was being cut in half.
The stat now sits on an unclipped wrapper beside the photo. */
.im-figure{position:relative}
.im-figure .im-photo{overflow:hidden}
/* splits read as one composition when their columns are centred on each other */
.im-split{align-items:center}
.im-split--narrow{align-items:center}
/* section 01: the copy column was too narrow, so the heading broke to three
lines and the paragraphs ran short */
.im-lot{grid-template-columns:1fr 1.02fr;align-items:center;gap:clamp(32px,4.5vw,64px)}
/* a sub-heading for split columns that were running headless */
.im-subhead{margin-top:14px;font-size:clamp(1.45rem,2.4vw,2rem);line-height:1.08;letter-spacing:-.028em}
/* trailing prose under a centred section reads as a caption, not a new column */
.im-prose--center{max-width:74ch;text-align:center}
.im-prose--center p{margin-left:auto;margin-right:auto}
/* flip-card titles were breaking with orphans and the two rows sat unequal */
.im-flip__f h4,.im-flip__b h4{line-height:1.25}
.im-flip,.im-flip__in{min-height:250px}
/* the fee photo and the fee card should end on the same line */
.im-split > .im-photo{align-self:stretch}
.im-split > .im-photo img{height:100%;min-height:clamp(320px,34vw,440px)}
/* (The mockup's fixed variant switcher needed `body{padding-bottom:84px}` here.
Removed: this stylesheet loads on EVERY page while the design is switched on,
so that rule put 84px of dead space under all 99 blog posts and the homepage
too. There is no switcher on the real site.) */
/* =========================================================
HOW THIS PAGE WAS CHECKED — the accuracy moat, designed like
the differentiator it is rather than a grey footnote.
========================================================= */
.im-src{max-width:1000px;margin:0 auto;background:#fff;border:1px solid var(--line-2);
border-radius:var(--r-lg);overflow:hidden;
box-shadow:0 1px 2px var(--depth),0 34px 70px -40px rgba(30,27,23,.45)}
.im-src__top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
padding:20px 30px;background:linear-gradient(120deg,#2B2A22,#211C18);color:#fff}
.im-src__badge{display:inline-flex;align-items:center;gap:10px;font-size:.9rem;font-weight:800;
letter-spacing:-.01em;color:#fff}
.im-src__badge i{width:9px;height:9px;border-radius:50%;background:var(--olive);flex-shrink:0;
box-shadow:0 0 0 4px rgba(138,154,100,.22)}
.im-src__hdr{font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
color:rgba(255,255,255,.5)}
.im-src__row{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:baseline;
padding:20px 30px;border-bottom:1px solid var(--line-2)}
.im-src__row:last-child{border-bottom:none}
.im-src__row:nth-child(even){background:var(--paper-2)}
@media (max-width:760px){.im-src__row{grid-template-columns:1fr;gap:10px;padding:18px 22px}}
.im-src__claim b{display:block;font-size:.7rem;font-weight:800;letter-spacing:.13em;
text-transform:uppercase;color:var(--accent-deep);margin-bottom:7px}
.im-src__claim span{display:block;font-size:.95rem;line-height:1.55;color:var(--ink-2)}
.im-src__auth{position:relative;padding-left:24px}
.im-src__auth::before{content:"";position:absolute;left:0;top:6px;width:13px;height:13px;border-radius:50%;
background:var(--accent-soft) url("data:image/svg+xml;utf8,") center/9px no-repeat}
.im-src__auth b{display:block;font-size:.97rem;color:var(--ink);letter-spacing:-.012em;line-height:1.45}
.im-src__auth span{display:block;margin-top:4px;font-size:.86rem;color:var(--ink-3);line-height:1.45}
@media (max-width:760px){.im-src__auth{padding-left:22px}}
.im-src__foot{display:flex;align-items:flex-start;gap:12px;padding:20px 30px;
background:var(--accent-soft);color:var(--accent-deep)}
.im-src__foot svg{flex-shrink:0;margin-top:2px}
.im-src__foot p{margin:0;font-size:.92rem;line-height:1.55;color:var(--accent-deep);font-weight:600}
/* rows whose claim is its own label need no echo underneath */
.im-src__claim--solo b{margin-bottom:0;font-size:.95rem;letter-spacing:-.012em;
text-transform:none;color:var(--ink)}
.im-src__claim--solo{align-self:center}
/* =========================================================
RENT GAP CHART — four bars spanning $1,917–$2,547 all stood
75–100% tall and read as identical blocks. What matters is the
DISTANCE between the two figures, so that is what is drawn.
The axis is printed, so the truncated baseline is stated, not hidden.
========================================================= */
.im-gap{max-width:980px;margin:46px auto 0;background:#fff;border:1px solid var(--line-2);
border-radius:var(--r-lg);padding:30px clamp(24px,3.4vw,44px) 26px;
box-shadow:0 1px 2px var(--depth),0 30px 66px -40px rgba(30,27,23,.42)}
.im-gap__head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;
padding-bottom:20px;border-bottom:1px solid var(--line-2)}
.im-gap__head b{font-size:1.02rem;letter-spacing:-.015em}
.im-gap__key{display:flex;gap:20px;flex-wrap:wrap}
.im-gap__key span{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;color:var(--ink-2)}
.im-gap__key i{width:11px;height:11px;border-radius:50%;background:#4a3f36;flex-shrink:0}
.im-gap__key i.hi{background:var(--accent)}
.im-gap__row{display:grid;grid-template-columns:132px 1fr;gap:22px;align-items:center;
padding:34px 0 30px;border-bottom:1px solid var(--line-2)}
.im-gap__row:last-of-type{border-bottom:none}
.im-gap__lbl{font-size:1rem;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
@media (max-width:680px){.im-gap__row{grid-template-columns:1fr;gap:34px;padding:26px 0 24px}}
.im-gap__track{position:relative;height:14px;background:var(--paper-2);border-radius:100px}
.im-gap__line{position:absolute;top:0;bottom:0;left:var(--a);width:calc(var(--b) - var(--a));
background:linear-gradient(90deg,rgba(224,87,63,.28),var(--accent));border-radius:100px;
transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.22,.7,.18,1)}
.im-gap.in .im-gap__line{transform:scaleX(1)}
.im-gap__dot{position:absolute;top:50%;width:19px;height:19px;border-radius:50%;
translate:-50% -50%;border:3px solid #fff;box-shadow:0 3px 10px rgba(30,27,23,.35)}
.im-gap__dot b{position:absolute;left:50%;translate:-50% 0;bottom:26px;white-space:nowrap;
font-size:1.12rem;font-weight:800;letter-spacing:-.03em}
.im-gap__dot--mute{background:#4a3f36}
.im-gap__dot--mute b{color:var(--ink-3);font-size:1rem}
.im-gap__dot--hi{background:var(--accent);box-shadow:0 4px 14px rgba(224,87,63,.55)}
.im-gap__dot--hi b{color:var(--ink)}
.im-gap__delta{position:absolute;top:26px;translate:-50% 0;white-space:nowrap;
font-size:.76rem;font-weight:800;letter-spacing:.03em;color:#fff;background:var(--accent);
padding:4px 11px;border-radius:100px}
.im-gap__axis{position:relative;height:22px;margin:14px 0 0 154px;border-top:1px solid var(--line-2)}
.im-gap__axis span{position:absolute;top:7px;translate:-50% 0;font-size:.72rem;color:var(--ink-3)}
@media (max-width:680px){.im-gap__axis{margin-left:0}}
.im-gap__note{margin-top:22px;font-size:.9rem;line-height:1.6;color:var(--ink-2)}
.im-gap__note b{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.im-gap__line{transform:scaleX(1);transition:none}}
/* the delta pill hangs below the track — the row needs room for it */
.im-gap__row{padding:36px 0 46px}
.im-gap__row:last-of-type{padding-bottom:40px}
.im-gap__axis{margin-top:6px}
/* ---------------------------------------------------------------------------
HouseLyft addendum — not Saad's, added 2026-07-31 while wiring the layout to
real content. Kept at the end and clearly marked so the ported design stays
readable as his.
The mockup's section heads were followed by hand-placed blocks with their own
spacing. Generated sections put prose straight after the head, and with no
rule it collided with the heading — visible on every band.
--------------------------------------------------------------------------- */
.im-sec .im-head{margin-bottom:26px}
.im-sec .im-head h2{margin-bottom:0}
.im-sec .im-prose>*:first-child{margin-top:0}
.im-sec .im-prose p+p{margin-top:14px}
.im-sec .im-prose .im-facts,.im-sec .im-prose .im-receipt{margin-top:24px;margin-bottom:24px}
/* Promoted card grids. The column count is chosen so the items divide evenly
(see lib/immersive.js) — but it must still collapse on a phone, which is why
this is a class rather than an inline style on the element. */
.im-facts--2{grid-template-columns:repeat(2,1fr)}
.im-facts--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){
.im-facts--3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
.im-facts--2,.im-facts--3{grid-template-columns:1fr}
}
/* Receipt values were `white-space:nowrap` — correct for "$214.79", which is
what the mockup's Toronto table holds. Mississauga's table is a Charge /
Treatment pair, so its values are sentences: "Refunded by cheque once
construction and inspections are complete" rendered 448px wide inside a
284px row and ran off a phone screen. Values wrap; the figures they were
designed for are too short to notice. */
.im-fee b{white-space:normal;text-align:right}
/* The myth band's grid is two columns in the mockup — Saad filled the second
with Toronto's ward map, which is Toronto-only data. With one column filled
the band read as half-empty, so it centres on a reading width instead of
leaving a hole where a feature would have been. */
.im-myth__grid{grid-template-columns:1fr;max-width:760px;margin-inline:auto}