/* Northern Engineering Services. The light skin, 21 Sept 2026. Consolidated on the fourth pass:
 * three rounds of overrides had stacked up, so every rule now lives once, where it belongs.
 *
 * GRAMMAR, learned from a reference (t1energy.com) on its real render: a light canvas,
 * whisper-weight display type, content held in the right half, large rounded photographs, a
 * floating glass pill for navigation, stacked light numerals, no shadows anywhere.
 *
 * IDENTITY, which is NES's and is where this departs from the reference on purpose:
 *   their own Montserrat at 300; a COOL steel canvas and their cool ink;
 *   NES red on the primary action and as a hand-drawn stroke under every section title;
 *   section titles in Barlow Condensed, a DIN style face, the lettering of an engineering drawing;
 *   a full-bleed square hero (Miller, 21 Sept: no rounded corners showing the page behind it).
 * No hex, no typeface and no copy is carried over from the reference.
 *
 * IMAGERY: NES's own photographs and clips, generated photographs built FROM theirs (gen-*), and
 * one licensed stock photograph from their own blog (stock-*). See DESIGN-PACK.md.
 */

:root{
  --canvas:#ECEEEF; --paper:#FFFFFF; --ink:#14171A; --ink-2:#2A2F35; --mute:#5F676F; --faint:#9AA1A8;   /* --mute 4.93 to 1 on the canvas. --faint is for disabled states and dots, NEVER words */
  --line:rgba(20,23,26,.14); --line-2:rgba(20,23,26,.26); --onyx:#0B0D0F;
  --on-dark:#FFFFFF; --on-dark-2:rgba(255,255,255,.62); --on-dark-line:rgba(255,255,255,.16);
  --red:#EF3F56; --red-btn:#DC344B; --red-2:#C62A40; --gold:#FBBC04;   /* white on --red is 3.81 to 1, on --red-btn 4.53 */
  --head:'Montserrat',system-ui,sans-serif;
  --body:'Montserrat',system-ui,sans-serif;
  --title:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --r-xl:64px; --r-lg:36px; --r-md:24px; --r-sm:14px; --r-pill:100px;
  --maxw:1240px; --pad:36px;
  --glass:rgba(20,23,26,.46); --glass-2:rgba(20,23,26,.74);
  --e-expo:cubic-bezier(.16,1,.3,1); --e-ui:cubic-bezier(.4,0,.2,1); --e-wipe:cubic-bezier(.76,0,.24,1);
  --t-micro:.18s; --t-ui:.28s; --t-reveal:1s; --stagger:80ms;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(124px + env(safe-area-inset-top,0px))}   /* an anchor lands clear of the fixed bar, not under it */
/* Safari 26 on the iPhone ignores theme-color and colours the strip under the clock and the fade
   behind its toolbar from the BODY background (Miller's phone, 23 Sept: a light strip over the film
   and a light glow over the buttons). On the home page, while the film is on screen, the body is
   the film's darkest shade; motion.js adds .past-hero once the film has scrolled away. The page
   itself keeps its light background on main, so nothing on the page changes colour. */
