/* Tektura: styles for the home page only, split out of site.css so no other page has to
   download them. Loaded after site.css. The rules are in the order they had there, and
   none of them needs to win against a later rule of the same weight in site.css, so the
   split changes nothing on screen. A rule another page needs goes in site.css. */

.section.pale .step .n{background:var(--ink)}
.section.tight{padding-block:clamp(16px,3vw,40px)}
.between{justify-content:space-between}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(40px,7vw,96px) clamp(20px,4vw,48px)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero .actions{margin-top:32px}
.avail i{width:8px;height:8px;background:var(--signal);border-radius:50%;display:inline-block}
.avail:empty{display:none}
.system .piece .pill{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;background:var(--paper);color:var(--slate);border-bottom-left-radius:var(--r-tag);border-top-right-radius:var(--r-tag);white-space:nowrap}
.system .piece.ink .pill{background:var(--ink-raised);color:var(--on-ink-dim)}
.system .piece.signal .pill{background:rgba(18,22,27,.24);color:var(--paper)}
/* motion.js draws the four cards in. Until it starts they stay hidden, so they never show
   finished and then empty to be drawn. */
.m-wait .system .piece{opacity:0}

/* ---------- Proof strip ---------- */
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:860px){.strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
.strip .cell{background:var(--white);padding:18px 20px;border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn)}
.strip .cell b{display:block;font-size:15px;margin-bottom:4px}
.case .photo{border-radius:0;border-top-right-radius:var(--r-card);aspect-ratio:16/10}
/* Where it started: four chapters along a dashed line, each with a pencil drawing that
   draws itself as it arrives (motion.js adds .pd, then .on). */
/* Where it started: the line and its lede on the left, four short steps on the right,
   read top to bottom like a paragraph. Left-aligned on purpose: a headline or a narrow
   step justified opens holes between the words. */
.st{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.st :is(.st-big,.st-lede,.st-list p,.st-end){text-align:left;hyphens:manual}
.st-big{font-size:clamp(34px,4.2vw,54px);line-height:1.05;letter-spacing:-.02em;font-weight:600;color:var(--ink);margin:6px 0 14px;max-width:12ch}
.st-lede{font-size:18px;color:var(--body);max-width:36ch;margin:0}
.st-list{list-style:none;margin:0;padding:0;counter-reset:st;border-top:1.5px solid var(--ink)}
.st-list li{counter-increment:st;display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:8px;padding:18px 0 20px;border-bottom:1px solid #D9D5CD}
.st-list li::before{content:counter(st,decimal-leading-zero);grid-row:span 2;font-size:32px;font-weight:600;line-height:1;letter-spacing:-.03em;color:var(--signal);font-variant-numeric:tabular-nums}
.st-list b{font-size:19px;line-height:1.3}
.st-list p{margin:4px 0 0;font-size:16px;line-height:1.6;color:var(--body);max-width:56ch}
section .st-end.st-end{text-align:left;hyphens:manual;margin-top:26px;font-size:16px;color:var(--body)}
@media (min-width:901px){section .st-end.st-end{margin-left:calc((100% - clamp(28px,5vw,80px)) * 5 / 12 + clamp(28px,5vw,80px) + 90px)}}
@media (max-width:900px){.st{grid-template-columns:1fr;gap:26px}}

/* Case studies on the home page: one wide row each, the site in a browser frame that
   plays itself through when it comes into view (motion.js), the words beside it. */
.cs-rows{display:grid;gap:clamp(40px,5vw,72px)}
.cs-rows{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,40px)}
.case.cs-row{display:flex;flex-direction:column;gap:22px;background:transparent;overflow:visible;border-radius:0}

.cs-row .brw{background:var(--white);outline:1px solid rgba(18,22,27,.08);border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card);overflow:hidden;box-shadow:0 22px 44px -30px rgba(18,22,27,.45);transition:transform .25s cubic-bezier(.3,.8,.3,1),box-shadow .25s ease}
.cs-row .photo{border-radius:0;aspect-ratio:16/10}
.case.cs-row .body{padding:0;flex:1;display:flex;flex-direction:column;align-items:flex-start}
.case.cs-row .body :is(h3,.as-h3){font-size:clamp(21px,1.9vw,25px);margin:12px 0 8px}
.case.cs-row .body p{font-size:16px;line-height:1.6;text-align:left}
.cs-row .cs-go{margin-top:auto}
.case.cs-row .body p{margin-bottom:20px}
@media (hover:hover){
  .case.cs-row:hover{transform:none;box-shadow:none;border-radius:0}
  .cs-row:hover .brw{transform:translateY(-6px);box-shadow:0 30px 54px -30px rgba(18,22,27,.5)}
  .cs-row:hover .cs-go{background:var(--signal);color:var(--white)}
}
@media (max-width:900px){.cs-rows{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cs-rows{grid-template-columns:1fr;gap:44px}.cs-row .photo{aspect-ratio:4/3}}

.case .body{padding:22px 24px 26px}
.case .body :is(h3,.as-h3){margin:10px 0 8px;font-size:18px;letter-spacing:0.04em}
@media (prefers-reduced-motion:no-preference){
  :is(.case,.wk-row):is(:hover,:focus-visible,.sc-play) .photo.scroll>img{transform:translateY(var(--scroll,-70%));transition:transform var(--sdur,10s) cubic-bezier(.25,.3,.35,1)}
}
/* Who we build for: pick a type on the left, see a sketch of that kind of site on the right.
   Without script every panel shows, one under another. */
.fy-cue{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);line-height:1.4;margin:0 0 24px}
.fy{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,3vw,32px);align-items:stretch}
.fy .tabs{display:grid;gap:10px;align-content:stretch}
/* All eleven panes share the panel’s two rows, so it is always as tall as the tallest and
   never jumps when a tab is pressed, on a phone as much as on a desktop. Each pane is a
   subgrid of those rows: the intro lines share the first, as tall as the longest, and the
   frames share the second, each stretched to the tallest, so every example starts at the
   top and its browser bar sits in exactly the same place. The list stretches to match, so
   the two columns start and finish on the same lines. */
.fy.js .panes{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:start}
/* The one column is minmax(0,1fr), not the auto a grid gives by default: an auto column is
   as wide as the widest thing in any example (a headline that does not wrap, set in a
   fallback face while its own is loading or missing), which pushed every example out past
   the right edge of the panel. Now an example is the width of the panel, and anything too
   wide for it is cut inside its own browser frame. */
.fy.js .pane{grid-column:1;grid-row:1/3;display:grid;grid-template-rows:subgrid;align-content:start}
.fy.js .pane[hidden]{display:grid !important;visibility:hidden;pointer-events:none}
/* An example’s own typefaces are fetched only once home.js marks it: the one showing at
   once, the rest when the section is a screen away. Until then a hidden copy, there only to
   hold the panel’s height, is set in the site’s own face, which has already loaded. */
.fy.js .pane:not(.fx-dressed) :is(.fy-site,.fy-site *){font-family:var(--sans)!important}
.fy.js .pane>.lede{align-self:start;margin:0}
.fy .tab{display:flex;align-items:center;gap:18px;text-align:left;font:inherit;font-size:20px;font-weight:500;line-height:1.3;color:var(--ink);background:var(--white);border:0;padding:16px 22px;cursor:pointer;border-bottom-left-radius:var(--r-btn);border-top-right-radius:var(--r-btn);transition:background .2s ease,color .2s ease}
.fy .tab span{flex:1}
/* The chevron sits on the rows there is still something behind, not on the one already
   open — six white cards otherwise give no sign that any of them can be pressed. */
.fy .tab::after{content:"";width:18px;height:18px;flex:none;opacity:.34;background:currentColor;transition:opacity .2s ease,transform .2s ease;
  -webkit-mask:var(--chev) no-repeat center/contain;mask:var(--chev) no-repeat center/contain}
.fy .tab:hover::after{opacity:1;transform:translateX(3px)}
.fy .tab[aria-selected="true"]::after{opacity:0}
.fy .tab:hover{background:var(--paper)}
/* The choices not open yet keep a hairline edge, so they read as buttons on the white. */
.fy .tab:not([aria-selected="true"]){box-shadow:inset 0 0 0 1px var(--rule)}
.fy .tab .ico{width:30px;height:30px;flex:none}
.fy .tab[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.fy .tab[aria-selected="true"] .ico{color:var(--signal-dark)}
.fy .tab:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.fy .panes{background:var(--ink);color:var(--paper);padding:clamp(22px,2.4vw,30px);border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card)}
.fy .pane+.pane{margin-top:40px}
.fy.js .pane+.pane{margin-top:0}
.fy .pane[hidden]{display:none}
.fy .pane p.lede{color:var(--on-ink);font-size:clamp(18px,1.4vw,20px);max-width:none;text-align:left}
.fy .fy-browser{margin-top:18px;background:var(--paper);border-top-right-radius:14px;border-bottom-left-radius:14px;overflow:hidden;color:var(--ink)}
.fy .fy-chrome{display:flex;gap:6px;padding:10px 12px;background:#E2E0DA}
.fy .fy-chrome i{width:9px;height:9px;border-radius:50%;background:#C8C5BD}
.fy .fy-site{padding:13px 16px 15px}
@keyframes fy-url{from{color:transparent}}

@media (prefers-reduced-motion:no-preference){
  /* Held back until the build runs, so the finished screen never flashes up first. The
     browser bar comes in once, with the section, and then stays put: from one example to
     the next only the address in it changes, while the site below builds itself. */
  .fy.js .pane .fy-site>*{opacity:0}
  .fy.js:not(.fy-seen) .fy-chrome{opacity:0}
  .fy.js .fy-chrome{transition:opacity .34s ease}
  .fy.js .tabs .tab{opacity:0;transform:translateY(10px)}
  .fy.fy-seen .tabs .tab{opacity:1;transform:none;transition:opacity .5s ease var(--d,0ms),transform .5s cubic-bezier(.2,.7,.3,1) var(--d,0ms),background .2s ease,color .2s ease}
  .fy .tabs .tab:nth-child(1){--d:0ms} .fy .tabs .tab:nth-child(2){--d:60ms} .fy .tabs .tab:nth-child(3){--d:120ms}
  .fy .tabs .tab:nth-child(4){--d:180ms} .fy .tabs .tab:nth-child(5){--d:240ms} .fy .tabs .tab:nth-child(6){--d:300ms}
  .fy .tabs .tab:nth-child(7){--d:360ms} .fy .tabs .tab:nth-child(8){--d:420ms} .fy .tabs .tab:nth-child(9){--d:480ms}
  .fy .tabs .tab:nth-child(10){--d:540ms} .fy .tabs .tab:nth-child(11){--d:600ms}

  .fy-on .fx-url{animation:fy-url .4s ease both}
  .fy-on .fy-site>*{animation:fy-up .4s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(64ms * var(--i,0) + 110ms)}
  .fy-on .fy-site>*:nth-child(1){--i:0} .fy-on .fy-site>*:nth-child(2){--i:1} .fy-on .fy-site>*:nth-child(3){--i:2}
  .fy-on .fy-site>*:nth-child(4){--i:3} .fy-on .fy-site>*:nth-child(5){--i:4} .fy-on .fy-site>*:nth-child(6){--i:5}

  /* The chosen row lifts the width of a hairline and its icon lands with it. */
  .fy .tab[aria-selected="true"] .ico{animation:fy-pop .34s cubic-bezier(.2,.7,.3,1) both}
}

/* On a phone the list is a row that scrolls sideways. A bar under it, drawn by home.js in
   the shape of the site’s own scrollbars (an ink thumb on a light track, two corners
   rounded), shows that it scrolls and how far, and can be dragged; the phone’s own bar,
   which only shows while the row is moving, is turned off. The row has 4px above it so a
   focus ring is not cut off. */
.fy-bar{display:none}
@media (max-width:860px){
  .fy{grid-template-columns:minmax(0,1fr);gap:14px}
  .fy .tabs{display:flex;gap:8px;overflow-x:auto;margin:-4px calc(var(--gutter) * -1) 0;padding:4px var(--gutter) 6px;scroll-padding:0 var(--gutter)}
  .fy.js .tabs{scrollbar-width:none}
  .fy.js .tabs::-webkit-scrollbar{display:none}
  .fy .tab{flex:none;white-space:nowrap;font-size:15px;padding:12px 14px;gap:10px}
  .fy .tab .ico{width:24px;height:24px}
  .fy .tab::after{display:none}
  .fy-bar{display:block;position:relative;height:6px;margin:-10px 0 2px;background:var(--rule);border-top-right-radius:3px;border-bottom-left-radius:3px;touch-action:none;cursor:pointer}
  .fy-bar::after{content:"";position:absolute;inset:-12px 0}
  .fy-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--ink);border-top-right-radius:3px;border-bottom-left-radius:3px}
  .fy-bar.fy-bar-off{visibility:hidden}
}
@media print{.fy .pane[hidden]{display:block}}
.mark-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.mark-bg svg{position:absolute;top:50%;transform:translateY(-50%);height:var(--mh,56%);width:auto;opacity:var(--mo,.09);color:currentColor}
.mark-bg.r svg{right:-9%}
@media (max-width:860px){.mark-bg{display:none}}

/* ---------- Icons ----------
   Drawn on the mark’s own geometry: a 24 x 24 field, right angles only, and the
   corner rule on every rectangle — top-right and bottom-left rounded, the other two
   square. 2px stroke, butt caps, mitred joins, so they sit at the weight of the type.
   Ink, not signal: the guidelines give signal three jobs and these are not one of them.
   An icon never gets a line to itself; it sits on the line it belongs to. */
.ico{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;color:var(--ink)}
.strip .cell b{display:flex;align-items:center;gap:9px}
.strip .cell .ico{width:17px;height:17px;flex:none}
/* The spine grows by height rather than scaleY: a lingering transform leaves the
   line on its own composited layer, and at a fractional x that rasterises soft.
   Absolutely positioned, so growing it costs no layout. */
.system .spine{position:absolute;left:12px;top:8px;width:2px;height:0;background:var(--rule);z-index:0}
.system.in .spine{transition:height 1.1s cubic-bezier(.4,0,.2,1) .5s;height:calc(100% - 16px)}
/* The four pieces: an icon, the words, a tag. The descriptions and tags stack a second
   line in the same place (grid-area 1/1), so the booking can swap them without the card
   changing size; the card takes the taller of the two. */
.system .piece .ico{width:22px;height:22px;flex:none;color:inherit}
.system .piece .ico path{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .5s ease}
.system .piece .txt{flex:1;min-width:0}
.system .piece .stack{display:grid;margin-top:3px}
.system .piece .stack>.label{grid-area:1/1;margin-top:0;transition:opacity .3s ease,transform .3s ease}
.system .piece .pill{display:grid;text-align:center}
.system .piece .pill>span{grid-area:1/1;transition:opacity .25s}
/* Being written in: the words and tag wait, the icon is drawn once the title is done.
   The real title stays in the page, hidden from sight only; the typed copy is beside it. */
.system .piece strong .typed:empty{display:none}
.system.typing .piece:not(.done) strong .t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.system.typing .piece:not(.done) strong{min-height:1lh}
/* They go at once, before the cards are on screen, so no words show and fade; they come
   back gently as each title is finished. */
.system.typing .piece:not(.done) :is(.stack,.pill){opacity:0;transition:none}
.system.typing .piece:not(.done) .ico path{stroke-dashoffset:1;transition:none}
.system .piece :is(.stack,.pill){transition:opacity .35s ease}
.system .caret{display:inline-block;width:2px;height:1.05em;background:currentColor;vertical-align:-2px;margin-left:1px;animation:caret .8s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
/* The booking: a signal dot, and each piece in turn saying what it did with it. */
.system .dot{width:12px;height:12px;left:7px;background:var(--signal);box-shadow:0 0 0 4px rgba(194,65,12,.18)}
.system.in .dot{opacity:0}
.system.in .dot.on{opacity:1}
.system .piece.lit{transform:translateX(6px)}
.system.builder .piece .alt{display:block}
.system.builder .piece .own{display:none}
.system .pill .alt{display:none}
.system.builder .pill .alt{display:inline}
.system.builder .piece{background:var(--white);color:var(--slate)}
.system.builder .piece .label{color:var(--slate)}
.system.builder .piece .pill{background:var(--paper);color:var(--slate)}
.system.builder .spine{background:repeating-linear-gradient(var(--rule) 0 6px,transparent 6px 14px)}
.system.builder .dot{opacity:0}
/* The stack and its switch are one column of the hero grid, or the switch wraps
   onto a second row and lands under the headline. */
.sys-col{min-width:0}
/* Whose site the example is: one fictional client at a time. */
/* Built by us, or a page builder: both named, the one showing in ink. Centred under
   the cards (the cards start 30px in from the line down their left, so it sits 11px
   right of the column’s centre). */
.seg{display:flex;width:max-content;max-width:100%;margin:18px auto 0;position:relative;left:11px;background:var(--white);padding:4px;gap:4px;border-bottom-left-radius:12px;border-top-right-radius:12px;box-shadow:inset 0 0 0 1px var(--rule)}
.seg button{font:inherit;font-size:14px;font-weight:600;border:0;background:transparent;color:var(--slate);padding:10px 16px;min-height:40px;border-bottom-left-radius:9px;border-top-right-radius:9px;cursor:pointer;transition:background-color .2s,color .2s}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.seg button:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.system .spine,.system.in .spine{height:calc(100% - 16px);transition:none}}

