/* made by _build\film.mjs from film.css (do not edit by hand): the film on the home page */
/* the film was made on a page with the browser's own 16px text and normal line height */
.iia-film{font-size:16px;line-height:normal;letter-spacing:normal;text-align:left}
/* site.css rules that share the film's class names, put back to the film's own defaults (film.css below wins on ties) */
.iia-film .stage{display:block;margin:0;padding:0;perspective:none;justify-items:normal}
.iia-film .mono{font-size:inherit;color:inherit}
.iia-film .pill-ex{backdrop-filter:none;-webkit-backdrop-filter:none}
.iia-film .lab{position:static;overflow:visible;padding:0;isolation:auto}
.iia-film .lab::before{content:none}
.iia-film .steps{display:block;gap:0;counter-reset:none}
.iia-film .tr{display:block;gap:0}
.iia-film .skip{transition:none}
.iia-film img{max-width:none}
/* Is It Asbestos? · the homepage film (DRAFT on this PC, not live).
   A self-contained component: <div class="iia-film" data-film="film.json"></div> + film.js.
   It sizes itself to its box (container queries), so the same film fills a full screen or a hero.
   Everything that moves is moved with transform/opacity only (film.js writes them, once per frame, only on change). */

.iia-film{
  --ink:#04070c;--ink2:#07101a;--panel:#0b1622;--slate:#2a4252;--mist:#8fa6b5;--frost:#e9f3f8;--paper:#f6f9fb;
  --cyan:#22d3ee;--cyan2:#7df3ff;--deep:#0891b2;--amber:#ffb547;--amberdeep:#b45309;
  --fh:'Space Grotesk',system-ui,sans-serif;--fb:'Inter',system-ui,sans-serif;--fm:'IBM Plex Mono',ui-monospace,monospace;
  --gut:clamp(16px,3.4cqw,72px);--u:min(1cqh,.5625cqw);
  position:relative;overflow:hidden;background:var(--ink);color:var(--frost);font-family:var(--fb);
  container:film / size;isolation:isolate;contain:layout paint style;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;
}
.iia-film *,.iia-film *::before,.iia-film *::after{box-sizing:border-box}
.iia-film p,.iia-film h2,.iia-film h3,.iia-film ol,.iia-film dl,.iia-film dd{margin:0;padding:0}
.iia-film .stage{position:absolute;inset:0}
.iia-film .L{position:absolute;left:0;top:0;will-change:transform,opacity}   /* a layer film.js places */
.iia-film .hide{opacity:0;visibility:hidden}
.iia-film .mono{font-family:var(--fm);font-weight:500;text-transform:uppercase;letter-spacing:.14em}

/* ---------- the footage (camera) ---------- */
.iia-film .cam{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.iia-film .scene{position:absolute;inset:0;will-change:transform,opacity}
.iia-film .scene video,.iia-film .scene img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:fill}
.iia-film .poster-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}

/* the grade that is not baked into the footage: vignette, a legibility fall-off, and moving grain */
.iia-film .vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 95% at 50% 46%,transparent 52%,rgba(2,4,8,.42) 78%,rgba(2,4,8,.78) 100%),
             linear-gradient(180deg,rgba(2,4,8,.42) 0%,transparent 16%,transparent 80%,rgba(2,4,8,.5) 100%)}
.iia-film .scrimL{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(3,6,10,.86) 0%,rgba(3,6,10,.55) 34%,transparent 64%)}
.iia-film .shade{position:absolute;inset:0;background:var(--ink);pointer-events:none}
.iia-film .grain{position:absolute;left:-50%;top:-50%;width:200%;height:200%;pointer-events:none;opacity:.16;
  background-image:url(assets/grain.png);background-size:192px 192px;animation:iia-grain .9s steps(9) infinite}