body:has(.hero):not(.past-hero){background:var(--onyx)}
body:has(.hero)>main{background:var(--canvas)}
body{margin:0;background:var(--canvas);color:var(--ink-2);font-family:var(--body);font-size:16px;line-height:1.68;letter-spacing:-.004em;-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%;height:auto}
/* form controls do NOT inherit the page font by default, browsers hand them Arial. Three buttons
   were leaking a third typeface onto the page. Found by asking the render which elements. */
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{font-family:var(--head);font-weight:300;color:var(--ink);margin:0;line-height:1.08;letter-spacing:-.012em}
h1,h2,h3{text-wrap:balance}
.statement,.hero-sub{text-wrap:pretty}
h1{font-size:clamp(36px,4.6vw,60px)}
h2{font-size:clamp(28px,3.2vw,44px)}
h3{font-size:clamp(20px,1.7vw,24px);font-weight:400;line-height:1.25}
p{margin:0 0 1em;text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}
address{font-style:normal}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}
::selection{background:var(--ink);color:#fff}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:300;border-radius:var(--r-sm)}
.skip:focus{left:12px;top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 max(var(--pad),env(safe-area-inset-right,0px)) 0 max(var(--pad),env(safe-area-inset-left,0px))}   /* a phone on its side keeps the words clear of the notch */

/* the small label: a red square, then small mono capitals. Used INSIDE cards only now. */
.lbl{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.11em;line-height:1.3;text-transform:uppercase;color:var(--ink);margin:0}
.lbl::before{content:'';width:5px;height:5px;background:var(--red);flex:none}
.on-dark .lbl,.lbl.on-dark{color:#fff}
.mono{font-family:var(--mono);font-size:11.5px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.statement{font-family:var(--head);font-weight:300;font-size:clamp(21px,2.05vw,29px);line-height:1.3;letter-spacing:-.008em;color:var(--ink);margin:0}
.statement+.statement{margin-top:1em}

/* ------------------------------------------------------------ the section title
   Big, in the title face, with a hand-drawn red stroke under it. It was an 11px mono label, which
   Miller read as 'a small head thing compared to everything else'. The stroke draws in when the
   title comes on screen, and motion.js redraws a different one on hover. pathLength is 1 on the
   path, so a dash of 1 is the whole stroke whatever its real length. */
.ttl{font-family:var(--title);font-weight:500;font-size:clamp(36px,3.9vw,58px);line-height:.98;letter-spacing:.012em;text-transform:uppercase;color:var(--ink);margin:0;text-wrap:balance}
.ttl.on-dark{color:#fff}
.ttl.sm{font-size:clamp(25px,2.2vw,32px)}
.ttl.xl{font-size:clamp(52px,6.4vw,100px);line-height:.92;font-weight:500}
.ttl.xl.long{font-size:clamp(42px,4.8vw,76px)}
.ttl.xl.longer{font-size:clamp(34px,3.7vw,56px);line-height:.98}
.ttl-t{position:relative;display:inline-block;padding-bottom:.24em}
.ttl-u{position:absolute;left:-1.5%;bottom:0;width:103%;height:.3em;max-width:none;overflow:visible;pointer-events:none}
.ttl-u path{fill:none;stroke:var(--red);stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.l>.ttl{margin-bottom:40px}
.l.spread .ttl{margin-bottom:40px}
.sec-head .l>.ttl,.headrow .l>.ttl,.cta .l>.ttl,.ph .l>.ttl{margin-bottom:0}

/* ------------------------------------------------------------ buttons, all pills */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;border:1px solid transparent;border-radius:var(--r-pill);
  font-family:var(--head);font-size:14.5px;font-weight:500;letter-spacing:.005em;cursor:pointer;white-space:nowrap;
  transition:background var(--t-ui) var(--e-ui),color var(--t-ui) var(--e-ui),border-color var(--t-ui) var(--e-ui)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#000}
.btn-red{background:var(--red-btn);color:#fff}
.btn-red:hover{background:var(--red-2)}
.btn-line{border-color:var(--line-2);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:var(--canvas)}
.btn-glass{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn-glass:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn[disabled],.btn[disabled]:hover{background:rgba(20,23,26,.10);border-color:transparent;color:var(--faint);cursor:not-allowed}
.btn .ar{display:inline-block;transition:transform var(--t-ui) var(--e-ui)}
.btn:hover .ar{transform:translateX(3px)}
.more{display:inline-flex;align-items:center;gap:8px;font-family:var(--head);font-size:14.5px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--line-2);padding-bottom:3px;transition:border-color var(--t-ui) var(--e-ui)}
.more:hover{border-color:var(--ink)}

/* ------------------------------------------------------------ navigation: a glass chip and a glass pill, a matched pair
   The mark is always the white one. At the top of the home page it rides bare and a touch
   bigger. The chip arrives before the headline reaches it (motion.js sets .chip from where the
   headline is), and is always on for inner pages. Both go darker (.solid) over a light page. */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;padding-top:calc(22px + env(safe-area-inset-top,0px));pointer-events:none}   /* the page draws under the clock (viewport-fit=cover), the bar sits below it */
.nav-in{display:flex;align-items:stretch;justify-content:space-between;gap:16px}
.nav-in>*{pointer-events:auto}
.mark{display:flex;align-items:center;flex:none;padding:0 22px;min-height:58px;border-radius:var(--r-md);background:rgba(20,23,26,0);transform:translateX(-22px);
  transition:background .4s var(--e-ui),transform .5s var(--e-expo)}
.mark img{width:176px;height:auto;transition:width .5s var(--e-expo)}
.nav.chip .mark{background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);transform:none}
.nav.chip .mark img{width:150px}
.pill{display:flex;align-items:center;gap:2px;padding:7px 7px 7px 10px;border-radius:var(--r-md);background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  transition:background var(--t-ui) var(--e-ui)}
.nav.solid .pill,.nav.solid .mark{background:var(--glass-2)}
.pill>a,.has-drop>a{display:inline-flex;align-items:center;gap:6px;padding:10px 15px;border-radius:var(--r-sm);font-family:var(--head);font-size:14px;font-weight:500;color:#fff;white-space:nowrap;transition:background var(--t-micro) var(--e-ui)}
.pill>a:hover,.has-drop>a:hover,.pill a[aria-current="page"]{background:rgba(255,255,255,.13)}
/* the number was small grey mono and read as switched off. It is white, in the page face, with a
   hairline setting it apart from the links. */
.pill .nav-tel{position:relative;margin-left:8px;padding-left:20px;gap:9px;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.pill .nav-tel::before{content:'';position:absolute;left:0;top:50%;width:1px;height:20px;background:rgba(255,255,255,.24);transform:translateY(-50%)}
.pill .nav-tel .ic{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.pill .nav-cta{background:var(--red-btn);color:#fff;margin-left:8px;border-radius:var(--r-pill);padding:11px 18px 11px 22px}
.pill .nav-cta:hover{background:var(--red-2)}
.has-drop{position:relative;display:inline-flex}
.has-drop>a svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-ui) var(--e-ui)}
.has-drop:hover>a svg,.has-drop.open>a svg{transform:rotate(180deg)}
.has-drop::after{content:'';position:absolute;left:0;right:0;top:100%;height:18px}
.drop{position:absolute;left:0;top:calc(100% + 16px);min-width:390px;padding:10px;border-radius:var(--r-md);background:var(--paper);border:1px solid var(--line);display:grid;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity var(--t-ui) var(--e-ui),transform var(--t-ui) var(--e-ui),visibility 0s linear var(--t-ui)}
.cta-drop .drop{left:auto;right:0}
.has-drop:hover .drop,.has-drop:focus-within .drop,.has-drop.open .drop{opacity:1;visibility:visible;transform:none;transition-delay:0s}
/* Escape. It has to outrank hover AND focus-within, or the menu it just closed is still on screen */
.nav .has-drop.shut:not(.open) .drop{opacity:0;visibility:hidden;transform:translateY(6px)}
.drop a{display:block;padding:12px 14px;border-radius:var(--r-sm);font-family:var(--head);font-size:15px;font-weight:500;color:var(--ink);white-space:nowrap}
.drop a small{display:block;font-family:var(--body);font-size:14px;font-weight:400;color:var(--mute);margin-top:2px;white-space:normal}
.drop a:hover{background:var(--canvas)}
.burger{display:none;width:46px;height:46px;border:0;border-radius:var(--r-sm);background:transparent;position:relative;cursor:pointer}
.burger span,.burger::before,.burger::after{content:'';position:absolute;left:13px;right:13px;height:1.5px;background:#fff;transition:transform var(--t-ui) var(--e-ui),opacity var(--t-micro)}
.burger span{top:22px}.burger::before{top:16px}.burger::after{top:28px}
.burger[aria-expanded="true"] span{opacity:0}
.burger[aria-expanded="true"]::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"]::after{transform:translateY(-6px) rotate(-45deg)}
.drawer{display:none;pointer-events:auto;margin:12px var(--pad) 0;padding:12px;border-radius:var(--r-md);background:var(--paper);border:1px solid var(--line);max-height:calc(100svh - 110px - env(safe-area-inset-top,0px));overflow-y:auto}
.drawer.open{display:block;box-shadow:0 0 0 100vmax rgba(11,13,15,.55)}
@media(min-width:1081px){.drawer,.drawer.open{display:none!important}}   /* never stranded open on a desktop */
.nav:has(.drawer.open)~.ask-btn{opacity:0;pointer-events:none}
.drawer a{display:flex;align-items:center;justify-content:space-between;padding:15px 12px;border-radius:var(--r-sm);font-family:var(--head);font-size:17px;font-weight:400;color:var(--ink)}
.drawer a.sub{font-size:15.5px;color:var(--mute);padding:11px 12px 11px 24px}
/* Services and Projects: drop downs inside the menu */
.dr-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:15px 12px;border:0;border-radius:var(--r-sm);background:transparent;cursor:pointer;
  font-family:var(--head);font-size:17px;font-weight:400;color:var(--ink);text-align:left}
.dr-toggle:hover{background:var(--canvas)}
.dr-toggle i{width:9px;height:9px;margin-right:4px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform var(--t-ui) var(--e-ui)}
.dr-toggle[aria-expanded="true"] i{transform:translateY(2px) rotate(225deg)}
.dr-sub{padding-bottom:6px}
.drawer a:hover{background:var(--canvas)}
.drawer .mono{display:block;padding:16px 12px 6px}
/* .drawer a outranks .btn-* on specificity, which once left this button as ink text on an ink
   pill: invisible. Colour is restated at higher weight. */
.drawer a.btn{width:100%;margin-top:10px;justify-content:center;border-radius:var(--r-pill);color:#fff;font-size:15px;font-weight:500}
.drawer a.btn:hover{background:var(--red-2)}

/* ------------------------------------------------------------ hero: one full screen, square to every edge
   NO max-height (a cap left white under it on a 1440px-tall monitor) and NO radius (the rounded
   foot showed the page colour in both bottom corners, 'it doesn't fill the whole square'). */
.hero{position:relative;margin:0;height:100svh;min-height:620px;overflow:hidden;background:var(--ink);color:#fff;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media picture{display:block;width:100%;height:100%}
.hero-media img,.hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
/* the still is the hero until the film is actually playing, then the film fades over it */
.hero-film{opacity:0;transition:opacity 1.4s var(--e-ui)}
.hero-film.on{opacity:1}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(11,13,15,.82) 0%,rgba(11,13,15,.62) 36%,rgba(11,13,15,.10) 66%,rgba(11,13,15,0) 80%),linear-gradient(to top,rgba(11,13,15,.72) 0%,rgba(11,13,15,.26) 34%,rgba(11,13,15,0) 58%),linear-gradient(to bottom,rgba(11,13,15,.42) 0%,rgba(11,13,15,0) 24%)}
.hero-in{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:flex-start;gap:40px;padding-bottom:56px}
/* widths on display type are in em, never ch: ch resolves against whichever font has loaded at
   layout time, so a web-font headline re-wraps with font-load timing. */
.hero h1{color:#fff;max-width:11.4em;font-size:clamp(36px,4.5vw,62px)}
.hero-sub{max-width:44ch;margin:20px 0 0;font-size:18px;color:rgba(255,255,255,.88)}
.hero-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.hero-call{display:none}
.hero-card{display:inline-grid;grid-template-columns:60px minmax(0,1fr) 36px;gap:16px;align-items:center;max-width:430px;margin-bottom:36px;padding:9px 14px 9px 9px;border-radius:var(--r-md);background:rgba(20,23,26,.5);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);color:#fff;transition:background var(--t-ui) var(--e-ui)}
.hero-card:hover{background:rgba(20,23,26,.82)}
.hero-card strong{display:block;font-family:var(--head);font-weight:400;font-size:14.5px;line-height:1.3;margin-top:5px}
.hero-card picture{display:block}
.hero-card i{width:36px;height:36px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;font-style:normal;font-size:14px;transition:transform var(--t-ui) var(--e-ui)}
.hero-card:hover i{transform:translateX(3px)}
.hero-card img{width:60px;height:60px;object-fit:cover;border-radius:16px}

/* ------------------------------------------------------------ the section grammar: title left, content right */
.sec{padding:128px 0}
.sec.tight{padding:0 0 128px}
.sec.nb{padding-bottom:0}
.sec.paper{background:var(--paper)}
.sec.ruled{position:relative}
.sec.ruled::before{content:'';position:absolute;left:var(--pad);right:var(--pad);top:0;max-width:calc(var(--maxw) - var(--pad) * 2);margin:0 auto;height:1px;background:var(--line-2)}
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.row.mid{align-items:center}
.row.end{align-items:end}
.row.stretch{align-items:stretch}
.row>.l{grid-column:1 / span 5}
.row>.r{grid-column:7 / span 6}
.row>.l.wide{grid-column:1 / span 7}
.row>.l.six{grid-column:1 / span 6}
.row>.r.five{grid-column:8 / span 5}
.row>.r.narrow{grid-column:8 / span 5}
.row>.full{grid-column:1 / -1}
.r .btn,.r .more{margin-top:36px}
.sec-head{margin-bottom:64px;align-items:center}
/* a title on a line of its own, so the photograph and the words under it start level */
.headrow{margin-bottom:44px}
/* a left column that fills its row: the title, then a photograph that takes whatever is left */
.l.fill{display:flex;flex-direction:column}
.l.spread{display:flex;flex-direction:column;justify-content:space-between;gap:56px}

/* words of a statement come up from grey as the paragraph crosses the screen */
.mo .reveal-words .w{opacity:.36;transition:opacity .45s var(--e-ui)}
.mo .reveal-words .w.lit,.mo-all .reveal-words .w{opacity:1}

/* ------------------------------------------------------------ photographs */
.shot{position:relative;margin:0;overflow:hidden;border-radius:var(--r-xl);background:#D9DCDE;isolation:isolate}
.shot img,.shot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* a generated or stock keeper arrives inside <picture>, which must fill the frame like a bare img */
.shot picture{position:absolute;inset:0;display:block}
.shot.r43{aspect-ratio:4/3}.shot.r45{aspect-ratio:4/5}.shot.r169{aspect-ratio:16/9}.shot.r21{aspect-ratio:2/1}.shot.r916{aspect-ratio:9/16}.shot.r11{aspect-ratio:1/1}.shot.r54{aspect-ratio:5/4}
.shot.grow{flex:1 1 auto;min-height:440px}
.shot.grow.tall{min-height:600px}
.shot.r32{aspect-ratio:3/2}.shot.r34{aspect-ratio:3/4}
/* one rule by KIND: a photograph standing alone is xl, a card in a grid is lg */
.shot.md{border-radius:var(--r-lg)}
.shot.sm{border-radius:var(--r-md)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pair.bleed{width:max(80%,calc(min(100%,var(--maxw)) - var(--pad) * 2));max-width:1720px;margin-left:auto;margin-right:auto}
.tag{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;display:inline-flex;align-items:center;gap:12px;padding:7px 7px 7px 20px;border-radius:var(--r-pill);background:rgba(20,23,26,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;font-family:var(--mono);font-size:12px;letter-spacing:.06em;white-space:nowrap;transition:background var(--t-ui) var(--e-ui)}
.tag i{width:32px;height:32px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;font-style:normal;font-size:14px;transition:transform var(--t-ui) var(--e-ui)}
a.shot:hover .tag{background:rgba(20,23,26,.82)}
a.shot:hover .tag i{transform:translateX(2px)}
a.shot img{transition:transform 1.2s var(--e-expo)}
a.shot:hover img{transform:scale(1.035)}
/* the workshop in four photographs, edge to edge */
.mosaic{display:grid;grid-template-columns:3fr 2fr;gap:12px;width:max(80%,calc(min(100%,var(--maxw)) - var(--pad) * 2));max-width:1720px;margin-left:auto;margin-right:auto}
.mosaic .shot{aspect-ratio:16/10}
.mosaic .shot.big{grid-row:span 2;aspect-ratio:auto;height:100%}
.mosaic .shot.wide{grid-column:1 / -1;aspect-ratio:21/8}

/* who we are: the 40 years mark and the two accreditations, straight on the page. They sat on
   white tiles, Miller: 'you don't need that white square'. Both files are truly transparent. */
.marks{display:flex;align-items:center;flex-wrap:wrap;gap:18px 34px;margin-top:44px}
.marks .laurel{height:64px;width:auto}
.marks .badge{height:50px;width:auto}
.marks .badge.round{height:76px}
.r .marks+.btn{margin-top:36px}
.marks.quiet{margin-top:26px;padding:0 6px;gap:12px 30px;opacity:.92}
.marks.quiet .laurel{height:40px}
.marks.quiet .badge{height:30px}
.marks.quiet .badge.round{height:50px}
.marks.quiet+.bookcard{margin-top:26px}

/* ------------------------------------------------------------ what we do: photograph left, accordion right */
.acc-media{position:relative}
.l.stick{position:sticky;top:calc(120px + env(safe-area-inset-top,0px))}
@media(max-height:780px){.l.stick{position:static}}   /* a short window: a stuck column would be cut off at its foot */
.r>.statement+.acc{margin-top:56px}
.acc-shot{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--e-ui)}
.acc-shot.on{opacity:1}
.acc{border-top:1px solid var(--line-2)}
.acc-item{border-bottom:1px solid var(--line-2)}
.acc-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;border:0;background:transparent;text-align:left;cursor:pointer;font-family:var(--head);font-weight:400;font-size:clamp(19px,1.6vw,23px);color:var(--ink)}
.acc-btn .n{font-family:var(--mono);font-size:11.5px;color:var(--mute);letter-spacing:.08em;margin-right:16px}
.acc-ic{position:relative;flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:var(--paper);transition:background var(--t-ui) var(--e-ui),border-color var(--t-ui) var(--e-ui)}
.acc-ic::before,.acc-ic::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%);transition:transform var(--t-ui) var(--e-ui),background var(--t-ui) var(--e-ui)}
.acc-ic::after{transform:translate(-50%,-50%) rotate(90deg)}
.acc-btn[aria-expanded="true"] .acc-ic{background:var(--ink);border-color:var(--ink)}
.acc-btn[aria-expanded="true"] .acc-ic::before,.acc-btn[aria-expanded="true"] .acc-ic::after{background:#fff}
.acc-btn[aria-expanded="true"] .acc-ic::after{transform:translate(-50%,-50%) rotate(0deg)}
.acc-btn:hover .acc-ic{border-color:var(--ink)}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--e-expo)}
.acc-panel>div{overflow:hidden}
.acc-item:not(.open) .acc-panel>div{visibility:hidden;transition:visibility 0s linear .5s}
.acc-item.open .acc-panel>div{visibility:visible}
.acc-item.open .acc-panel{grid-template-rows:1fr}
.acc-panel p{max-width:46ch;color:var(--mute);margin:0 0 14px;padding-left:38px}
.acc-panel .more{display:flex;width:fit-content;margin:0 0 26px 38px}
.acc-panel .more.see{display:block;max-width:calc(100% - 38px);margin-bottom:16px;text-wrap:balance}   /* a long line wraps with its arrow, never an orphan word with the arrow out on its own */

/* ------------------------------------------------------------ what we build: a list of kinds of work, the photograph follows the line */
.r>.statement+.builds{margin-top:56px}
.builds{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.build-row{display:grid;grid-template-columns:38px 1fr 40px;gap:0 18px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line-2);color:var(--ink);text-decoration:none}
.build-row .n{align-self:start;padding-top:7px;font-family:var(--mono);font-size:11.5px;color:var(--mute);letter-spacing:.08em}
.build-row strong{display:block;font-family:var(--head);font-weight:400;font-size:clamp(19px,1.6vw,23px);line-height:1.25}
.build-row small{display:block;margin-top:6px;max-width:54ch;font-size:15px;line-height:1.55;color:var(--mute)}
.build-row .ar{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font-size:15px;transition:background var(--t-ui) var(--e-ui),border-color var(--t-ui) var(--e-ui),color var(--t-ui) var(--e-ui)}
.build-row.on .n{color:var(--ink)}
.build-row.on .ar,.build-row:hover .ar,.build-row:focus-visible .ar{background:var(--ink);border-color:var(--ink);color:#fff}
@media(max-width:680px){
  .r>.statement+.builds{margin-top:36px}
  .build-row{grid-template-columns:22px 1fr 36px;gap:0 12px;padding:18px 0}
  .build-row .ar{width:36px;height:36px}
}

/* ------------------------------------------------------------ numbers, stacked and light */
.nums{display:grid}
.num{padding:28px 0;border-top:1px solid var(--line-2)}
.num:last-child{border-bottom:1px solid var(--line-2)}
.num b{display:block;font-family:var(--head);font-weight:300;font-size:clamp(46px,5.2vw,74px);line-height:1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.num span{display:block;margin-top:12px}
.num .mono{color:var(--ink)}
.num small{display:block;font-size:15px;color:var(--mute);margin-top:4px}
.nums.inline{grid-template-columns:repeat(3,1fr);gap:0 24px}
.nums.inline .num b{font-size:clamp(34px,3.4vw,48px)}
.nums.plain .num{border:0;padding:20px 0}
.nums.plain .num:first-child{padding-top:0}
.nums.plain .num b{font-size:clamp(56px,6.6vw,96px)}

/* ------------------------------------------------------------ project and service cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{display:block}
/* the client line is given two lines of room so three titles share one baseline */
.card .mono{display:block;margin-top:20px;min-height:2.9em;line-height:1.45}
.card h3{margin-top:8px}
.card p{margin:8px 0 0;color:var(--mute);font-size:16px}
.card:hover .shot img{transform:scale(1.035)}
.card .shot img{transition:transform 1.2s var(--e-expo)}
.svc-list{border-top:1px solid var(--line-2)}
.svc-row{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.3fr) 40px;gap:24px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line-2);transition:padding var(--t-ui) var(--e-ui)}
.svc-row h2,.svc-row h3{font-size:clamp(20px,1.8vw,26px);font-weight:400;line-height:1.25;letter-spacing:-.012em}
.svc-row p{margin:0;color:var(--mute)}
.svc-row .acc-ic::after{display:none}
.svc-row .acc-ic::before{width:9px;height:9px;background:transparent;border-right:1.5px solid var(--ink);border-top:1.5px solid var(--ink);transform:translate(-65%,-50%) rotate(45deg)}
.svc-row:hover{padding-left:12px}
.svc-row:hover .acc-ic{background:var(--ink);border-color:var(--ink)}
.svc-row:hover .acc-ic::before{border-color:#fff;background:transparent}

/* ------------------------------------------------------------ the floor on film
   The clips play themselves while they are on screen. The caption is just the word, centred, in
   a small glass box. The play buttons are gone, 'a bit too much'. */
.reels{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.reel{cursor:pointer}
.reel figcaption{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2;padding:9px 18px;border-radius:var(--r-pill);background:rgba(20,23,26,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}

/* ------------------------------------------------------------ what customers say
   Left, the title and the Google panel. Right, four reviews. It was text down the right and
   nothing on the left. */
.revwrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 56px;align-items:stretch}
/* The columns are absolutely placed, so the WINDOW has no height of its own and the row is exactly
   as tall as the title and the Google panel. Two columns drift up at different speeds. Each is
   printed four times and moved by half its height, so the loop has no seam and never runs dry. */
.revwin{position:relative;min-height:620px;overflow:hidden;border-radius:var(--r-lg);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 89%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 89%,transparent 100%)}
.revwin:focus-visible{outline:2px solid var(--red);outline-offset:-3px}
.revwin{cursor:pointer}
.revcol{position:absolute;top:0;bottom:0;overflow:hidden}
.revcol.a{left:0;width:calc(50% - 8px)}
.revcol.b{right:0;width:calc(50% - 8px)}
.revcol.all{display:none;left:0;right:0}
.revtrack{display:flex;flex-direction:column;animation:revup var(--secs,70s) linear infinite;will-change:transform}
.revcol.b .revtrack{animation-delay:-23s}
.revset{display:flex;flex-direction:column}
.revset .rev{margin-bottom:16px}
@keyframes revup{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.revwin:hover .revtrack,.revwin:focus .revtrack,.revwin:focus-within .revtrack,.revwin.paused .revtrack{animation-play-state:paused}
.revside>.ttl{margin-bottom:40px}
.gw{background:var(--paper);border-radius:var(--r-lg);padding:34px}
.gw-head{display:flex;align-items:center;gap:14px}
.g-mark{width:36px;height:36px;flex:none}
.gw-head strong{display:block;font-family:var(--head);font-weight:500;font-size:17px;color:var(--ink);line-height:1.2}
.gw-head small{display:block;font-size:13.5px;color:var(--mute);margin-top:2px}
.gw-score{display:flex;align-items:center;gap:20px;margin-top:26px}
.gw-score b{font-family:var(--head);font-weight:300;font-size:clamp(60px,5.6vw,80px);line-height:1;letter-spacing:-.03em;color:var(--ink)}
.gw-score small{display:block;font-size:14.5px;color:var(--mute);margin-top:6px}
.g-stars{display:inline-flex;gap:3px}
.g-stars svg{width:21px;height:21px;fill:var(--gold)}
.gw-say{margin:24px 0 0;font-size:15.5px;color:var(--ink-2)}
.gw-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.gw-acts .btn{min-height:46px;padding:0 22px}
.gw-note{margin:20px 0 0;font-size:12.5px;color:var(--mute)}
.rev{display:flex;flex-direction:column;margin:0;padding:30px;border-radius:var(--r-lg);background:var(--paper)}
.rev-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.rev-top .g-stars svg{width:16px;height:16px}
.rev-top .g-mark{width:20px;height:20px}
.rev blockquote{margin:0;font-family:var(--head);font-weight:300;font-size:clamp(17px,1.35vw,19.5px);line-height:1.45;color:var(--ink)}
.rev figcaption{margin-top:auto;padding-top:22px;font-family:var(--head);font-weight:500;font-size:14.5px;color:var(--ink)}
.rev figcaption small{display:block;font-weight:400;font-size:12.5px;color:var(--mute);margin-top:2px}

/* ------------------------------------------------------------ the enquiry form */
.panel{background:var(--paper);border-radius:var(--r-lg);padding:40px}
.panel.tint{background:var(--canvas)}
.qform{display:grid;gap:20px}
.qf-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.qf-row>*,.qform label{min-width:0}
.qform label{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
.qform label>span{display:block}
.qform label i{font-style:normal;font-weight:400;color:var(--mute);letter-spacing:.06em;margin-left:6px}
.qform input[type="text"],.qform input[type="tel"],.qform input[type="email"],.qform textarea{font-family:var(--body);font-size:16.5px;text-transform:none;letter-spacing:0;color:var(--ink);padding:14px 16px;border:1px solid transparent;border-radius:var(--r-sm);background:var(--canvas);width:100%;transition:border-color var(--t-micro) var(--e-ui),background var(--t-micro) var(--e-ui)}
.panel.tint .qform input[type],.panel.tint .qform textarea,.panel.tint .qf-want span{background:var(--paper)}
.qform input:focus,.qform textarea:focus,.panel.tint .qform input[type]:focus,.panel.tint .qform textarea:focus{outline:none;border-color:var(--ink);background:var(--paper)}
.qform ::placeholder{color:var(--mute);opacity:.85}
.qform label.bad input,.qform label.bad textarea{border-color:#B3261E}
.qform textarea{resize:vertical;min-height:132px}
/* three ways to be answered, one tap each. It was a select that hid two of them. */
.qf-want{border:0;padding:0;margin:0;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.qf-want legend{grid-column:1 / -1;float:left;width:100%;padding:0;margin:0 0 10px;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
.qf-want label{display:flex;position:relative;font-family:var(--head);text-transform:none;letter-spacing:0}
.qf-want input{position:absolute;opacity:0;width:1px;height:1px}
.qf-want label>span{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:0 10px;text-align:center;line-height:1.2;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--canvas);font-size:14.5px;font-weight:500;color:var(--ink);cursor:pointer;transition:background var(--t-ui) var(--e-ui),color var(--t-ui) var(--e-ui),border-color var(--t-ui) var(--e-ui)}
.qf-want label>span:hover{border-color:var(--ink)}
.qf-want input:checked+span,.panel.tint .qf-want input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.qf-want input:focus-visible+span{outline:2px solid var(--red);outline-offset:3px}
/* the drawing: a drop area that names the file back and can be cleared */
.qf-drop{position:relative;border:1.5px dashed var(--line-2);border-radius:var(--r-sm);transition:border-color var(--t-ui) var(--e-ui),background var(--t-ui) var(--e-ui)}
.qf-drop:hover,.qf-drop.over{border-color:var(--ink);background:rgba(20,23,26,.035)}
.qf-drop.has{border-style:solid}
.qf-drop:focus-within{border-color:var(--ink);outline:2px solid var(--red);outline-offset:3px}
.qf-drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.qf-drop label{display:flex;grid-template-columns:none;align-items:center;gap:16px;padding:18px 20px;font-family:var(--body);text-transform:none;letter-spacing:0;font-weight:400;cursor:pointer}
.qf-drop label svg{flex:none;width:26px;height:26px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.qf-drop label strong{display:block;font-family:var(--head);font-weight:500;font-size:15px;color:var(--ink)}
.qf-drop label small{display:block;font-size:13.5px;line-height:1.45;color:var(--mute);margin-top:2px}
.qf-picked{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0;padding:12px 20px;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink)}
.qf-picked span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qf-picked button{flex:none;border:0;background:transparent;padding:4px 0;font-size:13.5px;font-weight:500;color:var(--ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.qf-foot{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin-top:4px}
.qf-foot .btn,.r .qf-foot .btn{margin-top:0}
.qf-or{font-size:15px;color:var(--mute)}
.qf-or a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.qf-status{margin:0;font-size:15.5px}
.qf-status:empty{display:none}
.qf-status.ok{color:#0F6B3A}.qf-status.err{color:#B3261E}
.qf-note{margin:0;font-size:13px;color:var(--mute)}
.qf-done{padding:12px 0}
.qf-done h3{font-size:clamp(22px,2vw,28px);font-weight:300;margin:22px 0 12px}
.qf-done p{color:var(--mute);margin:0 0 14px;max-width:44ch}
.qf-tick{display:block;width:54px;height:54px;border-radius:50%;background:var(--ink);position:relative}
.qf-tick::after{content:'';position:absolute;left:20px;top:15px;width:12px;height:20px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(42deg)}
.ticks{display:grid;gap:12px;margin-top:28px}
.ticks li{position:relative;padding-left:22px;color:var(--ink-2)}
.ticks li::before{content:'';position:absolute;left:0;top:.62em;width:5px;height:5px;background:var(--ink)}
/* start a job, the left column's foot: the phone, the booking page and the hours, level with the
   foot of the form. It was three lines of text beside a tall form, 'a massive gap bottom left'. */
.direct{border-top:1px solid var(--line-2)}
.direct-row{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 20px;padding:20px 0;border-bottom:1px solid var(--line-2);transition:padding var(--t-ui) var(--e-ui)}
.direct-row:hover{padding-left:10px}
.direct-row strong{font-family:var(--head);font-weight:300;font-size:clamp(19px,1.7vw,24px);color:var(--ink)}
.direct-row .ar{display:inline-block;transition:transform var(--t-ui) var(--e-ui)}
.direct-row:hover .ar{transform:translateX(4px)}
.bookcard{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:16px;padding:26px 30px;border-radius:var(--r-md);background:var(--ink);color:#fff;transition:background var(--t-ui) var(--e-ui)}
.bookcard:hover{background:#000}
.bookcard .mono{display:block;color:var(--on-dark-2)}
.bookcard strong{display:block;font-family:var(--head);font-weight:300;font-size:clamp(19px,1.6vw,23px);margin-top:6px}
.bookcard i{flex:none;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;font-style:normal;font-size:17px;transition:transform var(--t-ui) var(--e-ui)}
.bookcard:hover i{transform:translateX(3px)}

/* ------------------------------------------------------------ inner pages */
.ph{padding:calc(168px + env(safe-area-inset-top,0px)) 0 72px}
.ph-contact{padding-bottom:128px}
.ph-split{padding-bottom:40px}
.ph-split .shot{max-height:min(78vh,760px);margin-left:auto}
.ph-split .statement{max-width:24em}
.crumbs{display:flex;flex-wrap:wrap;gap:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:44px}
.crumbs a{color:var(--ink-2)}.crumbs a:hover{color:var(--ink)}
.ph .r.narrow .statement{font-size:clamp(19px,1.65vw,24px);padding-bottom:.5em}
.ph-media{margin-bottom:0}
.prose h2{font-size:clamp(22px,2vw,28px);font-weight:400;line-height:1.2}
.prose .block{padding:44px 0;border-top:1px solid var(--line-2)}
.prose .block:last-child{border-bottom:1px solid var(--line-2)}
.prose .block p{max-width:60ch}
.prose .block p:last-child{margin-bottom:0}
.prose .ticks{margin-top:18px}
.prose .sub{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);margin:26px 0 0}
.aside{position:relative}
.aside .panel{padding:32px}
.aside .panel p{color:var(--mute);margin:14px 0 22px}
.aside .btn{width:100%}
.aside-tel{display:block;text-align:left;margin-top:14px;font-family:var(--head);font-weight:500;font-size:14px;color:var(--ink)}
.aside-marks{display:grid;gap:8px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.aside-marks li{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips a{padding:11px 20px;border:1px solid var(--line-2);border-radius:var(--r-pill);font-family:var(--head);font-size:14.5px;font-weight:500;color:var(--ink);transition:background var(--t-ui) var(--e-ui),color var(--t-ui) var(--e-ui),border-color var(--t-ui) var(--e-ui)}
.chips a:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* a slider in the middle with its title centred above it; the title's box is only as wide as its words,
   so the red stroke under it stops where the words stop (IFCO page, 9 Oct) */
.sl-mid{max-width:62em;margin-left:auto;margin-right:auto}
.sl-mid-h{text-align:center;margin-bottom:28px}
.sl-mid-h .ttl{display:inline-block;max-width:100%;text-wrap:balance}
.sl-mid .sl-foot{justify-content:center}
.sl-mid .sl-dots{margin-left:0}
.find dt{margin-top:28px}.find dt:first-child{margin-top:0}
.find dd{margin:10px 0 0;font-family:var(--head);font-weight:300;font-size:clamp(22px,2vw,30px);line-height:1.3;color:var(--ink)}
.find dd.small{font-size:clamp(17px,1.4vw,20px)}
.find dd a{border-bottom:1px solid var(--line-2)}
.hours li{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px}
.hours li span:last-child{color:var(--mute)}
.hours.tiny{margin-top:22px}
.hours.tiny li{font-size:14.5px;padding:8px 0;border-bottom:0}

/* ------------------------------------------------------------ photographs one at a time (Brad, 7 Oct, through Miller 9 Oct)
   Ported from the CJB site's slider (8 Oct) and restyled to this site. The track is a row that scrolls
   sideways and snaps to each photograph, so a swipe needs nothing else; slider.js adds the arrows and the
   dots. Every photograph sits in a rounded frame of its own, the label and the arrows are the dark glass of
   the photo tags, and NES red is only on the dot that is showing and on a focus ring. The dots' row holds
   its height from the start (hidden, not gone), so nothing below moves when the script arrives. Every
   button is a 44px target. */
.sl{position:relative;min-width:0}
.sl-view{position:relative}
.sl-track{display:flex;margin:0;padding:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:auto;
  overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;border-radius:var(--r-xl);isolation:isolate}
.sl-track::-webkit-scrollbar{display:none}
.sl-track:focus{outline:none}
.sl-track:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.sl-slide{position:relative;flex:0 0 100%;min-width:0;margin:0;scroll-snap-align:start;scroll-snap-stop:always}
.sl-slide .shot{margin:0}
/* the words on each photograph: plain, and only what is visible */
.sl-tag{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;width:max-content;max-width:calc(100% - 48px);padding:8px 16px;border-radius:var(--r-pill);
  background:rgba(20,23,26,.6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;font-family:var(--mono);font-size:11.5px;line-height:1.4;
  letter-spacing:.08em;text-transform:uppercase;text-align:center;pointer-events:none}
.sl-btn{position:absolute;top:50%;z-index:4;display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;padding:0;border:0;border-radius:50%;
  background:rgba(20,23,26,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;cursor:pointer;transition:opacity .2s var(--e-ui),background .2s var(--e-ui)}
.sl-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sl-prev{left:16px}
.sl-next{right:16px}
.sl-btn:hover{background:rgba(20,23,26,.82)}
.sl-btn:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:50%}
.sl-btn[aria-disabled="true"]{opacity:0;cursor:default}   /* still takes a tap: a quick run of Next taps at the end lands here, not on the track; the handlers stop at the ends */
.sl-btn[aria-disabled="true"]:focus-visible{opacity:.5}         /* still found by the keyboard */
.sl:not(.on) .sl-btn,.sl.one .sl-btn{display:none}
.sl-foot{display:flex;align-items:center;min-height:44px;margin-top:6px}
.sl:not(.on) .sl-foot,.sl.one .sl-foot{visibility:hidden}
.sl-dots{display:flex;flex-wrap:wrap;margin-left:-15px}
.sl-dots button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer}
.sl-dots span{display:block;width:8px;height:8px;border-radius:999px;background:var(--faint);transition:width .25s var(--e-ui),background .25s var(--e-ui)}
.sl-dots button[aria-current="true"] span{width:22px;background:var(--red)}
.sl-dots button:hover span{background:var(--ink)}
.sl-dots button[aria-current="true"]:hover span{background:var(--red-2)}
.sl-dots button:focus-visible{outline:2px solid var(--red);outline-offset:-8px;border-radius:14px}
/* beside a page title (the Design page): the frame keeps the lead photograph's height limit */
.ph-split .sl{max-width:calc(min(78vh,760px) * .8);margin-left:auto}
.ph-split .sl .shot{max-height:none;margin:0}
@media(max-width:1080px){.ph-split .sl{max-width:520px;margin-left:0}}
@media(max-width:680px){
  .sl-prev{left:10px}.sl-next{right:10px}
  .sl-tag{bottom:16px;max-width:calc(100% - 32px);padding:7px 13px;font-size:11px}
}

/* ------------------------------------------------------------ the closing call, an ink panel over a photograph */
.cta{padding:0 0 12px}
.cta-in{position:relative;isolation:isolate;overflow:hidden;margin:0 12px;border-radius:var(--r-lg);background:var(--ink);color:#fff;padding:112px 0}
.cta-bg{position:absolute;inset:0;z-index:-1}
.cta-bg picture,.cta-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,13,15,.90),rgba(11,13,15,.74))}
.cta .cta-say{font-family:var(--head);font-weight:300;font-size:clamp(28px,3.2vw,44px);line-height:1.08;letter-spacing:-.012em;color:#fff;max-width:10em;margin:0}
.cta p{color:rgba(255,255,255,.78);max-width:44ch;margin:0 0 30px;font-size:18px}
.cta-acts{display:flex;flex-wrap:wrap;gap:10px}
.cta .r .btn{margin-top:0}

/* ------------------------------------------------------------ footer. Corporate: full width, square, the page face
   throughout. It was an inset rounded card in mono with numbered lists and a billboard logo,
   Miller: 'I don't really like the font and it just looks a bit weird'. */
.foot{background:var(--onyx);color:#fff;padding:92px 0 0}
.foot-top{display:grid;grid-template-columns:minmax(0,3.3fr) minmax(0,8.7fr);gap:56px 64px}
.foot-logo{display:inline-block}
.foot-logo img{width:172px;height:auto}
.foot-brand p{margin:26px 0 0;max-width:34ch;font-size:15px;line-height:1.7;color:var(--on-dark-2)}
.foot-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.foot-acts .btn{min-height:46px;padding:0 22px;font-size:14px}
.foot-cols{display:grid;grid-template-columns:.8fr .8fr 1.75fr 1.05fr;gap:26px}
.foot-cols>div{min-width:0}
.foot .fh{font-family:var(--head);font-size:12px;line-height:1.3;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--on-dark-2);margin-bottom:22px}
.foot li,.foot address{font-family:var(--body);font-size:14.5px;line-height:1.55;color:#fff}
.foot li{padding:6px 0}
.foot li a{background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;transition:background-size var(--t-ui) var(--e-ui)}
.foot li a:hover{background-size:100% 1px}
.foot-contact{margin-top:14px}
.foot-contact a[href^="mailto"]{white-space:nowrap;font-size:13.5px;letter-spacing:-.01em}
.foot-hours li{padding:0 0 14px}
.foot-hours li span{display:block}
.foot-hours li span:last-child{color:var(--on-dark-2);font-size:14px}
.foot-base{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 32px;margin-top:80px;padding:26px 0 30px;border-top:1px solid var(--on-dark-line);font-size:13px;color:var(--on-dark-2)}
.foot-base p{margin:0;max-width:74ch;line-height:1.6}
.foot-base i{display:inline-block;width:3px;height:3px;border-radius:50%;background:currentColor;margin:0 12px;vertical-align:middle}
.foot-base a{color:#fff;border-bottom:1px solid var(--on-dark-line)}

/* ------------------------------------------------------------ ask NES
   The launcher is a small ink tile with the white mark on it. It stays away while the film has
   the screen and steps aside over the footer. The panel is a chat. */
.ask-btn{position:fixed;right:20px;bottom:20px;z-index:150;display:inline-flex;align-items:center;height:48px;padding:0 15px;border:0;border-radius:15px;background:var(--ink);color:#fff;cursor:pointer;
  transition:background var(--t-ui) var(--e-ui),transform var(--t-ui) var(--e-ui),opacity var(--t-ui) var(--e-ui)}
.ask-btn img{width:60px;height:auto}
.ask-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ask-btn::after{content:'';position:absolute;right:-3px;top:-3px;width:11px;height:11px;border-radius:50%;background:var(--red);border:2px solid var(--canvas)}
.ask-btn:hover{background:#000;transform:translateY(-2px)}
.nav:not(.chip)~.ask-btn,.ask-btn.away{opacity:0;pointer-events:none;transform:translateY(8px)}
.ask-btn.open,.ask-btn:focus-visible{opacity:1;pointer-events:auto;transform:none}
.ask-panel{position:fixed;right:20px;bottom:82px;z-index:151;width:min(400px,calc(100vw - 24px));height:min(620px,calc(100svh - 110px));display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity var(--t-ui) var(--e-ui),transform var(--t-ui) var(--e-ui),visibility 0s linear var(--t-ui)}
.ask-panel.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.ask-top{flex:none;display:flex;align-items:center;gap:14px;padding:16px 16px 16px 18px;background:var(--ink);color:#fff}
.ask-logo{flex:none;display:grid;place-items:center;width:74px;height:44px;border-radius:12px;background:rgba(255,255,255,.10)}
.ask-logo img{width:54px;height:auto}
.ask-top strong{display:block;font-family:var(--head);font-weight:500;font-size:16px;line-height:1.2}
.ask-top span span,.ask-top div span{display:block;font-size:13px;color:var(--on-dark-2);margin-top:2px}
.ask-x{margin-left:auto;flex:none;width:36px;height:36px;border:1px solid rgba(255,255,255,.28);border-radius:50%;background:transparent;color:#fff;font-size:18px;line-height:1;cursor:pointer}
.ask-x:hover{background:#fff;color:var(--ink)}
.ask-thread{flex:1 1 auto;overflow-y:auto;padding:18px 16px 8px;display:flex;flex-direction:column;gap:10px;background:var(--canvas);overscroll-behavior:contain}
.ask-msg{max-width:88%;padding:13px 16px;border-radius:18px;font-size:15px;line-height:1.55}
.ask-msg p{margin:0}
.ask-msg.bot{align-self:flex-start;background:var(--paper);color:var(--ink-2);border-bottom-left-radius:6px}
.ask-msg.me{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:6px}
.ask-msg.typing p{display:flex;gap:5px;padding:5px 2px}
.ask-msg.typing i{width:6px;height:6px;border-radius:50%;background:var(--faint);animation:askdot 1s infinite var(--e-ui)}
.ask-msg.typing i:nth-child(2){animation-delay:.15s}.ask-msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes askdot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.ask-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ask-acts a{display:inline-flex;align-items:center;min-height:38px;padding:0 15px;border-radius:var(--r-pill);border:1px solid var(--line-2);font-family:var(--head);font-size:13px;font-weight:500;color:var(--ink);transition:background var(--t-ui) var(--e-ui),color var(--t-ui) var(--e-ui)}
.ask-acts a:first-child{background:var(--red);border-color:var(--red);color:#fff}
.ask-acts a:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.ask-chips{flex:none;display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px 12px;background:var(--canvas);max-height:132px;overflow-y:auto}
.ask-chips:empty{padding:0}
.ask-chip{border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--paper);padding:8px 14px;font-size:13.5px;line-height:1.3;color:var(--ink);text-align:left;cursor:pointer;transition:background var(--t-micro) var(--e-ui),color var(--t-micro) var(--e-ui),border-color var(--t-micro) var(--e-ui)}
.ask-chip:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.ask-form{flex:none;display:flex;align-items:center;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--paper)}
.ask-form input{flex:1 1 auto;min-width:0;height:46px;padding:0 18px;border:1px solid transparent;border-radius:var(--r-pill);background:var(--canvas);font-size:16px;color:var(--ink)}
.ask-form input:focus{outline:none;border-color:var(--ink);background:var(--paper)}
.ask-form button{flex:none;width:46px;height:46px;border:0;border-radius:50%;background:var(--red);cursor:pointer;display:grid;place-items:center;transition:background var(--t-ui) var(--e-ui)}
.ask-form button:hover{background:var(--red-2)}
.ask-form button svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* the page nobody means to land on */
.lost{min-height:100svh;display:grid;align-items:center;padding:calc(160px + env(safe-area-inset-top,0px)) 0 96px}
.lost b{display:block;font-family:var(--head);font-weight:300;font-size:clamp(90px,16vw,220px);line-height:.9;letter-spacing:-.04em;color:var(--ink)}

/* a big monitor gets a wider column, so the page does not sit small in the middle of it */
@media(min-width:1800px){:root{--maxw:1400px}}

/* ------------------------------------------------------------ smaller screens */
@media(max-width:1080px){
  .pill>a:not(.nav-cta),.pill .has-drop:not(.cta-drop){display:none}
  .pill{padding:4px;gap:0}
  .pill .nav-cta{margin-left:0}
  .burger{display:block}
  .row>.l,.row>.r,.row>.l.wide,.row>.r.narrow{grid-column:1 / -1}
  .row>.l{margin-bottom:28px}
  /* the Services page keeps an empty left column on desktop to offset its prose; stacked, it was a
     blank band framed by a second rule under the service list */
  .row>.l:empty{display:none}
  .row>.l:empty+.prose>.block:first-child{border-top:0}
  .row.end{align-items:start}
  .sec{padding:88px 0}.sec.tight{padding:0 0 88px}
  .sec-head{margin-bottom:44px}
  .l>.ttl{margin-bottom:28px}
  .shot.grow{flex:none;min-height:0;aspect-ratio:4/3}
  .shot.grow.tall{min-height:0;aspect-ratio:3/4;max-width:520px;max-height:none}
  .row>.l.six,.row>.r.five{grid-column:1 / -1}
  .pair.bleed,.mosaic{width:auto;max-width:none;margin-left:12px;margin-right:12px}
  .revwin{min-height:0;height:600px}
  .headrow{margin-bottom:28px}
  .headrow>.l{margin-bottom:0}
  .ph-split .shot{max-height:none;max-width:520px;margin:0}
  .l.stick{position:static}
  .r>.statement+.acc{margin-top:36px}
  .l.spread{gap:36px}
  .cards{grid-template-columns:1fr 1fr}
  .reels{grid-template-columns:repeat(4,minmax(230px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;margin-right:calc(var(--pad) * -1);padding-right:var(--pad);padding-bottom:8px}
  .reel{scroll-snap-align:start}
  .aside{position:static;margin-top:44px}
  .row>.l .nums .num:last-child{border-bottom:0}   /* stacked, the list's last rule met the next block's first rule: two rules, nothing between */
  .revwrap{grid-template-columns:minmax(0,1fr)}
  .revside{position:static}
  .foot-top{grid-template-columns:minmax(0,1fr)}
  .foot-cols{grid-template-columns:1fr 1fr;gap:44px 24px}
  .svc-row{grid-template-columns:44px minmax(0,1fr) 40px}
  .svc-row p{display:none}
  .mosaic{grid-template-columns:1fr 1fr}
  .mosaic .shot.big{grid-column:1 / -1;grid-row:auto;aspect-ratio:16/10;height:auto}
  .ph-contact{padding-bottom:88px}
}
@media(max-width:680px){
  :root{--pad:20px;--r-xl:36px;--r-lg:26px;--r-md:20px}
  body{font-size:16.5px}
  .nav{padding-top:calc(16px + env(safe-area-inset-top,0px))}
  .nav-in{gap:10px}
  .mark{padding:0 14px;min-height:50px;transform:translateX(-14px)}
  .mark img{width:128px}
  .nav.chip .mark img{width:112px}
  .pill .nav-cta{padding:9px 15px;font-size:13px}
  /* the drop arrow was squeezed to a 1.7px speck after 'quote' on every phone: gone on a phone, the tap opens the menu anyway */
  .nav .nav-cta svg{display:none}
  /* translateX moves the mark but frees none of its width, so the bar was 16px wider than a 360 phone */
  .nav:not(.chip) .mark{margin-right:-14px}
  /* the opening hours' first row broke onto two lines at 360 */
  .hours li{font-size:15px}
  .cta-drop .drop{min-width:min(320px,calc(100vw - 40px))}
  .burger{width:42px;height:42px}
  .burger span,.burger::before,.burger::after{left:12px;right:12px}
  .burger span{top:20px}.burger::before{top:14px}.burger::after{top:26px}
  .hero{min-height:560px}
  /* On a phone the type lands across the middle of the photograph. This shade is for the narrow
     crop only, and the contrast behind the type is MEASURED at 375, not assumed. */
  .hero::after{background:linear-gradient(to top,rgba(11,13,15,.94) 0%,rgba(11,13,15,.86) 36%,rgba(11,13,15,.62) 58%,rgba(11,13,15,.18) 78%,rgba(11,13,15,0) 92%),linear-gradient(to bottom,rgba(11,13,15,.46) 0%,rgba(11,13,15,0) 20%)}
  /* the narrow crop is taken where the ARC is, so the phone sees the thing that moves */
  .hero-media img,.hero-film{object-position:50% 50%}
  .hero-in{padding-bottom:28px}
  /* Miller's phone, 22 Sept: the hero stopped at the SMALL viewport, so the page under it showed
     behind the phone's floating toolbar. The film now runs to the full screen (lvh, the height with
     the toolbars away). On a desktop lvh and svh are the same, nothing changes. */
  @supports (height:100lvh){
    .hero{--sv:100svh;--lv:100lvh;height:var(--lv)}
    /* The first try lifted the words by (lvh - svh), and on Miller's phone that came to nothing and
       the buttons sat behind the toolbar: Safari reports svh EQUAL to lvh when the tab bar is tucked
       away at load (WebKit bug 261185). So the words and buttons are now placed from the TOP of the
       hero, in a box that ends at the lower of two lines: 28px above the small viewport, or 120px
       above the large one. Whichever the phone reports, the buttons clear the toolbar. */
    .hero-in{top:0;bottom:auto;height:min(calc(var(--sv) - 28px),calc(var(--lv) - 120px));padding-bottom:0}
  }
  /* Who we are: on a phone the words sit centred under the photograph (Miller, 22 Sept) */
  .who .r{text-align:center}
  .who .statement{text-wrap:balance}
  .who .marks{justify-content:center}
  /* Ask NES on a phone: the whole screen, so the answer has room. The suggestions are ONE row that
     swipes sideways, instead of a box that cut its own buttons in half and squeezed the answer. */
  .ask-top{padding-top:max(16px,env(safe-area-inset-top))}
  .ask-chips{flex-wrap:nowrap;max-height:none;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;padding:10px 16px}
  .ask-chips::-webkit-scrollbar{display:none}
  .ask-chip{flex:none;white-space:nowrap}
  .ask-form{padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .ask-btn.open{opacity:0;pointer-events:none}
  html:has(.ask-panel.open){overflow:hidden}
  .hero-sub{font-size:16.5px}
  .hero-acts .btn{flex:1 1 auto}
  /* stood next to a broken machine, the number has to be one tap, not inside the menu */
  .hero-call{display:inline-flex}
  .hero-work{display:none}
  .sec{padding:68px 0}.sec.tight{padding:0 0 68px}
  .ttl{font-size:clamp(32px,9.4vw,42px)}
  /* page titles on a phone sit within a few pixels of each other, so moving between pages the heading does not jump */
  .ttl.xl{font-size:clamp(40px,12.4vw,56px)}
  .ttl.xl.long{font-size:clamp(38px,11vw,52px)}
  .ttl.xl.longer{font-size:clamp(30px,8.4vw,40px)}
  .pair{grid-template-columns:1fr;gap:12px}
  .pair.bleed,.mosaic{margin-left:8px;margin-right:8px}
  .tag{bottom:16px}
  .cards,.gallery,.nums.inline{grid-template-columns:1fr}
  .card .mono{min-height:0}
  .mosaic{grid-template-columns:1fr;gap:8px}
  .mosaic .shot.wide{aspect-ratio:16/10}
  .marks{gap:14px 18px;flex-wrap:nowrap}
  .marks .laurel{height:38px}
  .marks .badge{height:30px}
  .marks .badge.round{height:48px}
  .revcol.a,.revcol.b{display:none}
  .revcol.all{display:block}
  .revwin{height:540px}
  .hero-card{display:none}
  .rev,.gw{padding:26px}
  .panel{padding:24px}
  .qf-row{grid-template-columns:1fr}
  .qf-want{grid-template-columns:minmax(0,1fr)}
  .bookcard{padding:22px}
  .ph{padding:calc(128px + env(safe-area-inset-top,0px)) 0 48px}
  .cta-in{margin:0 8px;padding:72px 0}
  .foot{padding:64px 0 0}
  .foot-base{margin-top:56px;flex-direction:column;align-items:flex-start}
  .foot-base i{display:block;width:0;height:0;margin:3px 0;background:none}   /* each item on its own line, no separator dot left hanging at a wrap */
  .foot-cols>div:nth-child(3),.foot-cols>div:nth-child(4){grid-column:1 / -1}
  .ask-btn{right:12px;bottom:12px}
  .ask-panel{left:0;right:0;top:0;bottom:auto;width:auto;height:100dvh;border:0;border-radius:0;z-index:210}   /* full screen on a phone, ABOVE the bar (200), see the 680px block */
  .acc-panel p,.acc-panel .more{padding-left:0;margin-left:0}
  .acc-btn .n{display:none}
}
/* Short phone screens (an SE, a Galaxy with its bars showing): the headline, the line under it and
   the three buttons have to fit between the bar and the toolbar, so the type and the gaps tighten.
   Measured: at 375 by 600 the stack was 470px tall with 400px to put it in. */
@media(max-width:680px) and (max-height:760px){
  .hero h1{font-size:31px}
  .hero-sub{font-size:15px;margin-top:12px}
  .hero-acts{margin-top:18px;gap:8px}
  .hero-acts .btn{min-height:46px;padding:0 16px}
}
@media(max-width:680px) and (max-height:640px){
  .hero h1{font-size:27px}
  .hero-sub{margin-top:10px}
  .hero-acts{margin-top:14px}
}
/* the narrowest phones: the bar keeps the mark and the menu button. The quote button is in the
   hero, in the menu and on every page, so nothing is lost. */
/* 360 is the commonest Android width: the red button stays in the bar and the mark gives way */
@media(max-width:370px){.mark img{width:108px}.nav.chip .mark img{width:100px}}
@media(max-width:350px){.pill .nav-cta{display:none}}

/* ------------------------------------------------------------ motion. KEEP THIS BLOCK LAST.
   Nothing is hidden unless html.mo is set by the inline line in the head. If the observer never
   reports, motion.js sets html.mo-all and everything shows with NO transition: a fade needs
   frames, and a hidden tab, a screenshot tool or a crawler draws none. */
.mo .rv{opacity:0;transform:translateY(26px);transition:opacity var(--t-reveal) var(--e-expo),transform var(--t-reveal) var(--e-expo);transition-delay:calc(var(--i,0) * var(--stagger))}
.mo .rv.in{opacity:1;transform:none}
.mo .shot.rv{transform:none;clip-path:inset(8% 6% 8% 6% round var(--r-xl));transition:opacity 1.2s var(--e-expo),clip-path 1.4s var(--e-expo);transition-delay:calc(var(--i,0) * var(--stagger))}
.mo .shot.rv.in{clip-path:inset(0 0 0 0 round var(--r-xl))}
.mo .ttl .ttl-u path{stroke-dashoffset:1}
.mo .ttl.in .ttl-u path{stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--e-wipe) .35s}
/* hero type arrives on LOAD, never on scroll. The scroll observer ignores the bottom 7% of the
   screen, exactly where the buttons sit, so they stayed hidden until the visitor scrolled. An
   animation runs on the clock, so it also finishes in a tab nobody is looking at. */
.mo .hv{opacity:0;animation:hv 1.1s var(--e-expo) both;animation-delay:calc(var(--i,0) * 90ms + 120ms)}
@keyframes hv{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.mo-all .rv,.mo-all .shot.rv{opacity:1;transform:none;clip-path:none;transition:none}
.mo-all .ttl .ttl-u path{stroke-dashoffset:0;transition:none}
.mo-all .hv{opacity:1;animation:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mo .rv,.mo .shot.rv{opacity:1;transform:none;clip-path:none;transition:none}
  .mo .hv{opacity:1;animation:none}
  .mo .ttl .ttl-u path{stroke-dashoffset:0;transition:none}
  .mo .reveal-words .w{opacity:1;transition:none}
  .acc-panel,.acc-shot,.btn,.shot img,.mark,.mark img{transition:none}
  .hero-film{display:none}
  .ask-msg.typing i{animation:none}
  .revtrack{animation:none}
  .revset[aria-hidden]{display:none}
  .revwin{height:auto;min-height:0;overflow:visible;-webkit-mask-image:none;mask-image:none;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;cursor:auto}
  .revcol,.revcol.a,.revcol.b,.revcol.all{position:static;width:auto;overflow:visible}
  .revcol.all{grid-column:1 / -1}
  .sl-dots span,.sl-btn{transition:none}
}
/* paper never scrolls, so nothing may wait for a scroll to appear */
@media print{.mo .rv,.mo .shot.rv,.mo .hv{opacity:1!important;transform:none!important;clip-path:none!important;animation:none!important}.mo .ttl .ttl-u path{stroke-dashoffset:0!important}.mo .reveal-words .w{opacity:1!important}.nav,.ask-btn,.ask-panel{display:none!important}}
/* the company's social accounts, under the footer's buttons (25 Sept) */
.foot-social{margin-top:34px}
.foot-social .fh{margin-bottom:14px}
.foot-social ul{display:flex;gap:10px;list-style:none;margin:0;padding:0}
.foot-social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#fff;border:1px solid var(--on-dark-line);
  background:rgba(255,255,255,.04);transition:background .25s,border-color .25s,color .25s}
.foot-social a:hover{background:#fff;border-color:#fff;color:var(--ink)}
.foot-social a:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.foot-social svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Home hero title, 14 Oct */
/* THE HERO TITLE. Brad at the go-live meeting, 14 Oct, through Miller: Wigan comes off the headline.
   The name on top in the title face (the same face as every inner page title), his line under it,
   and Standish, Wigan on a small line of its own above. Phone sizes are set HERE, after the desktop
   ones, because a span's own font-size is not reached by the older .hero h1 phone rules. */
.hero-kick{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.11em;line-height:1.3;text-transform:uppercase;color:rgba(255,255,255,.86)}
.hero-kick::before{content:'';width:5px;height:5px;background:var(--red);flex:none}
.hero .hero-h1{max-width:none}
.hero-name{display:block;font-family:var(--title);font-weight:500;font-size:clamp(44px,5.6vw,82px);line-height:.94;letter-spacing:.012em;text-transform:uppercase;max-width:10em;text-wrap:balance}
.hero-line{display:block;margin-top:18px;font-family:var(--head);font-weight:300;font-size:clamp(19px,1.85vw,27px);line-height:1.3;letter-spacing:-.008em;max-width:27em;color:rgba(255,255,255,.94);text-wrap:pretty}
.hero .hero-sub{margin-top:16px}
@media(max-width:680px){
  .hero-kick{margin-bottom:12px}
  .hero-name{font-size:clamp(38px,11vw,50px);max-width:none}
  .hero-line{font-size:17px;margin-top:12px}
}
@media(max-width:680px) and (max-height:760px){.hero-kick{margin-bottom:8px}.hero-name{font-size:36px}.hero-line{font-size:15.5px;margin-top:10px}}
@media(max-width:680px) and (max-height:640px){.hero-name{font-size:31px}.hero-line{font-size:14.5px;margin-top:8px}}

/* Pages: accreditations, social value, design cross-fade, 14 Oct */
/* Brad's go-live meeting, 14 Oct. One block, appended last, so it is the one place these live.
   ABOUT is a drop down now (About us, Social value), the twin of Services. Its trigger is lit on both
   pages under it; on Social value it says aria-current="true", not "page", because it links to About. */
.pill .has-drop>a[aria-current="true"]{background:rgba(255,255,255,.13)}
.drop a[aria-current="page"]{background:var(--canvas)}
.about-drop .drop{min-width:360px}

/* THE ACCREDITATIONS. The marks, their names and the scheme's own word, and a certificate link under a
   mark only when its PDF is on the site (chrome.cert_href). On the light page the marks sit straight on
   the page, no tile; in the footer, on the ink, each sits on a white tile. */
.accred-marks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:18px 44px}
.am{display:flex;align-items:center;gap:18px;min-width:0}
.am-logo{flex:none;display:flex;align-items:center;justify-content:center}
.am-logo img{width:auto;max-width:none}
.am-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.am-txt strong{font-family:var(--head);font-weight:500;font-size:15.5px;line-height:1.25;color:var(--ink)}
.am-txt>span{font-family:var(--mono);font-size:11.5px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.am-doc{align-self:flex-start;display:inline-flex;align-items:center;min-height:32px;margin-top:6px;font-family:var(--head);font-size:14px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--line-2);transition:border-color var(--t-ui) var(--e-ui)}
.am-doc:hover{border-color:currentColor}
/* the band on every service page: a white section of its own, the title, the line and the note left,
   the two marks big on the right, side by side with a rule between, each name centred under its mark */
.accred-sec{padding:104px 0}
.accred-sec .l>.ttl{margin-bottom:28px}
.accred-say{font-family:var(--head);font-weight:300;font-size:clamp(21px,2.05vw,29px);line-height:1.3;letter-spacing:-.008em;color:var(--ink);margin:0;max-width:15em}
.accred-note{margin:20px 0 0;max-width:40ch;font-size:15.5px;color:var(--mute)}
.accred .accred-marks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.accred .am{flex-direction:column;align-items:center;justify-content:flex-end;gap:22px;padding:40px 20px 36px;text-align:center}
.accred .am+.am{border-left:1px solid var(--line-2)}
.accred .am-logo{height:124px;align-items:center;justify-content:center}
.accred .am-chas .am-logo img{height:74px}
.accred .am-safecontractor .am-logo img{height:124px}
.accred .am-txt{align-items:center}
.accred .am-doc{align-self:center}
/* the white band sits between two light sections: the one after it needs its own top space back, and a
   closing call straight after it keeps a gap the width of its own side margins */
.accred-sec+.sec.tight{padding-top:128px}
.sec.paper+.cta{padding-top:12px}
/* the footer: a row of its own above the legal line, lined up with the columns above it */
.foot-accred{display:grid;grid-template-columns:minmax(0,3.3fr) minmax(0,8.7fr);gap:22px 64px;align-items:center;margin-top:76px;padding-top:40px;border-top:1px solid var(--on-dark-line)}
.foot-accred .fh{margin-bottom:12px}
.fa-head p{margin:0;max-width:30ch;font-size:14.5px;line-height:1.6;color:var(--on-dark-2)}
.foot-accred+.foot-base{margin-top:40px}
.accred-marks.on-ink .am-logo{width:136px;height:88px;border-radius:var(--r-sm);background:#fff}
.accred-marks.on-ink .am-chas .am-logo img{height:42px}
.accred-marks.on-ink .am-safecontractor .am-logo img{height:70px}
.accred-marks.on-ink .am-txt strong{color:#fff}
.accred-marks.on-ink .am-txt>span{color:var(--on-dark-2)}
.accred-marks.on-ink .am-doc{color:#fff;border-color:var(--on-dark-line)}
.accred-marks.on-ink .am-doc:hover{border-color:#fff}

/* THE DESIGN PAGE CROSS-FADE (chrome.crossfade, assets/crossfade.js). Both states in one 4 to 5 frame. The
   new one fades in OVER the old one, which drops away only once it is covered, so there is no grey dip
   half way. The toggle on the photograph is the dark glass of the photo tags; the state that is up is
   white, and the red line under it is the time left before the next one. Every button is a 44px target. */
.xf{position:relative;min-width:0}
.xf-state{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1s var(--e-ui)}
.xf-state.on{opacity:1}
.xf-state.top{z-index:1}
.xf-state picture{position:absolute;inset:0;display:block}
.xf-state img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.xf.on .xf-frame{cursor:pointer}
.xf-bar{position:absolute;left:50%;bottom:24px;z-index:3;display:none;gap:2px;padding:4px;transform:translateX(-50%);border-radius:var(--r-pill);
  background:rgba(20,23,26,.6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.xf.on .xf-bar{display:flex}
.xf-bar button{position:relative;min-width:104px;height:44px;padding:0 20px;border:0;border-radius:var(--r-pill);background:transparent;color:#fff;cursor:pointer;overflow:hidden;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;transition:background var(--t-ui) var(--e-ui),color var(--t-ui) var(--e-ui)}
.xf-bar button:hover{background:rgba(255,255,255,.14)}
.xf-bar button[aria-pressed="true"]{background:#fff;color:var(--ink)}
.xf-bar button:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:var(--r-pill)}
.xf-tick{position:absolute;left:22px;right:22px;bottom:8px;height:2px;border-radius:2px;background:var(--red);transform:scaleX(0);transform-origin:left center;opacity:0}
.xf-bar button.run .xf-tick{opacity:1;animation:xftick 4s linear forwards}
.xf.paused .xf-bar button.run .xf-tick{animation-play-state:paused}
.xf.held .xf-tick,.xf.still .xf-tick{display:none}
.xf.still .xf-state{transition:none}
@keyframes xftick{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* beside the page title, the same size the slider had */
.ph-split .xf{max-width:calc(min(78vh,760px) * .8);margin-left:auto}
.ph-split .xf .shot{max-height:none;margin:0}

@media(max-width:1080px){
  .ph-split .xf{max-width:520px;margin-left:0}
  .foot-accred{grid-template-columns:minmax(0,1fr);margin-top:56px}
  .accred-sec{padding:88px 0}
  .accred-sec+.sec.tight{padding-top:88px}
  .accred-sec .l{margin-bottom:36px}
}
@media(max-width:680px){
  /* bottom left on a phone, clear of the Ask button in the bottom right corner */
  .xf-bar{bottom:14px;left:14px;transform:none}
  .xf-bar button{min-width:88px;padding:0 15px}
  .accred-sec{padding:68px 0}
  .accred-sec+.sec.tight{padding-top:68px}
  .accred .am{padding:28px 8px 24px;gap:16px}
  .accred .am-logo{height:88px}
  .accred .am-chas .am-logo img{height:50px}
  .accred .am-safecontractor .am-logo img{height:88px}
  .accred-marks.on-ink{flex-direction:column;gap:14px}
  .accred-marks.on-ink .am-logo{width:120px;height:78px}
  .accred-marks.on-ink .am-chas .am-logo img{height:38px}
  .accred-marks.on-ink .am-safecontractor .am-logo img{height:62px}
  .foot-accred{margin-top:48px;padding-top:32px}
}
@media(prefers-reduced-motion:reduce){
  .xf-state{transition:none}
  .xf-tick{display:none}
}

/* Home work map, 14 Oct */
/* WHERE WE'VE WORKED (build/workmap.py, assets/workmap.js). Miller, 14 Oct: a flat map. Three white
   plates on the canvas, like sheets of a drawing: the North West leads, the UK and the USA sit
   beside it, and the panel on the right holds the numbered list, which a press swaps for the job's
   card. The maps are inline SVG built from open boundary data; the pins are HTML buttons laid over
   them at percentages, so they stay put at any width, and a badge that is offset from its spot
   (two spots too close for two badges) keeps a leader line back to it. */
/* the three columns are one height: the plates stretch and each map sits centred in its plate */
.wm{display:grid;grid-template-columns:5fr 4fr 3fr;gap:24px;align-items:stretch}
.wm-far{display:flex;flex-direction:column;gap:24px}
.wm-far .wm-plate{flex:1 1 auto}
.wm-plate{display:flex;flex-direction:column;margin:0;padding:22px 24px 24px;background:var(--paper);border-radius:var(--r-lg);min-width:0}
.wm-head{display:flex;flex-direction:column;gap:6px;margin:0 0 18px}
.wm-head strong{font-family:var(--head);font-weight:400;font-size:15.5px;line-height:1.35;color:var(--ink)}
.wm-map{position:relative;width:100%;margin:auto 0}
.wm-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:hidden}
.wm-svg path,.wm-svg use{vector-effect:non-scaling-stroke}
.wm-land{fill:#E3E6E8;stroke:rgba(20,23,26,.22);stroke-width:.8;stroke-linejoin:round}
.wm-reg{fill:rgba(239,63,86,.13);stroke:rgba(198,42,64,.6);stroke-width:1;stroke-linejoin:round}
.wm-bdr{fill:none;stroke:rgba(20,23,26,.32);stroke-width:.8;stroke-linejoin:round;stroke-linecap:round}
.wm-area{fill:rgba(239,63,86,.14);stroke:rgba(198,42,64,.6);stroke-width:1;stroke-linejoin:round;transition:fill var(--t-ui) var(--e-ui)}
.wm-area:hover{fill:rgba(239,63,86,.26)}
.wm-area.on{fill:rgba(239,63,86,.34)}
/* county and region names: fixed-size type laid over the map, never scaled with it */
.wm-lbl{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);pointer-events:none}
.wm-lbl.end{transform:translate(-100%,-50%)}
/* THE PINS. The button is a point at the true spot; everything it shows hangs off that point. */
/* the page's own scroll-padding-top (124px) already keeps a scrolled-to thing clear of the fixed bar */
.wm-pin{position:absolute;width:0;height:0;padding:0;border:0;background:none;overflow:visible;cursor:pointer;z-index:2;outline:none;scroll-margin:20px 0 90px;--ox:0px;--oy:0px;--ll:0px;--la:0deg}
.wm-pin:hover,.wm-pin.hov,.wm-pin:focus-visible{z-index:4}
.wm-pin.on{z-index:3}
.wm-pin .ld{position:absolute;left:0;top:0;width:var(--ll);height:1px;background:var(--ink);opacity:.55;transform-origin:0 50%;transform:rotate(var(--la));pointer-events:none}
.wm-pin.off::after{content:'';position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.wm-pin .bal{position:absolute;left:var(--ox);top:var(--oy);display:inline-flex;align-items:center;gap:0;min-height:44px;transform:translate(-14px,-50%);white-space:nowrap}
.wm-pin.l .bal{flex-direction:row-reverse;transform:translate(calc(14px - 100%),-50%)}
.wm-pin .bal b{flex:none;width:28px;height:28px;border-radius:50%;background:var(--red-btn);border:2px solid #fff;color:#fff;display:grid;place-items:center;
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:0;line-height:1;transition:box-shadow var(--t-ui) var(--e-ui),background var(--t-ui) var(--e-ui)}
.wm-pin.home .bal b{background:var(--ink)}
.wm-pin.home .bal b svg{width:16px;height:16px;fill:#fff}
.wm-pin .pn{padding:5px 9px;margin-left:6px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--line-2);color:var(--ink);
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;line-height:1.2;transition:background var(--t-ui) var(--e-ui),color var(--t-ui) var(--e-ui),border-color var(--t-ui) var(--e-ui)}
.wm-pin.l .pn{margin:0 6px 0 0}
/* the two small plates carry long names in a narrow column, so their type is a size down */
.wm-far .pn{font-size:9px;letter-spacing:.05em;padding:4px 8px}
.wm-pin:hover .bal b,.wm-pin.hov .bal b,.wm-pin:focus-visible .bal b,.wm-pin.on .bal b{box-shadow:0 0 0 4px rgba(239,63,86,.28)}
.wm-pin.home:hover .bal b,.wm-pin.home:focus-visible .bal b,.wm-pin.home.on .bal b{box-shadow:0 0 0 4px rgba(20,23,26,.2)}
.wm-pin:hover .pn,.wm-pin.hov .pn,.wm-pin.on .pn{background:var(--ink);border-color:var(--ink);color:#fff}
.wm-pin:focus-visible .pn{outline:2px solid var(--red);outline-offset:2px}
.wm-pin.on .bal b{background:var(--red-2)}
.wm-pin.home.on .bal b{background:var(--ink)}
/* while one pin is open the others step back, so its name never sits on a readable neighbour */
.wm-map:has(.wm-pin.on) .wm-pin:not(.on):not(:hover):not(:focus-visible){opacity:.55}
/* the scale bar, a share of the map's width so it is true at any size */
.wm-scale{position:absolute;left:0;bottom:0;height:5px;border:1px solid var(--ink);border-top:0;opacity:.6}
.wm-scale span{position:absolute;left:0;bottom:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
/* THE PANEL: the list, or the one open card, in the same white plate */
.wm-panel{padding:22px 24px 24px;background:var(--paper);border-radius:var(--r-lg);min-width:0}
.wm-lead-in{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}
.wm-lead-in .say-pin{font-size:13.5px;line-height:1.4;color:var(--mute)}
.wm-groups,.wm-rows{list-style:none;margin:0;padding:0}
.wm-grp{margin-top:10px}
.wm-grp h3{margin:0 0 2px;font-weight:400}
.wm-rows{border-top:1px solid var(--line-2)}
.wm-row{display:grid;grid-template-columns:30px minmax(0,1fr) 30px;gap:0 10px;align-items:center;width:100%;padding:9px 0;border-bottom:1px solid var(--line);color:var(--ink);text-align:left;cursor:pointer}
.wm-row .n{font-family:var(--mono);font-size:11px;color:var(--mute);letter-spacing:.08em}
.wm-row strong{display:block;font-family:var(--head);font-weight:500;font-size:14.5px;line-height:1.3}
.wm-row small{display:block;margin-top:2px;font-size:12px;line-height:1.4;color:var(--mute)}
.wm-row .ar{width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font-size:13px;transition:background var(--t-ui) var(--e-ui),border-color var(--t-ui) var(--e-ui),color var(--t-ui) var(--e-ui)}
.wm-row.on .n,.wm-row.on strong{color:var(--red-2)}
.wm-row.on .ar,.wm-row:hover .ar,.wm-row:focus-visible .ar{background:var(--ink);border-color:var(--ink);color:#fff}
.wm-row:focus-visible{outline:2px solid var(--red);outline-offset:-2px;border-radius:4px}
.wm-row.home{margin-top:14px;border-top:1px solid var(--line-2)}
.wm-row.home .n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink)}
.wm-row.home .n svg{width:14px;height:14px;fill:#fff}
.wm-card{position:relative;scroll-margin:0 0 80px}
.wm-card:focus{outline:none}
.wm-fig{margin:0;min-width:0}
.wm-fig figcaption{margin-top:7px;font-size:11.5px;line-height:1.35;color:var(--mute)}
.wm-fig img.wm-top{object-position:50% 12%}
.wm-body{margin-top:16px;padding-right:4px}
.wm-body .mono{display:block}
.wm-body h3{margin:8px 0 0;font-family:var(--head);font-weight:500;font-size:16.5px;line-height:1.3}
.wm-body p{margin:10px 0 0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.wm-body .more{margin-top:14px}
.wm-x{position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;border-radius:50%;background:rgba(20,23,26,.72);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0;transition:background var(--t-ui),color var(--t-ui)}
.wm-x:hover,.wm-x:focus-visible{background:var(--ink)}
.wm-x:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.wm-credit{margin:28px 0 0;font-size:12px;line-height:1.5;color:var(--mute);max-width:70ch}
@media(max-width:1080px){
  .wm{grid-template-columns:1fr 1fr}
  .wm-lead{grid-column:1}
  .wm-far{grid-column:2}
  .wm-panel{grid-column:1 / -1}
  .wm-groups{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
  /* the maps are smaller from here down, so a cluster takes its shorter offsets and the names a size down */
  .wm-pin .bal{left:var(--mox,var(--ox));top:var(--moy,var(--oy))}
  .wm-pin .ld{width:var(--mll,var(--ll));transform:rotate(var(--mla,var(--la)))}
  .wm-pin .pn{font-size:9px;letter-spacing:.05em;padding:4px 8px}
}
@media(max-width:680px){
  .wm{grid-template-columns:1fr;gap:16px}
  .wm-lead,.wm-far,.wm-panel{grid-column:1}
  .wm-far{gap:16px}
  .wm-plate,.wm-panel{padding:18px 18px 20px;border-radius:var(--r-md)}
  .wm-groups{grid-template-columns:1fr}
  .wm-pin .bal b{width:30px;height:30px}
  .wm-pin .bal{transform:translate(-15px,-50%)}
  .wm-pin.l .bal{transform:translate(calc(15px - 100%),-50%)}
  /* the card has to fit between the bar and the Ask NES button on a short phone, so the photo is 3 to 2 */
  .wm-fig .shot{aspect-ratio:3/2}
  .wm-body p{font-size:13.5px}
  .wm-credit{font-size:11.5px}
}
@media(prefers-reduced-motion:reduce){
  .wm-area,.wm-pin .bal b,.wm-pin .pn,.wm-row .ar,.wm-x{transition:none}
}

/* Work map spacing, critic round, 14 Oct */
/* Greater Manchester's name sits on two lines, centred, inside the county, clear of the Wigan pins
   (build/workmap.py); Merseyside is not named. Warrington's badge sits on its spot on a desktop and
   steps off it on a phone, so its spot's dot shows only where the badge has stepped off. */
.wm-lbl.two{text-align:center;line-height:1.3}
@media(max-width:1080px){
  .wm-pin.offm::after{content:'';position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--ink)}
  /* the maps are smaller from here down: the names a size down, like the pins' names, so Greater
     Manchester fits inside its county on a tablet and a phone */
  .wm-lbl{font-size:9px;letter-spacing:.05em}
}

/* Map card and footer marks round three, 15 Oct */
/* THE MAP CARD (build/workmap.py, assets/workmap.js). Miller, 15 Oct, on the live build: the card in the
   tall panel left a big blank under it. The list now stays in the panel, and the card comes up OVER the
   maps beside the pressed pin, as tall as what it holds, with a point on its edge back to the pin. A job
   with several pins (IFCO) is one card: all its pins light up and the card lists its sites, the pressed
   one marked. On a phone the card is a sheet up from the bottom of the screen over a dimmed page. */
.wm{position:relative}
.wm-cards{position:absolute;left:0;top:0;z-index:20;width:min(368px,calc(50% - 24px));padding:12px 12px 22px;background:var(--paper);border-radius:var(--r-lg);
  box-shadow:0 1px 2px rgba(20,23,26,.08),0 22px 56px rgba(20,23,26,.24);--ay:40px;transition:opacity .22s var(--e-ui),transform .22s var(--e-ui)}
.wm-cards[hidden]{display:none}
@starting-style{.wm-cards{opacity:0;transform:translateY(6px)}}
/* the point on the card's edge, level with the pin */
.wm-cards::before{content:'';position:absolute;top:var(--ay);width:14px;height:14px;background:var(--paper);border-radius:2px;transform:translateY(-50%) rotate(45deg);display:none}
.wm-cards.to-r::before{display:block;left:-6px}
.wm-cards.to-l::before{display:block;right:-6px}
/* a short laptop screen: the card keeps to the screen's height and scrolls inside itself, with no point */
.wm-cards.tall{overflow-y:auto;overscroll-behavior:contain}
.wm-cards.tall::before{display:none}
/* the photograph never takes more than its share of a wide card */
.wm-cards .wm-fig .shot{width:100%;max-height:min(210px,25vh)}
.wm-cards .wm-fig .shot{aspect-ratio:3/2;border-radius:calc(var(--r-lg) - 10px)}
.wm-cards .wm-fig figcaption{margin:8px 4px 0}
.wm-cards .wm-body{margin-top:14px;padding:0 8px}
.wm-cards .wm-body h3{margin-top:7px;font-size:17px}
.wm-cards .wm-body p{margin-top:8px}
.wm-cards .wm-body .more{margin-top:16px}
/* a job's sites, by country, each with its pin's number; the pressed one is marked like its pin */
.wm-sites{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.wm-sh{display:block;color:var(--ink)}
.wm-sgs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 10px;margin-top:10px}
/* a narrow card (a small laptop) lists the two countries one above the other */
.wm-cards{container-type:inline-size}
@container (max-width:262px){.wm-sgs{grid-template-columns:minmax(0,1fr);gap:10px}}
.wm-sg ul{list-style:none;margin:6px 0 0;padding:0}
.wm-sg li{display:flex;align-items:center;gap:6px;min-height:26px;font-size:13px;line-height:1.25;color:var(--ink-2);white-space:nowrap}
.wm-sg li .n{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid var(--line-2);font-family:var(--mono);font-size:9.5px;line-height:1;color:var(--mute)}
.wm-sg li.on{color:var(--red-2)}
.wm-sg li.on .n{background:var(--red-2);border-color:var(--red-2);color:#fff;box-shadow:0 0 0 3px rgba(239,63,86,.22)}
/* while a job is open its pins, rows and areas are lit, every other pin steps back, and only the
   pressed pin wears the ring */
.wm.has-open .wm-pin:not(.on):not(:hover):not(:focus-visible){opacity:.5}
.wm-pin.on:not(.here):not(:hover):not(:focus-visible) .bal b{box-shadow:none}
.wm-pin.here{z-index:5}
.wm-row.on:not(.here):not(:hover):not(:focus-visible) .ar{background:none;border-color:var(--line-2);color:var(--ink)}
/* on a desktop the card stands over the list, so the list steps right back behind it */
.wm-list{transition:opacity .22s var(--e-ui)}
.wm.dock-list .wm-list{opacity:.28}
.wm-scrim{position:fixed;inset:0;z-index:170;background:rgba(11,13,15,.46)}
.wm-scrim[hidden]{display:none}
@media(max-width:680px){
  .wm-cards{position:fixed;left:0 !important;right:0;top:auto !important;bottom:0;z-index:180;width:auto !important;max-height:calc(100svh - 76px);overflow-y:auto;overscroll-behavior:contain;
    padding:24px 16px calc(20px + env(safe-area-inset-bottom,0px));border-radius:22px 22px 0 0;box-shadow:0 -14px 44px rgba(11,13,15,.28);transition:transform .3s var(--e-ui),opacity .2s var(--e-ui)}
  @starting-style{.wm-cards{opacity:.6;transform:translateY(48px)}}
  /* the sheet's grab bar in place of the point */
  .wm-cards::before,.wm-cards.to-r::before,.wm-cards.to-l::before{display:block;left:50%;right:auto;top:10px;width:40px;height:4px;border-radius:2px;background:var(--line-2);transform:translateX(-50%)}
  .wm-cards .wm-fig .shot{aspect-ratio:16/9}
  .wm-cards .wm-body{padding:0 4px}
}
/* a short phone: the photograph a little shallower so the whole card fits the sheet */
@media(max-width:680px) and (max-height:740px){
  .wm-cards .wm-fig .shot{aspect-ratio:7/3}
  .wm-cards .wm-body{margin-top:12px}
  .wm-sites{margin-top:12px;padding-top:12px}
  .wm-sg li{min-height:23px}
}
@media(prefers-reduced-motion:reduce){
  .wm-cards,.wm-list{transition:none}
}
/* THE FOOTER'S MARKS (chrome.ACCRED_ON_INK). Miller, 15 Oct: "get rid of that white box". Both marks sit
   straight on the black, white reversed artwork with its own edges, no tile, each name beside it. */
.accred-marks.on-ink .am-logo{width:84px;height:76px;background:none;border-radius:0;justify-content:center}
.accred-marks.on-ink .am-chas .am-logo img{width:84px;height:auto}
.accred-marks.on-ink .am-safecontractor .am-logo img{width:76px;height:76px}
@media(max-width:680px){
  .accred-marks.on-ink .am-logo{width:78px;height:70px}
  .accred-marks.on-ink .am-chas .am-logo img{width:78px;height:auto}
  .accred-marks.on-ink .am-safecontractor .am-logo img{width:70px;height:70px}
}

/* Social value and jobs round three, 15 Oct */
/* Miller saw round two live (15 Oct): "titles and subtitles everywhere, it doesn't look like a well put
   together page". The Social value page is now the title and its line, FOUR tiles of one anatomy in a
   two by two grid (pages.render_social_value), then the closing band. Apprenticeships has a page of its
   own (pages.render_apprenticeships) and the two jobs pages (pages.render_jobs, render_vacancy) are cut
   to the same cloth. Rounds one and two's Social value rules are removed: this block is the only one. */

/* THE TILES. One 3 to 2 photograph each (the crop is chosen per file in pages.SV_TILE), then the label,
   the title and a line or two, left edges flush with the photograph. The Apprenticeships tile is a link,
   the whole of it, and carries the arrow line at its foot. */
.sv-sec{padding:112px 0 128px}
.sv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 24px}
.sv-tile{display:flex;flex-direction:column;min-width:0;color:var(--ink)}
.sv-tile .shot{width:100%}
.sv-tile .shot img{object-position:50% calc(var(--fy,.5) * 100%);transition:transform 1.2s var(--e-expo)}   /* --fy from pages.SV_TILE: how far down the file the frame sits */
a.sv-tile:hover .shot img{transform:scale(1.035)}
a.sv-tile:focus-visible{outline:2px solid var(--red);outline-offset:6px;border-radius:var(--r-lg)}
.sv-words{display:flex;flex-direction:column;align-items:flex-start;flex:1 1 auto;padding:0 4px}
.sv-words .lbl{margin-top:26px}
.sv-words h3{margin-top:12px;font-weight:300;font-size:clamp(24px,2.1vw,30px);line-height:1.15;letter-spacing:-.012em}
.sv-words p{margin:12px 0 0;max-width:46ch;font-size:16px;line-height:1.6;color:var(--mute)}
.sv-words .more{margin-top:auto;padding-top:22px}
.sv-words p+.more{margin-top:auto}
a.sv-tile:hover .more{border-color:var(--ink)}

/* APPRENTICESHIPS. The bench photograph beside the title (chrome.lead, a portrait file). The workshop's
   kit is a ruled list in three columns, the ring-and-ask line and the two buttons under it. The one
   vacancy is an ink card (the site's bookcard), plainly not an apprentice place. */
.ap-kit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;margin-top:40px;border-top:1px solid var(--line-2)}   /* two columns: three broke Milling machines onto two lines in the 572px column */
.ap-kit li{padding:18px 0;border-bottom:1px solid var(--line-2);font-family:var(--head);font-weight:300;font-size:clamp(18px,1.5vw,21px);line-height:1.3;color:var(--ink)}
.ap-ask{margin:36px 0 0;max-width:46ch;font-size:17px;color:var(--ink-2)}
.ap-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.r .ap-acts .btn{margin-top:0}
.ap-job .l>.ttl{margin-bottom:0}
.ap-job .bookcard{margin-top:0}
.ap-note{margin:18px 0 0;max-width:52ch;font-size:15.5px;color:var(--mute)}
.ap-job .r .more{margin-top:18px}

/* JOB OPENINGS. The vacancy as a white card and apprenticeships as an ink card, side by side and one
   height, the same anatomy: label, title, a line or two, one button sat on the same line at the foot. */
.jb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
.jb-card{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:48px 48px 52px;border-radius:var(--r-lg);background:var(--paper)}
.jb-card.ink{background:var(--ink);color:#fff}
.jb-card h2{margin-top:22px;font-weight:300;font-size:clamp(26px,2.4vw,36px);line-height:1.12;letter-spacing:-.012em;color:var(--ink)}
.jb-card.ink h2{color:#fff}
.jb-lines{margin:18px 0 34px}
.jb-lines p{margin:0;max-width:44ch;font-size:16px;line-height:1.6;color:var(--mute)}
.jb-lines p+p{margin-top:10px}
.jb-card.ink .jb-lines p{color:var(--on-dark-2)}
.jb-card .btn{margin-top:auto}

/* THE VACANCY. The apply route on the left in the page's own grammar (a small title, the line, the two
   buttons, the place); the advert on the right in three ruled groups, each a small label and the
   advert's own sentences as a tick list, the address plain. */
.jv .l>.ttl{margin-bottom:24px}
.jv-say{max-width:20em}
.jv-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.jv-acts .btn{margin-top:0}
.jv-where{margin:28px 0 0}
.jv-groups{border-top:1px solid var(--line-2)}
.jv-group{padding:32px 0 36px;border-bottom:1px solid var(--line-2)}
.jv-group .lbl{margin:0}
.jv-group .ticks{margin-top:18px;gap:12px}
.jv-group .ticks li{max-width:60ch;line-height:1.6}
.jv-group address{margin:16px 0 0;max-width:60ch;line-height:1.6;color:var(--ink-2)}
.jv-ap .l>.ttl{margin-bottom:0}
.jv-ap .bookcard{margin-top:0}

@media(max-width:1080px){
  .sv-sec{padding:88px 0}
  .sv-grid{gap:44px 20px}
  .sv-words .lbl{margin-top:22px}
  .jb-grid{grid-template-columns:minmax(0,1fr)}
  .jb-card{padding:40px 36px 44px}
  .ap-job .l>.ttl,.jv-ap .l>.ttl{margin-bottom:24px}
}
@media(max-width:680px){
  .sv-sec{padding:68px 0}
  .sv-grid{grid-template-columns:minmax(0,1fr);gap:48px}
  .sv-words{padding:0 2px}
  .sv-words .lbl{margin-top:20px}
  .sv-words h3{font-size:clamp(23px,6.4vw,26px)}
  .ap-kit{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:32px}
  .ap-ask{margin-top:30px}
  .jb-card{padding:30px 26px 34px}
  .jb-lines{margin:16px 0 28px}
  .jv-group{padding:26px 0 30px}
}

/* Map fix round, 15 Oct */
/* THE NORTH WEST PLATE FILLS ITS HEIGHT (build/workmap.py, fill). The list beside it makes the row taller
   than the map, which left white bands above and below it. The map keeps its own box (the pins are placed
   in it), and the land carries on above and below it into the plate's spare height, cut square at the
   box's sides as before. A browser without overflow clip falls back to hidden on both sides. */
.wm-lead .wm-fill{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;min-height:0;overflow:hidden;overflow:visible clip}
.wm-lead .wm-fill .wm-map{margin:0}
.wm-lead .wm-svg{overflow:visible;clip-path:inset(-600px 0)}
/* a desktop card over the list: a row its edge would cut in half steps out of sight (assets/workmap.js) */
.wm.dock-list .wm-list .cut{visibility:hidden}
/* a short laptop screen: a shallower photograph first, so the whole card fits before it has to scroll */
.wm-cards.short .wm-fig .shot{max-height:120px}

/* Apprenticeships on one section, 16 Oct (Miller): titles full size, the vacancy bottom left, the
   right column carries the kit and the work; no grey Also hiring band */
.ap-one>.ap-t{grid-row:1}
.ap-one>.ap-body{grid-row:1 / span 2}
.ap-one>.ap-hire{grid-row:2;align-self:end}
.ap-one>.ap-hire>.ttl{margin-bottom:28px}
.ap-one>.ap-hire .bookcard{margin-top:0}
.ap-one>.ap-hire .ap-note{margin-top:16px}
.ap-one>.ap-hire .more{margin-top:14px}
.ap-body .ap-lbl{display:flex;margin-top:56px}
.ap-body .ap-kit{margin-top:18px}
.ap-work{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--line-2)}
.ap-work li a{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);column-gap:24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line-2);color:inherit;text-decoration:none;transition:color var(--t-ui) var(--e-ui)}
.ap-work strong{font-family:var(--head);font-weight:300;font-size:clamp(18px,1.5vw,21px);line-height:1.3;color:var(--ink)}
.ap-work span{font-size:15px;line-height:1.55;color:var(--mute)}
.ap-work li a:hover strong,.ap-work li a:focus-visible strong{color:var(--red)}
.ap-body .ap-ask{margin-top:40px}
@media(max-width:1080px){
  .ap-one>.ap-t,.ap-one>.ap-body,.ap-one>.ap-hire{grid-row:auto}
  .ap-one>.ap-hire{margin-top:64px;margin-bottom:0}
}
@media(max-width:600px){
  .ap-work li a{grid-template-columns:1fr;row-gap:4px}
}

/* Job openings, 16 Oct: three cards (Welder, Machinist, Apprenticeships) sit in one row on a laptop,
   two then one on a tablet, one column on a phone, so the page stays symmetrical */
@media(min-width:1081px){.jb-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}