/* ---------- The intro ----------
   The mark drafts itself in outline, floods with paper from the bottom up, the
   wordmark wipes in beside it to the guidelines-cover lockup, a signal rule draws
   underneath and the descriptor follows. The finished lockup then holds for half a
   second before the panel parts at the half — the cover’s own 50/50 split — the top
   half rounding its bottom-left corner as it rises and the bottom half its top-right
   as it falls, which is the corner rule shared across two pieces.

   Every duration and delay is a multiple of --t, so the whole sequence retimes from
   one number. --t:1s runs about three and a half seconds end to end; .7s makes it
   brisk. Home page only, once a session, and any click, key or scroll skips it.

   The flood is a clipped wrapper rather than an animated fill: interpolating a fill
   from transparent goes through a muddy grey.

   Two safeguards. Every exit is a CSS animation with forwards fill, so the panel
   clears itself even if no script ever runs; and it is skipped outright for anyone
   who has asked for less motion. */
.intro{position:fixed;inset:0;z-index:200;pointer-events:none;
  --t:1s;                                     /* the one number that retimes it all */
  --m:clamp(64px,8.6vw,124px);
  animation:intro-gone 0s linear calc(var(--t) * 3.62) forwards}
.intro-half{position:absolute;left:0;right:0;height:50.2%;background:var(--ink);will-change:transform}
.intro-half.t{top:0;animation:intro-part-t calc(var(--t) * .74) cubic-bezier(.65,0,.35,1) calc(var(--t) * 2.88) forwards}
.intro-half.b{bottom:0;animation:intro-part-b calc(var(--t) * .74) cubic-bezier(.65,0,.35,1) calc(var(--t) * 2.88) forwards}
.intro-mid{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:calc(var(--m) * .28);
  animation:intro-lift calc(var(--t) * .34) cubic-bezier(.5,0,.2,1) calc(var(--t) * 2.5) forwards}

/* The lockup, to the ratios on the cover of the guidelines: mark 38mm, gap
   12.67mm, wordmark 65.82pt — a gap of exactly a third of the mark, a wordmark of
   0.6111 of it, and a negative right margin cancelling the trailing letter-space
   so it centres on its optical edge. */
.intro-in{display:flex;align-items:center;gap:calc(var(--m) / 3)}
.intro .mk{position:relative;flex:none;width:var(--m);height:var(--m)}
.intro .mk svg{display:block;width:100%;height:100%}
.intro .draft,.intro .flood{position:absolute;inset:0}
.intro .draft path{fill:none;stroke:var(--paper);stroke-width:2.5;stroke-dasharray:760;stroke-dashoffset:760;
  animation:intro-draw calc(var(--t) * .78) cubic-bezier(.4,0,.25,1) forwards,
            intro-dim calc(var(--t) * .24) ease calc(var(--t) * 1.12) forwards}
.intro .flood{clip-path:inset(100% 0 0 0);
  animation:intro-flood calc(var(--t) * .44) cubic-bezier(.5,0,.2,1) calc(var(--t) * .76) forwards}
.intro .flood path{fill:var(--paper)}
.intro .word{display:block;clip-path:inset(0 101% 0 0);
  animation:intro-word calc(var(--t) * .56) cubic-bezier(.5,0,.2,1) calc(var(--t) * .98) forwards}
.intro b{display:block;font-weight:600;font-size:calc(var(--m) * 0.6111);line-height:1;
  letter-spacing:.10em;margin-right:-.10em;color:var(--paper)}
.intro-sub{margin:0;font-size:clamp(12px,1.15vw,15px);letter-spacing:.02em;color:var(--tint);
  opacity:0;transform:translateY(6px);
  animation:intro-sub calc(var(--t) * .44) cubic-bezier(.2,.7,.2,1) calc(var(--t) * 1.52) forwards}
/* Signal doing its "entry" job, once. */
.intro-rule{display:block;height:2px;width:min(58vw,520px);background:var(--signal-dark);
  border-bottom-left-radius:1px;border-top-right-radius:1px;transform:scaleX(0);transform-origin:center;
  animation:intro-rule calc(var(--t) * .72) cubic-bezier(.5,0,.2,1) calc(var(--t) * 1.18) forwards}

/* Skipped: cut the sequence short rather than snapping it off. */
.intro.skip .intro-mid{animation:intro-lift .16s ease forwards}
.intro.skip .intro-half.t{animation:intro-part-t .34s cubic-bezier(.65,0,.35,1) .1s forwards}
.intro.skip .intro-half.b{animation:intro-part-b .34s cubic-bezier(.65,0,.35,1) .1s forwards}
.intro.skip{animation:intro-gone 0s linear .46s forwards}

@keyframes intro-draw{to{stroke-dashoffset:0}}
@keyframes intro-flood{to{clip-path:inset(0 0 0 0)}}
@keyframes intro-dim{to{opacity:0}}
@keyframes intro-word{to{clip-path:inset(0 -.12em 0 0)}}
@keyframes intro-sub{to{opacity:1;transform:none}}
@keyframes intro-rule{to{transform:scaleX(1)}}
@keyframes intro-lift{to{opacity:0;transform:translateY(-10px)}}
@keyframes intro-part-t{to{transform:translateY(-100%);border-bottom-left-radius:22vmin}}
@keyframes intro-part-b{to{transform:translateY(100%);border-top-right-radius:22vmin}}
@keyframes intro-gone{to{visibility:hidden}}
html.introed .intro{display:none}
@media (min-width:900px){
/* a heading that is an h3 for its place in the page but set as a subheading keeps that size */
:where(body:not(.staff,.client)) .as-h4{font-size:17px}
:where(body:not(.staff,.client)) .strip .cell b{font-size:17px}
:where(body:not(.staff,.client)) .case .body :is(h3,.as-h3){font-size:21px}
}
@media (max-width:560px){
  .hero{padding-block:28px 12px}
  .hero .actions{flex-direction:column;align-items:stretch;gap:6px}
  .hero .actions .btn{justify-content:center;min-height:48px}
  .hero .actions .btn.quiet{align-self:center;min-height:44px;border-bottom:0;text-decoration:underline;text-underline-offset:5px}
  .system .spine{left:8px}
  .system .dot{left:3px}
  .system .piece .pill{font-size:11px;padding:5px 7px;letter-spacing:.05em}
  .seg{left:7px}.seg button{min-height:44px}

  /* the proof strip: one to a row, icon and title on a line */
  .strip{grid-template-columns:1fr;gap:8px}
  .strip .cell{padding:16px 18px}
  .strip .cell b{font-size:16px}

  .case{min-width:0}
  .case .body{padding:18px 18px 22px}
}
@media (max-width:374px){
  .system .piece .pill{display:none}
}
@media (min-width:861px){
  :where(body:not(.staff,.client)) .strip .cell .small{display:block}
}
@media (min-width:561px){
  :where(body:not(.staff,.client)) .case .body{padding:26px}
  :where(body:not(.staff,.client)) .strip .cell{padding:20px}
}
@media (max-width:560px){
  :where(body:not(.staff,.client)) .case .body{padding:20px}
  :where(body:not(.staff,.client)) .strip .cell{padding:18px}
}
.of-i{background:var(--white);border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card);overflow:hidden}
.of-i.of-off{display:none}
.of-face{opacity:1}
/* Only the contents change on a turn. The art keeps its ground and the label keeps its
   white strip, so a turning tile never flashes as an empty white card. The old contents
   lift away and the new ones rise into place, which reads far calmer than a cut. */
.of-art>*,.of-i>.of-face>strong{transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1)}
.of-i.turning .of-art>*,.of-i.turning>.of-face>strong{opacity:0;transform:translateY(-5px)}
.of-i.arriving .of-art>*,.of-i.arriving>.of-face>strong{opacity:0;transform:translateY(5px);transition:none}
/* Hover holds the rotation still and replays that tile’s own motion. The tiles are
   examples, not links, so they don’t lift. */
.of-i strong{transition:background-color .2s ease,color .2s ease}
.of-i.rp .of-art *{animation:none!important}
/* Hovering advances the tile one step: the number moves, the next seat or stamp
   fills, the meter creeps up. It settles back when the pointer leaves. */
.of .meter i{transition:width .55s cubic-bezier(.3,.8,.3,1)}
/* The thing that just happened pops, so the eye catches it before the number moves. */
@keyframes of-lit{0%{transform:scale(1)}34%{transform:scale(1.55)}100%{transform:scale(1)}}
.of .lit{position:relative;z-index:2;animation:of-lit .46s cubic-bezier(.3,1.5,.4,1)}
.of-art{aspect-ratio:16/9;overflow:hidden;padding:clamp(11px,1.3vw,16px);display:grid;align-content:center;gap:7px;
  background:var(--ink);color:var(--paper);--line:rgba(255,255,255,.18);--soft:rgba(255,255,255,.08);--strong:rgba(255,255,255,.40);--accent:var(--signal);--mapblock:var(--ink);--mapa:.20}
.of-i:nth-child(12n+3) .of-art,.of-i:nth-child(12n+7) .of-art,.of-i:nth-child(12n+10) .of-art{
  background:var(--white);color:var(--ink);--line:rgba(18,22,27,.17);--soft:rgba(18,22,27,.06);--strong:rgba(18,22,27,.45);--accent:var(--signal);--mapblock:var(--white);--mapa:.19}
.of-i:nth-child(12n+5) .of-art,.of-i:nth-child(12n+12) .of-art{
  background:var(--signal);color:var(--paper);--line:rgba(255,255,255,.34);--soft:rgba(255,255,255,.16);--strong:rgba(255,255,255,.7);--accent:var(--ink);--mapblock:var(--signal);--mapa:.36}
.of-i strong{display:flex;align-items:flex-start;min-height:3.1em;padding:12px 15px 14px;font-size:14.5px;font-weight:600;line-height:1.25}
.of .tile{height:20px;border-radius:3px;background:var(--soft)}
.of .g2{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.of .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.of .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.of .cell{height:11px;border-radius:2px;background:var(--soft)}
.of .cell.on{background:var(--accent)}.of .cell.dim{background:var(--soft);opacity:.45}
.of .sq{aspect-ratio:1;border-radius:1px;background:var(--line)}
.of .sq.on{background:var(--accent)}.of .sq.dim{background:var(--soft)}
.of .card2{background:var(--soft);border-radius:3px;padding:7px;display:grid;gap:5px}
.of .circ{width:16px;height:16px;border-radius:50%;background:var(--strong);flex:none;opacity:.7}
.of .between{justify-content:space-between}
.of .lock{width:15px;height:12px;border-radius:2px;background:var(--accent);position:relative;flex:none;margin-top:5px}
.of .lock::before{content:"";position:absolute;left:3px;right:3px;top:-6px;height:8px;border:2px solid var(--accent);border-bottom:0;border-radius:5px 5px 0 0}
.of .pin{width:14px;height:14px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--accent);flex:none}
/* Each tile is a miniature of the real thing, so the vocabulary is specific:
   rows with amounts, seat plans, month grids, role chips, toggles, a nav rail. */
.of .thumb{width:24px;height:24px;border-radius:3px;background:var(--line);flex:none}
.of .ln{display:flex;align-items:center;gap:7px}
/* a row of tags that can’t shrink takes a second line when the tile is narrow */
.of .ln.wraps{flex-wrap:wrap;row-gap:5px}
.of .grow{flex:1;display:grid;gap:4px;min-width:0}
.of .av{width:17px;height:17px;border-radius:50%;background:var(--line);flex:none;
  display:grid;place-items:center;font-family:var(--mono);font-size:7.5px;color:currentColor;opacity:.8}
.of .sw{width:19px;height:11px;border-radius:6px;background:var(--soft);position:relative;flex:none}
.of .sw::after{content:"";position:absolute;top:2px;left:2px;width:7px;height:7px;border-radius:50%;background:var(--strong)}
.of .sw.on{background:var(--accent)}
.of .sw.on::after{left:10px;background:var(--paper)}
.of .arw{width:15px;flex:none;height:2px;background:var(--accent);position:relative}
.of .arw::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;
  border-top:2px solid var(--accent);border-right:2px solid var(--accent);transform:rotate(45deg)}
.of .seats{display:grid;grid-template-columns:repeat(8,1fr) 11px repeat(8,1fr);gap:2px}
.of .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.of .cal i{height:9px;border-radius:2px;background:var(--soft)}
.of .cal i.has{background:var(--line)}
.of .cal i.on{background:var(--accent)}
.of .env{width:25px;height:17px;border-radius:2px;background:var(--line);position:relative;flex:none;overflow:hidden}
.of .env::after{content:"";position:absolute;left:0;top:0;border-left:12.5px solid transparent;
  border-right:12.5px solid transparent;border-top:9px solid var(--mapblock)}