@keyframes iia-grain{0%{transform:translate(0,0)}11%{transform:translate(-7%,4%)}22%{transform:translate(5%,-9%)}33%{transform:translate(-11%,-3%)}44%{transform:translate(9%,8%)}55%{transform:translate(-3%,11%)}66%{transform:translate(12%,-6%)}77%{transform:translate(-9%,7%)}88%{transform:translate(4%,-12%)}100%{transform:translate(0,0)}}
.iia-film .flash{position:absolute;inset:0;background:#f4fbff;pointer-events:none}
.iia-film .black{position:absolute;inset:0;background:#000;pointer-events:none}
.iia-film .blade{position:absolute;left:0;right:0;height:51%;background:#000;pointer-events:none;will-change:transform;opacity:0;visibility:hidden}
.iia-film .blade.top{top:0;transform-origin:50% 0}
.iia-film .blade.bot{bottom:0;transform-origin:50% 100%}
.iia-film .streak{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 0%,rgba(233,243,248,.08) 30%,rgba(233,243,248,.16) 50%,rgba(233,243,248,.08) 70%,transparent 100%)}

/* ---------- the instrument (HUD) ---------- */
.iia-film .hole{width:100px;height:100px;transform-origin:0 0;border-radius:1px;box-shadow:0 0 0 60vmax rgba(2,5,9,.58)}
.iia-film .crn{width:30px;height:30px;border:0 solid var(--cyan2);filter:drop-shadow(0 0 5px rgba(34,211,238,.75))}
.iia-film .crn.tl{border-width:2px 0 0 2px}.iia-film .crn.tr{border-width:2px 2px 0 0}
.iia-film .crn.bl{border-width:0 0 2px 2px}.iia-film .crn.br{border-width:0 2px 2px 0}
.iia-film .reticle{width:132px;height:132px;margin:-66px 0 0 -66px;filter:drop-shadow(0 0 6px rgba(34,211,238,.7))}
.iia-film .reticle svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.iia-film .ret-spin{will-change:transform}
.iia-film .ladder{width:40px;height:44cqh;margin-top:-22cqh;overflow:hidden;
  -webkit-mask:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
.iia-film .ladder i{position:absolute;left:0;top:-100%;width:100%;height:300%;will-change:transform;
  background:repeating-linear-gradient(180deg,rgba(125,243,255,.55) 0 1px,transparent 1px 14px) left/12px 100% no-repeat,
             repeating-linear-gradient(180deg,rgba(125,243,255,.8) 0 1px,transparent 1px 70px) left/24px 100% no-repeat}
.iia-film .ladder b{position:absolute;left:28px;top:50%;width:0;height:0;margin-top:-5px;border:5px solid transparent;border-left:7px solid var(--cyan2)}

.iia-film .hud-tl{left:var(--gut);top:max(14px,calc(var(--u)*4.6));display:grid;gap:6px}
.iia-film .hud-tool{display:flex;align-items:center;gap:9px;font-size:max(10px,calc(var(--u)*1.35));color:var(--cyan2)}
.iia-film .hud-tool i{width:7px;height:7px;border-radius:50%;background:var(--cyan2);box-shadow:0 0 10px var(--cyan)}
.iia-film .hud-scene{position:relative;height:1.25em;font-family:var(--fh);font-weight:600;font-size:max(17px,calc(var(--u)*2.9));letter-spacing:-.01em;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.6)}
.iia-film .hud-scene span{position:absolute;left:0;top:0;white-space:nowrap}
.iia-film .hud-tr{right:var(--gut);top:max(14px,calc(var(--u)*4.6));display:grid;justify-items:end;gap:8px;left:auto}
.iia-film .hud-built{font-size:max(10px,calc(var(--u)*1.35));color:var(--mist)}
.iia-film .pill-ex{display:inline-flex;align-items:center;gap:7px;font-family:var(--fm);font-weight:500;font-size:max(10px,calc(var(--u)*1.3));letter-spacing:.14em;text-transform:uppercase;
  padding:5px 10px;border-radius:99px;color:var(--amber);border:1px solid rgba(255,181,71,.55);background:rgba(3,8,13,.55)}

.iia-film .sweep{width:100px;height:90px;margin-top:-90px;transform-origin:0 0;
  background:linear-gradient(180deg,transparent,rgba(34,211,238,.06) 55%,rgba(34,211,238,.26) 96%,rgba(200,250,255,.95) 99%,rgba(125,243,255,.9) 100%)}
.iia-film .timer{display:flex;align-items:baseline;gap:12px;padding:10px 16px 11px 14px;border-radius:12px;transform-origin:0 100%;background:rgba(3,8,13,.78);border:1px solid rgba(125,243,255,.28);white-space:nowrap}
.iia-film .timer .tk{font-size:max(10.5px,calc(var(--u)*1.45));color:#c9dbe6}
.iia-film .timer .tv{font-family:var(--fh);font-weight:700;font-size:max(28px,calc(var(--u)*5.2));color:var(--cyan2);font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1}
.iia-film .timer .tn{font-size:max(10px,calc(var(--u)*1.3));color:var(--cyan)}
.iia-film .timer.stop .tv{color:var(--amber)}

/* sample markers on the picture */
.iia-film .box{transform-origin:0 0;border-radius:3px;background:rgba(34,211,238,.07);box-shadow:inset 0 0 0 1px rgba(125,243,255,.32)}
.iia-film .box i{position:absolute;width:18px;height:18px;border:0 solid var(--cyan2);filter:drop-shadow(0 0 4px var(--cyan))}
.iia-film .box i:nth-child(1){left:-2px;top:-2px;border-width:2.5px 0 0 2.5px}
.iia-film .box i:nth-child(2){right:-2px;top:-2px;border-width:2.5px 2.5px 0 0}
.iia-film .box i:nth-child(3){left:-2px;bottom:-2px;border-width:0 0 2.5px 2.5px}
.iia-film .box i:nth-child(4){right:-2px;bottom:-2px;border-width:0 2.5px 2.5px 0}
.iia-film .box.stop{background:rgba(255,181,71,.09);box-shadow:inset 0 0 0 1px rgba(255,181,71,.45)}
.iia-film .box.stop i{border-color:var(--amber);filter:drop-shadow(0 0 5px rgba(255,181,71,.8))}
.iia-film .ping{transform-origin:0 0;border-radius:4px;box-shadow:0 0 0 1.5px var(--cyan2),0 0 22px rgba(34,211,238,.5)}
.iia-film .ping.stop{box-shadow:0 0 0 1.5px var(--amber),0 0 26px rgba(255,181,71,.55)}
.iia-film .tag{display:flex;align-items:stretch;border-radius:8px;overflow:hidden;white-space:nowrap;box-shadow:0 10px 30px -10px rgba(0,0,0,.8)}
.iia-film .tag b{display:grid;place-items:center;padding:0 .7em;font-family:var(--fm);font-weight:500;font-size:max(11px,calc(var(--u)*1.75));background:var(--cyan);color:#021018}
.iia-film .tag span{display:grid;gap:1px;padding:.45em .8em .45em .7em;background:rgba(3,9,15,.88);font-size:max(12px,calc(var(--u)*2));font-weight:600;color:#fff;line-height:1.2}
.iia-film .tag span small{font-size:.8em;font-weight:600;color:var(--cyan2)}
.iia-film .tag.stop b{background:var(--amber);color:#1a0d00}
.iia-film .tag.stop span small{color:var(--amber)}

/* ---------- words ---------- */
.iia-film .title{left:var(--gut);top:50%;margin:0;font-family:var(--fh);font-weight:700;letter-spacing:-.035em;line-height:.9;
  font-size:calc(var(--u)*15.5);color:#fff;text-shadow:0 6px 40px rgba(0,0,0,.45)}
.iia-film .title .w{display:block;width:max-content;overflow:hidden;padding:0 .06em .08em 0;margin-bottom:-.08em}
.iia-film .title .w span{display:block;will-change:transform}
.iia-film .grad{background:linear-gradient(92deg,var(--cyan2),var(--cyan) 45%,#5aa9ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.iia-film .stopw{left:var(--gut);top:50%;width:min(46cqw,720px)}
.iia-film .stopw .big{font-family:var(--fh);font-weight:700;letter-spacing:-.035em;line-height:.88;font-size:calc(var(--u)*14);color:var(--amber);text-shadow:0 0 50px rgba(255,181,71,.25)}
.iia-film .stopw .big .w{display:block;width:max-content;overflow:hidden;padding:0 .06em .06em 0}
.iia-film .stopw .big .w span{display:block}
.iia-film .stopw .sm{margin-top:.5em;font-family:var(--fh);font-weight:600;font-size:calc(var(--u)*4.4);color:#fff;letter-spacing:-.01em}
.iia-film .stopw .lab{margin-top:1.1em;display:flex;gap:9px;align-items:center;font-size:max(12px,calc(var(--u)*1.8));color:var(--mist)}
.iia-film .ic{flex:0 0 auto;width:1.15em;height:1.15em}

/* ---------- the what-to-test sheet ---------- */
.iia-film .sheet{left:var(--gut);top:max(64px,calc(var(--u)*15));width:max(310px,calc(var(--u)*50));transform-origin:0 50%;padding:max(14px,calc(var(--u)*2.2));border-radius:16px;
  background:linear-gradient(180deg,rgba(9,19,29,.94),rgba(5,11,18,.94));border:1px solid rgba(140,220,255,.16);box-shadow:0 30px 80px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05)}
.iia-film .sh-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.iia-film .sh-title{font-size:max(11px,calc(var(--u)*1.45));color:var(--cyan2)}
.iia-film .sh-sub{margin-top:4px;font-size:max(12px,calc(var(--u)*1.6));color:var(--mist)}
.iia-film .sh-rows{list-style:none;margin-top:max(8px,calc(var(--u)*1.4));display:grid}
.iia-film .sh-row{position:relative;display:grid;grid-template-columns:auto 1fr;gap:12px;padding:max(9px,calc(var(--u)*1.5)) 0;border-top:1px solid rgba(140,220,255,.12)}
.iia-film .sh-n{font-family:var(--fm);font-weight:500;font-size:max(12px,calc(var(--u)*1.8));width:2.4em;height:2.4em;display:grid;place-items:center;border-radius:8px;background:rgba(34,211,238,.12);color:var(--cyan2);border:1px solid rgba(125,243,255,.35)}
.iia-film .sh-where{font-family:var(--fh);font-weight:600;font-size:max(16px,calc(var(--u)*2.5));color:#fff;line-height:1.15}
.iia-film .sh-mat{margin-top:2px;font-size:max(12.5px,calc(var(--u)*1.9));color:#c9dbe6;line-height:1.3}
.iia-film .sh-meta{margin-top:7px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:max(12px,calc(var(--u)*1.8))}
.iia-film .sh-cond{color:var(--mist)}
.iia-film .sh-cond b{font-weight:600;color:#fff}
.iia-film .sh-act{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--cyan2)}
.iia-film .sh-act::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.iia-film .sh-row.stop .sh-n{background:rgba(255,181,71,.13);color:var(--amber);border-color:rgba(255,181,71,.5)}
.iia-film .sh-row.stop .sh-act{color:var(--amber)}
.iia-film .sh-row .hl{position:absolute;inset:2px -10px;border-radius:10px;background:rgba(125,243,255,.09);pointer-events:none}
.iia-film .sh-row.stop .hl{background:rgba(255,181,71,.1)}
.iia-film .sh-foot{display:flex;gap:9px;align-items:flex-start;padding-top:max(9px,calc(var(--u)*1.4));border-top:1px solid rgba(140,220,255,.12);font-size:max(12px,calc(var(--u)*1.6));color:var(--mist)}
.iia-film .sh-foot .ic{color:var(--amber);margin-top:1px}
/* 24 Oct 2026: each part found wears a small cut-out of itself (cropped from the photo that was read) as its label;
   it flies out of the photo to the row (.fly), and again sits in its kit bag */
.iia-film .sh-row.has-cut{align-items:center}
.iia-film .sh-cut{position:relative;width:max(54px,calc(var(--u)*8.4));height:max(54px,calc(var(--u)*8.4));border-radius:10px;overflow:hidden;
  border:1.5px solid rgba(125,243,255,.55);box-shadow:0 8px 22px -10px rgba(0,0,0,.9)}
.iia-film .sh-cut-img,.iia-film .fly-img{display:block;width:100%;height:100%;object-fit:cover}
.iia-film .sh-cut .sh-n{position:absolute;left:4px;top:4px;width:auto;height:auto;padding:2px 5px;border-radius:5px;font-size:max(10.5px,calc(var(--u)*1.35));
  background:var(--cyan);color:#021018;border:0}
.iia-film .fly{transform-origin:0 0;border-radius:10px;overflow:hidden;
  box-shadow:0 0 0 calc(var(--lift,0) * 2px) rgba(125,243,255,.9),0 calc(var(--lift,0) * 18px) calc(var(--lift,0) * 40px) -10px rgba(0,0,0,.85)}

/* ---------- the next question (not launched: Coming soon) ---------- */
.iia-film .ask{left:auto;right:var(--gut);top:50%;width:max(300px,calc(var(--u)*52));transform-origin:100% 50%;padding:max(16px,calc(var(--u)*2.6));border-radius:18px;
  background:rgba(5,12,19,.93);border:1px solid rgba(125,243,255,.3);box-shadow:0 30px 90px -30px rgba(0,0,0,.95),0 0 60px -30px rgba(34,211,238,.55)}
.iia-film .ask-k{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:max(10.5px,calc(var(--u)*1.4))}
.iia-film .ask-k .mono{color:var(--cyan2)}
.iia-film .soon{display:inline-flex;align-items:center;gap:7px;font-family:var(--fm);font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--amber);font-size:max(10px,calc(var(--u)*1.3))}
.iia-film .soon::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber)}
.iia-film .ask-q{margin-top:max(10px,calc(var(--u)*1.7));font-family:var(--fh);font-weight:600;letter-spacing:-.02em;line-height:1.08;font-size:max(22px,calc(var(--u)*3.9));color:#fff}
.iia-film .ask-q span{display:block}
.iia-film .ask-q .l2{color:var(--cyan2);margin-top:.18em}
.iia-film .ask-b{margin-top:max(14px,calc(var(--u)*2.2));display:flex;flex-wrap:wrap;gap:8px}
.iia-film .ab{position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:99px;font-family:var(--fh);font-weight:600;font-size:max(13px,calc(var(--u)*1.8));
  color:#fff;background:rgba(255,255,255,.05);border:1px solid rgba(140,220,255,.28);overflow:hidden}
.iia-film .ab.go{background:var(--cyan);color:#021018;border-color:var(--cyan);box-shadow:0 0 24px -4px rgba(34,211,238,.7)}
.iia-film .ab svg{width:1.15em;height:1.15em}
.iia-film .ab .rip{position:absolute;left:50%;top:50%;width:160px;height:160px;margin:-80px 0 0 -80px;border-radius:50%;background:rgba(255,255,255,.55)}

/* ---------- kit ---------- */
.iia-film .kit{left:var(--gut);top:max(64px,calc(var(--u)*15));width:max(310px,calc(var(--u)*50));transform-origin:0 50%;padding:max(16px,calc(var(--u)*2.4));border-radius:16px;
  background:linear-gradient(180deg,rgba(9,19,29,.95),rgba(5,11,18,.95));border:1px solid rgba(140,220,255,.16);box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
.iia-film .kit-k{font-size:max(11px,calc(var(--u)*1.45));color:var(--cyan2)}
.iia-film .kit-n{margin-top:6px;font-family:var(--fh);font-weight:700;letter-spacing:-.03em;font-size:max(40px,calc(var(--u)*8));line-height:1;color:#fff}
.iia-film .kit-bags{margin-top:max(12px,calc(var(--u)*2));display:flex;gap:10px;flex-wrap:wrap}
.iia-film .bag{display:grid;gap:4px;justify-items:center;padding:12px 12px 10px;border-radius:12px;border:1px dashed rgba(125,243,255,.45);background:rgba(34,211,238,.06);flex:1 1 0;min-width:0}
.iia-film .bag b{font-family:var(--fm);font-weight:500;font-size:max(12px,calc(var(--u)*1.6));color:var(--cyan2)}
.iia-film .bag span{font-size:max(11px,calc(var(--u)*1.45));color:#c9dbe6;white-space:nowrap}
.iia-film .bag.none{border-color:rgba(255,181,71,.45);background:rgba(255,181,71,.06)}
.iia-film .bag.none b{color:var(--amber);text-decoration:line-through}
.iia-film .bag svg{width:26px;height:30px;color:var(--cyan2)}
.iia-film .bag.none svg{color:var(--amber);opacity:.6}
.iia-film .kit .soon{margin-top:max(12px,calc(var(--u)*1.9))}
.iia-film .kit-sub{margin-top:8px;font-family:var(--fh);font-weight:600;font-size:max(15px,calc(var(--u)*2.5));line-height:1.2;color:#dbe9f1;letter-spacing:-.01em}
.iia-film .bag.has-cut{padding-top:10px}
.iia-film .bag-cut{width:max(40px,calc(var(--u)*6));height:max(40px,calc(var(--u)*6));border-radius:8px;object-fit:cover;border:1.5px solid rgba(125,243,255,.5)}
.iia-film .stopw.go .big{color:#fff;text-shadow:0 0 50px rgba(34,211,238,.18)}

/* ---------- booking: the site's own box (one email, "Book my kit"), filling itself in (24 Oct 2026) ---------- */
.iia-film .book{left:var(--gut);top:max(64px,calc(var(--u)*15));width:max(310px,calc(var(--u)*50));transform-origin:0 50%;padding:max(16px,calc(var(--u)*2.4));border-radius:16px;
  background:linear-gradient(180deg,rgba(9,19,29,.95),rgba(5,11,18,.95));border:1px solid rgba(140,220,255,.16);box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
.iia-film .bk-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.iia-film .bk-k,.iia-film .bk-k2{font-size:max(11px,calc(var(--u)*1.45));color:var(--cyan2)}
.iia-film .bk-body{display:grid;margin-top:max(8px,calc(var(--u)*1.2))}
.iia-film .bk-form,.iia-film .bk-done{grid-area:1/1}
.iia-film .bk-h,.iia-film .bk-ok{font-family:var(--fh);font-weight:700;letter-spacing:-.02em;font-size:max(20px,calc(var(--u)*3.6));line-height:1.1;color:#fff}
.iia-film .bk-fld{margin-top:max(12px,calc(var(--u)*1.8))}
.iia-film .bk-lab{display:block;font-size:max(12px,calc(var(--u)*1.6));color:var(--mist);margin-bottom:6px}
.iia-film .bk-in{display:flex;align-items:center;height:max(44px,calc(var(--u)*6));padding:0 14px;border-radius:10px;background:#fff;color:#0b1622;font-family:var(--fb);font-size:max(15px,calc(var(--u)*2.2));white-space:nowrap;overflow:hidden}
.iia-film .bk-caret{display:inline-block;width:2px;height:1.2em;margin-left:1px;background:#0b1622}
.iia-film .bk-btn{position:relative;overflow:hidden;margin-top:max(10px,calc(var(--u)*1.5));display:flex;justify-content:center;align-items:center;height:max(46px,calc(var(--u)*6.2));border-radius:999px;
  background:var(--cyan);color:#021018;font-family:var(--fh);font-weight:600;font-size:max(15px,calc(var(--u)*2.3));box-shadow:0 0 24px -4px rgba(34,211,238,.7)}
.iia-film .bk-rip{position:absolute;left:50%;top:50%;width:220px;height:220px;margin:-110px 0 0 -110px;border-radius:50%;background:rgba(255,255,255,.55)}
.iia-film .bk-say{margin-top:max(10px,calc(var(--u)*1.5));display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:max(12px,calc(var(--u)*1.6));color:var(--mist)}
.iia-film .bk-done{display:flex;gap:14px;align-items:center;align-self:center}
.iia-film .bk-tick{flex:0 0 auto;width:max(48px,calc(var(--u)*7));height:max(48px,calc(var(--u)*7));border-radius:50%;display:grid;place-items:center;background:var(--cyan);color:#021018;box-shadow:0 0 30px -4px rgba(34,211,238,.8)}
.iia-film .bk-tick svg{width:55%;height:55%}
.iia-film .bk-ok{margin-top:4px}

/* ---------- sampling steps ---------- */
.iia-film .steps{left:var(--gut);top:50%;width:min(52cqw,15.5em);font-size:calc(var(--u)*6.4)}
.iia-film .stp-c{font-family:var(--fm);font-weight:500;font-size:max(11px,calc(var(--u)*1.5));letter-spacing:.16em;color:var(--cyan2);margin-bottom:.9em;position:relative;height:1.2em}
.iia-film .stp-c span{position:absolute;left:0;top:0}
.iia-film .stp-t{position:relative;height:3.25em}
.iia-film .stp-t p{position:absolute;left:0;top:0;width:100%;font-family:var(--fh);font-weight:600;letter-spacing:-.025em;line-height:1.04;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.55)}
.iia-film .stp-t p.stop{color:var(--amber)}
.iia-film .stp-src{left:var(--gut);top:auto;bottom:max(18px,calc(var(--u)*5));font-size:max(10.5px,calc(var(--u)*1.4));color:var(--mist)}
.iia-film .stp-bar{left:var(--gut);top:auto;bottom:max(40px,calc(var(--u)*9));width:min(30cqw,320px);height:2px;background:rgba(140,220,255,.18);overflow:hidden}
.iia-film .stp-bar i{position:absolute;inset:0;background:var(--cyan2);transform-origin:0 0}

/* ---------- photo, lab, certificate ---------- */
.iia-film .photo{left:50%;top:46%;width:max(180px,calc(var(--u)*44));margin-left:calc(max(180px,calc(var(--u)*44)) / -2)}
.iia-film .ph-card{position:relative;width:100%;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:#111;border:3px solid #fff;box-shadow:0 40px 90px -30px rgba(0,0,0,.95)}
.iia-film .ph-card img{width:100%;height:100%;display:block;object-fit:cover}
.iia-film .ph-card i{position:absolute;border:2px solid var(--cyan2);border-radius:3px;background:rgba(34,211,238,.1)}
.iia-film .ph-card i b{position:absolute;left:4px;top:4px;font:500 11px/1 var(--fm);padding:3px 5px;border-radius:4px;background:var(--cyan);color:#021018;font-style:normal}
.iia-film .ph-lines{left:50%;top:auto;bottom:max(30px,calc(var(--u)*8));width:92cqw;margin-left:-46cqw;text-align:center}
.iia-film .ph-line{font-family:var(--fh);font-weight:600;letter-spacing:-.02em;font-size:calc(var(--u)*5);color:#fff}
.iia-film .ph-lab{margin-top:.8em;display:inline-flex;gap:10px;align-items:center;font-size:max(12.5px,calc(var(--u)*2.2));color:var(--cyan2)}
.iia-film .cert{left:50%;top:50%;width:min(86cqw,max(300px,calc(var(--u)*62)));margin-left:calc(min(86cqw,max(300px,calc(var(--u)*62))) / -2);perspective:1400px}
.iia-film .ct-paper{container-type:inline-size}
.iia-film .ct-paper{position:relative;padding:max(16px,calc(var(--u)*3.6));border-radius:10px;background:var(--paper);color:#0b1622;box-shadow:0 50px 110px -30px rgba(0,0,0,.95);transform-origin:50% 100%}
.iia-film .ct-k{font-family:var(--fm);font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-size:max(10px,2.1cqi);color:var(--deep)}
.iia-film .ct-top{display:flex;gap:5cqi;align-items:flex-start;justify-content:space-between}
.iia-film .ct-h{margin-top:4px;font-family:var(--fh);font-weight:700;letter-spacing:-.02em;font-size:max(19px,6.4cqi);line-height:1.05}
.iia-film .ct-photo{flex:0 0 24%;width:24%;aspect-ratio:3/4;object-fit:cover;border-radius:6px;border:3px solid #fff;box-shadow:0 8px 20px -6px rgba(0,0,0,.45);transform:rotate(3deg)}
.iia-film .ct-rows{margin-top:max(14px,calc(var(--u)*2.6));display:grid;gap:0;border-top:1px solid #d6e2ea}
.iia-film .ct-rows div{display:grid;grid-template-columns:40% 1fr;gap:10px;padding:max(6px,calc(var(--u)*1.1)) 0;border-bottom:1px solid #d6e2ea;font-size:max(12px,3.3cqi)}
.iia-film .ct-rows dt{color:#5b7183}
.iia-film .ct-rows dd{font-weight:600}
.iia-film .ct-lab{margin-top:max(10px,3cqi);font-size:max(11.5px,2.9cqi);color:#0b1622}
.iia-film .ct-cov{margin-top:3px;font-size:max(11.5px,2.9cqi);color:#5b7183}
.iia-film .ct-lab,.iia-film .ct-cov{padding-right:38%}   /* the EXAMPLE stamp sits bottom right: the lines stay clear of it */
.iia-film .ct-stamp{position:absolute;right:6%;bottom:5%;padding:.2em .55em;border:3px solid var(--amberdeep);border-radius:8px;color:var(--amberdeep);
  font-family:var(--fm);font-weight:500;text-transform:uppercase;letter-spacing:.18em;font-size:max(18px,6cqi);transform:rotate(-12deg);opacity:.85;background:rgba(255,255,255,.35)}
.iia-film .ct-cap{left:50%;top:auto;bottom:max(14px,calc(var(--u)*4.2));width:92cqw;margin-left:-46cqw;text-align:center;font-family:var(--fh);font-weight:600;letter-spacing:-.015em;font-size:min(3.6cqh,2.4cqw);color:#fff}

/* ---------- the end frame ---------- */
.iia-film .end{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:0 var(--gut);pointer-events:none}
.iia-film .end-in{display:grid;justify-items:center;gap:max(14px,calc(var(--u)*2.6))}
.iia-film .end-mark{width:max(26px,calc(var(--u)*4.4));height:auto}
.iia-film .end-h{font-family:var(--fh);font-weight:700;letter-spacing:-.04em;line-height:.92;font-size:calc(var(--u)*13);color:#fff}
.iia-film .end-h .w{display:block;width:max-content;margin:0 auto;overflow:hidden;padding:0 .04em .08em}
.iia-film .end-h .w span{display:block}
.iia-film .cta{display:inline-flex;align-items:center;gap:12px;font-family:var(--fh);font-weight:600;font-size:max(18px,calc(var(--u)*3.2));border-radius:999px;padding:.85em 1.45em;
  background:var(--cyan);color:#021018;text-decoration:none;white-space:nowrap;box-shadow:0 0 0 0 rgba(34,211,238,.6),0 18px 50px -14px rgba(34,211,238,.75);pointer-events:auto;transition:transform .2s,box-shadow .3s}
.iia-film .cta:hover{transform:translateY(-2px);box-shadow:0 0 0 6px rgba(34,211,238,.18),0 18px 50px -14px rgba(34,211,238,.9)}
.iia-film .cta:focus-visible{outline:2px solid var(--cyan2);outline-offset:4px}
.iia-film .cta svg{width:1.2em;height:1.2em}
.iia-film .end-line{font-family:var(--fh);font-weight:500;font-size:max(16px,calc(var(--u)*2.7));color:#dbe9f1;letter-spacing:-.01em}
.iia-film .end-honest{display:flex;gap:9px;align-items:center;font-size:max(12.5px,calc(var(--u)*1.75));color:var(--mist)}
.iia-film .end-honest .ic{color:var(--amber)}

/* ---------- controls ---------- */
.iia-film .ctl{position:absolute;right:var(--gut);bottom:max(14px,calc(var(--u)*3.6));z-index:30;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(3,8,13,.55);border:1px solid rgba(233,243,248,.28);color:#fff;padding:0;transition:background .2s,border-color .2s,opacity .3s}
.iia-film .ctl:hover{background:rgba(3,8,13,.8);border-color:rgba(125,243,255,.6)}
.iia-film .ctl:focus-visible{outline:2px solid var(--cyan2);outline-offset:3px}
.iia-film .ctl svg{width:16px;height:16px}
.iia-film .ctl .i-play{display:none}
.iia-film.is-paused .ctl .i-play{display:block}
.iia-film.is-paused .ctl .i-pause{display:none}
.iia-film .prog{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:30;background:rgba(233,243,248,.1);pointer-events:none}
.iia-film .prog i{position:absolute;inset:0;background:linear-gradient(90deg,var(--cyan),var(--cyan2));transform-origin:0 0;transform:scaleX(0);opacity:.75}
.iia-film .bigplay{position:absolute;left:50%;top:50%;z-index:31;transform:translate(-50%,-50%);display:none;align-items:center;gap:12px;padding:16px 26px 16px 20px;border-radius:999px;cursor:pointer;
  font:600 18px var(--fh);color:#021018;background:var(--cyan);border:0;box-shadow:0 20px 60px -16px rgba(34,211,238,.8)}
.iia-film .bigplay svg{width:22px;height:22px}
.iia-film .bigplay:focus-visible{outline:2px solid #fff;outline-offset:4px}
.iia-film.is-still .bigplay{display:inline-flex}
.iia-film.is-still .ctl{display:none}
.iia-film .skip{position:absolute;left:var(--gut);top:12px;z-index:32;padding:9px 14px;border-radius:10px;background:var(--cyan);color:#021018;font:600 14px var(--fb);text-decoration:none;transform:translateY(-200%)}
.iia-film .skip:focus{transform:none}
.iia-film .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- phone / portrait boxes: the picture sits in the top 3:4, the instrument panel below ---------- */
.iia-film .panelbg{position:absolute;left:0;right:0;top:0;height:100%;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,7,12,0) 0,rgba(4,7,12,.75) 70px,var(--ink) 120px)}
@container film (aspect-ratio < 0.85){
  .iia-film{--gut:16px}
  .iia-film .ladder{display:none}
  .iia-film .hud-tl{top:14px;gap:4px}
  .iia-film .hud-tr{top:14px}
  .iia-film .hud-scene{font-size:18px}
  .iia-film .title{top:auto;bottom:24cqh;font-size:18.5cqw}
  .iia-film .scrimL{background:linear-gradient(0deg,rgba(3,6,10,.88) 0%,rgba(3,6,10,.5) 36%,transparent 62%)}
  .iia-film .sheet,.iia-film .kit,.iia-film .book{left:12px;width:calc(100cqw - 24px);top:auto;bottom:max(10px,1.6cqh);padding:12px 14px 10px;border-radius:14px}
  .iia-film .sh-row{padding:8px 0;gap:10px}
  .iia-film .sh-where{font-size:15.5px}
  .iia-film .sh-mat{font-size:12.5px}
  .iia-film .sh-meta{margin-top:4px;font-size:12px}
  .iia-film .sh-n{font-size:12px}
  .iia-film .ask{right:12px;left:auto;width:calc(100cqw - 24px);top:auto;bottom:max(12px,2cqh);padding:16px 16px 16px}
  .iia-film .ask-q{font-size:min(7.2cqw,30px)}
  .iia-film .stopw{top:auto;bottom:7cqh;width:calc(100cqw - 32px)}
  .iia-film .stopw .big{font-size:21cqw}
  .iia-film .stopw .sm{font-size:6.6cqw}
  .iia-film .steps{top:auto;bottom:15cqh;width:calc(100cqw - 32px);font-size:min(8.2cqw,36px)}
  .iia-film .stp-src{bottom:max(18px,2.6cqh)}
  .iia-film .stp-bar{bottom:max(42px,5.4cqh);width:44cqw}
  .iia-film .photo{width:56cqw;margin-left:-28cqw}
  .iia-film .ph-lines{bottom:9cqh}
  .iia-film .ph-line{font-size:6.6cqw}
  .iia-film .ph-lab{font-size:13.5px}
  .iia-film .cert{width:88cqw;margin-left:-44cqw}
  .iia-film .ct-cap{font-size:5.4cqw;bottom:3cqh}
  .iia-film .end-h{font-size:17.5cqw}
  .iia-film .ctl{bottom:auto;top:auto;bottom:14px;width:38px;height:38px}
  .iia-film .kit,.iia-film .book{bottom:max(12px,2cqh)}
  .iia-film .timer .tv{font-size:44px}
  .iia-film .timer{padding:12px 18px 13px 16px}
  .iia-film .cta{font-size:19px}
  .iia-film .tag span{font-size:13px}
}
@container film (aspect-ratio < 0.85) and (max-height: 700px){
  .iia-film .sh-mat{display:none}
}
@media (prefers-reduced-motion: reduce){
  .iia-film .grain{animation:none}
  .iia-film .cta{transition:none}
}
.iia-film .stage{pointer-events:none}

/* ---------- 24 Oct 2026 (v3): the steps as one block, a highlight sweeping down; the certificate as a lab document ---------- */
.iia-film .stlist{left:var(--gut);top:50%;width:max(340px,calc(var(--u)*56));padding:max(14px,calc(var(--u)*2.2)) max(16px,calc(var(--u)*2.4));border-radius:16px;
  background:linear-gradient(180deg,rgba(9,19,29,.9),rgba(5,11,18,.92));border:1px solid rgba(140,220,255,.18);box-shadow:0 30px 80px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05)}
.iia-film .stl-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.iia-film .stl-k{font-size:max(11px,calc(var(--u)*1.45));color:var(--cyan2)}
.iia-film .stl-rows{list-style:none;margin:max(8px,calc(var(--u)*1.2)) 0 0;padding:0;display:grid}
.iia-film .stl-rows li{position:relative;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:max(5px,calc(var(--u)*.85)) 6px;border-top:1px solid rgba(140,220,255,.1)}
.iia-film .stl-rows li b{position:relative;z-index:1;display:grid;place-items:center;width:2.5em;height:1.9em;border-radius:6px;font-family:var(--fm);font-weight:500;font-size:max(11px,calc(var(--u)*1.5));
  color:var(--cyan2);border:1px solid rgba(125,243,255,.35);background:rgba(34,211,238,.08)}
.iia-film .stl-rows li.lit b{background:var(--cyan);color:#021018;border-color:var(--cyan)}
.iia-film .stl-rows li span{position:relative;z-index:1;font-family:var(--fh);font-weight:600;font-size:max(15px,calc(var(--u)*2.45));line-height:1.15;letter-spacing:-.01em;color:#fff}
.iia-film .stl-rows li .hl{position:absolute;inset:1px -4px;border-radius:9px;background:linear-gradient(90deg,rgba(34,211,238,.3),rgba(34,211,238,.05));box-shadow:inset 0 0 0 1px rgba(125,243,255,.45)}
.iia-film .stl-src{margin-top:max(8px,calc(var(--u)*1.2));font-size:max(10.5px,calc(var(--u)*1.35));color:var(--mist)}

.iia-film .cert-doc{top:46%;width:min(92cqw,max(320px,calc(var(--u)*72)));margin-left:calc(min(92cqw,max(320px,calc(var(--u)*72))) / -2)}
.iia-film .ct-doc{padding:0;border-radius:4px;background:#fbfcfd;color:#0b1622;font-family:var(--fb);font-size:max(10px,2.15cqi);line-height:1.35;overflow:hidden;
  box-shadow:0 50px 110px -30px rgba(0,0,0,.95),0 0 0 1px #cfdbe3;outline:1px solid #b9c8d2;outline-offset:-7px}
.iia-film .ct-band{display:flex;align-items:center;gap:2.4cqi;padding:2.6cqi 4cqi;background:#0b1622;color:#e9f3f8}
.iia-film .ct-logo{width:max(14px,3.4cqi);height:auto;flex:none}
.iia-film .ct-org{display:grid;gap:.15em;flex:1;min-width:0}
.iia-film .ct-org b{font-family:var(--fh);font-weight:600;font-size:max(11px,2.6cqi);letter-spacing:-.005em}
.iia-film .ct-org span{font-family:var(--fm);font-size:max(8.5px,1.7cqi);letter-spacing:.14em;text-transform:uppercase;color:#7df3ff}
.iia-film .ct-no{display:grid;justify-items:end;gap:.15em;font-family:var(--fm);font-size:max(8.5px,1.7cqi);color:#8fa6b5;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap}
.iia-film .ct-no b{font-weight:500;color:#fff;font-size:max(10px,2.1cqi);letter-spacing:.06em}
.iia-film .ct-doc .ct-h{margin:0;padding:3.2cqi 4cqi 0;font-family:var(--fh);font-weight:700;letter-spacing:-.015em;font-size:max(14px,3.6cqi);line-height:1.1;color:#0b1622}
.iia-film .ct-doc .ct-top{display:flex;gap:3cqi;align-items:flex-start;justify-content:space-between;padding:2cqi 4cqi 0}
.iia-film .ct-meta{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:0 3cqi;margin:0}
.iia-film .ct-meta div{display:grid;gap:.1em;padding:.9cqi 0;border-bottom:1px solid #dde6ec}
.iia-film .ct-meta dt{font-size:max(8.5px,1.6cqi);text-transform:uppercase;letter-spacing:.08em;color:#5b7183}
.iia-film .ct-meta dd{margin:0;font-family:var(--fm);font-size:max(10px,2cqi);color:#0b1622}
.iia-film .ct-ph{margin:0;flex:0 0 14%;display:grid;gap:.4em;justify-items:center}
.iia-film .ct-doc .ct-photo{flex:none;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:3px;border:3px solid #fff;box-shadow:0 6px 16px -6px rgba(0,0,0,.45);transform:rotate(2.5deg)}
.iia-film .ct-ph figcaption{font-size:max(8px,1.45cqi);color:#5b7183;text-transform:uppercase;letter-spacing:.08em;text-align:center}
.iia-film .ct-tbl{width:calc(100% - 8cqi);margin:2.6cqi 4cqi 0;border-collapse:collapse;font-size:max(10px,2.05cqi)}
.iia-film .ct-tbl th{text-align:left;font-weight:600;font-size:max(8px,1.55cqi);text-transform:uppercase;letter-spacing:.07em;color:#fff;background:#24445a;padding:1.1cqi 1.4cqi}
.iia-film .ct-tbl td{padding:1.3cqi 1.4cqi;border-bottom:1px solid #cfdbe3;vertical-align:top}
.iia-film .ct-tbl td:first-child{font-family:var(--fm)}
.iia-film .ct-tbl td.res{font-weight:700}
.iia-film .ct-method{margin:1.8cqi 4cqi 0;font-size:max(9.5px,1.85cqi);color:#24445a}
.iia-film .ct-method b{font-weight:600;color:#0b1622;margin-right:.3em}
.iia-film .ct-sign{display:grid;grid-template-columns:1fr 1fr;gap:6cqi;margin:2.6cqi 4cqi 0}
.iia-film .ct-sign div{display:grid;gap:.45em}
.iia-film .ct-sign i{display:block;height:0;margin-top:3.4cqi;border-bottom:1px solid #0b1622}
.iia-film .ct-sign span{font-size:max(8px,1.55cqi);text-transform:uppercase;letter-spacing:.08em;color:#5b7183}
.iia-film .ct-foot{display:flex;justify-content:space-between;gap:3cqi;margin:2.6cqi 4cqi 0;padding-top:1.3cqi;border-top:1px solid #cfdbe3;font-size:max(9px,1.65cqi);color:#5b7183}
.iia-film .ct-doc .ct-lab{margin:.8cqi 4cqi 3.6cqi;padding-right:0;font-size:max(9px,1.65cqi);color:#5b7183}
.iia-film .ct-doc .ct-stamp{right:5%;bottom:11%;font-size:max(18px,6.2cqi)}   /* over the blank 'Authorised by' line, clear of the result */
@container film (aspect-ratio < 0.85){
  .iia-film .stlist{left:12px;width:calc(100cqw - 24px);top:auto;bottom:max(12px,2cqh);padding:12px 14px 10px;border-radius:14px}
  .iia-film .stl-rows li{padding:5px 4px;gap:10px}
  .iia-film .stl-rows li span{font-size:min(4cqw,16px)}
  .iia-film .stl-rows li b{font-size:11px}
  .iia-film .cert-doc{top:48%;width:92cqw;margin-left:-46cqw}
  .iia-film .ct-cap{bottom:66px}   /* above the play/pause button */
}

/* ---------- 25 Oct 2026, round 2 (PHONE ONLY: the portrait film; the laptop film is unchanged). Barrie on his phone:
   "where it says three samples and all that type of text, the background on that has to be transparent ... you're
   basically blocking off the whole view ... what's going on behind it". The panels (what to test, the kit, the booking,
   the sampling steps) are the site's blue glass: a light tint, a dark under-layer you can see through, the room blurred
   behind, the 1.5px light edge and the lit top line (the same values as the UK draft's 24 Oct phone pass, which Barrie
   asked for then: "get them more glassified and transparent"). The fades under them are lighter, the sheet is compact
   (so the floor stays in view while it is checked), and the small grey words go a shade lighter with a soft shadow so
   they stay readable. ---------- */
@container film (aspect-ratio < 0.85){
  .iia-film .sheet,.iia-film .kit,.iia-film .book,.iia-film .stlist,.iia-film .ask{--mist:#cfdee6;
    background:linear-gradient(180deg,rgba(143,210,224,.18),rgba(61,143,166,.11) 55%,rgba(31,90,107,.11)),rgba(3,10,16,.5);
    border:1.5px solid rgba(140,205,218,.72);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 18px rgba(1,8,20,.28),0 30px 70px -36px rgba(1,8,20,.7);
    -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
    text-shadow:0 1px 2px rgba(2,8,14,.7)}
  .iia-film .sheet .sh-row,.iia-film .sheet .sh-foot,.iia-film .stl-rows li{border-top-color:rgba(160,220,235,.2)}
  .iia-film .sheet .sh-mat{color:#dbe8ef}
  .iia-film .bag{background:rgba(34,211,238,.1)}
  .iia-film .bk-in,.iia-film .bk-btn,.iia-film .sh-n,.iia-film .bag b,.iia-film .stl-rows li b{text-shadow:none}
  /* the picture on top, the panels' own container under it (film.js gives the container's height as --ph): the
     container starts just under the picture, so the picture is never darkened or covered by a panel */
  .iia-film .panelbg{background:linear-gradient(180deg,rgba(4,7,12,0) 0,var(--ink) 20px)}
  .iia-film .scrimL{background:linear-gradient(0deg,rgba(3,6,10,.62) 0%,rgba(3,6,10,.28) 36%,transparent 62%)}
  .iia-film .sheet,.iia-film .kit,.iia-film .book,.iia-film .stlist{max-height:calc(var(--ph,300px) - 16px);overflow:hidden}
  /* compact rows; "Built before 1980" is already at the top right of the picture */
  .iia-film .sheet{bottom:max(8px,1.2cqh);padding:9px 12px 7px}
  .iia-film .sheet .sh-sub{display:none}
  .iia-film .sheet .sh-rows{margin-top:6px}
  .iia-film .sheet .sh-row{padding:5px 0;gap:10px}
  .iia-film .sheet .sh-cut{width:40px;height:40px;border-radius:8px}
  .iia-film .sheet .sh-cut .sh-n{left:3px;top:3px;padding:1px 4px;font-size:10px}
  .iia-film .sheet .sh-where{font-size:15px}
  .iia-film .sheet .sh-meta{margin-top:2px}
  .iia-film .sheet .sh-foot{padding-top:6px}
  .iia-film .sheet .pill-ex{padding:3px 8px}
  /* the kit: one line for the number, smaller bags */
  .iia-film .kit{padding:10px 12px 9px}
  .iia-film .kit-n{font-size:34px}
  .iia-film .kit-sub{font-size:14px;margin-top:4px}
  .iia-film .kit-bags{margin-top:8px;gap:8px}
  .iia-film .bag{padding:7px 6px 6px}
  .iia-film .bag-cut{width:34px;height:34px}
  .iia-film .kit .soon{margin-top:8px}
  .iia-film .book{padding:11px 13px 10px}
  .iia-film .bk-h{font-size:19px}
  .iia-film .bk-fld{margin-top:8px}
  .iia-film .bk-in{height:40px}
  .iia-film .stlist{padding:9px 12px 8px}
  .iia-film .stl-rows li{padding:3px 4px}
}
/* where a phone cannot blur what is behind a box: a near-solid under-layer instead */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  @container film (aspect-ratio < 0.85){
    .iia-film .sheet,.iia-film .kit,.iia-film .book,.iia-film .stlist,.iia-film .ask{background:linear-gradient(180deg,rgba(143,210,224,.2),rgba(61,143,166,.12) 55%,rgba(31,90,107,.12)),rgba(3,10,16,.86)}
  }
}
/* the shorter phone films (under about 620px tall): tighter still */
@container film (aspect-ratio < 0.85) and (max-height: 620px){
  .iia-film .sheet{padding:7px 11px 6px}
  .iia-film .sheet .pill-ex{padding:2px 7px}
  .iia-film .sheet .sh-rows{margin-top:4px}
  .iia-film .sheet .sh-row{padding:3px 0;gap:9px}
  .iia-film .sheet .sh-cut{width:34px;height:34px}
  .iia-film .sheet .sh-where{font-size:14px}
  .iia-film .sheet .sh-meta{margin-top:1px}
  .iia-film .sheet .sh-foot{padding-top:4px}
  .iia-film .kit-n{font-size:28px}
  .iia-film .bag span{font-size:10.5px}
  .iia-film .stl-rows li span{font-size:min(3.7cqw,14.5px)}
  .iia-film .stl-rows li{padding:2px 4px}
}
/* round 2 (phone): the nine steps fit their container too, in tighter rows (so "Only the lab can say for
   sure." is always in view). The example certificate keeps its own full frame over the darkened room (see the report) */
@container film (aspect-ratio < 0.85){
  .iia-film .stlist{padding:8px 12px 7px}
  .iia-film .stl-rows{margin-top:4px}
  .iia-film .stl-rows li{padding:1px 4px;gap:9px}
  .iia-film .stl-rows li span{font-size:min(3.5cqw,13.5px);line-height:1.12}
  .iia-film .stl-rows li b{height:1.55em;font-size:10.5px}
  .iia-film .stl-src{margin-top:4px}
}
/* round 2 (phone): the step highlight a little deeper, so the white words on it keep WCAG AA (measured: was 3.7:1) */
@container film (aspect-ratio < 0.85){
  .iia-film .stl-rows li .hl{background:linear-gradient(90deg,rgba(6,96,114,.55),rgba(6,80,98,.25));box-shadow:inset 0 0 0 1px rgba(125,243,255,.2)}
}

/* ---------- 25 Oct 2026, phone pass 2 (PHONE ONLY, one room: film.js puts .p-dock on the film only in a portrait box,
   so the laptop never gets these). Barrie on his phone: "the final frame ... reduce the size of the image so that then
   everything comes into that container at the bottom, that looks better. Because ... it was overlaying it, we don't
   need that." The picture stays in the top part from the first frame to the last; the title, "Your photo goes with your
   samples", the example certificate's line and the end frame now sit in the container under it, like the panels. ---------- */
/* the title: in the container, left, while the camera frames the photo above it */
.iia-film.p-dock .title{top:calc(100% - var(--ph));bottom:auto;height:var(--ph);display:flex;flex-direction:column;justify-content:center;padding-bottom:18px;font-size:min(16cqw,66px)}
/* your photo goes with your samples: the photo card on the left, its words beside it */
.iia-film.p-dock .photo{left:16px;margin-left:0;top:calc(100% - var(--ph) / 2 - 6px);width:32cqw}
.iia-film.p-dock .ph-card{border-width:2px;border-radius:10px;box-shadow:0 18px 40px -18px rgba(0,0,0,.9)}
.iia-film.p-dock .ph-card i b{font-size:9.5px;padding:2px 4px;left:3px;top:3px}
.iia-film.p-dock .ph-lines{left:calc(32cqw + 36px);width:calc(68cqw - 52px);margin-left:0;top:calc(100% - var(--ph));bottom:auto;height:var(--ph);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;padding-bottom:22px}
.iia-film.p-dock .ph-line{font-size:min(6cqw,23px);line-height:1.12}
.iia-film.p-dock .ph-lab{margin-top:12px;font-size:11px;line-height:1.45;letter-spacing:.1em}
/* the example certificate: a small document on the left (film.js scales it to fit), its line beside it */
.iia-film.p-dock .cert{left:0;top:0;margin-left:0;width:92cqw;transform-origin:0 0}
.iia-film.p-dock .ct-cap{left:calc(52cqw + 34px);width:calc(48cqw - 50px);margin-left:0;top:calc(100% - var(--ph));bottom:auto;height:var(--ph);
  display:flex;align-items:center;text-align:left;padding-bottom:22px;font-size:min(5.8cqw,22px);line-height:1.15}
/* the end frame: in the container, one line of title, the button, its line, the honest line */
.iia-film.p-dock .end{inset:auto 0 0 0;height:var(--ph);padding:4px 16px 16px}
.iia-film.p-dock .end-in{gap:10px}
.iia-film.p-dock .end-mark{width:20px}
.iia-film.p-dock .end-h{font-size:min(10.5cqw,42px)}
.iia-film.p-dock .end-h .w{display:inline-block;margin:0 .1em}
.iia-film.p-dock .cta{font-size:18px}
.iia-film.p-dock .end-line{font-size:15.5px}
/* the still film's "Play the film": on the picture, not on the line between the picture and the container */
.iia-film.p-dock .bigplay{top:calc((100% - var(--ph)) / 2)}