/* Case study pages (work/<client>.html, 2026-10-14; Andre: the clients cleared their stories, so each launch can carry
   its numbers on a page of its own). The site's chrome below (header, menu panel, sticky bar, footer) is about.html's,
   verbatim, so the pages read as part of loomwest.com; everything after "the case study" is new and used only here.
   Corners keep Rav's rule: 8 px on cards, frames and pills (pill.css), 6 px on pictures. */
:root{--btn:#b25f2a; --btn-shadow:#8e4c22; --dim:#6b6a62; --ink:#1e222a; --paper:#f8f7f3; --cream:#f1efe8; --line:#e3dfd6; --panel:#ffffff;
  --pine:#2e5941; --pine-d:#2b3440; --terra:#bf6a33; --terra-d:#9c5426; --ease:cubic-bezier(.33,.02,.2,1);}
*{box-sizing:border-box; margin:0; padding:0;}
a{color:var(--terra-d);}
html{scroll-behavior:smooth;} html,body{overflow-x:clip;}
body{font-family:'IBM Plex Sans',system-ui,sans-serif; color:var(--ink); background:var(--paper); line-height:1.65; font-size:16.5px;}
h1,h2,h3{font-family:'Space Grotesk','Segoe UI',system-ui,sans-serif; letter-spacing:-.3px;}
img{max-width:100%; height:auto; display:block;}
.wrap{max-width:1100px; margin:0 auto; padding:0 22px;}
.eyebrow{font:700 12px/1 'IBM Plex Mono',ui-monospace,monospace; letter-spacing:2.4px; text-transform:uppercase; color:var(--terra-d);}
section{padding:72px 0;}
a.skip{position:absolute; left:12px; top:-60px; z-index:90; background:var(--pine-d); color:#fff; padding:10px 14px; text-decoration:none; font:600 .95rem 'Space Grotesk',sans-serif;}
a.skip:focus{top:10px;}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}

/* ---------- the site's chrome (about.html) ---------- */
.top{position:sticky; top:0; z-index:50; background:rgba(248,247,243,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(8px);}
.top .wrap{display:flex; align-items:center; gap:14px; height:72px; max-width:none; padding:0 clamp(16px,4vw,30px);}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.1rem; letter-spacing:.3px; color:var(--ink);
  text-decoration:none; font-family:'Space Grotesk',sans-serif; margin-right:auto;}
.nav a{font:600 .92rem/1 'Space Grotesk',sans-serif; text-decoration:none; color:var(--ink); margin-left:24px;}
.nav .cta{margin-left:10px;}
.nav a:not(.cta) + .cta{margin-left:22px;}
.nav a.on, .nav a:hover{color:var(--terra-d);}
@media(max-width:1020px){ .nav a:not(.cta){display:none;} }
@media(max-width:420px){ .logo{font-size:.95rem;} }
.nav-toggle{display:block; background:none; border:none; cursor:pointer; padding:7px 8px 13px; margin-right:8px;
  line-height:0; -webkit-appearance:none; appearance:none;}
.nav-toggle svg{display:block;}
.nav-toggle .l{stroke:var(--ink); stroke-width:2; stroke-linecap:round; transition:transform .3s var(--ease), opacity .3s var(--ease); transform-origin:13px 12px;}
.nav-toggle .l2{stroke:var(--terra);}
.nav-toggle[aria-expanded="true"] .l1{transform:rotate(45deg) translateY(7px);}
.nav-toggle[aria-expanded="true"] .l2{opacity:0; transform:scaleX(.2);}
.nav-toggle[aria-expanded="true"] .l3{transform:rotate(-45deg) translateY(-7px);}
#menu-scrim{position:fixed; inset:0; background:rgba(30,36,48,.34); z-index:65; opacity:0; pointer-events:none; transition:opacity .4s var(--ease);}
#menu-scrim.open{opacity:1; pointer-events:auto;}
#menu-panel{position:fixed; top:0; left:0; bottom:0; width:min(320px,86vw); background:var(--paper); border-right:1px solid var(--line); box-shadow:18px 0 50px rgba(24,32,43,.18); z-index:70; padding:84px 28px 28px; transform:translateX(-103%); transition:transform .45s var(--ease), visibility 0s linear .45s; visibility:hidden; overflow-y:auto;}
#menu-panel.open{transform:translateX(0); visibility:visible; transition:transform .45s var(--ease), visibility 0s;}
#menu-panel a{display:block; padding:13px 2px; font-family:'Space Grotesk','Segoe UI',system-ui,sans-serif; font-weight:600; font-size:1.02rem; color:var(--pine-d); text-decoration:none; border-bottom:1px solid var(--line); opacity:0; transform:translateX(-16px); transition:opacity .4s var(--ease), transform .4s var(--ease);}
#menu-panel.open a{opacity:1; transform:none;}
.menu-sep{display:flex; align-items:center; gap:10px; margin:14px 0 6px; font:700 .68rem 'Inter','Segoe UI',system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); opacity:0; transition:opacity .4s var(--ease) .2s;}
.menu-sep::after{content:""; flex:1; height:1px; background:var(--line);}
#menu-panel.open .menu-sep{opacity:.85;}
#menu-panel a:hover{color:var(--terra-d);}
#menu-panel a.here{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px;}
#menu-panel a.here::after{white-space:nowrap; margin-left:auto; content:"you're here"; display:inline-block; vertical-align:middle; font:700 .62rem 'Inter','Segoe UI',system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--pine); border:1px solid var(--pine); border-radius:var(--lw-radius,8px); padding:4px 9px;}
#menu-panel .mh{margin-top:22px; padding-top:16px; border-top:1px solid var(--line); font-size:13.5px; color:var(--dim);}
#menu-panel .mh b{display:block; font:700 11px/1 'Inter',sans-serif; letter-spacing:2.2px; text-transform:uppercase; color:var(--terra-d); margin-bottom:8px;}
#menu-panel .mh span{display:block; padding:2px 0;}
body.menu-open{overflow:hidden;}
@media(max-width:1260px){ .nav .cta.ghost{display:none;} }
@media(max-width:1020px){
  .nav-toggle{order:1; margin-left:2px; margin-right:0; padding-left:8px; padding-right:0;}
  #menu-panel{left:auto; right:0; border-right:0; border-left:1px solid var(--line); box-shadow:-18px 0 50px rgba(24,32,43,.18); transform:translateX(103%);}
  #menu-panel.open{transform:translateX(0); visibility:visible; transition:transform .45s var(--ease), visibility 0s;} #menu-panel a{transform:translateX(16px);} #menu-panel.open a{transform:none;}
}
@media(prefers-reduced-motion:reduce){ .nav-toggle .l, #menu-panel, #menu-panel a, #menu-scrim{transition:none;} }
.cta-final{background:var(--pine-d); color:#f1efe8; text-align:center;}
.cta-final h2{font-size:clamp(26px,3.6vw,40px); max-width:24ch; margin:0 auto 14px;}
.cta-final p{color:#c9cfd6; max-width:54ch; margin:0 auto 24px;}
.cta-final .acts{display:flex; flex-wrap:wrap; gap:12px; justify-content:center;}
.cta-final a.pill.ghost{color:#f1efe8;}
footer{background:#171b22; color:#9aa3af; padding:36px 0; font-size:14px;}
footer a{color:#d4a445; text-decoration:underline; text-underline-offset:3px;}
@media (max-width:820px){ header a.cta{display:none;} }
#stickybar{display:none; position:fixed; left:0; right:0; bottom:0; z-index:60; gap:10px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:rgba(248,247,243,.97);
  border-top:1px solid var(--line); box-shadow:0 -6px 18px rgba(30,34,42,.10);}
#stickybar a{flex:1 1 0; min-height:44px; display:flex; align-items:center; justify-content:center;
  font:700 16px 'Space Grotesk','Segoe UI',system-ui,sans-serif; border-radius:8px; text-decoration:none;}
#stickybar .sb-buy{background:var(--btn); color:#fff;}
#stickybar .sb-call{color:var(--terra-d); border:2px solid var(--terra-d);}
@media (max-width:820px){ #stickybar{display:flex;} body{padding-bottom:74px;} }

/* ---------- the case study ---------- */
.crumbs{padding-top:18px; font-size:14px; color:var(--dim);} /* top only: the .wrap keeps its side gutter on phones (2026-10-17) */
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:6px;}
.crumbs li+li::before{content:"/"; margin-right:6px; color:#a3a196;}
.crumbs a{color:var(--terra-d); text-underline-offset:3px;}
.crumbs [aria-current]{color:var(--ink);}

.cs-hero{padding:44px 0 56px;}
.cs-hero h1{font-size:clamp(32px,4.6vw,54px); line-height:1.07; max-width:21ch; margin:14px 0 18px;}
.cs-hero .lede{font-size:clamp(17px,1.8vw,19.5px); color:#4b525d; max-width:60ch;}
.cs-meta{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin:30px 0 26px; border:1px solid var(--line); border-radius:8px; background:var(--panel);}
.cs-meta div{padding:14px 16px; border-left:1px solid var(--line);}
.cs-meta div:first-child{border-left:0;}
.cs-meta dt{font:700 10.5px/1.4 'IBM Plex Mono',monospace; letter-spacing:1.6px; text-transform:uppercase; color:var(--pine);}
.cs-meta dd{font:600 15px/1.4 'Space Grotesk',sans-serif; margin-top:4px; overflow-wrap:anywhere;}
@media(max-width:820px){ .cs-meta{grid-template-columns:1fr 1fr;} .cs-meta div:nth-child(3){border-left:0;} .cs-meta div:nth-child(n+3){border-top:1px solid var(--line);} }
.acts{display:flex; flex-wrap:wrap; gap:12px; align-items:center;}

/* pictures: every one opens full size (case-study.js); the frame answers hover, focus and press */
.shot{display:block; position:relative; border-radius:6px; overflow:hidden; border:1px solid var(--line); background:var(--cream);
  box-shadow:0 18px 44px rgba(30,34,42,.12); transition:transform .25s var(--ease), box-shadow .25s var(--ease); cursor:zoom-in;}
.shot img{width:100%; height:auto;}
.shot:hover{transform:translateY(-3px); box-shadow:0 24px 52px rgba(30,34,42,.18);}
.shot:active{transform:translateY(-1px);}
.shot:focus-visible{outline:3px solid var(--terra); outline-offset:4px;}
.shot .zoom{position:absolute; right:10px; bottom:10px; font:700 11px/1 'IBM Plex Mono',monospace; letter-spacing:1.2px; text-transform:uppercase;
  background:rgba(23,27,34,.82); color:#fff; padding:7px 9px; border-radius:6px;}
figure figcaption{font-size:14px; color:#5d6470; margin-top:10px; max-width:62ch;}
.cs-lead figure{margin-top:6px;}

.stats{background:var(--pine-d); color:#f1efe8; padding:56px 0;}
.stats .eyebrow{color:#d4a445;}
.stats h2{font-size:clamp(24px,3vw,32px); margin:12px 0 26px; max-width:30ch;}
.sgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;}
.stat{border:1px solid rgba(241,239,232,.18); border-radius:8px; padding:20px 18px; background:rgba(255,255,255,.03);}
.stat b{display:block; font:700 clamp(30px,3.6vw,42px)/1.05 'Space Grotesk',sans-serif; color:#fff; letter-spacing:-.5px;}
.stat span{display:block; margin-top:10px; font-size:14.5px; color:#c9cfd6; line-height:1.5;}
.stat span span{display:inline; margin:0; font-size:inherit; color:inherit; line-height:inherit;} /* a number inside a caption stays in its line (2026-10-17) */
@media(max-width:900px){ .sgrid{grid-template-columns:1fr 1fr;} }
@media(max-width:480px){ .sgrid{grid-template-columns:1fr;} }

.block h2{font-size:clamp(26px,3.2vw,36px); margin:12px 0 16px; max-width:28ch;}
.block p{max-width:66ch; color:#3d434d; margin-bottom:14px;}
.block + .block{border-top:1px solid var(--line);}
.two{display:grid; grid-template-columns:1.1fr .9fr; gap:52px; align-items:start;}
.two>*{min-width:0;}
@media(max-width:860px){ .two{grid-template-columns:1fr; gap:34px;} }
.ticks{list-style:none; margin:6px 0 10px; max-width:66ch;}
.ticks li{position:relative; padding:9px 0 9px 28px; border-bottom:1px dashed var(--line);}
.ticks li:last-child{border-bottom:0;}
.ticks li::before{content:""; position:absolute; left:2px; top:17px; width:12px; height:12px; border-radius:3px;
  background:conic-gradient(var(--terra) 0 25%, var(--pine-d) 0 50%, var(--terra) 0 75%, var(--pine-d) 0);}
.ticks b{font-family:'Space Grotesk',sans-serif;}
.grade{display:inline-flex; align-items:baseline; gap:10px; margin:8px 0 6px; padding:12px 16px; border:1px solid var(--line); border-radius:8px; background:var(--panel);}
.grade b{font:700 28px/1 'Space Grotesk',sans-serif; color:var(--terra-d);}
.grade span{font-size:14.5px; color:#5d6470;}

/* before and after, two phone screens side by side (stacked on a small phone) */
.pair{display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:560px;}
.pair figure{min-width:0;}
.pair .tag{display:inline-block; font:700 10.5px/1 'IBM Plex Mono',monospace; letter-spacing:1.8px; text-transform:uppercase; padding:6px 8px; border-radius:6px; margin-bottom:10px;}
.pair .tag.was{background:#ece7dc; color:#5d6470;}
.pair .tag.now{background:#e3ece6; color:var(--pine);}
@media(max-width:380px){ .pair{grid-template-columns:1fr;} }
.built{background:var(--cream); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.feat{margin-top:34px;}

.quote{margin:26px 0 8px; padding:20px 22px; background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--terra); border-radius:8px; max-width:66ch;}
.quote p{font-size:17.5px; line-height:1.55; color:var(--ink); margin:0;}
.counted{background:var(--panel); border-top:1px solid var(--line);}
.counted h2{font-size:clamp(22px,2.6vw,28px);}
.counted .ticks li{font-size:15px; color:#4b525d;}

/* the lightbox: one dialog per page, the page's pictures as a set */
.cslb{padding:0; border:0; border-radius:8px; background:#f8f7f3; color:var(--ink); width:min(1100px,94vw); max-height:94vh; overflow:hidden; box-shadow:0 18px 50px rgba(0,0,0,.35);}
.cslb.tall{width:min(560px,94vw);}
.cslb::backdrop{background:rgba(20,24,32,.82);}
.cslb-bar{display:flex; align-items:center; gap:8px; padding:6px 6px 6px 16px; background:var(--pine-d); color:#f5f8fb; font:700 .92rem 'Space Grotesk','Segoe UI',system-ui,sans-serif;}
.cslb-bar .t{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cslb-bar .n{font:500 .8rem 'IBM Plex Mono',monospace; color:#c9cfd6; white-space:nowrap;}
.cslb-bar button{min-height:44px; min-width:44px; padding:0 14px; border-radius:8px; border:1.5px solid #f5f8fb; background:transparent; color:#f5f8fb; font:600 .9rem 'Space Grotesk','Segoe UI',system-ui,sans-serif; cursor:pointer;}
.cslb-bar button:hover{background:rgba(255,255,255,.12);}
.cslb-bar button:focus-visible{outline:3px solid #ffd7bd; outline-offset:2px;}
.cslb-body{overflow:auto; max-height:calc(94vh - 56px); touch-action:pan-x pan-y pinch-zoom; background:#e9e6de;}
.cslb-body img{display:block; width:100%; height:auto; margin:0 auto;}

/* ---------- shared components, added 2026-10-14 (Andre: films instead of stills, a fair before and after, interactives).
   Every case study may use them; class names are stable, so add to them and never rename. Each one reads complete at
   rest (the final numbers, the finished picture) and only moves when it is on screen and motion is allowed. ---------- */

/* .film: a site film. Hover plays it on a desktop; its Play button (shown only when the script runs) plays it on touch
   and from the keyboard. Its resting picture
   is the film's own first frame (the site's first screen), so a play starts with no jump. .film.phone frames a tall
   phone film. Reduced motion: the picture only, no film and no button. */
.film{position:relative; display:block; border-radius:6px; overflow:hidden; border:1px solid var(--line); background:var(--cream);
  box-shadow:0 18px 44px rgba(30,34,42,.12);}
.film > picture img, .film > img{width:100%; height:auto; display:block;}
.film video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; pointer-events:none; background:transparent;}
.film.playing video{opacity:1;}
.film-btn{position:absolute; left:12px; bottom:12px; z-index:2; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px 0 12px;
  border:0; border-radius:8px; background:rgba(23,27,34,.86); color:#fff; font:700 12px/1 'IBM Plex Mono',ui-monospace,monospace;
  letter-spacing:1.2px; text-transform:uppercase; cursor:pointer;}
.film-btn svg{width:12px; height:12px; fill:currentColor; flex:none;}
.film-btn:hover{background:rgba(23,27,34,.96);}
.film-btn:focus-visible{outline:3px solid var(--terra); outline-offset:3px;}
.film-btn[hidden]{display:none;}
.film-btn .ps, .film.on .film-btn .pl{display:none;}
.film.on .film-btn .ps{display:inline-flex; align-items:center; gap:8px;}
.film-btn .pl{display:inline-flex; align-items:center; gap:8px;}
.film-full{position:absolute; right:10px; bottom:12px; z-index:2; display:inline-flex; align-items:center; min-height:44px; padding:0 12px;
  font:700 11px/1 'IBM Plex Mono',monospace; letter-spacing:1.2px; text-transform:uppercase; background:rgba(23,27,34,.82); color:#fff;
  border-radius:6px; text-decoration:none;}
.film-full:hover{background:rgba(23,27,34,.96);}
.film-full:focus-visible{outline:3px solid var(--terra); outline-offset:3px;}
.film.phone{max-width:320px; margin:0 auto; border-radius:18px; border:8px solid #1e222a; background:#1e222a; box-shadow:0 22px 50px rgba(30,34,42,.22);}
.film.phone .film-btn{left:10px; bottom:10px;} .film.phone .film-full{right:8px; bottom:10px;}
@media(prefers-reduced-motion:reduce){ .film video, .film-btn{display:none!important;} }

/* .ba: before and after on the same phone. Drag anywhere on it (pointer or touch), or use the arrow keys on its slider. */
.ba{position:relative; overflow:hidden; aspect-ratio:780/1688; width:100%; max-width:330px; margin:0 auto; --pos:50%;
  border-radius:18px; border:8px solid #1e222a; background:#1e222a; box-shadow:0 18px 44px rgba(30,34,42,.18);
  touch-action:pan-y; cursor:ew-resize; user-select:none; -webkit-user-select:none;}
.ba img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none;}
.ba .ba-before{position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--pos)) 0 0);}
.ba .ba-line{position:absolute; top:0; bottom:0; left:var(--pos); width:2px; margin-left:-1px; background:#fff;
  box-shadow:0 0 0 1px rgba(23,27,34,.35); pointer-events:none;}
.ba .ba-knob{position:absolute; top:50%; left:50%; width:42px; height:42px; margin:-21px 0 0 -21px; border-radius:8px; background:var(--terra-d);
  color:#fff; display:grid; place-items:center; box-shadow:0 6px 16px rgba(23,27,34,.35);}
.ba .ba-knob svg{width:20px; height:20px; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.ba .ba-tag{position:absolute; top:10px; z-index:1; font:700 10.5px/1 'IBM Plex Mono',monospace; letter-spacing:1.6px; text-transform:uppercase;
  padding:7px 8px; border-radius:6px; pointer-events:none;}
.ba .ba-tag.was{left:10px; background:rgba(23,27,34,.86); color:#fff;}
.ba .ba-tag.now{right:10px; background:#e3ece6; color:var(--pine);}
.ba input[type=range]{position:absolute; left:0; right:0; bottom:0; width:100%; height:44px; margin:0; opacity:0; cursor:ew-resize;}
.ba:focus-within{outline:3px solid var(--terra); outline-offset:4px;}
.ba-full{display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:center; margin-top:12px; font-size:14px;}
.ba-full a{text-underline-offset:3px; min-height:24px;}

/* .moments: a few moments to compare, as tabs; each panel holds a .ba and what each side shows */
.compare{background:var(--cream); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.compare .intro{max-width:66ch; color:#3d434d; margin-bottom:22px;}
.moments{display:grid; gap:22px;}
.mo-tabs{display:flex; flex-wrap:wrap; gap:8px;}
.mo-tabs button{min-height:44px; padding:0 16px; border-radius:8px; border:1px solid var(--line); background:var(--panel); color:var(--ink);
  font:600 .95rem 'Space Grotesk','Segoe UI',system-ui,sans-serif; cursor:pointer;}
.mo-tabs button:hover{border-color:var(--terra);}
.mo-tabs button[aria-selected="true"]{background:var(--pine-d); border-color:var(--pine-d); color:#fff;}
.mo-tabs button:focus-visible{outline:3px solid var(--terra); outline-offset:2px;}
.mo-panel{display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:44px; align-items:center;}
.mo-panel[hidden]{display:none;}
.mo-panel > *{min-width:0;}
@media(max-width:760px){ .mo-panel{grid-template-columns:1fr; gap:24px;} }
.mo-notes{display:grid; gap:14px;}
.mo-col{padding:16px 18px; border:1px solid var(--line); border-radius:8px; background:var(--panel);}
.mo-col h3{font:700 11px/1 'IBM Plex Mono',monospace; letter-spacing:1.8px; text-transform:uppercase; margin-bottom:8px;}
.mo-col.was h3{color:#5d6470;} .mo-col.now h3{color:var(--pine);}
.mo-col ul{list-style:none;}
.mo-col li{position:relative; padding:6px 0 6px 28px; border-bottom:1px dashed var(--line);}
.mo-col li:last-child{border-bottom:0;}
.mo-col li::before{position:absolute; left:0; top:7px; width:18px; height:18px; border-radius:4px; display:grid; place-items:center;
  font:700 12px/1 'IBM Plex Sans',sans-serif;}
.mo-col li.no::before{content:"\00d7"; background:#ece7dc; color:#7a5a46;}
.mo-col li.yes::before{content:"\2713"; background:#e3ece6; color:var(--pine);}
.mo-src{font-size:13.5px; color:#5d6470; margin:0;}

/* [data-count]: a sourced number that counts up when it comes on screen; the page holds the final number at rest */

/* .dials: Google's phone-test scores as rings */
.dials{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; max-width:660px; margin:18px 0 8px; list-style:none;}
@media(max-width:560px){ .dials{grid-template-columns:repeat(2,minmax(0,1fr));} }
.dial{display:grid; justify-items:center; gap:8px; padding:16px 10px; border:1px solid var(--line); border-radius:8px; background:var(--panel); text-align:center;}
.dial .ring{position:relative; width:92px; height:92px;}
.dial svg{width:92px; height:92px; transform:rotate(-90deg);}
.dial circle{fill:none; stroke-width:8;}
.dial .track{stroke:#ece7dc;}
.dial .val{stroke:var(--pine); stroke-linecap:round; transition:stroke-dashoffset 1.2s var(--ease);}
.dial.mid .val{stroke:#b4691f;}
.dial .ring b{position:absolute; inset:0; display:grid; place-items:center; font:700 26px/1 'Space Grotesk',sans-serif; color:var(--ink);}
.dial span{font-size:14px; color:#4b525d; line-height:1.35;}
@media(prefers-reduced-motion:reduce){ .dial .val{transition:none;} }

/* .taps: where the first week's taps went; each row opens to say what that tap does */
.taps{display:grid; gap:10px; max-width:680px; margin:18px 0 8px;}
.taps details{border:1px solid var(--line); border-radius:8px; background:var(--panel);}
.taps summary{display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr) auto; gap:14px; align-items:center; min-height:48px; padding:10px 14px;
  cursor:pointer; list-style:none; font:600 15px/1.3 'Space Grotesk',sans-serif;}
.taps summary::-webkit-details-marker{display:none;}
.taps summary:focus-visible{outline:3px solid var(--terra); outline-offset:2px; border-radius:8px;}
.taps .bar{height:12px; border-radius:4px; background:#ece7dc; overflow:hidden;}
.taps .bar i{display:block; height:100%; width:var(--w); background:var(--terra); border-radius:4px;}
.taps b{font:700 18px/1 'Space Grotesk',sans-serif; font-variant-numeric:tabular-nums; min-width:3ch; text-align:right;}
.taps details p{margin:0; padding:0 14px 12px; font-size:15px; color:#4b525d; max-width:60ch;}
@media(max-width:560px){ .taps summary{grid-template-columns:minmax(0,1fr) auto;} .taps .bar{grid-column:1 / -1; order:3;} }

/* .tl: a short timeline to step through, by its buttons or its slider (arrow keys; shown only when the script runs) */
.tl{border:1px solid var(--line); border-radius:8px; background:var(--panel); padding:20px 20px 18px; max-width:860px; margin:18px 0 8px;}
.tl-steps{display:grid; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); gap:8px; list-style:none; position:relative;}
.tl-steps button{width:100%; min-height:56px; padding:8px 10px; border-radius:8px; border:1px solid var(--line); background:var(--paper); color:var(--ink);
  text-align:left; cursor:pointer; font:600 14px/1.3 'Space Grotesk',sans-serif;}
.tl-steps button small{display:block; font:500 11px/1.3 'IBM Plex Mono',monospace; letter-spacing:.8px; text-transform:uppercase; color:var(--terra-d); margin-bottom:3px;}
.tl-steps button[aria-selected="true"]{background:var(--pine-d); border-color:var(--pine-d); color:#fff;}
.tl-steps button[aria-selected="true"] small{color:#d4a445;}
.tl-steps button:focus-visible{outline:3px solid var(--terra); outline-offset:2px;}
.tl input[type=range]{width:100%; margin:14px 0 0; accent-color:var(--terra-d); min-height:28px;}
.tl-panel{margin-top:14px; padding-top:14px; border-top:1px dashed var(--line);}
.tl-panel[hidden]{display:none;}
.tl-panel h3{font-size:19px; margin-bottom:6px;}
.tl-panel p{margin:0 0 6px; max-width:62ch; color:#3d434d;}
@media(max-width:640px){ .tl-steps{grid-template-columns:1fr 1fr;} }

@media(prefers-reduced-motion:reduce){ .shot, .shot:hover, .shot:active{transition:none; transform:none;} html{scroll-behavior:auto;} }
@media print{ #stickybar, .nav-toggle, #menu-panel, #menu-scrim, .film-btn, .film-full{display:none!important;} }

/* The iPhone (2026-10-14 evening; Andre's standing rule: every phone shown is a real iPhone). The frame below is
   tools/iphone_frame's one iPhone, generated by iphone_frame.css() and pasted here so the page loads no extra stylesheet:
   a 393 x 852 point screen with Apple's continuous corner, the status bar, the Dynamic Island and the home indicator; the
   page sits under the status bar in a 393 x 798 area, which is the viewport every phone capture here is made at. The
   outline is the one exception to Rav's corner rule. It replaces this file's own earlier drawing (a circular corner and a
   screen about 6 percent too tall). Rebuild: python tools/iphone_frame/iphone_frame.py css, then paste. */
/* Loomwest iPhone frame (tools/iphone_frame, 2026-10-14): one look for every phone in our work. Our own drawing, no Apple
   artwork. The device outline and display use Apple's continuous corner; the outline is the one exception to Rav's corner rule. */
.iph{--iph-sb:#fbf8f1;--iph-ink:#111;--iph-home:rgba(17,17,17,.82);--iph-shadow:drop-shadow(0 26px 30px rgba(0,0,0,.45));
  position:relative;display:block;width:300px;aspect-ratio:432.2/885.2;height:auto;flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 432.2 885.2'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%234a4e56'/%3E%3Cstop offset='.22' stop-color='%231b1c20'/%3E%3Cstop offset='.6' stop-color='%230f1013'/%3E%3Cstop offset='1' stop-color='%232e3036'/%3E%3C/linearGradient%3E%3ClinearGradient id='bt' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%232a2c31'/%3E%3Cstop offset='.55' stop-color='%236a6e76'/%3E%3Cstop offset='1' stop-color='%232a2c31'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0.20' y='150.48' width='3.40' height='40.72' rx='1.4' fill='url(%23bt)'/%3E%3Crect x='0.20' y='221.30' width='3.40' height='76.13' rx='1.4' fill='url(%23bt)'/%3E%3Crect x='0.20' y='315.13' width='3.40' height='76.13' rx='1.4' fill='url(%23bt)'/%3E%3Crect x='428.60' y='230.15' width='3.40' height='118.62' rx='1.4' fill='url(%23bt)'/%3E%3Cpath d='M314.64 0 c40.1 0 60.15 0 75.466 7.804 a71.6 71.6 0 0 1 31.29 31.29 c7.804 15.316 7.804 35.366 7.804 75.466 L429.2 770.64 c0 40.1 0 60.15 -7.804 75.466 a71.6 71.6 0 0 1 -31.29 31.29 c-15.316 7.804 -35.366 7.804 -75.466 7.804 L117.56 885.2 c-40.1 0 -60.15 0 -75.466 -7.804 a71.6 71.6 0 0 1 -31.29 -31.29 c-7.804 -15.316 -7.804 -35.366 -7.804 -75.466 L3 114.56 c0 -40.1 0 -60.15 7.804 -75.466 a71.6 71.6 0 0 1 31.29 -31.29 c15.316 -7.804 35.366 -7.804 75.466 -7.804 Z' fill='url(%23m)'/%3E%3Cpath d='M314.64 0 c40.1 0 60.15 0 75.466 7.804 a71.6 71.6 0 0 1 31.29 31.29 c7.804 15.316 7.804 35.366 7.804 75.466 L429.2 770.64 c0 40.1 0 60.15 -7.804 75.466 a71.6 71.6 0 0 1 -31.29 31.29 c-15.316 7.804 -35.366 7.804 -75.466 7.804 L117.56 885.2 c-40.1 0 -60.15 0 -75.466 -7.804 a71.6 71.6 0 0 1 -31.29 -31.29 c-7.804 -15.316 -7.804 -35.366 -7.804 -75.466 L3 114.56 c0 -40.1 0 -60.15 7.804 -75.466 a71.6 71.6 0 0 1 31.29 -31.29 c15.316 -7.804 35.366 -7.804 75.466 -7.804 Z' fill='none' stroke='%238d9199' stroke-opacity='.85' stroke-width='1.1'/%3E%3Cpath d='M316.2 2.6 c38.644 0 57.965 0 72.725 7.521 a69 69 0 0 1 30.154 30.154 c7.521 14.76 7.521 34.082 7.521 72.725 L426.6 772.2 c0 38.644 0 57.965 -7.521 72.725 a69 69 0 0 1 -30.154 30.154 c-14.76 7.521 -34.082 7.521 -72.725 7.521 L116 882.6 c-38.644 0 -57.965 0 -72.725 -7.521 a69 69 0 0 1 -30.154 -30.154 c-7.521 -14.76 -7.521 -34.082 -7.521 -72.725 L5.6 113 c0 -38.644 0 -57.965 7.521 -72.725 a69 69 0 0 1 30.154 -30.154 c14.76 -7.521 34.082 -7.521 72.725 -7.521 Z' fill='%23050506'/%3E%3C/svg%3E") center/100% 100% no-repeat;filter:var(--iph-shadow)}
.iph-screen{position:absolute;left:4.5349%;top:1.8753%;width:90.9301%;height:96.2494%;overflow:hidden;background:var(--iph-sb);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 393 852'%3E%3Cpath d='M305 0 c30.803 0 46.204 0 57.969 5.995 a55 55 0 0 1 24.036 24.036 c5.995 11.765 5.995 27.167 5.995 57.969 L393 764 c0 30.803 0 46.204 -5.995 57.969 a55 55 0 0 1 -24.036 24.036 c-11.765 5.995 -27.167 5.995 -57.969 5.995 L88 852 c-30.803 0 -46.204 0 -57.969 -5.995 a55 55 0 0 1 -24.036 -24.036 c-5.995 -11.765 -5.995 -27.167 -5.995 -57.969 L0 88 c0 -30.803 0 -46.204 5.995 -57.969 a55 55 0 0 1 24.036 -24.036 c11.765 -5.995 27.167 -5.995 57.969 -5.995 Z' fill='%23000'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 393 852'%3E%3Cpath d='M305 0 c30.803 0 46.204 0 57.969 5.995 a55 55 0 0 1 24.036 24.036 c5.995 11.765 5.995 27.167 5.995 57.969 L393 764 c0 30.803 0 46.204 -5.995 57.969 a55 55 0 0 1 -24.036 24.036 c-11.765 5.995 -27.167 5.995 -57.969 5.995 L88 852 c-30.803 0 -46.204 0 -57.969 -5.995 a55 55 0 0 1 -24.036 -24.036 c-5.995 -11.765 -5.995 -27.167 -5.995 -57.969 L0 88 c0 -30.803 0 -46.204 5.995 -57.969 a55 55 0 0 1 24.036 -24.036 c11.765 -5.995 27.167 -5.995 57.969 -5.995 Z' fill='%23000'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.iph-screen::before{content:"";position:absolute;left:0;top:0;width:100%;height:6.3380%;background:var(--iph-sb);z-index:2}
.iph-screen::after{content:"";position:absolute;left:0;top:0;width:100%;height:6.3380%;background:var(--iph-ink);z-index:3;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 393 54'%3E%3Ctext x='51' y='35' font-family='-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif' font-size='17' font-weight='600' fill='%23000'%3E9:41%3C/text%3E%3Cg fill='%23000'%3E%3Crect x='293' y='28' width='3.4' height='5' rx='1'/%3E%3Crect x='298.5' y='25.5' width='3.4' height='7.5' rx='1'/%3E%3Crect x='304' y='23' width='3.4' height='10' rx='1'/%3E%3Crect x='309.5' y='20.5' width='3.4' height='12.5' rx='1'/%3E%3C/g%3E%3Cg fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='M320.5 25.3a11 11 0 0 1 15 0'/%3E%3Cpath d='M323.6 28.6a6.6 6.6 0 0 1 8.8 0'/%3E%3C/g%3E%3Ccircle cx='328' cy='31.6' r='1.7' fill='%23000'/%3E%3Crect x='343.5' y='21' width='24' height='12' rx='3.6' fill='none' stroke='%23000' stroke-opacity='.4' stroke-width='1.2'/%3E%3Crect x='345.5' y='23' width='20' height='8' rx='2' fill='%23000'/%3E%3Cpath d='M369.4 25.2v3.6a2 2 0 0 0 0-3.6z' fill='%23000' fill-opacity='.45'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 393 54'%3E%3Ctext x='51' y='35' font-family='-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif' font-size='17' font-weight='600' fill='%23000'%3E9:41%3C/text%3E%3Cg fill='%23000'%3E%3Crect x='293' y='28' width='3.4' height='5' rx='1'/%3E%3Crect x='298.5' y='25.5' width='3.4' height='7.5' rx='1'/%3E%3Crect x='304' y='23' width='3.4' height='10' rx='1'/%3E%3Crect x='309.5' y='20.5' width='3.4' height='12.5' rx='1'/%3E%3C/g%3E%3Cg fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='M320.5 25.3a11 11 0 0 1 15 0'/%3E%3Cpath d='M323.6 28.6a6.6 6.6 0 0 1 8.8 0'/%3E%3C/g%3E%3Ccircle cx='328' cy='31.6' r='1.7' fill='%23000'/%3E%3Crect x='343.5' y='21' width='24' height='12' rx='3.6' fill='none' stroke='%23000' stroke-opacity='.4' stroke-width='1.2'/%3E%3Crect x='345.5' y='23' width='20' height='8' rx='2' fill='%23000'/%3E%3Cpath d='M369.4 25.2v3.6a2 2 0 0 0 0-3.6z' fill='%23000' fill-opacity='.45'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.iph-screen > img,.iph-screen > video,.iph-screen > .iph-page{position:absolute;left:0;top:6.3380%;width:100%;height:93.6620%;
  display:block;object-fit:cover;object-position:50% 0;margin:0;border:0;border-radius:0;max-width:none}
.iph.full .iph-screen > img,.iph.full .iph-screen > video,.iph.full .iph-screen > .iph-page{top:0;height:100%}
.iph.full .iph-screen::before,.iph.full .iph-screen::after{display:none}
.iph::before{content:"";position:absolute;left:35.4234%;top:3.1179%;width:29.1532%;height:4.2171%;border-radius:999px;background:#000;z-index:4}
.iph::after{content:"";position:absolute;left:34.4979%;bottom:2.7790%;width:31.0042%;height:0.5648%;min-height:2px;border-radius:999px;
  background:var(--iph-home);z-index:4}
/* the case studies' own use of it: a slider, a film or a described page fills the screen below the status bar */
.iph{width:100%; max-width:312px; margin:0 auto;}
.iph:focus-within{outline:3px solid var(--terra); outline-offset:6px; border-radius:46px;}
.iph-screen > .ba, .iph-screen > .film.phone, .iph-screen > .mx-nosite{position:absolute; left:0; top:6.3380%; width:100%; height:93.6620%;
  max-width:none; margin:0; border:0; border-radius:0; box-shadow:none; aspect-ratio:auto;}
.iph-screen > .ba:focus-within{outline:0;}
.iph-screen > .ba img, .iph-screen > .film.phone > img, .iph-screen > .film.phone video{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 0;}
.iph-screen > .film.phone{background:var(--iph-sb);}
.iph-screen > .film.phone .film-btn{left:10px; bottom:22px;} .iph-screen > .film.phone .film-full{right:10px; bottom:22px;}
.iph-screen > .mx-nosite{display:flex; flex-direction:column; justify-content:center; padding:22px 18px;}

/* ---------- 2026-10-14 evening, Andre's review of the staging case studies ---------- */
/* .ba banners: case-study.js adds .off to a banner while the slider line is over it, or when its own side is pushed fully off
   the screen; it fades back otherwise. Reduced motion: no fade, the banner simply goes and comes back. The grade a banner
   carries (Before C+, After A) is the Report Card grade of that side. */
.ba .ba-tag{transition:opacity .22s var(--ease);}
.ba .ba-tag.off{opacity:0;}
.ba .ba-tag b{font-weight:700; margin-left:5px;}
@media(prefers-reduced-motion:reduce){ .ba .ba-tag{transition:none;} }
/* then and now, side by side: the card's grade and the same five checks on the live site */
.grades{display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 6px;}
.grades .grade{margin:0; display:flex; align-items:center; gap:12px;}
.grades .grade small{display:block; font:700 10.5px/1.2 'IBM Plex Mono',monospace; letter-spacing:1.6px; text-transform:uppercase; color:#5d6470; margin-bottom:3px;}
.grades .grade > span{display:block;}
.grade.now{border-color:#c9dccf; background:#f3f8f4;}
.grade.now b{color:var(--pine);}
/* when the numbers were last measured (tools/case_study_numbers.py rewrites the date every week) */
.cs-updated{font:500 13px/1.5 'IBM Plex Mono',ui-monospace,monospace; letter-spacing:.3px; margin:18px 0 0;}
.stats .cs-updated{color:#c9cfd6;}
.block .cs-updated{color:#5d6470; margin-top:10px;}
/* a timeline's honest note on time: how much of it was build, how much was waiting on the owner */
.tl-time{margin:14px 0 0; padding:12px 14px; border-radius:8px; background:var(--cream); border:1px solid var(--line); font-size:15px; color:#3d434d; max-width:72ch;}
.tl-time b{font-family:'Space Grotesk',sans-serif; color:var(--ink);}
/* a film's own score line under the after phone */
.ph-score{display:block; text-align:center; margin:12px auto 0; max-width:312px; font:600 14px/1.4 'Space Grotesk',sans-serif; color:var(--pine);}
.ph-score > span:last-child{color:#5d6470; font-weight:500;}
/* the purpose note (Faria Accountancy: a site built to inform, not to sell) */
.purpose{margin:18px 0 6px; padding:16px 18px; border-left:4px solid var(--pine); background:var(--panel); border-radius:8px; border-top:1px solid var(--line); border-right:1px solid var(--line); border-bottom:1px solid var(--line); max-width:70ch;}
.purpose h3{font-size:18px; margin-bottom:6px;}
.purpose p{margin:0 0 8px; color:#3d434d;}
.purpose p:last-child{margin-bottom:0;}