.of .spark{display:flex;align-items:flex-end;gap:3px;height:18px}
.of .spark i{flex:1;border-radius:1px;background:var(--line)}
.of .ss{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.of .ss i{height:7px;background:var(--soft);border-radius:1px}
.of .ss i.h{background:var(--line)}
.of .mos{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:21px;gap:4px}
.of .mos i{border-radius:3px;background:var(--line)}
.of .mos i.t{grid-row:span 2}
.of .mos i.a{background:var(--accent);opacity:.55}
.of .az{display:grid;gap:4px;flex:none;text-align:center}
.of .az i.on{color:var(--accent);opacity:1}
.of .dl{width:9px;height:9px;flex:none;position:relative}
.of .dl::before{content:"";position:absolute;left:3.5px;top:0;width:2px;height:6px;background:var(--accent)}
.of .dl::after{content:"";position:absolute;left:1.5px;top:2.5px;width:6px;height:6px;
  border-bottom:2px solid var(--accent);border-right:2px solid var(--accent);transform:rotate(45deg)}
.of .stamp{display:flex;gap:4px}
.of .stamp i{width:11px;height:11px;border-radius:50%;background:var(--soft)}
.of .stamp i.on{background:var(--accent)}
.of .strike{text-decoration:line-through;opacity:.5}
.of .meter{height:7px;border-radius:4px;background:var(--soft);overflow:hidden}
.of .meter i{display:block;height:100%;border-radius:4px;background:var(--accent)}
/* A map. The streets are the gaps, not lines drawn on top: the panel is the street
   layer and the blocks sit over it in the tile’s own ground colour, so what is left
   between them reads as roads. The way in is drawn in signal along the streets and the
   pin drops at the end of it. */
.of .mapart{position:relative;height:66px;border-radius:3px;background:var(--soft);overflow:hidden}
.of .mapsvg{display:block;width:100%;height:100%}
.of .mapsvg .net{opacity:var(--mapa,.2)}
.of .mapsvg .park{fill:currentColor;opacity:.42}
.of .mapsvg .rd{fill:none;stroke:currentColor;stroke-linejoin:round;stroke-linecap:round}
.of .mapsvg .mn{stroke-width:2.6}
.of .mapsvg .mj{stroke-width:6}
.of .mapsvg .route{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.of .mapsvg .ping{fill:none;stroke:var(--accent);stroke-width:1.6;opacity:0;transform-box:fill-box;transform-origin:center}
.of .mapsvg .mp{fill:var(--accent);transform-box:fill-box;transform-origin:50% 100%}
.of .mapsvg .mp circle{fill:var(--mapblock)}

.of-open{margin-top:clamp(16px,2vw,22px);background:var(--signal);color:var(--paper);padding:clamp(20px,2.6vw,28px);border-bottom-left-radius:var(--r-card);border-top-right-radius:var(--r-card);display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.of-open p{margin:0;font-size:16.5px;line-height:1.45;max-width:var(--measure);color:var(--paper);text-align:left}
.of-open b{font-weight:600}
@media (max-width:520px){.of-i strong{min-height:0}}
@media (prefers-reduced-motion:reduce){.of-face{transition:none}}

/* Each part plays its own small motion — a bar fills, seats light up, a pin drops onto
   the map — once every nine seconds, staggered by slot so only one or two tiles are ever
   moving. The motion sits in the first fifth of the cycle and rests after, so a tile that
   has just turned over plays as it arrives. Nothing moves for anyone who asked for less. */
@media (prefers-reduced-motion:no-preference){
  .of-i:nth-child(12n+1){--d:0.00s}
  .of-i:nth-child(12n+2){--d:0.72s}
  .of-i:nth-child(12n+3){--d:1.44s}
  .of-i:nth-child(12n+4){--d:2.16s}
  .of-i:nth-child(12n+5){--d:2.88s}
  .of-i:nth-child(12n+6){--d:3.60s}
  .of-i:nth-child(12n+7){--d:4.32s}
  .of-i:nth-child(12n+8){--d:5.04s}
  .of-i:nth-child(12n+9){--d:5.76s}
  .of-i:nth-child(12n+10){--d:6.48s}
  .of-i:nth-child(12n+11){--d:7.20s}
  .of-i:nth-child(12n+12){--d:7.92s}
  @keyframes of-pop{0%{transform:scale(.72);opacity:.2}8%{transform:scale(1.05);opacity:1}13%{transform:scale(1)}100%{transform:scale(1)}}
  @keyframes of-slide{0%{transform:translateX(-10%);opacity:0}12%{transform:none;opacity:1}100%{transform:none;opacity:1}}
  @keyframes of-drop{0%{transform:translateY(-16px) rotate(-45deg);opacity:0}9%{transform:translateY(2px) rotate(-45deg);opacity:1}13%{transform:translateY(0) rotate(-45deg)}100%{transform:translateY(0) rotate(-45deg)}}
  .of .sq.on:nth-child(3n){--b:.45s}.of .sq.on:nth-child(3n+1){--b:.22s}
  .of .tile,.of .circ{animation:of-pop 9s calc(var(--d,0s) + var(--b,0s)) infinite cubic-bezier(.3,.8,.3,1)}
  .of .tile:nth-child(2){--b:.09s}.of .tile:nth-child(3){--b:.18s}.of .tile:nth-child(4){--b:.27s}
  .of .card2 .r{animation:of-slide 9s calc(var(--d,0s) + var(--b,0s)) infinite cubic-bezier(.3,.8,.3,1)}
  .of .card2 .r:nth-child(2){--b:.08s}.of .card2 .r:nth-child(3){--b:.16s}
  .of .pin{animation:of-drop 9s var(--d,0s) infinite cubic-bezier(.3,.9,.4,1)}
  @keyframes of-route{0%{stroke-dashoffset:100}16%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
  @keyframes of-pindrop{0%{transform:translateY(-13px) scale(.7);opacity:0}10%{transform:translateY(0) scale(1.06);opacity:1}14%{transform:none}100%{transform:none}}
  @keyframes of-ping2{0%{transform:scale(.3);opacity:.9}18%{transform:scale(3.4);opacity:0}100%{opacity:0}}
  .of .mapsvg .route{stroke-dasharray:100;animation:of-route 9s var(--d,0s) infinite cubic-bezier(.4,0,.2,1)}
  .of .mapsvg .mp{animation:of-pindrop 9s calc(var(--d,0s) + .9s) infinite cubic-bezier(.3,.9,.4,1)}
  .of .mapsvg .ping{animation:of-ping2 9s calc(var(--d,0s) + 1.05s) infinite ease-out}
}

/* ---- The estimator’s own question, beside "What will it cost?". The options are read
   from the same model the estimator prices from, so rewording a question in the staff
   area rewords it here too. Each one is a link: it opens the estimator already answered. ---- */
.cost-row{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,4vw,56px);align-items:start}
.cost-row>.words{max-width:46ch}

.cost-q .label{display:block;margin-bottom:16px}
/* "Got something in mind?": the sentence is kept short enough that the button stays beside it, as in the box above */
.card.hm-call p{max-width:60ch;text-align:left}
@media (max-width:860px){
  .cost-row{grid-template-columns:1fr;gap:26px}
  .cost-row>.words{max-width:none}
}

/* work: after its frame is drafted, the screenshot is uncovered along the diagonal */
.m-wk .photo{clip-path:polygon(0 100%,0 100%,0 100%);transition:clip-path .9s cubic-bezier(.6,0,.2,1) calc(var(--d,0ms) + .6s)}
.m-wk.on .photo{clip-path:polygon(0 100%,0 -100%,200% 100%)}

/* promise icons */
.m-dw .ico path{stroke-dasharray:var(--plen,80);stroke-dashoffset:var(--plen,80);transition:stroke-dashoffset .7s cubic-bezier(.4,0,.25,1) var(--d,0ms)}
.m-dw.on .ico path{stroke-dashoffset:0}
.m-dw>b .ico{color:var(--ink)}
.m-sq .step{opacity:0;transform:translateX(-10px);transition:opacity .45s ease var(--d,0ms),transform .5s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.m-sq .step .n{transform:scale(.6);transition:transform .35s cubic-bezier(.3,1.6,.5,1) calc(var(--d,0ms) + .15s)}
.m-sq.on .step{opacity:1;transform:none}
.m-sq.on .step .n{transform:none}
.eq-n{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;font-family:var(--mono);font-size:13px;font-weight:400;background:var(--ink);color:var(--paper);border-top-right-radius:8px;border-bottom-left-radius:8px}
.lvl-e{display:flex;cursor:pointer}
.lvl-e:hover>span{box-shadow:inset 0 0 0 2.5px var(--ink)}
.lvl-e strong{font-size:17px}
.lvl-e em{font-style:normal;font-size:13.5px;line-height:1.45;color:var(--body);text-align:left!important}
.lvl-e input:checked+span{background:var(--ink);color:var(--paper);box-shadow:none}
.lvl-e input:checked+span em{color:var(--on-ink)}
.lvl-dots{display:flex;gap:4px;margin-bottom:4px}
.lvl-dots b{width:11px;height:11px;background:var(--signal);border-top-right-radius:4px;border-bottom-left-radius:4px}
.lvl-dots b.o{background:var(--rule)}
.lvl-e input:checked+span .lvl-dots b.o{background:rgba(255,255,255,.2)}
.lvl-dots b.x{width:34px;background:repeating-linear-gradient(90deg,var(--signal) 0 6px,transparent 6px 9px)}
.lvl-bespoke{grid-column:1/-1}
.lvl-bespoke>span{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:14px;padding:14px 16px}
.lvl-bespoke .lvl-dots{align-self:center;margin:0}
.lvl-bespoke em{flex:1 1 260px}
@media (max-width:540px){.lvl-bespoke>span{flex-direction:column}.lvl-bespoke em{flex:none}.lvl-bespoke .lvl-dots{align-self:flex-start}}
.scene-copy h2{font-size:clamp(28px,3.4vw,44px);line-height:1.06;letter-spacing:-.02em;margin:0 0 14px;text-transform:none}
.scene-copy .lede{margin:0 0 22px;max-width:46ch}
.scene-art{position:relative;min-width:0}
@media (max-width:860px){
  .scene-art{order:-1}
  .scenes-live .scene-copy .lede{display:none}
  .scenes-live .scene-copy h2{font-size:24px;margin-bottom:10px}
}
/* Each layer carries its own name, in the plane of the layer, in the corner the layer
   above leaves showing; so the name can never drift away from the layer it names. */
.sys-scene .sys-tag{display:none}

/* The layers beside the stacked picture: one layer at a time, big enough to read at a
   glance, with a three-part bar for where you are. It follows the same .lit steps as
   the picture (scenes.js). Without the scene running, all three show as a list. */
.layers{list-style:none;margin:0;padding:0;display:grid;gap:26px;max-width:440px}
.layers li{display:grid;gap:6px;align-content:start}
.ly-n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-dim)}
.layers b{font-size:clamp(24px,2.4vw,30px);line-height:1.1;letter-spacing:-.01em;color:var(--paper);margin:2px 0 4px}
.ly-d{text-align:left;font-size:17px;line-height:1.55;color:var(--on-ink);max-width:40ch}
.scenes-live .layers li{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease,visibility 0s .35s}
.scenes-live .layers li.lit:not(:has(~ li.lit)){opacity:1;visibility:visible;transform:none;transition:opacity .35s ease,transform .35s ease}
.scenes-live .layers li:first-child:not(.lit){opacity:1;visibility:visible;transform:none}
@media (prefers-reduced-motion:reduce){.scenes-live .layers li{transition:none}}
/* "The lit layer with no lit layer after it" needs :has(). Where a browser has none,
   scenes.js marks that layer .now, and it is shown by the class; without this the three
   cards would all stay hidden once the scene was running. */
@supports not selector(:has(a)){
  .scenes-live .layers li.now{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease,transform .35s ease}
}
@media (max-width:860px){.layers b{font-size:22px}.ly-d{font-size:15px}}


/* Home: the website lifts away to show the admin screen and the work behind it. Flat
   layers on ink with an orange riser between them, in place of soft shadows, so depth reads
   through the brand’s own line and colour. */
.sys-art{height:min(70vh,580px);perspective:1400px;display:grid;place-items:center;position:relative}
.sys-stack{--t:clamp(0,(var(--p) - .04)/.3,1);--s:clamp(0,(var(--p) - .26)/.44,1);position:relative;width:min(66%,440px);aspect-ratio:3/2;transform-style:preserve-3d;
  transform:translate(calc(var(--t)*-4%),calc(var(--s)*var(--z,1)*150px)) rotateX(calc(var(--t)*56deg)) rotateZ(calc(var(--t)*-30deg))}
.sys-ly{position:absolute;inset:0;padding:5%;border-top-right-radius:16px;border-bottom-left-radius:16px;overflow:hidden;font-size:13px;line-height:1.2}
.sys-web{background:var(--white);color:var(--ink);transform:translate3d(0,calc(var(--s)*-64%),calc(var(--s)*var(--z,1)*190px));box-shadow:0 0 0 1px rgba(255,255,255,.6)}
.sys-adm{background:var(--paper);color:var(--ink);display:flex;padding:0;transform:translate3d(0,calc(var(--s)*-32%),calc(var(--s)*var(--z,1)*95px))}
.sys-ord{background:var(--ink-raised);color:var(--paper);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.sl-btn{background:var(--signal);color:#fff!important;opacity:1!important;font-family:var(--font,inherit)!important;font-weight:600;font-size:12px!important;letter-spacing:0!important;text-transform:none!important;padding:5px 12px;border-top-right-radius:8px;border-bottom-left-radius:8px}
/* the risers: orange lines standing between the layers, drawn as they part */
.sys-rise{display:none;position:absolute;width:2px;background:var(--signal-dark);transform-origin:50% 100%;transform-style:preserve-3d;height:calc(var(--s)*var(--z,1)*100px);opacity:var(--s)}
.sys-rise.r1{left:8%;bottom:8%;transform:rotateX(-90deg)}
.sys-rise.r2{right:10%;top:10%;transform:rotateX(-90deg)}
.sys-rise::after{content:"";position:absolute;left:-4px;width:10px;height:10px;border-radius:50%;background:var(--signal-dark);top:calc(100% - var(--f,0)*100%);box-shadow:0 0 0 4px rgba(232,89,12,.2)}
.sys-rise.r1{--f:clamp(0,(var(--p) - .62)/.3,1)}.sys-rise.r2{--f:clamp(0,(var(--p) - .7)/.28,1)}
/* labels beside the stack, one per part as it arrives */
.sys-scene .sys-tag{display:block;position:absolute;right:0;z-index:5;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-ink-dim,#AEB5BE);padding-left:30px;opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0))*8px))}
.sys-tag::before{content:"";position:absolute;left:0;top:50%;width:22px;height:2px;background:var(--signal-dark)}
.sys-tag.t1{top:30%;--o:clamp(0,(var(--p) - .36)*6,1)}.sys-tag.t2{top:50%;--o:clamp(0,(var(--p) - .5)*6,1)}.sys-tag.t3{top:70%;--o:clamp(0,(var(--p) - .66)*6,1);color:#fff}
@media (max-width:860px){.sys-art{height:40vh;overflow:hidden;--z:.55;margin-inline:calc(var(--gutter)*-1)}.sys-stack{width:66%}.sys-ly{font-size:9px}.sys-tag{display:none}
  .sl-btn{font-size:9px!important;padding:3px 7px}}
@media (prefers-reduced-motion:reduce){.sys-rise::after{display:none}}
.sys-tag{display:none}
.scene-copy .lede,.scene-copy p{text-align:left!important;hyphens:manual}

/* What we build, redrawn: the tiles speak in real words rather than grey bars, so each one
   reads as a glimpse of the actual thing. Type is a size up and the drawing fills the frame. */
.of .of-art{gap:8px}
.of .tx{display:block;font-size:12px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.of .tx.b{font-weight:600}
.of .ln>.tx{flex:0 1 auto}
.of .grow{gap:2px}
.of .av{width:20px;height:20px;font-size:8px}
.of .amt{font-size:11.5px}
.of .pill{font-size:10.5px;font-weight:600;line-height:1.35;padding:3px 10px;border-radius:99px;background:var(--accent);color:var(--paper);flex:none;white-space:nowrap;transition:background-color .3s,color .3s}
.of .pill.o{background:transparent;color:currentColor;box-shadow:inset 0 0 0 1px var(--strong);font-weight:500}
.of .bub{display:block;font-size:11.5px;line-height:1.3;background:var(--soft);padding:5px 9px;border-radius:9px 9px 9px 3px;justify-self:start;max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.of .bub.me{justify-self:end;background:var(--accent);color:var(--paper);border-radius:9px 9px 3px 9px}
.of .thumb{width:26px;height:26px;border-radius:4px}
.of .thumb.t1{background:linear-gradient(135deg,var(--accent) 0 40%,var(--line) 40%)}
.of .thumb.t2{background:radial-gradient(circle at 50% 60%,var(--strong) 0 35%,var(--line) 36%)}
.of .thumb.t3{background:linear-gradient(90deg,var(--line) 0 30%,var(--strong) 30% 70%,var(--line) 70%)}
.of .tile.acc{background:var(--accent)!important}
.of .stg{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.of .stg i{height:6px;border-radius:3px;background:var(--soft)}
.of .stg i.on{background:var(--accent)}
.of .stg i.half{background:linear-gradient(90deg,var(--accent) 55%,var(--soft) 55%)}
.of .post.p1{background:var(--accent)}.of .post.p1::after{background:var(--paper)}
.of .post.p2{background:var(--line)}
.of .post.p3::before{content:"";position:absolute;left:24%;top:18%;width:52%;height:40%;border-radius:50%;background:var(--accent)}
.of .card2 .tx{white-space:normal}
/* Secondary words need to stay readable, so they get their own tone per ground rather
   than the faint drawing tone. */
.of .of-art{--mute:rgba(255,255,255,.66)}
.of .of-i:nth-child(12n+3) .of-art,.of .of-i:nth-child(12n+7) .of-art,.of .of-i:nth-child(12n+10) .of-art{--mute:rgba(18,22,27,.66)}
.of .of-i:nth-child(12n+5) .of-art,.of .of-i:nth-child(12n+12) .of-art{--mute:#fff}
.of .of-i:nth-child(12n+5) .of-art,.of .of-i:nth-child(12n+12) .of-art{--soft:rgba(18,22,27,.16)}
.of .av{opacity:1;color:var(--mute)}
.of .strike{opacity:1;color:var(--mute)}
.of .of-i:nth-child(12n+5) .av,.of .of-i:nth-child(12n+12) .av{background:rgba(18,22,27,.22)}

/* Home: the estimator’s first two questions, as a real form. It sends the answers to /cost,
   so it works with scripts off, and the estimator opens with them already chosen. */
.hq{display:grid;gap:22px}
.hq input:is([type=radio],[type=checkbox]){position:absolute;opacity:0;width:1px;height:1px;margin:0}
.hq-set{border:0;margin:0;padding:0;min-width:0}
.hq-set legend{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:0}
.hq-chips{display:flex;flex-wrap:wrap;gap:8px}
.hq-chips .ce span{min-height:40px;padding:8px 14px;font-size:14.5px}
.hq-lvls{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hq .lvl-e>span{padding:13px 14px 15px;gap:4px}
.hq .lvl-e strong{font-size:16px}
.hq .lvl-e em{font-size:13px}

.hq-hint{margin:10px 0 0;font-size:13.5px;line-height:1.45;color:var(--slate);text-align:left!important}
.hq-go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.hq-go .hq-hint{margin:0;flex:1 1 220px}
@media (max-width:420px){.hq-lvls{grid-template-columns:1fr}}
.hq-set legend .eq-n{margin-right:12px}
.hq .hq-plus{width:18px;height:18px;fill:none;stroke:var(--signal);stroke-width:2.5;stroke-linecap:round;transition:transform .2s}
.hq .hq-also input:checked+span .hq-plus{transform:rotate(45deg);stroke:var(--paper)}
.hq .lvl-bespoke{grid-column:auto}.hq .lvl-bespoke>span{flex-direction:column;align-items:stretch;padding:13px 14px 15px}.hq .lvl-bespoke .lvl-dots{align-self:flex-start;margin-bottom:4px}.hq .lvl-bespoke em{flex:none}

/* Who it’s for: each answer carries a small line drawing, so the tick is left off */
.ce.ic span{gap:8px}
.ce.ic input:checked+span::before{display:none}
.chi{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ce.ic input:not(:checked)+span .chi{color:var(--signal)}
@media (max-width:860px){.sys-scene .sys-tag{display:none}.sys-art{height:48vh}.sys-stack{margin-top:9vh;width:60%}}

/* Home: the opening (the hero and the four promises) fills the window, so the page starts
   on paper alone and the dark section only arrives once you scroll. */
.home-open{min-height:calc(100svh - var(--head-h,96px));display:flex;flex-direction:column}
.home-open>.hero{flex:1;display:flex;align-items:center}
.home-open>.hero>*{width:100%}
/* On a window under about 950px tall the space above the heading gives way, so the four
   promises still end on the first screen: 96px at 946px and taller, about 50px at 900. */
@media (min-width:901px) and (max-height:950px){.home-open>.hero{padding-top:clamp(40px,calc(100vh - 850px),96px)}}
.m-lite .m-wk .photo{transition-duration:.6s;transition-delay:calc(var(--d,0ms) + .25s)}
.m-lite .m-dw .ico path{transition-duration:.45s}
.m-lite .m-sq .step{transition-duration:.3s,.35s}
@media (max-width:700px){.intro{--t:.62s}}

/* ---------- Who we build for: eleven real-looking screens ----------
   Each example is a small site of its own, in its own colours (--a, --a2), with the thing
   that happens behind it shown as a notification over the corner: the booking arriving,
   the order paid. Everything is drawn in HTML so it stays sharp and light. What moves is
   home-stories.js: there is no pointer, and no loop of its own in here. */
.fy .tab{font-size:18px;padding:13px 20px;gap:16px}
.fy .tab .ico{width:26px;height:26px}
/* The frame fills its stage, and the site fills the frame, so every frame is as tall as the
   tallest example’s. */
.fx-stage{position:relative;margin-top:18px;padding-bottom:26px;display:flex;flex-direction:column}
.fx-stage .fy-browser{flex:1;display:flex;flex-direction:column;margin-top:0;box-shadow:0 18px 40px rgba(0,0,0,.28)}
.fx-stage .fy-chrome{align-items:center}
.fx-stage .fy-site{flex:1 1 auto}
.fx-url{margin-left:10px;flex:1;font-family:var(--mono);font-size:11px;color:#6B6F76;background:#F3F2EE;padding:3px 10px;border-radius:0 5px 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-site{padding:0!important;background:#FBFAF7;min-height:318px;display:flex;flex-direction:column}
.fx-site>*{margin-inline:16px}
.fx-btn{display:inline-block;align-self:flex-start;margin-top:auto!important;margin-bottom:16px;background:var(--a);color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.04em;padding:9px 14px;border-top-right-radius:8px;border-bottom-left-radius:8px}
.fx-stage .fx-btn{position:relative;overflow:hidden}
/* The tour’s bar on the chosen row runs out as the example’s story ends: home.js sets how
   long (--fy-t) and, when it starts part way through, a negative delay (--fy-d). */
.fy.fy-auto .tab[aria-selected="true"]{position:relative;overflow:hidden}
.fy.fy-auto .tab[aria-selected="true"]::before{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--signal-dark);transform-origin:left;animation:fy-time var(--fy-t,7s) linear var(--fy-d,0ms) both}
@keyframes fy-time{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:860px){.fy.fy-auto .tab[aria-selected="true"]::before{height:2px}}

/* ---------- Each example as its own small site ----------
   A nav on the picture, a hero that reads as a photograph (layered light, not a flat
   fill), a typeface that suits the business, and one thing on each that keeps moving
   while you look at it. Georgia is on every system, so the serifs need no download. */
@media (prefers-reduced-motion:no-preference){
  @keyframes fx-sway{from{transform:translateX(-7%)}to{transform:translateX(7%)}}
  @keyframes fx-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
  @keyframes fx-steam{0%{opacity:0;transform:translateY(4px)}40%{opacity:1}100%{opacity:0;transform:translateY(-8px)}}
  @keyframes fx-shine{from{background-position:120% 0}to{background-position:-120% 0}}
  @keyframes fx-flick{0%,86%,100%{opacity:1}88%{opacity:.35}90%{opacity:1}92%{opacity:.5}}
  @keyframes fx-fill{from{width:52%}}
  @keyframes fx-stripe{to{background-position:34px 0}}
  @keyframes fx-dash{to{stroke-dashoffset:-78}}
  @keyframes fx-ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--a) 55%,transparent)}100%{box-shadow:0 0 0 9px transparent}}
  @keyframes fx-rise{from{transform:translateY(14px)}to{transform:translateY(0)}}
  @keyframes fx-drift{from{transform:translate(0,0)}to{transform:translate(-14px,6px)}}
  @keyframes fx-bump{0%,88%,100%{transform:none}92%{transform:scale(1.3)}}
  @keyframes fx-heart{0%,100%{box-shadow:0 0 0 2px var(--a2)}50%{box-shadow:0 0 0 2px var(--a2),0 0 0 6px color-mix(in srgb,var(--a2) 35%,transparent)}}
  @keyframes fx-glow{0%,100%{background:#fff}50%{background:color-mix(in srgb,var(--a2) 22%,#fff)}}
}
/* what happens behind it, its tick in the colours of that site’s own button (--tk, --tk2) */
.fx-note{position:absolute;right:-8px;bottom:0;display:flex;align-items:center;gap:10px;background:#fff;color:var(--ink);padding:11px 16px 11px 12px;border-radius:0 var(--r-btn) 0 var(--r-btn);box-shadow:0 14px 34px rgba(0,0,0,.3);max-width:78%}
.fx-note b{display:block;font-size:13px}
.fx-note small{display:block;font-size:12px;color:#5B616A;margin-top:1px}
.fx-dot{width:30px;height:30px;flex:none;border-radius:50%;background:var(--tk,var(--a));position:relative}
.fx-dot svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--tk2,var(--a2));stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.fx-dot path{stroke-dasharray:20}
.fx-dot:has(svg)::after{display:none}
.fx-dot::after{content:"";position:absolute;inset:0;background:var(--tk2,var(--a2));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M9 15.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M9 15.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
/* While the stories run, each note waits for its own story to bring it in. */
.fy.fx-stories .fx-note{opacity:0}
@media (max-width:560px){
  .fx-site{min-height:0}
  .fx-stage{padding-bottom:52px}
  .fx-note{right:-4px;bottom:0;max-width:88%}
}
/* The other side of it: a phone in front of the blurred site, where the same booking,
   order or reminder lands. The stories draw it (home-stories.js). */
.fx-own{position:absolute;right:22px;bottom:44px;width:184px;z-index:2;background:var(--ink);color:var(--paper);border:5px solid var(--ink-hi);border-radius:22px;padding:14px 12px 13px;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 18px 40px rgba(0,0,0,.4);font-size:12px;line-height:1.3}
.fo-who{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--on-ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fo-n{display:grid;margin-top:8px}.fo-n b{grid-area:1/1;font-size:30px;line-height:1;font-weight:600}
.fo-now{opacity:0}
.fo-what{display:block;color:var(--on-ink-dim);margin-top:3px}
.fo-bars{display:flex;gap:4px;align-items:flex-end;height:34px;margin:10px 0}
.fo-bars i{flex:1;height:calc(var(--h)*100%);background:var(--ink-hi);border-top-right-radius:3px}
.fo-bars i.fo-last{height:86%;background:var(--signal-on-raised);transform-origin:bottom;transform:scaleY(0)}
.fo-row{display:flex;gap:8px;align-items:center;background:var(--ink-raised);padding:7px 8px;border-radius:0 var(--r-btn) 0 var(--r-btn);opacity:0}
.fo-row b{display:block;font-size:11.5px;font-weight:600}.fo-row small{display:block;font-size:11px;color:var(--on-ink-dim)}
.fo-nb{white-space:nowrap}
.fo-dot{width:9px;height:9px;flex:none;border-radius:50%;background:var(--signal-on-raised)}
/* the café's docket, printing */
.fo-docket{display:block;margin-top:10px;background:#FFFDF8;color:#2A1A12;font-family:var(--mono);font-size:11px;line-height:1.5;padding:9px 10px 15px;clip-path:inset(0 0 100% 0);-webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 5px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/10px 5px repeat-x;mask:linear-gradient(#000 0 0) top/100% calc(100% - 5px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/10px 5px repeat-x}
.fo-docket>*{display:block}.fo-docket b{font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:3px}.fo-docket em{font-style:normal;margin-top:5px;padding-top:5px;border-top:1px dashed #C4AE98;color:#6E5440}
/* the maker’s postage label */
.fo-label{display:block;margin-top:10px;background:#fff;color:#2A1C12;padding:9px 10px 10px;border:1px solid #DCCFBB;font-size:11.5px;line-height:1.35;opacity:0}
.fo-label>*{display:block}.fo-label small{font-family:var(--mono);font-size:11px;color:#5E4C3B}.fo-label b{font-family:"ExDMSerif",Georgia,serif;font-weight:400;font-size:19px;line-height:1.15;margin:3px 0 2px}
/* the salon’s reminder, and the answer; the docket, label and messages want a wider screen */
.fx-own-wide{width:214px}
.fo-chat{display:flex;flex-direction:column;gap:6px;margin-top:8px;min-height:150px}
.fo-chat>small{align-self:center;font-size:11px;color:var(--on-ink-dim)}
.fc-b{align-self:flex-start;max-width:85%;background:var(--ink-hi);color:var(--paper);padding:7px 10px;border-radius:14px 14px 14px 4px;font-size:12px;line-height:1.35}
.fc-me{align-self:flex-end;background:#EEF0E8;color:#24332E;border-radius:14px 14px 4px 14px}
.fc-dots i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--on-ink-dim);margin:0 2px;animation:fc-dot 1s ease-in-out infinite}.fc-dots i:nth-child(2){animation-delay:.15s}.fc-dots i:nth-child(3){animation-delay:.3s}
@keyframes fc-dot{0%,100%{transform:none;opacity:.5}40%{transform:translateY(-3px);opacity:1}}
@media (max-width:560px){
  .fx-own{width:168px;right:12px;bottom:66px;padding:10px 9px;border-width:4px;border-radius:18px}
  .fo-who{letter-spacing:.02em}
  .fo-n b{font-size:22px}.fo-bars{display:none}.fo-row{margin-top:8px}
  .fx-own-wide{width:204px}.fo-chat{min-height:140px}
}
.fx-own{opacity:0}
/* What the stories add and change. */
.fx-stories :is(.cf-t u,.ch-amt u,.sc-grid u,.sa-day u,.lt-days i,.hx-larger td i){transition:background-color .35s,color .35s,border-color .35s}
.fx-stories .ch-bar{position:relative}
.fx-stage .fx-caret{display:inline-block;width:0;height:1em;margin:-.2em 0 -.2em 1px;padding:0;background:none;border-left:1.5px solid currentColor;vertical-align:middle}.fx-gone,.hx tr.fx-gone{display:none!important}
.fx-glow{position:absolute;top:50%;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle,#F2B33D 0 30%,rgba(242,179,61,.4) 31% 62%,transparent 63%);pointer-events:none}
.fx-chip{position:absolute;z-index:3;background:#12442A;color:#fff;font-size:11px;line-height:1.3;font-weight:600;padding:4px 9px;border-top-right-radius:8px;border-bottom-left-radius:8px;white-space:nowrap}
.fx-rider{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#2B1D4A;box-shadow:0 0 0 3px #BFEFDD;z-index:2;opacity:0}
.fx-circle{position:absolute;inset:-5px -4px;transform:rotate(-4deg);z-index:2;pointer-events:none}.ph-strip .fx-circle svg{position:static;inset:auto;width:100%;height:100%;opacity:1;fill:none;stroke:#F4EFE4;stroke-width:2;stroke-dasharray:100}.fx-circle :is(ellipse,path){vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}.ph-strip .fx-circle svg{overflow:visible;stroke-width:2.2}
/* The layers, calmer: each sheet named, further apart, and only the one being described
   at full strength. The other two sit back so the eye has one thing to read. */
.sys-web{transform:translate3d(0,calc(var(--s)*-92%),calc(var(--s)*var(--z,1)*210px))}
.sys-adm{transform:translate3d(0,calc(var(--s)*-46%),calc(var(--s)*var(--z,1)*105px))}
.sys-stack{--s:clamp(0,(var(--p) - .2)/.2,1);transform:translate(calc(var(--t)*-4%),calc(var(--s)*var(--z,1)*118px)) rotateX(calc(var(--t)*56deg)) rotateZ(calc(var(--t)*-30deg))}
.scenes-live .sys-ly{--a2:clamp(0,(var(--p) - .40)*14,1);--a3:clamp(0,(var(--p) - .64)*14,1);transition:filter .2s linear}
.scenes-live .sys-web{filter:brightness(calc(1 - var(--a2)*.55))}
.scenes-live .sys-adm{filter:brightness(calc(1 - var(--a3)*.55))}
.scenes-live .sys-ord{filter:brightness(calc(.6 + var(--a3)*.4))}
@media (prefers-reduced-motion:reduce){.scenes-live .sys-ly{transition:none}}
/* The diagram’s labels: one beside each sheet, upright, with a signal line pointing at it.
   They replace the slanted labels printed on the sheets. The one being described is white. */
.sys-scene .sys-art .sys-tag{display:flex;align-items:center;gap:10px;position:absolute;right:0;z-index:5;padding:0;font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--on-ink-dim);opacity:clamp(0,(var(--p) - .34)*10,1);transform:none;transition:color .25s ease}
.sys-scene .sys-art .sys-tag::before{content:"";position:static;flex:none;width:34px;height:2px;background:var(--signal-dark)}
.sys-scene .sys-art .sys-tag.t1{top:19%}
.sys-scene .sys-art .sys-tag.t2{top:43%}
.sys-scene .sys-art .sys-tag.t3{top:86%}
.sys-scene .sys-stack{left:-7%}
.sys-scene .scene-pin:not(:has(.layers li:nth-child(2).lit)) .sys-art .sys-tag.t1,.sys-scene .scene-pin:has(.layers li:nth-child(2).lit):not(:has(.layers li:nth-child(3).lit)) .sys-art .sys-tag.t2,.sys-scene .scene-pin:has(.layers li:nth-child(3).lit) .sys-art .sys-tag.t3{color:#fff;font-weight:600}
html:not(.scenes-live) .sys-scene .sys-art .sys-tag{opacity:1;color:#fff}
@media (prefers-reduced-motion:reduce){.sys-scene .sys-art .sys-tag{transition:none}}
/* On a phone there is no room beside the sheets for their labels, and the cards below name
   the layers, so the labels are left out and the sheets move to the middle (9% is what
   centres them once they have turned). */
@media (max-width:860px){.sys-scene .sys-art .sys-tag{display:none}.sys-scene .sys-stack{left:9%}}

/* What is on the three sheets: each shows the one thing its words describe. The same concert, membership and hoodie
   appear on all three, so the eye can follow them down through the layers. */
.sys-ly{padding:0;display:flex;flex-direction:column}
.sx-body{flex:1;min-height:0;padding:5% 5.5%;display:flex;flex-direction:column}
.sx-nav{display:flex;align-items:center;gap:14px;font-size:11.5px;margin-bottom:3%}
.sx-nav b{flex:1;font-size:13px;font-weight:600}.sx-nav span{color:var(--slate)}
.sx-hero{flex:1;display:flex;align-items:stretch;background:var(--ink);color:var(--paper);border-top-right-radius:12px;border-bottom-left-radius:12px;overflow:hidden}
.sx-hero>div{flex:1.2;padding:5%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:5px}
.sx-hero small{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.sx-hero strong{font-size:23px;font-weight:600;letter-spacing:-.01em;margin-bottom:5px}
.sx-pic{flex:1;display:grid;place-items:center;background:var(--ink-raised);padding:4%}.sx-pic svg{width:100%;height:100%}
.sx-cards{display:grid;grid-template-columns:1fr 1fr;gap:4%;margin-top:3%}
.sx-cards span{display:grid;gap:1px;padding:6px 10px;background:var(--paper);font-size:11px;color:var(--slate);border-top-right-radius:8px;border-bottom-left-radius:8px}
.sx-cards b{font-size:12.5px;font-weight:600;color:var(--ink)}
.sx-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:3%}
.sx-h b{font-size:16px;font-weight:600}.sx-h>span:not(.sl-btn){font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.sx-row{display:flex;align-items:center;gap:10px;padding:5px 11px;margin-bottom:5px;background:var(--white);font-size:10.5px;line-height:1.25;border-top-right-radius:8px;border-bottom-left-radius:8px}
.sx-row>span:first-child{flex:1;display:grid;gap:1px;color:var(--slate);min-width:0}
.sx-row b{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-row em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);min-width:38px;text-align:right}
.sx-row em.live{color:var(--signal)}
.sx-field{padding:4px 9px;font-size:12px;font-weight:600;color:var(--ink);background:var(--paper);border-bottom:2px solid var(--rule-strong,#CFCBC2)}
.sx-row.on{box-shadow:inset 3px 0 0 var(--signal)}
.sx-row.on .sx-field{border-bottom-color:var(--signal);background:var(--white);box-shadow:0 0 0 2px var(--signal-bg,#FBE9DF)}
.sys-ord .sx-row{background:rgba(255,255,255,.07);color:var(--on-ink-dim)}
.sys-ord .sx-row>span:first-child{color:var(--on-ink-dim)}
.sys-ord .sx-row b{color:var(--paper)}
.sys-ord .sx-row em{color:var(--signal-on-raised);min-width:0}
.sx-foot{display:flex;justify-content:space-between;align-items:baseline;margin-top:auto;padding-top:2%}
.sx-foot span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.75}.sx-foot b{font-size:19px;line-height:1;font-weight:600}
@media (max-width:860px){.sx-nav{font-size:8px;gap:8px}.sx-nav b{font-size:9px}.sx-hero strong{font-size:14px}.sx-hero small{font-size:7px}
  .sx-cards span{font-size:7.5px;padding:5px 7px}.sx-cards b,.sx-row b{font-size:9px}.sx-row{font-size:7.5px;padding:5px 7px;margin-bottom:4px}.sx-row em{font-size:7px}.sx-field{font-size:8px;padding:2px 6px}.sx-h b{font-size:12px}.sx-foot b{font-size:14px}}

/* The layer being described, in one card on the raised ink (no outline: the colour is enough).
   Along its top, the three layers by name: the one being described in signal, the ones
   already passed paler, the one still to come in ink. */
.sys-scene .layers{margin-top:26px;max-width:460px}
.sys-scene .layers li{display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px;align-content:start;padding:20px 24px 24px;background:var(--ink-raised);border-top-right-radius:19px;border-bottom-left-radius:19px}
.ly-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:16px}
.ly-bar i{display:block;padding-top:9px;border-top:4px solid var(--ink-hi);font-style:normal;font-size:12.5px;line-height:1.25;color:var(--on-ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ly-bar i.done{border-top-color:rgba(255,255,255,.4)}
.ly-bar i.on{border-top-color:var(--signal-dark);color:var(--paper);font-weight:600}
.sys-scene .layers b{font-size:clamp(21px,2vw,24px);margin:0 0 2px}
.sys-scene .ly-d{font-size:16px;line-height:1.5}
html:not(.scenes-live) .sys-scene .layers{gap:10px}
@media (max-width:860px){.sys-scene .layers{margin-top:16px}.sys-scene .layers li{padding:14px 16px 18px}.ly-bar{margin-bottom:12px;gap:5px}.ly-bar i{font-size:12px}.sys-scene .layers b{font-size:19px}.sys-scene .ly-d{font-size:14.5px}}

/* What we build, on a phone: two across, each drawing cut to its top two lines at full size
   so its words can be read (12px at the least). In the markup, .ph-no drops a part on a
   phone and data-s gives a shorter wording to show there in place of the long one. */
@media (max-width:520px){
  .of{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .of-i strong{font-size:13px;padding:9px 11px 11px;min-height:3.2em}
  .of .of-art{padding:12px;gap:8px}
  .of-art>.rule,.of-art .ph-no{display:none}
  .of-art>:nth-child(n+3 of :not(.rule,.ph-no)){display:none}
  .of :is(.tx,.tx.s,.amt,.pill,.bub,.mono,.cal b,.az i){font-size:12px}
  .of .tag{font-size:12px;letter-spacing:.02em;padding:2px 6px}
  .of .av{width:22px;height:22px;font-size:12px}
  .of .mapart{height:42px}
  .of [data-s]{font-size:0!important}
  .of [data-s]::after{content:attr(data-s);font-size:12px}
}
@media (max-width:374px){.of .of-art{padding:10px}}
@media (max-width:359px){.of .of-art{padding:8px}.of :is(.ln,.row){gap:5px}.of .row{padding-inline:6px}}
/* Who we build for: the list sits in two columns so it matches the height of the example beside it. */
@media (min-width:1021px){
  .fy{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
  .fy .tabs{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:8px}
  .fy .panes{padding-top:24px;padding-bottom:24px}
  .fy .tab{font-size:16px;padding:14px 14px;gap:12px;line-height:1.25}
  .fy .tab .ico{width:22px;height:22px}
  .fy .tab::after{display:none}
  .fy .tab:last-child{grid-column:1/-1}
}

/* ---------- Who we build for: eleven sites, each drawn as its own thing ----------
   Every example has its own layout, colours and lettering: no two share a display face or
   a button colour. The display faces are small files with font-display:swap and a system
   face named after each, so the words show at once and change when the file arrives. They
   are declared in home-fonts.css, which the page holds switched off and home.js switches on
   once the examples are a screen away: declared here, a browser fetched every one as the
   page opened, because every example is laid out from the start (so that the panel can be
   as tall as the tallest). What they share is ours: the browser frame, the phone and the
   note that lands. */
.hx{position:relative;min-height:318px;display:block;padding:0!important;font-family:var(--sans);font-size:13px;line-height:1.4;overflow:hidden}
.hx u{text-decoration:none}
.hx>*{margin-left:0!important;margin-right:0!important}
.hx th{font-family:inherit;letter-spacing:0;text-transform:none}
.hx p,.hx span,.hx li{text-align:left!important}.hx .fx-btn,.hx .bd-stage,.hx .sa-top span{text-align:center!important}.hx p{margin:0}
.hx .fx-btn{display:inline-block;align-self:auto;margin:0!important;letter-spacing:0;border-radius:0;font-size:13px;font-weight:600;padding:9px 16px;cursor:default}
.hx .fx-pick{transform-box:fill-box;transform-origin:center}
/* a band: a concert bill in Bramblecombe’s brand pack (bramble, silver, braid gold and
   programme cream; a fat-face serif for the bill, Georgia beside it, a plain sans for small print) */
.hx-band{background:#3A1638;color:#F3ECDD;display:flex;flex-direction:column;font-family:Arial,Helvetica,sans-serif}
.bd-strip{display:flex;justify-content:space-between;gap:16px;padding:6px 28px;background:#D2A64A;color:#3A1638;font-size:12px;font-weight:700}.bd-strip u{font-weight:400;text-decoration:underline;text-underline-offset:3px}
.bd-foot{display:flex;justify-content:space-between;gap:16px;padding:7px 28px;border-top:1px solid rgba(213,216,222,.18);font-size:11px;color:rgba(243,236,221,.72)}.bd-foot u{text-decoration:underline;text-underline-offset:3px}
.bd-nav{display:flex;align-items:center;justify-content:space-between;padding:14px 28px 0;font-size:12.5px}
.bd-nav b{display:flex;align-items:center;gap:9px;font-weight:400}.bd-mark{width:24px;height:26px;flex:none}
.bd-nav i{display:grid;font-style:normal;font-family:"ExAbril",Georgia,serif;font-size:16px;line-height:1;letter-spacing:.04em;text-transform:uppercase}
.bd-nav small{margin-top:3px;font-family:Georgia,"Times New Roman",serif;font-size:8.5px;letter-spacing:.42em;color:#D2A64A}
.bd-nav span{display:flex;gap:20px;color:rgba(243,236,221,.75)}.bd-nav u.on{color:#F3ECDD;box-shadow:0 2px 0 #D2A64A}
.bd-head{padding:16px 28px 10px}.bd-head strong{display:block;font-family:"ExAbril",Georgia,serif;font-weight:400;font-size:66px;line-height:1;letter-spacing:-.005em;white-space:nowrap}
.bd-head p{margin-top:8px!important;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:14px;color:rgba(243,236,221,.85)}
.bd-seats{display:flex;align-items:center;gap:22px;margin-top:auto!important;padding:10px 28px 14px;border-top:1px solid rgba(213,216,222,.28)}
.bd-plan{width:190px;flex:none}.bd-stage{display:block;font-family:Georgia,"Times New Roman",serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#D5D8DE;border-bottom:2px solid #D2A64A;padding-bottom:3px;margin:0 40px 2px}
.hx .bd-left{display:block;text-align:center!important;font-size:11px;letter-spacing:.06em;color:rgba(243,236,221,.8);margin-top:3px;font-variant-numeric:tabular-nums}
.bd-plan svg{display:block;width:100%;height:auto}.bd-plan circle{fill:rgba(213,216,222,.38)}.bd-plan circle.t{fill:rgba(213,216,222,.12)}.bd-plan circle.s{fill:#D2A64A}
.bd-pick{font-size:12px;color:rgba(243,236,221,.8)}.bd-pick b{display:block;font-size:17px;font-weight:700;color:#F3ECDD}
.hx-band .fx-btn{margin-left:auto!important;background:#D2A64A;color:#3A1638}
/* a café: two blocks of colour and one big line */
.hx-cafe{display:grid;grid-template-columns:1.15fr 1fr}
.cf-l{background:#C04420;color:#FFF3E4;padding:18px 26px 20px;display:flex;flex-direction:column}
.cf-nav{display:flex;align-items:baseline;justify-content:space-between}.cf-nav b{font-family:"ExFraunces",Georgia,serif;font-weight:400;font-size:18px}.cf-nav span{display:flex;gap:18px;font-size:12.5px}
.cf-l strong{display:block;font-family:"ExFraunces",Georgia,serif;font-weight:400;font-size:45px;line-height:1;letter-spacing:-.025em;margin-top:auto}.cf-l strong em{font-style:italic;color:#FFD9A0}
.cf-art{display:block;width:118px;height:auto;margin:14px 0 0 auto;opacity:.95}
.cf-open{margin-top:14px!important;padding-top:10px;border-top:1px solid rgba(255,243,228,.5);font-size:12px}
.cf-r{background:#FFF3E4;color:#2A1A12;padding:16px 24px 16px}
.cf-h{display:block;font-family:"ExFraunces",Georgia,serif;font-size:23px;font-weight:400;letter-spacing:-.01em;margin-bottom:8px;line-height:1.2}
.cf-f{display:grid;grid-template-columns:1.4fr 1fr;gap:6px;margin-bottom:6px}.cf-f span{padding:8px 10px;background:#fff;border:1px solid #E6D3BD;font-size:12px}
.cf-t{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}.cf-t u{padding:6px 0;text-align:center;background:#fff;border:1px solid #E6D3BD;font-size:12.5px;font-variant-numeric:tabular-nums}.cf-t u.on{background:#2A1A12;border-color:#2A1A12;color:#FFF3E4}.cf-t u.no{background:none;border-style:dashed;color:#C4AE98;text-decoration:line-through}
.hx-cafe .fx-btn{display:block;text-align:center;background:#C04420;color:#fff;border-radius:2px}
.cf-m{margin-top:12px;border-top:1px solid #E6D3BD}.cf-m p{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid #E6D3BD;font-size:12.5px}.cf-m b{font-family:"ExFraunces",Georgia,serif;font-weight:400;font-size:14px}
/* a maker: the piece across the top, the basket in a row beneath */
.hx-shop{background:#F4EEE3;color:#2A1C12}
.sh-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:11px 26px;font-size:12.5px}.sh-nav b{grid-column:2;font-family:"ExDMSerif",Georgia,serif;font-weight:400;font-size:19px}
.sh-nav span{display:flex;gap:16px;color:#6B5846}.sh-nav u.on{color:#2A1C12}.sh-nav i{grid-column:3;justify-self:end;font-style:normal;font-weight:600}
.sh-pic{position:relative;height:124px}.sh-pic svg{position:absolute;inset:0;width:100%;height:100%}
.sh-pic span{position:absolute;right:20px;bottom:10px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:#2A1C12;background:#F4EEE3;padding:2px 7px;border-radius:2px}
.sh-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;gap:26px;align-items:start;padding:16px 26px 18px}
.sh-what strong{display:block;font-family:"ExDMSerif",Georgia,serif;font-weight:400;font-size:30px;line-height:1.02}.sh-what p{margin-top:8px!important;font-size:12.5px;color:#6B5846}
.sh-row ul{list-style:none;margin:0;padding:0}.sh-row li{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid #DCCFBB;font-size:13px;font-variant-numeric:tabular-nums}.sh-row li b{font-weight:400}
.sh-row li.t{border-bottom:0}.sh-row li.t b{font-weight:600}
.hx-shop .fx-btn{background:#2A1C12;color:#F4EEE3;padding:12px 20px;min-width:8em}
/* a trade: black and yellow, the number does the talking */
.hx-trade{background:#17150F;color:#fff}
.tr-nav{display:flex;align-items:center;gap:28px;padding:12px 26px}.tr-nav b{font-family:"ExBarlow",Impact,"Arial Narrow",sans-serif;font-weight:800;font-size:17px;line-height:.9;text-transform:uppercase;color:#FFD21F}
.tr-nav span{display:flex;gap:20px;font-size:12.5px;color:#C9C4B4}.tr-nav u.on{color:#fff}.tr-nav i{margin-left:auto;font-style:normal;background:#FFD21F;color:#111;font-weight:600;font-size:15px;padding:6px 14px;font-variant-numeric:tabular-nums}
.tr-main{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:26px;padding:2px 26px 18px}
.tr-l strong{display:block;font-family:"ExBarlow",Impact,"Arial Narrow",sans-serif;font-weight:800;font-size:62px;line-height:.9;text-transform:uppercase}
.tr-sub{margin-top:8px!important;font-size:17px;font-weight:500;color:#FFD21F}
.tr-p{margin-top:14px}.tr-p p{display:flex;justify-content:space-between;padding:6px 0;border-top:1px solid #3A372E;font-size:13px}.tr-p b{font-weight:600;color:#FFD21F;font-variant-numeric:tabular-nums}
.tr-r{background:#fff;color:#111;padding:12px 14px 14px;height:max-content}.tr-r>b{display:block;font-weight:600;font-size:15px;margin-bottom:8px}
.tr-r p{margin-bottom:6px}.tr-r small{display:block;font-size:11px;color:#666}.tr-r p span{display:block;margin-top:2px;padding:4px 9px;background:#F2F2F2;font-size:12.5px}
.hx-trade .fx-btn{display:block;text-align:center;background:#111;color:#FFD21F;margin-top:10px!important}
/* a charity: one appeal down the middle of the page */
.hx-charity{background:#F6F2E7;color:#12442A}
.ch-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;padding:14px 28px 12px;border-bottom:1px solid #D9D3C0;font-size:12.5px}.ch-nav b{grid-column:2;font-family:"ExBricolage",system-ui,sans-serif;font-weight:700;font-size:15px}
.ch-nav span{display:flex;gap:18px}.ch-nav span:last-child{justify-content:flex-end}.ch-nav u.on{font-weight:600;box-shadow:0 2px 0 #12442A}
.ch-body{max-width:430px;margin:0 auto!important;padding:22px 0 20px}
.hx .ch-body strong{display:block;text-align:center;font-family:"ExBricolage",system-ui,sans-serif;font-weight:700;font-size:33px;line-height:1.04;letter-spacing:-.02em;margin-bottom:18px}
.ch-bar{height:8px;background:#DDD7C4}.ch-bar i{display:block;width:71.3%;height:100%;background:#12442A}
.ch-fig{display:flex;align-items:baseline;gap:6px;margin-top:7px!important;font-size:12px;font-variant-numeric:tabular-nums}.ch-fig b{font-size:14px}.ch-fig span{margin-left:auto}
.ch-give{display:flex;gap:8px;margin-top:18px}.ch-amt{display:flex;gap:6px;flex:1}
.ch-amt u{flex:1;padding:8px 0;text-align:center;background:#fff;border:1px solid #C9C3AE;font-family:"ExBricolage",system-ui,sans-serif;font-weight:700;font-size:16px}.ch-amt u.on{background:#12442A;border-color:#12442A;color:#F6F2E7}
/* what the gift does, under the amounts; then the Gift Aid box, ticked with the same drawn tick as the notes */
.ch-imp{margin-top:9px!important;font-size:12px;line-height:1.35}
.ch-ga{display:flex;align-items:center;gap:8px;margin-top:8px!important;font-size:12px;line-height:1.35}
.ch-ga i{flex:none;position:relative;width:16px;height:16px;background:#fff;border:1.5px solid #12442A;border-radius:2px}
.ch-ga svg{position:absolute;inset:-1.5px;width:calc(100% + 3px);height:calc(100% + 3px);fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;opacity:0}
.ch-ga.on i{background:#12442A}.ch-ga.on svg{opacity:1}
.hx-charity .fx-btn{background:#F2B33D;color:#12442A;padding:9px 22px}
/* a club: this week’s ride drawn out, your membership along the bottom */
.hx-club{background:#BFEFDD;color:#2B1D4A;display:flex;flex-direction:column}
.cl-nav{display:flex;align-items:center;justify-content:space-between;padding:14px 28px 0;font-size:12.5px}.cl-nav b{font-family:"ExSpace",system-ui,sans-serif;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.02em}.cl-nav span{display:flex;gap:20px}.cl-nav u.on{font-weight:600;box-shadow:0 2px 0 #2B1D4A}
.cl-ride{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:18px 28px 0}
.cl-ride strong{display:block;max-width:380px;font-family:"ExSpace",system-ui,sans-serif;font-weight:700;font-size:25px;line-height:1.1;letter-spacing:-.02em}.cl-ride p{font-size:12.5px;white-space:nowrap}
.cl-chart{position:relative;height:112px;margin-top:auto!important}.cl-chart svg{position:absolute;inset:0;width:100%;height:100%}
.cl-chart span{position:absolute;font-size:11px;line-height:1.2}.cl-top{left:48.5%;top:-2px}.cl-stop{left:55.5%;bottom:5px}
/* the membership card sits on the page, clear of the corner where the note lands */
.hx .cl-card{display:flex;align-items:center;gap:20px;margin:12px 28px 38px!important;padding:10px 18px;background:#2B1D4A;color:#fff;border-radius:8px}
.cl-card small{display:block;font-family:var(--mono);font-size:11px;color:#BFEFDD}
/* room for two lines, so the card keeps its height when its words change */
.cl-card>span:not(.fx-btn){display:flex;align-items:center;min-height:2.8em}.cl-card b{font-family:"ExSpace",system-ui,sans-serif;font-size:16px}.cl-card>span:not(.fx-btn){font-size:12px;color:rgba(255,255,255,.8)}
.hx-club .fx-btn{margin-left:auto!important;background:#BFEFDD;color:#2B1D4A;border-radius:4px;padding:8px 16px}
/* a school: the term on one side, the classes as cards */
.hx-school{display:grid;grid-template-columns:200px minmax(0,1fr);background:#FBE6EA;color:#4A1730}
.sc-l{display:flex;flex-direction:column;padding:18px 0 22px 26px}.sc-l b{font-size:12px;font-weight:600}
.sc-l strong{display:block;margin-top:auto;font-family:"ExCaveat","Segoe Print","Bradley Hand",cursive;font-weight:400;font-size:54px;line-height:.9;color:#B3275F}
.sc-l p{margin-top:12px!important;font-size:12px}.sc-art{width:92px;height:auto;margin:auto 0 0 28px}.sc-art+strong{margin-top:8px}
.sc-r{padding:18px 26px 22px 12px}
.sc-days{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;font-size:12px;font-weight:600;margin-bottom:8px}
.sc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sc-grid u{display:block;padding:10px 12px 12px;background:#fff;border-radius:4px;font-size:17px;font-weight:600;line-height:1.15}
.sc-grid small{display:block;font-family:var(--sans);font-size:11px;font-weight:400;color:#8A5A6E;margin-bottom:6px}.sc-grid i{display:block;font-family:var(--sans);font-style:normal;font-size:11px;font-weight:400;margin-top:3px;color:#8A5A6E}
.sc-grid u.on{background:#4A1730;color:#fff}.sc-grid u.on small,.sc-grid u.on i{color:#F4B9CB}.sc-grid u.full{background:rgba(255,255,255,.45);color:#8A5A6E}.sc-grid u.full :is(small,i){color:#8A5A6E}
.sc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;font-size:12px}
.hx-school .fx-btn{background:#B3275F;color:#fff;border-radius:99px}
/* a salon: the list, the day, the chair */
.hx-salon{background:#EEF0E8;color:#24332E;font-family:"ExCormorant",Georgia,serif;font-weight:500;padding:18px 28px!important}
.sa-top{position:relative;text-align:center;padding-bottom:12px;border-bottom:1px solid #24332E}.sa-art{position:absolute;left:0;top:4px;width:104px;height:auto;opacity:.8}.sa-art.r{left:auto;right:0;transform:scaleX(-1)}
.sa-top strong{display:block;font-size:31px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;line-height:1.1}.sa-top span{display:block;text-align:center;font-style:italic;font-size:15px}
.sa-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;margin-top:14px}
.sa-list{list-style:none;margin:0;padding:0}.sa-list li{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;border-bottom:1px solid #CDD2C4;font-size:18px}
.sa-list small{display:block;font-style:italic;font-size:14px;color:#5E6E67}.sa-list b{font-weight:500;font-size:21px}
.sa-list li.on{border-bottom:2px solid #24332E}
.sa-day small{display:block;font-style:italic;font-size:15px;margin-bottom:8px}
.sa-day div{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}
.sa-day u{padding:6px 0;text-align:center;border:1px solid #24332E;font-size:17px}.sa-day u.on{background:#24332E;color:#EEF0E8}.sa-day u.no{border-color:#CDD2C4;color:#A9B0A2;text-decoration:line-through}
.hx-salon .fx-btn{display:block;text-align:center;background:#24332E;color:#EEF0E8;font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;padding:11px 10px}
/* a holiday let: the evening view, the nights on a card */
.hx-let{color:#1F2A44}
.lt-pic{position:absolute;inset:0}.lt-pic svg{position:absolute;inset:0;width:100%;height:100%}
.lt-nav{position:absolute;left:26px;top:20px;display:flex;gap:18px;font-size:12.5px}
.lt-pic strong{position:absolute;left:26px;top:58px;font-family:"ExPlayfair",Georgia,serif;font-style:italic;font-weight:500;font-size:40px;line-height:1}
.lt-pic>span{position:absolute;left:27px;top:106px;font-size:12px;color:rgba(31,42,68,.82)}
.lt-card{position:absolute;right:20px;top:20px;width:256px;background:#FFFDF8;color:#2A2230;border-radius:3px;padding:16px}
.lt-card>b{display:block;font-family:"ExPlayfair",Georgia,serif;font-style:italic;font-weight:500;font-size:19px;margin-bottom:6px}
.lt-days{display:grid;grid-template-columns:repeat(7,1fr);row-gap:4px;font-size:12px;font-variant-numeric:tabular-nums}
.lt-days em{font-style:normal;text-align:center;font-size:11px;color:#6E6577}
.lt-days i{font-style:normal;text-align:center;padding:5px 0}.lt-days i.x{color:#C3BCC8;text-decoration:line-through}
.lt-days i.on{background:#27304F;color:#fff}.lt-days i.a{border-radius:99px 0 0 99px}.lt-days i.z{border-radius:0 99px 99px 0}.lt-days i.a.z{border-radius:99px}
.lt-sum{margin-top:12px;padding-top:10px;border-top:1px solid #E6E0D6}.lt-sum p{display:flex;justify-content:space-between;margin-bottom:4px;font-size:12.5px;font-variant-numeric:tabular-nums}
.hx-let .fx-btn{display:block;margin-top:10px!important;text-align:center;background:#22636B;color:#fff;border-radius:3px}
/* a photographer: the contact sheet */
.hx-photo{background:#16120F;color:#EDE9E1;padding:16px 26px!important}
.ph-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ph-top strong{font-family:"ExInstrument",Georgia,serif;font-style:italic;font-weight:400;font-size:30px;line-height:1}.ph-top span{font-size:12px;color:#A8A39A}
.ph-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 8px;margin:14px 0 28px}
.ph-strip i{position:relative;display:block;height:74px}
.ph-strip svg{position:absolute;inset:8px 0;width:100%;height:calc(100% - 16px);fill:none;stroke:#F4EFE4;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
/* frame numbers on the edge of the sheet, under each frame, where no circle reaches them */
.ph-strip small{position:absolute;left:0;top:100%;margin-top:4px;font-family:var(--mono);font-style:normal;font-size:11px;line-height:1;color:#A8A39A}
.ph-strip .ph-ring path{stroke-dasharray:none}
.ph-foot{display:flex;align-items:center;gap:14px;font-size:12px;color:#A8A39A}
.hx-photo .fx-btn{background:none;color:#EDE9E1;border:1px solid #EDE9E1}
/* a larger organisation: a working tool, plain on purpose */
.hx-larger{background:#fff;color:#1D2733;font-size:12px;display:flex;flex-direction:column}
.lg-wrap{display:grid;grid-template-columns:136px minmax(0,1fr);min-height:318px;flex:1}
.lg-side{display:flex;flex-direction:column;gap:2px;padding:14px 10px;background:#17212E;color:#B9C6D6}
.lg-side b{color:#fff;font-size:12.5px;font-weight:600;margin:0 8px 12px}.lg-side u{padding:6px 8px;border-radius:6px}.lg-side u.on{background:#263548;color:#fff}
.lg-main{padding:14px 18px}
.lg-bar{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}.lg-bar strong{font-size:18px;font-weight:600}.lg-bar span{color:#566476}.lg-bar em{font-style:normal;color:#B5402B;font-weight:600}
.lg-main table{width:100%;border-collapse:collapse}.lg-main th{text-align:left;font-size:11px;font-weight:500;color:#566476;padding:6px 8px;border-bottom:1px solid #D4DCE5}
.lg-main td{padding:8px;border-bottom:1px solid #E6EBF0;font-size:12px}.lg-main td i{display:inline-block;padding:1px 8px;border-radius:99px;font-style:normal;font-weight:600;font-size:11px}.lg-main .b{color:#2D5B8A;background:#E6EEF6}.lg-main .a{color:#8A5E00;background:#FBF1D6}.lg-main .g{color:#1E6B3A;background:#E6EFE7}
.lg-req{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding:10px 12px;background:#F4F6F9;border-radius:8px}
.hx-larger .fx-btn{background:#17212E;color:#fff;font-size:12px;padding:6px 14px;border-radius:6px}
/* Every frame is as tall as the tallest example, so each one says where its extra height
   goes: to a picture, the route chart or the contact sheet, or as space above the part of
   the page that sits at the bottom. */
.hx-trade,.hx-charity,.hx-photo{display:flex;flex-direction:column}
.tr-main{flex:1}
.hx .ch-body{margin-block:auto!important}
.hx-club .cl-chart{flex:1 0 auto;height:auto;min-height:112px;margin-top:14px!important}
.ph-strip{flex:1;grid-auto-rows:minmax(74px,1fr)}.ph-strip i{height:auto}
@media (max-width:860px){
  .hx{min-height:0}.hx .hx-x{display:none!important}
  .hx table{display:table!important;width:100%}.hx tbody{display:table-row-group!important}.hx tr{display:table-row!important}.hx td,.hx th{display:table-cell!important}.hx td::before{content:none!important}
  .hx-cafe,.hx-school,.tr-main,.sh-row,.sa-main{grid-template-columns:minmax(0,1fr)}
  .bd-strip{padding:6px 18px;font-size:11px}.bd-nav{padding:12px 18px 0}.bd-head{padding:10px 18px 16px}.bd-head strong{font-size:62px;white-space:normal}.bd-seats{flex-wrap:wrap;gap:10px 14px;padding:12px 18px 16px}.bd-plan{width:100%;max-width:230px;margin:0 auto!important}.hx-band .fx-btn{white-space:nowrap}
  .cf-l{position:relative;padding:16px 18px}.cf-l strong{font-size:36px;margin-top:22px}.cf-art{position:absolute;right:16px;top:10px;width:76px;margin:0}.cf-r{padding:16px 18px 18px}
  .sh-nav{padding:11px 18px;grid-template-columns:auto 1fr}.sh-nav b{grid-column:1}.sh-nav i{grid-column:2}.sh-pic{height:104px}.sh-pic span{right:18px;top:calc(100% + 21px);bottom:auto;background:none;padding:0}.hx .sh-what .hx-x{display:block!important}.sh-row{padding:14px 18px 18px;gap:10px}.sh-what strong{font-size:27px}.hx-shop .fx-btn{display:block}
  .tr-nav{padding:14px 18px}.tr-nav i{font-size:13px;padding:5px 10px}.tr-main{padding:4px 18px 18px;gap:18px}.tr-l strong{font-size:52px}.tr-p{display:none}
  .ch-nav{display:block;padding:14px 18px 12px}.hx .ch-nav b{display:block;text-align:center}.ch-body{padding:18px 18px}.hx .ch-body strong{font-size:27px}.ch-give{flex-wrap:wrap}.ch-amt{flex:1 1 100%}.hx-charity .fx-btn{flex:1}
  .cl-nav{padding:14px 18px 0}.cl-ride{display:block;padding:14px 18px 0}.cl-ride strong{font-size:22px}.hx .cl-ride .hx-x{display:block!important;margin-top:6px}.hx-club .cl-chart{min-height:96px;margin-top:18px!important}.cl-chart span{font-size:11px}.hx .cl-card{margin:10px 18px 34px!important;padding:10px 14px;gap:12px}
  .hx-school{align-content:start}.sc-l{padding:16px 18px 0}.sc-l strong{margin-top:14px;font-size:46px}.sc-l strong br{display:none}.sc-l p{margin-top:6px!important}.sc-l p br{display:none}.sc-r{padding:14px 18px 18px}
  .sc-grid u{padding:8px 8px 10px;font-size:15px}.hx .sc-grid .hx-x{display:block!important}.sc-days{font-size:11px}.sc-foot{display:block}.sc-foot span:first-child{display:block}.sc-foot br{display:none}.sc-foot .fx-btn{margin-top:10px!important}
  .hx-salon{padding:16px 18px!important}.sa-top strong{font-size:24px}.sa-main{gap:14px}
  .hx-let{display:flex;flex-direction:column}.lt-pic{position:relative;flex:1 0 150px;height:auto}.lt-cot{display:none}.lt-pic strong{left:18px;top:22px;bottom:auto;font-size:30px}.lt-pic>span{left:18px;top:60px;bottom:auto;font-size:11px}.lt-card{position:relative;right:auto;top:auto;width:auto;border-radius:0;box-shadow:none}
  .hx-photo{padding:16px 18px!important}.ph-top{display:block}.ph-top span{display:block;margin-top:5px}.ph-strip{grid-auto-rows:minmax(60px,1fr)}.ph-foot{display:block}.ph-foot span:last-child{display:block;margin-top:8px}
  .lg-wrap{grid-template-columns:1fr;grid-template-rows:auto 1fr;min-height:0}.lg-req{display:block}.lg-req .fx-btn{margin-top:8px!important}
  .hx .lg-side{display:flex!important;flex-flow:row wrap;align-items:center;gap:2px 4px;padding:10px 12px}.lg-side b{flex:1 0 100%;margin:0 8px 6px}
}
@media (max-width:560px){
  /* the band’s strip keeps the room of its two lines when its words change to one */
  .bd-strip{min-height:calc(2.8em + 12px);align-items:center}
  /* the tallest examples kept a little shorter, so the others have less to fill */
  .bd-head strong{font-size:56px}.bd-plan{max-width:210px}
  .cf-l strong{font-size:33px}
  .tr-l strong{font-size:46px}.tr-sub{font-size:15px}
  /* room under the total for the Gift Aid to rise in, where the line has none beside it */
  .ch-give{margin-top:34px}
  /* the reed maker’s stock line beside the product’s name, clear of the drawing */
  .sh-pic span{letter-spacing:0}
  /* the contact sheet three across, the membership card on two lines */
  .ph-strip{grid-template-columns:repeat(3,1fr)}
  .hx .cl-card{flex-wrap:wrap;row-gap:4px}.hx .cl-card>.hx-x{display:flex!important;order:3;flex:1 0 100%}
  .lg-req .fx-pick{display:block}
}
@media (max-width:380px){.sh-what strong{font-size:23px}}
@media (max-width:340px){.sh-pic span{top:calc(100% + 8px)}.sh-row{padding-top:30px}}
/* Phone type scale: this page’s share. The scale is described at the end of site.css. */
@media (max-width:520px){
  /* labels and tags */
  .sys-scene .ly-n,.eq-n{font-size:12px}
  /* secondary text */
  .sys-scene .ly-d,.of-i strong,.hq-chips .ce span,.hq-hint,.hq .lvl-e em{font-size:15px}
  /* body text inside cards and lists */
  .strip .cell b,.of-open p,.st-list p,section .st-end.st-end,.case.cs-row .body p,.hq .lvl-e strong{font-size:17px}
  /* card titles */
  .sys-scene .layers b,.st-list b{font-size:18px}
  /* the intro paragraph */
  .fy .pane p.lede,.st-lede{font-size:20px}
  /* sub-headings */
  .case.cs-row .body :is(h3,.as-h3){font-size:22px}
  /* calmer line spacing in the four boxes under the hero */
  main .strip .cell .small{line-height:1.5}
}
/* On a phone the stack of sheets sits inside the screen, clear of the left edge. */
@media (max-width:520px){.sys-scene .sys-stack{left:8%;width:54%}}

/* The bottom layer: one booking, followed through. Each step ticks as the scroll passes it. */
.sys-ord .sx-h b{font-size:14.5px}
.sx-step{--k:clamp(0,(var(--p,1) - var(--at,0))*16,1);position:relative;display:flex;align-items:center;gap:10px;padding:6px 0;opacity:calc(.38 + var(--k)*.62)}
.sx-step i{position:relative;flex:none;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.28)}
.sx-step i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--signal-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.4 8.3l2.4 2.4 4.8-5.2' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;transform:scale(var(--k));box-shadow:0 0 0 calc((1 - var(--k))*7px) rgba(232,89,12,calc(var(--k)*(1 - var(--k))*1.6))}
.sx-step+.sx-step::before,.sx-step+.sx-step::after{content:"";position:absolute;left:7px;bottom:calc(50% + 9px);width:2px;height:calc(100% - 18px);background:rgba(255,255,255,.16)}
.sx-step+.sx-step::after{background:var(--signal-dark);transform-origin:50% 0;transform:scaleY(var(--k))}
.sx-step b{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-step em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--signal-on-raised);opacity:var(--k);transform:translateX(calc((1 - var(--k))*6px))}
.sys-ord .sx-foot span{font-size:10px}
.sys-adm .sx-foot b{font-size:17px}
.sx-bk{font-style:normal;--k:clamp(0,(var(--p,1) - .9)*16,1);color:color-mix(in srgb,var(--signal) calc(var(--k)*100%),var(--slate));font-weight:600}
@media (max-width:760px){.sx-step{gap:6px;padding:3px 0}.sx-step i{width:11px;height:11px}.sx-step b{font-size:9px}.sx-step em{font-size:7px}.sys-ord .sx-h b{font-size:10px}.sx-step+.sx-step::before,.sx-step+.sx-step::after{left:4.5px;bottom:calc(50% + 6px);height:calc(100% - 12px)}}
@media (max-width:760px){.sys-ord .sx-h b{font-size:9px;white-space:nowrap}.sys-ord .sx-h>span:not(.sl-btn),.sys-ord .sx-foot span{font-size:7px}}

/* Where it started: a path of four steps ending on "now", with the band card under the heading. */
.st .st-list{border:0;position:relative}
.st .st-list li:not(:last-child)::after{content:"";position:absolute;left:21px;top:44px;bottom:0;width:2px;background:var(--signal)}
.st .st-list li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:22px;align-items:start;padding:0 0 18px;border:0}
.st .st-list li:last-child{padding-bottom:0}
.st .st-list li::before{content:counter(st,decimal-leading-zero);grid-row:auto;position:relative;z-index:1;width:44px;height:44px;display:grid;place-items:center;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:13px;font-weight:400;letter-spacing:.06em;border-top-right-radius:12px;border-bottom-left-radius:12px}
.st .st-list li:last-child::before{content:"Now";background:var(--signal);color:#fff}
.st-c{background:var(--white);padding:18px 24px 20px;border-top-right-radius:var(--r-card);border-bottom-left-radius:var(--r-card)}
.st .st-list li:last-child .st-c{background:var(--ink)}
.st .st-list li:last-child b{color:var(--paper)}
.st .st-list li:last-child p{color:#C9CED4}
.st .st-list b{display:block;font-size:20px;line-height:1.25}
.st .st-list p{margin:6px 0 0;max-width:none}
.st-band{display:grid;gap:6px;justify-items:start;align-content:start;background:var(--white);padding:22px 24px 24px;border-top-right-radius:var(--r-card);border-bottom-left-radius:var(--r-card)}
.st-band b{font-size:19px;line-height:1.25}
.st-band span{font-size:16px;line-height:1.55;color:var(--body)}
.st-band .btn{margin-top:12px}
@media (min-width:901px){.st{grid-template-rows:auto 1fr;align-items:start;row-gap:0}.st-head{grid-column:1;grid-row:1}.st .st-list{grid-column:2;grid-row:1/3}.st-band{grid-column:1;grid-row:2;align-self:end;max-width:400px}}
@media (max-width:900px){.st .st-list li{grid-template-columns:36px minmax(0,1fr);column-gap:14px;padding-bottom:14px}.st .st-list li::before{width:36px;height:36px;font-size:11px}.st .st-list li:not(:last-child)::after{left:17px;top:36px}.st-c{padding:16px 18px 18px}}

/* How we work: four steps along a line that fills as the section comes into view. */
.hw-head{display:grid;grid-template-columns:minmax(0,760px) auto;justify-content:space-between;align-items:end;column-gap:40px}
.hw-head .htab{grid-column:1/-1;justify-self:start}
.hw-head .lede{margin-bottom:0}
.hw .hw-head p.lede{color:var(--on-ink);text-align:left;hyphens:manual}
.hw-more{margin:0 0 6px}
/* How we work: four steps in a row, read left to right. A thick signal rail runs the width
   of all four, and each step’s number sits on it in a paper tile, the brand’s corners, so
   the order reads as stops along one line. Under each tile, its picture and its words. The
   two planning steps are signal, the build and launch are ink. */
.pf{margin-top:48px}
.pf-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:14px}
.pf-flow li{position:relative;display:flex;flex-direction:column;min-width:0}
/* the rail and its arrow */
.pf-flow li::before{content:"";position:absolute;left:0;right:-14px;top:34px;height:12px;background:var(--signal-dark);transform-origin:0 50%}
.pf-flow li:last-child::before{content:none}
.pf-flow li::after{content:none}
.pf-top{position:relative;z-index:1;display:flex;align-items:center;height:80px}
.pf-n{display:grid;place-items:center;min-width:104px;height:80px;padding:0 16px;background:var(--paper);color:var(--ink);font-size:52px;font-weight:600;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;border-top-right-radius:20px;border-bottom-left-radius:20px}
.pf-art{position:relative;height:216px;margin-top:20px;padding:18px;display:flex;flex-direction:column;justify-content:space-between;gap:12px;background:var(--ink-raised);overflow:hidden;border-top-right-radius:var(--r-card);border-bottom-left-radius:var(--r-card)}
.pf-s1 .pf-art,.pf-s2 .pf-art{background:var(--signal);color:#fff}
.pf-flow h3{margin:22px 0 8px;font-size:clamp(26px,2.4vw,32px);line-height:1.1;letter-spacing:-.01em;color:var(--paper)}
.hw .pf-flow p{margin:0;color:var(--on-ink);font-size:16px;line-height:1.55;text-align:left;hyphens:manual}
.pf-tag{align-self:flex-start;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;background:rgba(18,22,27,.26);border-top-right-radius:6px;border-bottom-left-radius:6px}
/* 1: the call, as a voice */
.pf-wave{flex:1;display:flex;align-items:center;gap:4px}
.pf-wave i{flex:1;height:calc(var(--h)*1%);background:rgba(255,255,255,.92);border-radius:1px;transform-origin:50% 50%}
/* 2: the quote, its days split by part */
.pf-quote{flex:1;display:flex;flex-direction:column;gap:7px;padding:12px 14px;background:var(--paper);color:var(--ink);border-top-right-radius:10px;border-bottom-left-radius:10px}
.pf-quote>b{font-size:13px;font-weight:600;padding-bottom:6px;border-bottom:1px solid #D9D5CD}
.pf-quote>span{display:grid;grid-template-columns:72px minmax(0,1fr) 44px;align-items:center;gap:8px;font-size:12px}
.pf-quote em{font-style:normal;white-space:nowrap}
.pf-quote i{display:block;height:9px;width:calc(var(--d)*33.33%);background:var(--signal);border-top-right-radius:3px;border-bottom-left-radius:3px;transform-origin:0 50%}
.pf-quote small{font-family:var(--mono);font-size:11px;color:var(--slate);text-align:right;white-space:nowrap}
.pf-quote strong{margin-top:auto;padding-top:6px;border-top:1.5px solid var(--ink);font-size:13px;font-weight:600;text-align:right}
/* 3: the site taking shape on its preview link, with a comment worked in */
.pf-site{flex:1;display:flex;flex-direction:column;background:var(--paper);border-top-right-radius:10px;border-bottom-left-radius:10px;overflow:hidden}
.pf-bar{display:flex;align-items:center;gap:4px;padding:6px 9px;background:#E4E1DA}
.pf-bar i{width:6px;height:6px;border-radius:50%;background:#B9B4AA}
.pf-bar u{margin-left:8px;text-decoration:none;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.pf-page{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:8px 1fr 14px;gap:6px;padding:9px}
.pf-page i{display:block;background:#D7D3CB;border-top-right-radius:4px;border-bottom-left-radius:4px}
.pf-page .h{grid-column:1/-1;width:40%;background:var(--ink)}
.pf-page .a{background:var(--ink)}
.pf-page .b{background:#D7D3CB}
.pf-page .c{background:#E4E1DA}
.pf-say{position:absolute;right:14px;bottom:14px;max-width:72%;display:block;padding:8px 11px 9px;background:var(--white);color:var(--ink);border-top-right-radius:10px;border-bottom-left-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.pf-say b{display:block;font-size:12.5px;font-weight:600}
.pf-say small{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:11.5px;color:var(--slate)}
.pf-say small::before{content:"";width:8px;height:8px;flex:none;border-radius:50%;background:var(--signal)}
/* 4: live, the video tour, and the thirty days of fixes */
.pf-live{display:flex;align-items:center;gap:8px;padding:7px 9px;background:var(--paper);color:var(--ink);border-top-right-radius:8px;border-bottom-left-radius:8px}
.pf-live u{flex:1;text-decoration:none;font-family:var(--mono);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-live b{font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;background:var(--status-bg);color:var(--status);border-top-right-radius:5px;border-bottom-left-radius:5px}
.pf-video{display:flex;align-items:center;gap:12px}
.pf-play{flex:none;width:44px;height:44px;display:grid;place-items:center;background:var(--signal);border-top-right-radius:12px;border-bottom-left-radius:12px}
.pf-play i{margin-left:4px;border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.pf-video b{display:block;font-size:14px;color:var(--paper)}.pf-video small{display:block;font-size:12px;color:var(--on-ink-dim);margin-top:2px}
.pf-fix>span{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:3px}
.pf-fix i{aspect-ratio:1;background:var(--signal-dark);border-top-right-radius:2px;border-bottom-left-radius:2px}
.pf-fix small{display:block;margin-top:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-ink-dim)}
/* Coming in: the rail fills step by step, then each picture plays. */
@media (prefers-reduced-motion:no-preference){
  .rv .pf:not(.in) .pf-flow li::before{transform:scaleX(0)}
  .pf .pf-flow li::before{transition:transform .5s cubic-bezier(.4,0,.2,1)}
  .pf li:nth-child(1)::before{transition-delay:.1s}
  .pf li:nth-child(2)::before{transition-delay:.65s}
  .pf li:nth-child(3)::before{transition-delay:1.2s}
  .pf li:nth-child(4)::before{transition-delay:1.75s}
  .rv .pf:not(.in) :is(.pf-top,.pf-art,.pf-flow h3,.pf-flow p){opacity:0;transform:translateY(12px)}
  .pf :is(.pf-top,.pf-art,.pf-flow h3,.pf-flow p){transition:opacity .5s,transform .5s cubic-bezier(.3,.7,.2,1)}
  .pf li:nth-child(1) :is(.pf-top,.pf-art,h3,p){transition-delay:.15s}
  .pf li:nth-child(2) :is(.pf-top,.pf-art,h3,p){transition-delay:.7s}
  .pf li:nth-child(3) :is(.pf-top,.pf-art,h3,p){transition-delay:1.25s}
  .pf li:nth-child(4) :is(.pf-top,.pf-art,h3,p){transition-delay:1.8s}
  .rv .pf:not(.in) .pf-wave i{transform:scaleY(.15)}
  .pf .pf-wave i{transition:transform .5s cubic-bezier(.3,.7,.2,1) calc(.5s + var(--h)*4ms)}
  .rv .pf:not(.in) .pf-quote i{transform:scaleX(0)}
  .pf .pf-quote i{transition:transform .5s cubic-bezier(.3,.7,.2,1) 1.1s}
  .pf .pf-quote span:nth-of-type(2) i{transition-delay:1.25s}.pf .pf-quote span:nth-of-type(3) i{transition-delay:1.4s}.pf .pf-quote span:nth-of-type(4) i{transition-delay:1.55s}
  .rv .pf:not(.in) .pf-page i{opacity:0}
  .pf .pf-page i{transition:opacity .4s 1.6s}
  .pf .pf-page i:nth-child(2){transition-delay:1.75s}.pf .pf-page i:nth-child(3){transition-delay:1.9s}.pf .pf-page i:nth-child(4){transition-delay:2.05s}.pf .pf-page i:nth-child(5){transition-delay:2.2s}
  .rv .pf:not(.in) .pf-say{opacity:0;transform:translateY(10px)}
  .pf .pf-say{transition:opacity .4s 2.4s,transform .4s 2.4s}
  .rv .pf:not(.in) .pf-fix i{opacity:.15}
  .pf .pf-fix i{transition:opacity .2s 2.6s}
}
@media (max-width:980px){.hw-head{grid-template-columns:1fr;row-gap:14px}.hw-more{white-space:normal;margin:0}.pf{margin-top:34px}}
@media (max-width:1100px) and (min-width:761px){.pf-flow{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}}
/* On a phone: down the page, the rail down the left side, each step’s tile sitting on it
   with the picture and words beside the rail. */
@media (max-width:760px){
  .pf-flow{grid-template-columns:minmax(0,1fr);row-gap:0}
  .pf-flow li{padding:0 0 40px 30px}
  .pf-flow li:last-child{padding-bottom:0}
  .pf-flow li::before{left:0;right:auto;top:0;bottom:0;width:10px;height:auto;transform-origin:50% 0}
  .rv .pf:not(.in) .pf-flow li::before{transform:scaleY(0)}
  .pf-top{height:64px;margin-left:-30px}.pf-n{min-width:84px;height:64px;font-size:42px;border-top-right-radius:16px;border-bottom-left-radius:16px}
  .pf-art{height:auto;min-height:196px;margin-top:12px}
  .pf-flow h3{margin-top:18px;font-size:26px}
}

/* Where it started: plain dots on the path; only the last step carries a word. Each line
   runs from the middle of its dot to the middle of the next one (or of "Now"), behind both. */
/* --mid is the middle of a step’s title (the card’s top padding and half the title’s line),
   so each dot, and "Now", sits level with its title. */
.st .st-list li{--mid:30.5px}
.st .st-list li::before{margin-top:calc(var(--mid) - 22px)}
.st .st-list li:not(:last-child)::before{content:"";width:14px;height:14px;margin:calc(var(--mid) - 7px) 15px 15px;border-radius:50%;background:var(--ink)}
.st .st-list li:not(:last-child)::after{top:var(--mid);bottom:calc(0px - var(--mid))}
@media (max-width:900px){.st .st-list li{--mid:28.5px}.st .st-list li::before{margin-top:calc(var(--mid) - 18px)}.st .st-list li:not(:last-child)::before{width:12px;height:12px;margin:calc(var(--mid) - 6px) 12px 12px}}

/* Phones: the same page in less scrolling. The four promises two by two, the case
   studies’ pictures at the shape they have on a laptop, and four of the things we build
   (home.js shows and turns the same four). */
@media (max-width:700px){
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  .strip .cell{padding:14px}
  .cs-rows{gap:36px}
  .cs-row .photo{aspect-ratio:16/10}
  .of .of-i:nth-child(n+5){display:none}
}
/* The community note shows only while a community group is chosen. */
/* The community note shows once a community group is chosen, as on the cost page. */
.hq-set .hq-hint{display:none}
.hq-set:has(input[name="who"]:is([value="band"],[value="charity"],[value="group"],[value="school"]):checked) .hq-hint{display:block}
/* Tiles drawn as pictures rather than rows of words (21 Oct). */
.of .lanes{display:grid;gap:6px}
.of .lane{display:flex;align-items:center;gap:7px}
.of .track{position:relative;flex:1;height:20px;background:var(--soft);border-top-right-radius:4px;border-bottom-left-radius:4px}
.of .track i{position:absolute;top:3px;bottom:3px;display:flex;align-items:center;padding:0 6px;font-style:normal;font-size:10.5px;font-weight:600;white-space:nowrap;overflow:hidden;background:var(--line);border-top-right-radius:3px;border-bottom-left-radius:3px;transition:opacity .3s,background .3s}
.of .track i.on{background:var(--accent);color:#fff}
.of .track i.dim{opacity:.45}.of .track i.dim.on{opacity:1}
.of .hrs{display:flex;justify-content:space-between;padding-left:24px;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--mute)}
.of .faces{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.of .faces .av{width:auto;height:auto;aspect-ratio:1;font-size:8px}
.of .faces .av.on{background:var(--accent);color:#fff;opacity:1}
.of .rota{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:4px 6px;align-items:center}
.of .rota b{font-family:var(--mono);font-size:9.5px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);text-align:center}
.of .slot{display:flex;align-items:center;justify-content:center;height:22px;font-size:11px;font-weight:600;background:var(--soft);border-top-right-radius:4px;border-bottom-left-radius:4px;transition:background .3s,color .3s}
.of .slot.gap{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--mute)}
.of .slot.gap.on{background:var(--accent);box-shadow:none;color:#fff}
.of .ppl{gap:6px}
.of .pp{display:grid;justify-items:center;gap:5px;padding:8px 4px;background:var(--soft);border-top-right-radius:5px;border-bottom-left-radius:5px;min-width:0}
.of .pp .av{width:24px;height:24px;font-size:9px}
.of .stk{display:flex}
@media (max-width:520px){.of .stk.ph-no{display:none}}
.of .stk .av{margin-left:-5px;box-shadow:0 0 0 2px var(--ink)}
.of .stk .av:first-child{margin-left:0}
.of .mapsvg .mp2{--d:1.2s}
/* The visitor’s pointer in the examples: ink with a white edge, so it reads on any site. */
.fx-cur{position:absolute;left:0;top:0;z-index:1;width:22px;height:22px;margin:-3px 0 0 -5px;pointer-events:none}
.fx-cur svg{display:block;width:100%;height:100%;fill:var(--ink);stroke:#fff;stroke-width:1.6;stroke-linejoin:round;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
/* The owner’s phone comes in on the left, so the visitor’s confirmation on the right stays in view. */
.fx-own{right:auto;left:22px}
@media (max-width:700px){.fx-own{left:12px;right:auto}}
/* Each example’s own confirmation and phone, in that business’s brand (22 Oct). The
   visitor’s confirmation on the site takes a form of its own in each: a ticket, a docket
   of thanks, a hi-vis panel, a membership card. The phone’s screen carries the business’s
   colours, lettering and name bar, the way its own app or notification would. */
.fx-note{border-radius:0}
.fx-note small{color:inherit;opacity:.82}
.fn-ico{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:50%}
.fn-ico svg{width:20px;height:20px}
.fn-band{background:#F3ECDD;color:#3A1638;padding:0;gap:0;align-items:stretch}
.fn-stub{display:grid;align-content:center;justify-items:center;padding:8px 14px;background:#3A1638;color:#D2A64A;font-family:Georgia,"Times New Roman",serif;font-size:9px;letter-spacing:.3em;text-transform:uppercase;border-right:2px dashed #F3ECDD}
.fn-stub em{font-style:normal;font-family:"ExAbril",Georgia,serif;font-size:30px;letter-spacing:0;line-height:1;color:#F3ECDD}
.fn-band>span:last-child{padding:10px 16px 11px 14px}
.fn-band b{font-family:"ExAbril",Georgia,serif;font-weight:400;font-size:17px;letter-spacing:.03em;text-transform:uppercase}
.fn-band small{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:12px}
.fn-cafe{background:#C04420;color:#FFF3E4;border-radius:2px}
.fn-cafe b{font-family:"ExFraunces",Georgia,serif;font-weight:400;font-size:20px;line-height:1.1}
.fn-cafe .fn-ico{background:#FFF3E4}.fn-cafe .fn-ico svg{fill:none;stroke:#C04420;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fn-shop{background:#2A1C12;color:#F4EEE3;padding:12px 20px 13px}
.fn-shop b{font-family:"ExDMSerif",Georgia,serif;font-weight:400;font-size:20px;line-height:1.1}
.fn-trade{background:#FFD21F;color:#111;padding:10px 20px 11px 16px;border-left:8px solid #111}
.fn-trade b{font-family:"ExBarlow",Impact,"Arial Narrow",sans-serif;font-weight:800;font-size:25px;line-height:.95;text-transform:uppercase}
.fn-trade small{font-weight:500;opacity:1;margin-top:3px}
.fn-charity{background:#12442A;color:#F6F2E7}
.fn-charity b{font-family:"ExBricolage",system-ui,sans-serif;font-weight:700;font-size:21px;line-height:1.05;letter-spacing:-.01em}
.fn-charity .fn-ico{background:#F2B33D}.fn-charity .fn-ico svg{fill:#12442A}
.fn-club{background:#2B1D4A;color:#fff;border-radius:8px;padding:11px 12px 12px 16px;gap:18px}
.fn-club small{font-family:var(--mono);font-size:10.5px;color:#BFEFDD;opacity:1;margin:0 0 3px}
.fn-club b{font-family:"ExSpace",system-ui,sans-serif;font-weight:700;font-size:16px}
.fn-tag{flex:none;background:#BFEFDD;color:#2B1D4A;font-family:"ExSpace",system-ui,sans-serif;font-weight:700;font-size:14px;padding:6px 10px;border-radius:4px}
.fn-school{background:#B3275F;color:#fff;border-radius:99px;padding:9px 26px 11px}
.fn-school b{font-family:"ExCaveat","Segoe Print","Bradley Hand",cursive;font-weight:400;font-size:30px;line-height:1}
.fn-salon{background:#24332E;color:#EEF0E8;padding:12px 22px 13px}
.fn-salon b{font-family:"ExCormorant",Georgia,serif;font-style:italic;font-weight:500;font-size:24px;line-height:1.05}
.fn-salon small{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;margin-top:4px}
.fn-let{background:#FFFDF8;color:#2A2230;border-radius:3px}
.fn-let b{font-family:"ExPlayfair",Georgia,serif;font-style:italic;font-weight:500;font-size:19px;line-height:1.1}
.fn-photo{background:#EDE9E1;color:#16120F;padding:12px 20px 13px}
.fn-photo b{font-family:"ExInstrument",Georgia,serif;font-style:italic;font-weight:400;font-size:22px;line-height:1.05}
.fn-larger{--tk:#2F8A52;--tk2:#fff;background:#17212E;color:#fff;border-radius:8px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
/* the phone: the bezel is ours, the screen is theirs */
.fx-own{--pb:var(--ink);--pf:var(--paper);--pd:var(--on-ink-dim);--pr:var(--ink-raised);--pa:var(--signal-on-raised);--hb:var(--ink-raised);--hf:var(--paper);--hfont:var(--sans);--prad:0;background:var(--pb);color:var(--pf);overflow:hidden}
.fx-own .fo-who{display:flex;align-items:center;gap:7px;margin:-14px -12px 12px;padding:11px 12px 10px;background:var(--hb);color:var(--hf);font-family:var(--hfont);font-size:14px;line-height:1.1;letter-spacing:0;text-transform:none}
.fx-own .fo-who>small{margin-left:auto;padding-left:8px;font-family:var(--sans);font-style:normal;font-weight:400;font-size:10.5px;letter-spacing:.02em;text-transform:none;opacity:.8}
.fx-own .fo-what{color:var(--pd)}
.fx-own .fo-row{background:var(--pr);border-radius:var(--prad)}
.fx-own .fo-row small{color:var(--pd)}
.fx-own .fo-dot{background:var(--pa)}
.fx-own .fo-n b{font-family:var(--hfont)}
.fo-band{--pb:#3A1638;--pf:#F3ECDD;--pd:rgba(243,236,221,.75);--pr:rgba(243,236,221,.1);--pa:#D2A64A;--hb:#D2A64A;--hf:#3A1638}
.fo-band .fo-who>span{display:grid;font-family:"ExAbril",Georgia,serif;font-size:14px;line-height:1;letter-spacing:.04em;text-transform:uppercase}
.fo-band .fo-who>span small{margin-top:3px;font-family:Georgia,"Times New Roman",serif;font-size:8px;letter-spacing:.3em}
.fo-mk{width:18px;height:20px;flex:none}
.fo-band .fo-n b{font-family:"ExAbril",Georgia,serif;font-weight:400;font-size:42px;color:#D2A64A}
.fo-cafe{--pb:#C04420;--pf:#FFF3E4;--pd:rgba(255,243,228,.88);--hb:#2A1A12;--hf:#FFF3E4;--hfont:"ExFraunces",Georgia,serif}
.fo-cafe .fo-who{font-size:16px}
.fo-shop{--pb:#F4EEE3;--pf:#2A1C12;--pd:#6B5846;--hb:#2A1C12;--hf:#F4EEE3;--hfont:"ExDMSerif",Georgia,serif}
.fo-shop .fo-who{font-size:16px}
.fo-trade{--pb:#17150F;--pf:#fff;--pd:#C9C4B4;--pr:#2A271F;--pa:#FFD21F;--hb:#FFD21F;--hf:#111;--hfont:"ExBarlow",Impact,"Arial Narrow",sans-serif}
.fo-trade .fo-who{font-weight:800;font-size:17px;text-transform:uppercase;letter-spacing:.01em}
.fo-trade .fo-n b{font-weight:800;font-size:44px;color:#FFD21F}
.fo-trade .fo-bars i{background:#3A372E;border-radius:0}.fo-trade .fo-bars i.fo-last{background:#FFD21F}
.fo-charity{--pb:#12442A;--pf:#F6F2E7;--pd:rgba(246,242,231,.78);--pr:rgba(246,242,231,.1);--hb:#F2B33D;--hf:#12442A;--hfont:"ExBricolage",system-ui,sans-serif}
.fo-charity .fo-who{font-weight:700}
.fo-charity .fo-n b{font-weight:700;font-size:34px;letter-spacing:-.02em;color:#F2B33D}
.fo-charity .fo-row>span{flex:1}
.fo-prog{display:block;height:5px;margin-top:6px;background:rgba(246,242,231,.22)}.fo-prog i{display:block;width:71.9%;height:100%;background:#F2B33D}
.fo-club{--pb:#2B1D4A;--pf:#fff;--pd:rgba(255,255,255,.75);--pr:#46306E;--pa:#BFEFDD;--hb:#BFEFDD;--hf:#2B1D4A;--hfont:"ExSpace",system-ui,sans-serif;--prad:6px}
.fo-club .fo-who{font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.02em}
.fo-club .fo-n b{font-weight:700;font-size:42px;letter-spacing:-.03em;color:#BFEFDD}
.fo-school{--pb:#FBE6EA;--pf:#4A1730;--pd:#8A5A6E;--pr:#fff;--pa:#B3275F;--hb:#B3275F;--hf:#fff;--prad:8px}
.fo-school .fo-who{font-weight:600;font-size:12.5px}
.fo-big{display:block;font-family:"ExCaveat","Segoe Print","Bradley Hand",cursive;font-size:34px;line-height:.95;color:#B3275F}
.fo-seats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin:10px 0 7px}
.fo-seats i{aspect-ratio:1;border-radius:50%;background:#4A1730}.fo-seats i.fo-last{background:#B3275F}
.fo-salon{--pb:#EEF0E8;--pf:#24332E;--pd:#5E6E67;--hb:#24332E;--hf:#EEF0E8;--hfont:"ExCormorant",Georgia,serif}
.fo-salon .fo-who{justify-content:center;font-size:15px;font-weight:500;letter-spacing:.24em;text-transform:uppercase}
.fo-appt{display:block;margin-top:8px;padding:10px 12px 11px;background:#fff;border-top:3px solid #24332E;font-family:"ExCormorant",Georgia,serif;font-weight:500;clip-path:inset(0 0 100% 0)}
.fo-appt>*{display:block}.fo-appt small{font-style:italic;font-size:14px}.fo-appt b{font-weight:500;font-size:21px;line-height:1.1;margin:1px 0 2px}.fo-appt span{font-size:14px}
.fo-appt em{font-family:var(--sans);font-style:normal;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#5E6E67;margin-top:7px}
.fo-let{--pb:#FFFDF8;--pf:#2A2230;--pd:#6E6577;--pr:#EEF3F3;--pa:#22636B;--hb:#22636B;--hf:#fff;--hfont:"ExPlayfair",Georgia,serif;--prad:3px}
.fo-let .fo-who{font-style:italic;font-weight:500;font-size:17px}
.fo-cal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));row-gap:3px;margin:2px 0 9px;font-size:12px;font-variant-numeric:tabular-nums}
.fo-cal em{font-style:normal;text-align:center;font-size:10px;color:#6E6577}.fo-cal i{font-style:normal;text-align:center;padding:5px 0}
.fo-cal i.on{background:#27304F;color:#fff}.fo-cal i.a{border-radius:99px 0 0 99px}.fo-cal i.z{border-radius:0 99px 99px 0}
.fo-photo{--pb:#16120F;--pf:#EDE9E1;--pd:#A8A39A;--pr:#26201B;--pa:#EDE9E1;--hb:#EDE9E1;--hf:#16120F;--hfont:"ExInstrument",Georgia,serif}
.fo-photo .fo-who{font-style:italic;font-size:19px}
.fo-photo .fo-n b{font-style:italic;font-weight:400;font-size:46px}
.fo-larger{--pb:#F4F6F9;--pf:#1D2733;--pd:#566476;--pr:#fff;--pa:#2F8A52;--hb:#17212E;--hf:#fff;--hfont:system-ui,-apple-system,"Segoe UI",sans-serif;--prad:6px;font-family:var(--hfont)}
.fo-larger .fo-who{font-weight:600;font-size:12.5px}
.fo-ok{display:inline-block;padding:2px 9px;border-radius:99px;background:#E1EFE5;color:#1E6B3A;font-weight:600;font-size:11px}
.fo-msg{display:block;margin:7px 0 10px;font-size:16px;font-weight:600;line-height:1.25}
@media (max-width:560px){
  .fx-own .fo-who{margin:-10px -9px 10px;padding:9px 9px 8px}
  .fo-band .fo-n b,.fo-trade .fo-n b,.fo-club .fo-n b,.fo-photo .fo-n b{font-size:32px}.fo-charity .fo-n b{font-size:26px}
  .fo-big{font-size:28px}.fo-seats{margin:8px 0 5px;gap:4px}.fo-msg{font-size:14.5px}
  .fn-trade b{font-size:21px}.fn-school b{font-size:25px}.fn-salon b{font-size:20px}
}

/* ---------- The estimator card, 22 October ----------
   Nothing chosen at the start; a tool on its own is a slim row under the four cards, as on
   the Pricing page; the guide line and the arrow link as Pricing has them. */
.cost-row .hq-guide{margin:14px 0 0;font-size:16px;line-height:1.5;color:var(--slate);text-align:left!important}
.cost-row .hq-more{margin:24px 0 0}
/* The tool for the team: one tick box across the width, with a website or on its own. */
.hq .hq-also{grid-column:1/-1}
.hq .hq-also>span{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"plus name" "plus says";column-gap:12px;row-gap:3px;align-items:center}
.hq .hq-also .hq-plus{grid-area:plus;width:22px;height:22px}
.hq .hq-also strong{grid-area:name}
.hq .hq-also em{grid-area:says}

/* ---------- 23 October ----------
   The layers card: along its top, the three layers drawn as a stack, the website on top
   and the engine room at the bottom, each a solid slab stepped in from the one above, the
   way the sheets in the picture sit. The layer being described is orange, the ones already
   passed are pale, and the one still to come is a step up from the card. */
.sys-scene .ly-bar{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;margin-bottom:20px}
.sys-scene .ly-bar i{display:flex;align-items:center;height:32px;padding:0 14px;border:0;background:#333B45;color:var(--on-ink-dim);font-family:var(--mono);font-size:11.5px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;border-top-right-radius:9px;border-bottom-left-radius:9px;width:calc(100% - 48px)}
.sys-scene .ly-bar i:nth-child(2){margin-left:24px}
.sys-scene .ly-bar i:nth-child(3){margin-left:48px}
.sys-scene .ly-bar i.done{background:var(--on-ink-dim);color:var(--ink)}
.sys-scene .ly-bar i.on{background:var(--signal-dark);color:var(--ink);font-weight:600}
@media (max-width:860px){.sys-scene .ly-bar{gap:4px;margin-bottom:14px}.sys-scene .ly-bar i{height:28px;padding:0 12px;font-size:10.5px;width:calc(100% - 36px)}.sys-scene .ly-bar i:nth-child(2){margin-left:18px}.sys-scene .ly-bar i:nth-child(3){margin-left:36px}}

/* The story buttons, centred on their capitals: the line box is trimmed to the cap height
   and the baseline, and the padding gives the room back evenly above and below, so the
   words sit in the middle whatever the font’s own spacing. --py is each button’s padding. */
.hx .fx-btn{--py:9px}
.hx-shop .fx-btn{--py:12px}.hx-club .fx-btn{--py:8px}.hx-salon .fx-btn{--py:11px}.hx-larger .fx-btn{--py:6px}
.fx-stage .hx .fx-btn{text-box:trim-both cap alphabetic;padding-top:calc(var(--py) + (1lh - 1cap) / 2);padding-bottom:calc(var(--py) + (1lh - 1cap) / 2)}
/* the Give button stands beside the amounts: the same height as them, its words in the middle */
.fx-stage .hx-charity .fx-btn{align-self:center;padding-top:calc((40.4px - 1cap) / 2);padding-bottom:calc((40.4px - 1cap) / 2)}
.fx-stage .hx .ch-amt u,.fx-stage .hx .cf-t u{text-box:trim-both cap alphabetic}
.fx-stage .hx .ch-amt u{padding-top:calc(8px + (1lh - 1cap) / 2);padding-bottom:calc(8px + (1lh - 1cap) / 2)}
.fx-stage .hx .cf-t u{padding-top:calc(6px + (1lh - 1cap) / 2);padding-bottom:calc(6px + (1lh - 1cap) / 2)}
/* What will it cost (25 Oct): how pricing works in three steps, with no figures. */
.hp{display:grid;gap:24px}
.hp-steps{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.hp-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:start}
.hp-steps strong{display:block;font-size:17px;line-height:1.3}
.hp-steps p{margin:4px 0 0;font-size:15px;line-height:1.55;color:var(--body);text-align:left!important;hyphens:manual}