/* MUUS 2027 shell. One file for every 2027 page: tokens, type, header, menu, footer and the shared pieces.
   Decided 22 Oct 2026: no owned colour (off black, lift, bone), the chrome pair beside an upright MUUS,
   Zalando Sans Expanded for display, Zalando Sans for text, IBM Plex Mono for labels and receipts.
   Grain sits on brand surfaces, never on client footage.
   Palette, 23 Oct 2026 (Jacob: "Sand with pink, and blue with sand, pink with blue or sand. Use them all"):
   Sand #E3DACB, Blue #97B2C1 and Sand Rose #D89082 join off black and bone, as fields and blocks only, never over client work.
   Dark sections: bone type, Sand Rose on the labels, the main ask and one lead number. Light grounds (.ground, data-tone
   sand, blue or pink): off black type only; Sand carries Sand Rose fills, Blue carries Sand cards, Pink carries Blue cards.
   WINDOW, 23 Oct 2026 10:33 (Jacob picked it; brand-2027/directions-2026-10-23/WINDOW-SPEC.md): Sand leads the light screens,
   off black carries the work, lighter means higher on dark (lift, raise, raise 2; no shadows on dark), bone text at 100, 87,
   60 and 38 percent, Sand Rose once a screen (the header's Book a call, the open number, the chosen state), Sea Angel blue
   for the blueprint and at most one major blue screen. Labels are Zalando Sans small caps tracked 15 percent: no mono, no
   brackets, no chips as decoration.
   Page specific CSS stays in its page. Owner: the site/2027 branch; send changes there, not edits. */

@font-face{font-family:"Zalando Sans Expanded";src:url(/assets/m/fonts/zalando-sans-expanded-latin-wght-normal.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Zalando Sans";src:url(/assets/m/fonts/zalando-sans-latin-wght-normal.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/m/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
/* metric matched fallbacks, so the swap does not move the layout */
@font-face{font-family:"ZSX fallback";src:local("Arial");size-adjust:118%;ascent-override:84%;descent-override:22%}
@font-face{font-family:"ZS fallback";src:local("Arial");size-adjust:101%;ascent-override:96%;descent-override:26%}

:root{
  --off:#0C0E0F;--lift:#15181A;--raise:#1C1F21;--raise2:#24282A;--bone:#F4F2E8;--sand:#E3DACB;--blue:#97B2C1;--rose:#D89082;
  --b88:rgb(244 242 232 / .87);--b72:rgb(244 242 232 / .87);--b58:rgb(244 242 232 / .6);--b40:rgb(244 242 232 / .38);
  --b16:rgb(244 242 232 / .16);--b08:rgb(244 242 232 / .08);
  --d:"Zalando Sans Expanded","ZSX fallback","Helvetica Neue",Arial,sans-serif;
  --t:"Zalando Sans","ZS fallback","Helvetica Neue",Arial,sans-serif;
  --m:var(--t); /* labels share the text face (Window: no mono) */
  --pad:max(clamp(16px,4.4vw,72px),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
  --hdr:76px;
  --ease:cubic-bezier(.7,0,.18,1);--rev:cubic-bezier(.16,.8,.3,1);
  color-scheme:dark;
}
@media (max-width:760px){:root{--hdr:64px}}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--off);-webkit-text-size-adjust:100%;scroll-padding-top:var(--hdr)}
body{margin:0;background:var(--off);color:var(--bone);font:400 16px/1.55 var(--t);-webkit-font-smoothing:antialiased;overflow-x:clip}
@media (max-width:760px){body{font-size:16px}}
img,video,canvas,svg,iframe{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
p,h1,h2,h3,h4,figure,ol,ul,dl,dd,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--bone);color:var(--off)}
:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:var(--pad);top:-60px;z-index:200;background:var(--bone);color:var(--off);padding:12px 16px;font:500 12px var(--m);letter-spacing:.13em;text-transform:uppercase}
.skip:focus{top:12px}

/* type */
.lab{font:500 12px/1.4 var(--m);letter-spacing:.13em;text-transform:uppercase;color:var(--b58)}
.lab b{color:var(--bone);font-weight:500}
h1,h2,h3,.disp{font-family:var(--d);font-weight:700;letter-spacing:-.03em;line-height:1;text-wrap:balance}
.d1{font-size:clamp(40px,6vw,96px);line-height:.98;letter-spacing:-.035em}
.d2{font-size:clamp(32px,4.6vw,72px);line-height:1}
.d3{font-size:clamp(24px,2.6vw,40px);line-height:1.06;letter-spacing:-.025em}
.lede{font-size:clamp(16px,1.35vw,20px);line-height:1.5;color:var(--b72);max-width:54ch;text-wrap:pretty}
.copy{color:var(--b72);max-width:60ch;text-wrap:pretty}
.src{font:500 11px/1.5 var(--m);letter-spacing:.13em;color:var(--b58)}

/* the lockup: logo B, the pair beside an upright MUUS */
.lock{display:inline-flex;align-items:center;gap:.36em;line-height:1;color:var(--bone)}
.lock svg{height:.86em;width:auto;flex:none}
.lock span{font-family:var(--d);font-weight:800;letter-spacing:.01em}

/* buttons (WINDOW-SPEC "Buttons", Jacob 23 Oct 11:07: "cutcorners", then "I do like A and B, but B needs better spacing",
   "goes with our lines on brand"). Three kinds, all Zalando Sans Medium caps tracked 14 percent:
   C CUT CORNER (.chip, the work filters, Index and Close): a rectangle with its top right corner cut at 45 degrees, the cut 30
     percent of the height. The 1 px outline (70 percent) is an evenodd ring on ::after, so it follows the diagonal; the fill wipes in
     from the left on ::before over 450 ms. Focus moves the ring 4 px out and thickens it, still on the diagonal.
   B PAIR (.chip--solid, the Index's and the service panels' Book a call): the one main action a section. The Sand Rose strike of the
     mark (cut at 45 degrees both ends, label inset .62 x height + 12 px), then a second strike height + 20 px wide, 10 px from it
     measured square to the slant (14 px across). At rest the second strike is a 1 px outline at 65 percent; hover fills the bar bone
     and the second strike (bone on dark, off black on Sand), so the button becomes the two strikes of the mark.
   A STRIKE: the bar alone, on phones and in the header below 860 px.
   On a light ground --bone is off black, so every rule below turns over with it; --anti is the label on a fill, --fr the focus ring. */
:root{--bh:48px;--anti:#0C0E0F;--fr:var(--rose);--wipe:cubic-bezier(.2,.7,.1,1)}
@media (max-width:760px){:root{--bh:44px}}
.chip,.hdr-menu,.filters button{--cut:calc(var(--bh) * .3);--ln:color-mix(in srgb,var(--bone) 70%,transparent);
  position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:var(--bh);
  padding:0 calc(16px + var(--cut) * .5) 0 20px;border:0;border-radius:0;background:none;
  font:500 12px/1 var(--t);letter-spacing:.13em;text-transform:uppercase;color:var(--bone);white-space:nowrap;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:color .6s var(--ez)}
.chip::before,.hdr-menu::before,.filters button::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bone);pointer-events:none;
  clip-path:polygon(0 0,0 0,0 0,0 100%,0 100%);transition:clip-path .6s var(--ez),background-color .6s var(--ez)}
.chip::after,.hdr-menu::after,.filters button::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--ln);pointer-events:none;
  --t:1px;--k:calc(var(--t) * .4142);--c:var(--cut);
  clip-path:polygon(evenodd,0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%,0 0,
    var(--t) var(--t),var(--t) calc(100% - var(--t)),calc(100% - var(--t)) calc(100% - var(--t)),calc(100% - var(--t)) calc(var(--c) + var(--k)),calc(100% - var(--c) - var(--k)) var(--t),var(--t) var(--t))}
.chip:is(:focus-visible,[aria-pressed=true]),.hdr-menu:focus-visible,.filters button:is(:focus-visible,[aria-pressed=true]){color:var(--anti);outline:0}
.chip:is(:focus-visible,[aria-pressed=true])::before,.hdr-menu:focus-visible::before,.filters button:is(:focus-visible,[aria-pressed=true])::before{
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.chip:focus-visible::after,.hdr-menu:focus-visible::after,.filters button:focus-visible::after{inset:-4px;--t:2px;--c:calc(var(--cut) + 2.34px);background:var(--bone)}
@media (hover:hover){
  .chip:hover,.hdr-menu:hover,.filters button:hover{color:var(--anti)}
  .chip:hover::before,.hdr-menu:hover::before,.filters button:hover::before{clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
}
.chip:disabled{opacity:.6;cursor:progress}
/* the arrow, where a button has one, is a small 45 degree strike, never a typed arrow */
.chip i{flex:none;width:11px;height:11px;font-size:0;font-style:normal;
  background:linear-gradient(to top right,transparent calc(50% - .8px),currentColor calc(50% - .8px) calc(50% + .8px),transparent calc(50% + .8px))}
/* B PAIR */
.chip.chip--solid,.ix-pages .ix-book{--ln:color-mix(in srgb,var(--bone) 65%,transparent);
  padding:0 calc(var(--bh) * .62 + 12px);margin-right:34px;color:#0C0E0F;
  position:relative;isolation:isolate;display:inline-flex;align-items:center;min-height:var(--bh);border:0;background:none;
  font:500 12px/1 var(--t);letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;box-shadow:none}
.chip.chip--solid::before,.ix-pages .ix-book::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--rose);
  clip-path:polygon(var(--bh) 0,100% 0,calc(100% - var(--bh)) 100%,0 100%);transition:background-color .6s var(--ez)}
.chip.chip--solid::after,.ix-pages .ix-book::after{content:"";position:absolute;inset:0 auto 0 calc(100% - var(--bh) + 14px);
  width:calc(var(--bh) + 20px);z-index:-1;background:var(--ln);pointer-events:none;transition:background-color .6s var(--ez);
  clip-path:polygon(evenodd,var(--bh) 0,100% 0,calc(100% - var(--bh)) 100%,0 100%,var(--bh) 0,
    calc(var(--bh) + .414px) 1px,2.414px calc(100% - 1px),calc(100% - var(--bh) - .414px) calc(100% - 1px),calc(100% - 2.414px) 1px,calc(var(--bh) + .414px) 1px)}
.chip.chip--solid i{display:none}
.chip.chip--solid:focus-visible,.ix-pages .ix-book:focus-visible{color:#0C0E0F;outline:0;
  filter:drop-shadow(2px 0 0 var(--fr)) drop-shadow(-2px 0 0 var(--fr)) drop-shadow(0 2px 0 var(--fr)) drop-shadow(0 -2px 0 var(--fr))}
.chip.chip--solid:focus-visible::before,.ix-pages .ix-book:focus-visible::before{background:#F4F2E8}
.chip.chip--solid:focus-visible::after,.ix-pages .ix-book:focus-visible::after{inset:0 auto 0 calc(100% - var(--bh) + 14px);background:var(--bone);
  clip-path:polygon(var(--bh) 0,100% 0,calc(100% - var(--bh)) 100%,0 100%)}
@media (hover:hover){
  .chip.chip--solid:hover,.ix-pages .ix-book:hover{color:#0C0E0F}
  .chip.chip--solid:hover::before,.ix-pages .ix-book:hover::before{background:#F4F2E8}
  .chip.chip--solid:hover::after,.ix-pages .ix-book:hover::after{background:var(--bone);clip-path:polygon(var(--bh) 0,100% 0,calc(100% - var(--bh)) 100%,0 100%)}
}
/* A STRIKE (the bar alone) is only the header's Book a call below 860 px. Phones keep the pair's second strike (sitemobile,
   23 Oct, as the deck's v26d). Pressed on touch (:active) looks exactly like hover; no shadow on any button */
.chip:not(.chip--solid):active,.hdr-menu:active,.filters button:active{color:var(--anti)}
.chip:not(.chip--solid):active::before,.hdr-menu:active::before,.filters button:active::before{clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);transition-duration:.12s var(--ez)}
.chip.chip--solid:active,.ix-pages .ix-book:active{color:#0C0E0F}
.chip.chip--solid:active::before,.ix-pages .ix-book:active::before{background:#F4F2E8}
.chip.chip--solid:active::after,.ix-pages .ix-book:active::after{background:var(--bone);clip-path:polygon(var(--bh) 0,100% 0,calc(100% - var(--bh)) 100%,0 100%)}
.link{font:500 12px/1 var(--m);letter-spacing:.13em;text-transform:uppercase;border-bottom:1px solid var(--b40);padding-bottom:4px;transition:border-color .6s var(--ez)}
.link:hover{border-color:var(--bone)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* receipts: every piece says what was shot, rendered or generated */
.rx{display:inline-flex;flex-wrap:wrap;gap:8px}
.rx{gap:0 .7em}
.rx span{font:500 11px/1.4 var(--m);letter-spacing:.13em;text-transform:uppercase;color:var(--b58)}
.rx span+span::before{content:"·";margin-right:.7em}

/* header */
.hdr{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--hdr);display:flex;align-items:center;gap:32px;padding:0 var(--pad);
  transition:background .6s var(--ez),border-color .6s var(--ez);border-bottom:1px solid transparent}
.hdr::before{content:"";position:absolute;inset:0 0 -40px 0;background:linear-gradient(180deg,rgb(12 14 15 / .55),rgb(12 14 15 / 0));pointer-events:none;transition:opacity .6s var(--ez);z-index:-1}
.hdr.is-solid{background:rgb(12 14 15 / .92);border-color:var(--b08);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.hdr.is-solid::before{opacity:0}
/* over a light ground the header turns off black; muus-2027.js sets is-lite, data-tone and --hg from the ground under it */
.hdr.is-lite{--anti:#F4F2E8;--fr:#0C0E0F;--bone:#0C0E0F;--b72:rgb(12 14 15 / .8);--b58:rgb(12 14 15 / .76);--b40:rgb(12 14 15 / .42);--b08:rgb(12 14 15 / .12)}
.hdr.is-lite::before{opacity:0}
.hdr.is-lite.is-solid{background:var(--hg,var(--sand))}
.hdr.is-lite{color:var(--bone)}
.hdr .lock{font-size:20px}
.hdr-nav{display:flex;gap:clamp(16px,2.4vw,48px);margin-left:auto}
.hdr-nav a{font:500 12px/1 var(--m);letter-spacing:.13em;text-transform:uppercase;color:var(--b72);transition:color .6s var(--ez);padding:16px 0}
.hdr-nav a:hover,.hdr-nav a[aria-current=page]{color:var(--bone)}
.hdr-nav a[aria-current=page]{box-shadow:inset 0 -1px 0 var(--bone)}
@media (max-width:860px){
  .hdr-nav{display:none}
  .hdr .chip{margin-left:auto}
  .hdr .chip.chip--solid{margin-right:0}
  .hdr .chip.chip--solid::after{display:none}
}
@media (max-width:420px){
  .hdr{gap:8px}
  .hdr .chip.chip--solid{padding:0 calc(var(--bh) * .5 + 6px);letter-spacing:.13em}
  .hdr .hdr-menu{padding:0 calc(12px + var(--cut) * .5) 0 12px;letter-spacing:.13em}
}

/* the window (WINDOW component 1): the mark is cut into the ground and a film plays inside it. The mask is
   assets/27/mark.svg, the shadow on the cut is the inline SVG from site27.cut_svg() */
.win{position:relative;aspect-ratio:1540/1170;isolation:isolate}
.win-film{position:absolute;inset:0;background:#2a211a;-webkit-mask:url(/assets/27/mark.svg) center/100% 100% no-repeat;mask:url(/assets/27/mark.svg) center/100% 100% no-repeat}
.win-film img,.win-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.win-film video{opacity:0;transition:opacity .6s var(--ez)}
.win-film video.is-on{opacity:1}
.win-cut{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* the Index (WINDOW component 3, Contents): Sand, four chapters in large Expanded words at 32 percent; the pointed one goes
   off black with its Sand Rose numeral and one line, and the window on the right plays that chapter's film */
.menu{position:fixed;inset:0;z-index:90;padding:calc(var(--hdr) + 12px) var(--pad) calc(28px + env(safe-area-inset-bottom,0px));
  overflow:auto;opacity:0;visibility:hidden;transition:opacity .6s var(--ez),visibility 0s linear .6s}
.menu.is-open{opacity:1;visibility:visible;transition:opacity .6s var(--ez)}
.menu-top{position:absolute;inset:0 0 auto 0;height:var(--hdr);display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad)}
.menu-top .lock{font-size:20px}
.ix{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);grid-template-rows:auto 1fr auto;column-gap:clamp(32px,6vw,120px);min-height:100%;max-width:1720px;margin:0 auto}
.ix-h{grid-column:1/-1;margin:clamp(8px,3vh,40px) 0 clamp(16px,3vh,40px)}
.ix-list{align-self:center}
.ix-list a{display:grid;grid-template-columns:clamp(40px,5vw,78px) minmax(0,1fr);column-gap:8px;padding:clamp(8px,2.2vh,32px) 0;border-bottom:1px solid var(--b16)}
.ix-no{font:500 12px/1 var(--t);letter-spacing:.13em;color:rgb(12 14 15 / .76);justify-self:start;align-self:start;margin-top:.9em;padding:4px 8px;transition:background .6s var(--ez)}
.ix-nm{font-family:var(--d);font-weight:900;font-size:clamp(40px,6.2vw,96px);letter-spacing:-.04em;line-height:.95;color:rgb(12 14 15 / .32);transition:color .6s var(--ez)}
.ix-ln{grid-column:2;font-size:clamp(14px,1.1vw,16px);line-height:1.4;color:rgb(12 14 15 / .8);max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ez),opacity .6s var(--ez),margin .6s var(--ez)}
.ix-list a.is-on .ix-nm,.ix-list a:focus-visible .ix-nm{color:var(--off)}
.ix-list a.is-on .ix-no{background:var(--rose);color:var(--off)}
.ix-list a.is-on .ix-ln{max-height:3em;opacity:1;margin-top:8px}
.ix-fig{align-self:center;display:grid;gap:16px}
.ix-fig .lab{color:rgb(12 14 15 / .76)}
.ix-pages{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 32px;padding-top:clamp(16px,3vh,40px)}
.ix-pages a{font:500 12px/1 var(--m);letter-spacing:.13em;text-transform:uppercase;padding:16px 0;color:rgb(12 14 15 / .8)}
.ix-pages a:hover{color:var(--off)}
.ix-pages .ix-book{margin-left:auto}
@media (max-width:860px){
  .ix{grid-template-columns:minmax(0,1fr);grid-template-rows:auto}
  .ix-fig{order:-1;grid-row:1;max-width:min(78vw,420px);margin:8px 0 8px}
  .ix-h{display:none}
  .ix-list a{padding:16px 0}
  .ix-nm{font-size:clamp(32px,11vw,56px)}
  .ix-pages .ix-book{margin-left:0}
}

/* sections */
main{display:block}
.surface{position:relative;padding:clamp(88px,12vw,184px) var(--pad);isolation:isolate}
.surface--lift{background:var(--lift)}
.surface::after,.ftr::after{content:"";position:absolute;inset:0;background:url(/assets/m/img/grain-128.png);opacity:.05;pointer-events:none;z-index:-1}
/* light grounds: Sand, Blue or Sand Rose as the whole field, off black type (14:1, 8.7:1, 7.6:1). Every shared piece reads the
   b tokens, so redefining them here turns the section over; the dimmest text stays at .76 (4.9:1 on Sand Rose) */
.ground{--g:var(--sand);background:var(--g);color:var(--off);color-scheme:light;--anti:#F4F2E8;--fr:#0C0E0F;
  --bone:#0C0E0F;--b88:rgb(12 14 15 / .9);--b72:rgb(12 14 15 / .8);--b58:rgb(12 14 15 / .76);--b40:rgb(12 14 15 / .42);--b16:rgb(12 14 15 / .2);--b08:rgb(12 14 15 / .1)}
.ground[data-tone=blue]{--g:var(--blue)}
.ground[data-tone=pink]{--g:var(--rose)}
.ground .lab{color:var(--off)}
.ground ::selection{background:var(--off);color:var(--g)}
.ground :focus-visible{outline-color:var(--off)}
.ground .rx span{background:transparent}
/* Depth (23 Oct, from the deck's v25, Jacob: "pretty flat still, needs shadowing, separation, somewhat dimension" and "make
   it feel high end, not cheap"). One light, from the top left. A light ground gets that light as a soft glow plus a fine
   stone grain (the ground only: client photos and films sit above it, untouched). Whatever sits on a ground casts a shadow
   tinted by that ground (--shc) at one of three heights, with a light top edge, and lifts one height on hover. Kept quiet on
   purpose: the high end references get their depth from lit photography, one real 3D object and air, not heavy shadows.
   The heights are declared on :root and again on .ground so each ground's --shc resolves inside it. */
:root,.ground{--shc:0 0 0;
  --el1:0 1px 2px rgb(var(--shc) / .14),0 8px 18px -6px rgb(var(--shc) / .24);
  --el2:0 1px 2px rgb(var(--shc) / .14),0 4px 8px -2px rgb(var(--shc) / .14),0 22px 38px -14px rgb(var(--shc) / .36),0 52px 96px -38px rgb(var(--shc) / .46);
  --el3:0 2px 4px rgb(var(--shc) / .16),0 8px 14px -4px rgb(var(--shc) / .16),0 34px 54px -16px rgb(var(--shc) / .42),0 76px 130px -42px rgb(var(--shc) / .54);
  --edge:inset 0 1px 0 rgb(255 255 255 / .5),inset 0 -1px 0 rgb(var(--shc) / .12)}
:root{--edge:inset 0 1px 0 rgb(244 242 232 / .07)}
.ground{--shc:74 56 34;background-color:var(--g);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .29 0 0 0 0 .22 0 0 0 0 .13 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 10% -10%,rgb(255 255 255 / .3),rgb(255 255 255 / 0) 65%),
    radial-gradient(110% 90% at 100% 112%,rgb(var(--shc) / .16),rgb(var(--shc) / 0) 62%)}
.ground[data-tone=blue]{--shc:22 46 64}
.ground[data-tone=pink]{--shc:98 38 30}
/* cards: Blue holds Sand cards, Sand Rose holds Blue cards, Sand holds raised paper cards with one Sand Rose block.
   Every card is lifted off its ground with a gutter around it, never a hairline grid */
.ground :is(.ways article,.tmg article,.w-offer,.faq>div,.steps>li,.defs>div){padding:clamp(16px,2vw,32px);border:0;box-shadow:var(--el1),var(--edge);
  transition:transform .6s var(--ez),box-shadow .6s var(--ez)}
.ground[data-tone=blue] :is(.ways article,.tmg article,.w-offer,.faq>div,.steps>li,.defs>div){background:var(--sand)}
.ground[data-tone=pink] :is(.ways article,.tmg article,.w-offer,.faq>div,.steps>li,.defs>div){background:var(--blue)}
.ground[data-tone=sand] :is(.ways article,.tmg article,.w-offer,.faq>div,.steps>li,.defs>div){background:#ECE6DB}
.ground :is(.faq,.defs){display:grid;gap:clamp(8px,1vw,16px)}
/* three or more equal cards: tall vertical panels, the same size, filling the width (deck "Tall stepped panels") */
.ground :is(.steps,.ways,.tmg,.w-cards){gap:clamp(8px,1.3vw,24px);align-items:stretch}
.ground :is(.steps>li,.ways article){min-height:clamp(260px,26vw,440px);grid-template-rows:1fr auto auto;align-content:stretch;box-shadow:var(--el2),var(--edge)}
.ground :is(.steps>li,.ways article)>:first-child,.ground .steps>li::before{align-self:start}
.ground .tmg article{min-height:clamp(420px,40vw,640px);display:flex;flex-direction:column;gap:16px;box-shadow:var(--el2),var(--edge)}
.ground .tmg article .proof{margin-top:auto}
.ground .tmg article,.ground .steps li{border-top:0}
.ground :is(.ways article,.tmg article,.steps>li,.w-offer):is(:hover,:focus-within){transform:translateY(-6px);box-shadow:var(--el3),var(--edge)}
@media (max-width:860px){.ground :is(.steps>li,.ways article){min-height:0}.ground .tmg article{min-height:0}}
/* things that sit on off black: a faint top edge, a deep shadow, a lift on hover (the frame moves, the work inside is untouched) */
.tile{transition:transform .7s var(--ez),box-shadow .7s var(--ez)}
.tile:hover{transform:translateY(-4px)}
.tile:hover .tile-cap{background:var(--lift)}
.shead{display:grid;gap:16px;margin-bottom:clamp(32px,5vw,72px);max-width:1100px}
.wide{max-width:1480px;margin-inline:auto}

/* full bleed scenes: media edge to edge, words small in the lower left over a deep fade, never on a face */
.scene{position:relative;min-height:100svh;overflow:hidden;display:flex;align-items:flex-end;background:var(--off);isolation:isolate}
.scene--tall{min-height:112svh}
.scene--short{min-height:84svh}
.scene .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
video.vid{opacity:0;transition:opacity .9s var(--ez)}
video.vid.is-on{opacity:1}
.scene .shade{position:absolute;inset:auto 0 0 0;height:66%;background:linear-gradient(0deg,rgb(12 14 15 / .94) 0%,rgb(12 14 15 / .6) 40%,rgb(12 14 15 / 0) 100%);z-index:-1}
.scene .shade--top{inset:0 0 auto 0;height:28%;background:linear-gradient(180deg,rgb(12 14 15 / .5),rgb(12 14 15 / 0))}
.band{position:relative;width:100%;padding:0 var(--pad) clamp(40px,7vh,88px);display:grid;gap:16px;max-width:calc(1000px + 2 * var(--pad))}
.band--wide{max-width:none}
.band .copy,.band .lede{color:var(--b88)}

/* entrances: one fade a block; the strike (the diagonal of the pair) on scenes where the browser can tie it to scroll */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ez),transform .9s var(--ez)}
[data-reveal].is-in{opacity:1;transform:none}
@supports (animation-timeline:view()){
  .strike{animation:strike linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  @keyframes strike{from{clip-path:polygon(0 30%,100% 0,100% 100%,0 100%)}to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}
}

/* numbers */
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:32px 40px}
@media (max-width:520px){.nums{grid-template-columns:1fr 1fr;gap:24px 16px}.num b{font-size:clamp(24px,8.4vw,40px)}}
.num b{display:block;font-family:var(--d);font-weight:700;font-size:clamp(24px,4vw,56px);letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.num span{display:block;margin-top:12px;font:500 11px/1.45 var(--m);letter-spacing:.13em;text-transform:uppercase;color:var(--b58);max-width:24ch}

/* the work tiles, shared by home and the work index */
.tile{position:relative;display:block;overflow:hidden;background:var(--lift);isolation:isolate}
.tile-media{position:relative;aspect-ratio:16/10;overflow:hidden}
.tile-media img,.tile-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ez),opacity .6s var(--ez)}
.tile-media video{opacity:0}
.tile.is-playing .tile-media video{opacity:1}
.tile:hover .tile-media img,.tile:hover .tile-media video{transform:scale(1.035)}
.tile-cap{display:grid;grid-template-columns:1fr auto;gap:8px 16px;padding:16px 0 0;transition:background .7s var(--ez);align-items:baseline;background:var(--off)}
.tile-cap h3{font-size:clamp(20px,1.8vw,24px);letter-spacing:-.025em}
.tile-cap .lab:last-child{grid-column:1/-1}

/* footer */
.ftr{position:relative;isolation:isolate;padding:clamp(72px,10vw,144px) var(--pad) calc(32px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--b08)}
.ftr-close{display:grid;gap:24px;margin-bottom:clamp(64px,9vw,120px)}
.ftr-close .d1{max-width:12ch}
.ftr-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;border-top:1px solid var(--b16);padding-top:32px}
.ftr-grid h2{font:500 11px var(--m);letter-spacing:.13em;text-transform:uppercase;color:var(--b58);margin-bottom:16px}
.ftr-grid li a{display:inline-block;padding:8px 0;color:var(--b72);transition:color .6s var(--ez);overflow-wrap:anywhere}
.ftr-grid li a:hover{color:var(--bone)}
.ftr-grid h3{font:500 11px var(--m);letter-spacing:.13em;text-transform:uppercase;color:var(--b58);margin:24px 0 8px}
.ftr-lock{margin-top:clamp(56px,8vw,112px);display:block}
.ftr-lock .lock{font-size:clamp(40px,17.2vw,300px);letter-spacing:0}
.ftr-lock .lock svg{height:.82em}
.ftr-lock .lock svg path{fill:url(#chrome)}
.ftr-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:24px}
@media (max-width:860px){.ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* booking (site9, 23 Oct): our own picker, as the deck's. A day, then a time, then the chosen time in big type and Google's
   page to confirm. Raised paper on Sand, lift on off black; Sand Rose only on the chosen day and under the chosen time */
.pick{display:grid;gap:16px;padding:clamp(16px,2.4vw,32px);background:var(--lift);box-shadow:var(--el2),var(--edge);min-width:0}
.ground .pick{background:#ECE6DB}
.pick{scroll-margin-top:calc(env(safe-area-inset-top,0px) + 84px)}
.pick-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 16px}
.pick-head b{font:700 clamp(16px,1.6vw,20px)/1.15 var(--d);letter-spacing:-.01em}
.pick-head span,.pick-nav p{font:500 12px/1.4 var(--t);letter-spacing:.13em;text-transform:uppercase;color:var(--b72);margin:0}
.pick-body{display:grid;gap:16px;min-width:0}
.pick-read,.pick-tz,.pick-note{font:400 16px/1.5 var(--t);color:var(--b72);margin:0;max-width:56ch}
.pick-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.pick-nav div{display:flex;gap:8px}
.pick-nav .chip:disabled{opacity:1;color:var(--b58);--ln:var(--b16);cursor:default}
.pick-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.pick-days>span{font:500 11px/1 var(--t);letter-spacing:.13em;text-transform:uppercase;color:var(--b58);text-align:center;padding-bottom:4px}
.pick-days button{display:grid;place-items:center;align-content:center;gap:4px;min-height:64px;min-width:0;padding:8px 2px;border:1px solid var(--b40);
  border-radius:0;background:transparent;color:var(--bone);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .6s var(--ez),background-color .6s var(--ez)}
.pick-days button small{min-height:11px;font:500 11px/1 var(--t);letter-spacing:.13em;text-transform:uppercase;color:inherit}
.pick-days button b{font:700 20px/1 var(--d);font-variant-numeric:tabular-nums}
.pick-days button:disabled{border-color:transparent;color:var(--b58);cursor:default}
.pick-days button:disabled b{font-weight:400}
.pick-days button[aria-pressed=true]{background:var(--rose);border-color:var(--rose);color:#0C0E0F}
.pick-days button:focus-visible{outline:2px solid var(--bone);outline-offset:2px}
@media (hover:hover){.pick-days button:not(:disabled):not([aria-pressed=true]):hover{border-color:var(--bone)}}
.pick-days button:not(:disabled):active{border-color:var(--bone)}
.pick-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px}
.pick-times .chip{width:100%;padding-inline:12px}
.pick-chosen{display:grid;gap:8px;justify-items:start}
.pick-chosen .lab{color:var(--b72)}
.pick-day{font:700 clamp(20px,2vw,24px)/1.1 var(--d);letter-spacing:-.015em;margin:0}
.pick-time{font:800 clamp(56px,7vw,96px)/.92 var(--d);letter-spacing:-.04em;margin:0;padding-bottom:8px;border-bottom:6px solid var(--rose);font-variant-numeric:tabular-nums}
.pick-chosen .pick-go{margin-top:8px}
.pick :is(.pick-change,.pick-fallback){display:inline-flex;align-items:center;justify-self:start;min-height:44px;padding:0;border:0;background:none;color:var(--bone);cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--b40);text-decoration-thickness:1px;text-underline-offset:6px}
.pick :is(.pick-change,.pick-fallback):hover{text-decoration-color:var(--bone)}
.bk-bring{display:grid;gap:8px}
@media (max-width:760px){.pick-days button{min-height:56px}.pick-days button b{font-size:16px}.pick-times{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* UX laws (23 Oct). Progress (Zeigarnik): a thin bar per step, the current one full, "Step 1 of N" beside it. It reads the
   section's own colour, so it works on Sand and on off black. Booking embeds Google's page, which we cannot see into, so its
   bar marks step 1 and never claims more; the brief form drives its bar from the fields themselves (muus-2027.js). */
.prog{display:grid;gap:12px;margin:0 0 20px}
.prog-n{font:500 12px/1.4 var(--m);letter-spacing:.13em;text-transform:uppercase;color:var(--b72)}
.prog ol{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;list-style:none;margin:0;padding:0}
.prog li{display:block;font:500 12px/1.35 var(--t);color:var(--b58)}
.prog li::before{content:"";display:block;height:2px;margin-bottom:12px;background:currentColor;opacity:.32;transition:opacity .6s var(--ez)}
.prog li b{font-weight:500;margin-right:.45em}
.prog li[aria-current=step],.prog li.is-done{color:var(--bone)}
.prog li[aria-current=step]::before,.prog li.is-done::before{opacity:1}
/* the booking end (Peak end): the window, then one band with the closing line, the progress, the calendar and what follows */
.bk-band{max-width:1480px;margin:0 auto;border-top:1px solid var(--b16);padding-top:clamp(28px,3vw,44px)}
.bk-close{font-family:var(--d);font-weight:700;font-size:clamp(24px,2.6vw,40px);line-height:1.08;letter-spacing:-.025em;max-width:26ch;margin-bottom:clamp(24px,3vw,40px)}
.bk-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);gap:clamp(24px,3vw,48px);align-items:start}
.bk-next{display:grid;gap:16px;align-content:start}
.bk-next ol{list-style:none;margin:0;padding:0;display:grid;gap:0}
.bk-next li{display:grid;grid-template-columns:44px 1fr;align-items:baseline;gap:8px;padding:16px 0;border-top:1px solid var(--b16);font:400 16px/1.45 var(--t);color:var(--bone)}
.bk-next li:last-child{border-bottom:1px solid var(--b16)}
.bk-next li b{font-family:var(--d);font-weight:700;font-size:20px}
.bk-next .note{font-size:16px;line-height:1.5;color:var(--b72)}
.fm>.prog{margin:0}
.bk-other{display:grid;gap:8px;justify-items:start;margin-top:8px}
@media (max-width:960px){.bk-grid{grid-template-columns:1fr}}

/* the film overlay */
.film-ov{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#000;color:var(--bone)}
.film-ov::backdrop{background:rgb(0 0 0 / .9)}
.film-ov video{width:100%;height:100%;object-fit:contain;background:#000}
.film-x{position:absolute;right:var(--pad);top:calc(env(safe-area-inset-top,0px) + 14px);z-index:2}
.film-t{position:absolute;left:var(--pad);top:calc(env(safe-area-inset-top,0px) + 28px);z-index:2}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0s!important;animation-delay:0s!important;transition-duration:0s!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
  .strike{animation:none!important;clip-path:none!important}
}

/* Phones (sitemobile, 23 Oct 2026, Jacob 12:41: "for mobile make really UI for mobile friendly"; the deck's v26d decisions).
   Touch screens get 44 px targets on everything you can press, labels at 11 px or more, running copy at 15 px or more and
   headlines that fit three lines. The one next step (Book a call) sits in a dock at the bottom, in the thumb zone, and steps
   away whenever another Book a call is on screen, a field has the keyboard or the Index is open. Desktop is untouched. */
.dock{display:none}
@media (pointer:coarse){
  .hdr .lock,.menu-top .lock,.ftr-lock{min-height:44px}
  .ftr-grid li a{display:inline-flex;align-items:center;min-height:44px;padding:0}
  .ix-pages a{display:inline-flex;align-items:center;min-height:44px;padding:0}
  .ix-pages{gap:0 24px}
  .link{display:inline-flex;align-items:center;min-height:44px;padding:0;border-bottom:0;text-decoration:underline;text-decoration-color:var(--b40);text-decoration-thickness:1px;text-underline-offset:6px}
  body .tnames button{min-height:44px}
  body .fm-note{font-size:16px}
  /* the work filters: one row that swipes, so the sticky bar never grows down the screen */
  body .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
  body .filters::-webkit-scrollbar{display:none}
  body .filters button{flex:none}
  .ftr-grid li a{min-width:44px}
  /* work with us keeps its own dock (Book a call and Get the deck): the pair full width, the cut corner under it */
  body .w-dock{grid-template-columns:1fr}
  body .w-dock .chip.chip--solid{margin-right:34px}
  .src,.rx span,.num span{font-size:11px}
  /* the logo wall on touch: the first tap shows the work (as hover does), the second opens the case */
  .logos .has.is-peek .wk{opacity:1;transform:none}
  .logos .has.is-peek::before{opacity:1}
  .logos .has.is-peek .lo{filter:brightness(0) invert(.95);opacity:1}
  /* the dock */
  .dock{position:fixed;inset:auto 0 0 0;z-index:58;display:flex;align-items:center;gap:8px;
    padding:8px var(--pad) calc(8px + env(safe-area-inset-bottom,0px));background:rgb(12 14 15 / .92);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--b08);
    transition:transform .6s var(--ez),visibility 0s linear 0s}
  .dock .chip.chip--solid{flex:1;justify-content:center;min-height:48px;--bh:48px}
  .dock.is-away{transform:translateY(110%);visibility:hidden;transition:transform .6s var(--ez),visibility 0s linear .5s}
  .has-dock body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  .has-dock .hdr .chip.chip--solid{display:none}
  .has-dock .hdr .hdr-menu{margin-left:auto}
}
@media (pointer:coarse) and (max-width:760px){
  body{font-size:16px}
  .copy,.lede,.band .copy,.band .lede{font-size:max(16px,1em)}
  .d1{font-size:clamp(24px,8.2vw,40px);letter-spacing:-.03em}
  .d2{font-size:clamp(24px,7.4vw,32px)}
  .d3{font-size:clamp(20px,6vw,32px)}
  body .land-hero h1{font-size:clamp(24px,7vw,32px)}
}
/* the Index on a phone: a full screen sheet; the window shrinks, the chapters stay on one screen, Close stays at the top */
@media (pointer:coarse) and (max-width:860px){
  .menu-top{position:fixed;z-index:2;background:var(--g);padding-top:env(safe-area-inset-top,0px);height:calc(var(--hdr) + env(safe-area-inset-top,0px))}
  .ix-fig{max-width:min(62vw,300px)}
  .ix-list a{min-height:56px}
}
/* phones held sideways: no window in the Index, the chapters in two columns, the pages under them */
@media (pointer:coarse) and (max-height:500px) and (orientation:landscape){
  .ix{grid-template-columns:minmax(0,1fr);min-height:0}
  .ix-fig,.ix-h{display:none}
  .ix-list{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
  .ix-list a{padding:8px 0}
  .ix-nm{font-size:clamp(24px,4.4vw,40px)}
  .ix-list a.is-on .ix-ln{display:none}
  .dock{padding-block:8px calc(8px + env(safe-area-inset-bottom,0px))}
  .dock .chip.chip--solid{flex:0 1 auto;min-width:50%;margin-left:auto}
  .has-dock body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
}
/* one Book a call a phone screen (site9, 23 Oct): on /services the open card of the swipe strip keeps See the work, and the
   pair below it (Partnerships, then each service) or the dock carries Book a call */
@media (max-width:760px){.sp-foot .chip--solid{display:none}}

/* ───────── B · System frames, type on the photo (24 Oct; sitefix after Jacob 13:03: "text over top, not blocks") ─────────
   As the deck's v26k frames: the photo or film full bleed and untouched, a thin bone blueprint frame with crop marks at the
   corners and twelve column ticks, the headline and copy set straight on the picture where it is quiet, the key word on a Sand
   Rose or Sea Angel strike, labels in thin C cut corner outlines (no fill), the small title block as thin outline cells on a
   clear ground. Never a filled box over a picture. Legibility comes from placement and at most a soft gradient at the photo's
   edge under the copy (.sf::after; --sfg strength, --sfh reach). Markup: section.sf > .sf-fr, .sf-tag, .tb.
   frames27_cx checks every line's contrast on the pixels behind it, faces under type, and that nothing over a picture is filled. */
:root{--fi:clamp(10px,1.7vw,24px);--fl:rgb(244 242 232 / .72)}
.sf{position:relative;isolation:isolate}
.sf .shade,.sf .svc-shade{display:none!important}
.sf-fr{position:absolute;z-index:3;pointer-events:none;inset:calc(var(--hdr) + 4px) var(--fi) var(--fi);border:1px solid var(--fl);color:var(--fl)}
.sf-fr::before,.sf-fr::after{content:"";position:absolute;left:var(--fi);right:var(--fi);height:9px;
  background:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px calc((100% - 1px) / 12));opacity:.9}
.sf-fr::before{top:0}.sf-fr::after{bottom:0}
.sf-fr i{position:absolute;width:14px;height:14px;border:0 solid var(--fl)}
.sf-fr i:nth-child(1){left:-19px;top:-19px;border-right-width:1px;border-bottom-width:1px}
.sf-fr i:nth-child(2){right:-19px;top:-19px;border-left-width:1px;border-bottom-width:1px}
.sf-fr i:nth-child(3){left:-19px;bottom:-19px;border-right-width:1px;border-top-width:1px}
.sf-fr i:nth-child(4){right:-19px;bottom:-19px;border-left-width:1px;border-top-width:1px}
.sf-fr--dark{--fl:rgb(12 14 15 / .62)}
/* the soft edge gradient: it rises from the picture's edge under the copy and fades out just above the copy's first line, so
   it is as tall as the copy and no taller; the rest of the picture is untouched (--sfg is its strength at the edge) */
.sf{overflow:clip;container-type:inline-size;--tbx:calc(var(--fi) * 2 + 8px)}
.sf .tb::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:calc(-1 * var(--tbx));width:100cqw;top:-150px;bottom:-200px;
  background:linear-gradient(0deg,rgb(12 14 15 / var(--sfg,.8)) 0%,rgb(12 14 15 / calc(var(--sfg,.8) * .8)) calc(100% - 150px),rgb(12 14 15 / 0) 100%)}
.sf .tb-r::before{left:auto;right:calc(-1 * var(--tbx))}
.sf--top .tb::before{top:-400px;bottom:-150px;background:linear-gradient(180deg,rgb(12 14 15 / var(--sfg,.8)) 0%,rgb(12 14 15 / calc(var(--sfg,.8) * .8)) calc(100% - 150px),rgb(12 14 15 / 0) 100%)}
.hl .tb::before,.road .tb::before{display:none}
.bel-card.sf{--tbx:24px}
/* labels on the picture's top edge get the same soft gradient from that edge */
.sf:has(>.sf-tag,>.media>.sf-tag)::after{content:"";position:absolute;z-index:2;left:0;right:0;top:0;height:calc(var(--hdr) + 160px);pointer-events:none;
  background:linear-gradient(180deg,rgb(12 14 15 / .62) 0%,rgb(12 14 15 / .45) 55%,rgb(12 14 15 / 0) 100%)}
/* C cut corner label: a thin outline, top right corner cut at 45, no fill */
.olab{position:relative;display:inline-flex;align-items:center;min-height:32px;padding:8px 16px 8px 12px;background:none;color:#F4F2E8;
  font:500 12px/1.3 var(--m);letter-spacing:.13em;text-transform:uppercase}
.olab::before,.tb .tb-top>.lab:first-child::before{content:"";position:absolute;inset:0;background:currentColor;opacity:.8;pointer-events:none;
  clip-path:polygon(evenodd,0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%,0 0,1px 1px,1px calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) 10.4px,calc(100% - 10.4px) 1px,1px 1px)}
.ground .olab{color:#0C0E0F}
.sf-tag{position:absolute;z-index:4;top:calc(var(--hdr) + var(--fi) + 14px);right:calc(var(--fi) * 2 + 8px);max-width:calc(100% - 4 * var(--fi) - 16px)}
.sf-tag--l{right:auto;left:calc(var(--fi) * 2 + 8px)}
/* strike: the key word on a 45 degree parallelogram, Sand Rose by default, Sea Angel as the second */
.sk{display:inline-block;white-space:nowrap;background:var(--rose);color:#0C0E0F;padding:0 .4em .04em;margin:0 -.02em;
  clip-path:polygon(.3em 0,100% 0,calc(100% - .3em) 100%,0 100%);line-height:1.08}
.sk--sea{background:var(--blue)}
/* the copy, straight on the picture: bone type, no ground, no rules between the lines */
.sf .tb,.tb{position:relative;z-index:4;display:grid;gap:16px;align-content:start;justify-items:start;padding:0;max-width:none;
  width:min(var(--tbw,560px),calc(100% - 4 * var(--fi) - 16px));margin:0 0 calc(var(--fi) * 2 + 8px) calc(var(--fi) * 2 + 8px);
  background:none;color:#F4F2E8;--bone:#F4F2E8;--b88:rgb(244 242 232 / .94);--b72:rgb(244 242 232 / .9);--b58:rgb(244 242 232 / .86)}
.tb>*{margin:0;padding:0}
.tb .lab{color:rgb(244 242 232 / .92)}
.tb .copy,.tb .lede,.tb p{color:#F4F2E8}
.tb h1,.tb h2,.tb .d1,.tb .d2,.tb .disp{color:#F4F2E8;font-size:clamp(32px,3.3vw,56px);line-height:1.06;letter-spacing:-.03em;max-width:none}
.tb .d3{font-size:clamp(20px,2vw,32px)}
.tb .tb-top{display:flex;justify-content:flex-start;align-items:center;gap:8px 16px;flex-wrap:wrap}
.tb .tb-top>.lab:first-child{position:relative;padding:8px 16px 8px 12px}
/* the small title block: thin outline cells on a clear ground */
.tb .tb-cells{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,auto);width:max-content;max-width:100%;border:1px solid rgb(244 242 232 / .72);
  font:500 11px/1.35 var(--m);letter-spacing:.13em;text-transform:uppercase}
.tb .tb-cells>div{padding:8px 12px;display:grid;gap:4px;align-content:end;min-width:0}
.tb .tb-cells>div+div{border-left:1px solid rgb(244 242 232 / .72)}
.tb .tb-cells .lab{font-size:11px;letter-spacing:.13em}
.tb .tb-cells b{font-family:var(--d);font-weight:800;font-size:clamp(20px,1.8vw,24px);letter-spacing:-.02em;line-height:1;text-transform:none;justify-self:start}
.tb .row{gap:16px}
.tb .rx span{color:rgb(244 242 232 / .9)}
.tb-r{margin-left:auto!important;margin-right:calc(var(--fi) * 2 + 8px)!important}
.sf--top{align-items:flex-start!important}
.sf--top .tb{margin-top:calc(var(--hdr) + var(--fi) + 64px)}
/* belief tag on tiles and slates */
.bel{display:inline-block;font:500 11px/1.4 var(--m);letter-spacing:.13em;text-transform:uppercase;color:var(--b72)}
.bel::before{content:"";display:inline-block;width:.9em;height:.62em;margin-right:.5em;background:var(--rose);clip-path:polygon(.36em 0,.9em 0,.54em .62em,0 .62em)}
.bel--people::before{background:var(--blue)}
.bel--larger::before{background:var(--bone)}
@media (max-width:760px){
  :root{--fi:10px}
  .sf-fr{inset:calc(var(--hdr) + 2px) var(--fi) var(--fi)}
  .sf-fr i{display:none}
  .sf-fr::before,.sf-fr::after{left:6px;right:6px;background:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px calc((100% - 1px) / 4))}
  .sf .tb,.tb{width:calc(100% - 4 * var(--fi));margin:0 calc(var(--fi) * 2) calc(var(--fi) * 2);--tbw:100%}
  .sf--top .tb::before{top:-150px;bottom:-200px;background:linear-gradient(0deg,rgb(12 14 15 / var(--sfg,.8)) 0%,rgb(12 14 15 / calc(var(--sfg,.8) * .8)) calc(100% - 150px),rgb(12 14 15 / 0) 100%)}
  .sf .sf-tag{display:none}
  .sf{--tbx:calc(var(--fi) * 2)}.bel-card.sf{--tbx:18px}
  .sf:has(>.sf-tag,>.media>.sf-tag)::after{display:none}
  .tb .tb-cells{width:100%;grid-auto-columns:minmax(0,1fr)}
  .tb .tb-cells>div{padding:8px 12px}
  .tb h1,.tb h2,.tb .d1,.tb .d2,.tb .disp{font-size:clamp(24px,7.4vw,32px)}
  .tb .d3{font-size:20px}
  .tb-r{margin-left:calc(var(--fi) * 2)!important;margin-right:calc(var(--fi) * 2)!important}
  .sf--top .tb{margin-top:auto}
  .sf-tag{top:calc(var(--hdr) + 18px);right:calc(var(--fi) * 2);font-size:11px;min-height:30px}
  .sf-tag--l{left:calc(var(--fi) * 2);right:auto}
}
/* the OKAPA highlight (24 Oct): one framed sheet, the title block on top, three films below as delivered */
.hl{position:relative;padding:calc(var(--fi) * 2 + 24px) calc(var(--fi) * 2 + 8px);background:var(--off)}
.hl .sf-fr{inset:var(--fi)}
.hl-top{position:relative;z-index:4;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px;max-width:1720px;margin:0 auto 16px}
.hl .tb{margin:0;width:min(620px,100%)}
.hl-films{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:clamp(8px,1vw,16px);max-width:1720px;margin:0 auto;align-items:start}
.hl-films figure{margin:0;display:grid;gap:8px}
.hl-films video{width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--lift);display:block}
.hl-films figcaption{justify-self:start}
@media (max-width:760px){.hl{padding:calc(var(--hdr) * 0 + 32px) 24px 32px}.hl-films{grid-template-columns:1fr 1fr;gap:8px}.hl-films figure:first-child{grid-column:1 / -1}
  .hl-films figure:first-child video{aspect-ratio:4/5}.hl .tb{width:100%}.hl-top .olab{display:none}}

/* the three beliefs (24 Oct): three framed pictures, each with its belief and its proof in a title block */
.beliefs{padding:clamp(56px,7vw,112px) var(--pad)}
.bel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);max-width:1720px;margin:clamp(28px,4vw,48px) auto 0}
.bel-card{position:relative;display:flex;align-items:flex-end;min-height:clamp(560px,46vw,760px);overflow:hidden;isolation:isolate;color:inherit}
.bel-card .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;transition:transform .9s var(--ez)}
.bel-card:is(:hover,:focus-visible) .bg{transform:scale(1.03)}
.bel-card .sf-fr{inset:12px}.bel-card .sf-fr i{display:none}
.bel-card .tb{margin:0 24px 24px;width:calc(100% - 48px)}
.bel-card--top{align-items:flex-start}.bel-card--top .tb{margin-top:24px}
.bel-card .tb .link{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:960px){.bel-grid{grid-template-columns:1fr}.bel-card{min-height:clamp(560px,130vw,720px)}}
@media (max-width:760px){.bel-card .tb{margin:0 20px 20px;width:calc(100% - 36px)}.bel-card--top .tb{margin-top:20px}}
/* phones: the case label rides in the title block, so nothing sits on the top of the picture; the talent portrait runs taller */
.tb .tb-ph{display:none}
@media (max-width:760px){.case-hero .sf-tag{display:none}.tb .tb-ph{display:block}.talent.sf{min-height:140svh}}
/* page heroes (land-hero, written by pages27 and pages27b) under System frames */
.land-hero.sf{display:flex;align-items:flex-end;min-height:100svh;padding-top:0;overflow:hidden}
.land-hero.sf .media{position:absolute;inset:0;height:auto;aspect-ratio:auto;margin:0;z-index:-1;overflow:visible;background:none}
.land-hero.sf .media .sf-tag{bottom:auto}
.land-hero.sf .band.tb{--tbw:600px;padding:0;padding-bottom:0}
.land-hero.sf .tb h1{font-size:clamp(24px,3vw,40px);max-width:none}
.land-hero.sf .tb .lede{font-size:16px;max-width:none}
.land-hero.sf .tb .row{padding-top:16px;padding-bottom:16px}
@media (max-width:760px){.land-hero.sf .media .sf-tag{display:none}body .land-hero.sf h1{font-size:clamp(24px,7vw,32px)}}
/* studio page (24 Oct): the three beliefs, and "The road", a blueprint sheet of dated stops, each year on a strike */
.beliefs-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);border-top:1px solid var(--b16);padding-top:28px}
.bl-item{display:grid;gap:16px;align-content:start}
.bl-item .link{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:860px){.beliefs-list{grid-template-columns:1fr}}
.road{position:relative;padding:calc(var(--fi) * 2 + 32px) calc(var(--fi) * 2 + 16px);background:var(--off)}
.road .sf-fr{inset:var(--fi)}
.road-top{position:relative;z-index:4;max-width:1720px;margin:0 auto clamp(24px,4vw,56px)}
.road .tb{margin:0}
.road-list{position:relative;z-index:4;list-style:none;margin:0 auto;padding:0;max-width:1720px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--b40)}
.road-list li{position:relative;border-left:1px solid var(--b16)}
.road-list li:first-child{border-left:0}
.road-list li::before{content:"";position:absolute;left:-1px;top:-5px;width:9px;height:9px;background:var(--bone);clip-path:polygon(4px 0,9px 0,5px 9px,0 9px)}
.road-list a{display:grid;gap:8px;align-content:start;padding:24px 16px 16px;min-height:190px;color:var(--bone)}
.road-list a:hover .road-t,.road-list a:focus-visible .road-t{text-decoration:underline;text-underline-offset:5px}
.road-y{justify-self:start;font-family:var(--d);font-weight:800;font-size:clamp(24px,2.4vw,40px);letter-spacing:-.03em;line-height:1.1;padding:0 .42em .04em;background:var(--blue);color:#0C0E0F;clip-path:polygon(.3em 0,100% 0,calc(100% - .3em) 100%,0 100%)}
.road-y--next{background:var(--rose)}
.road-t{font-size:16px;line-height:1.4;color:var(--b88)}
@media (max-width:960px){.road-list{grid-template-columns:repeat(3,minmax(0,1fr))}.road-list li:nth-child(4){border-left:0}.road-list li:nth-child(n+4){border-top:1px solid var(--b16)}}
@media (max-width:560px){.road{padding:32px 24px}.road-list{grid-template-columns:1fr;border-top:0;border-left:1px solid var(--b40);margin-left:8px}
  .road-list li{border-left:0;border-top:0!important}.road-list li::before{left:-5px;top:28px}.road-list a{min-height:0;padding:16px 0 16px 24px}}
/* never tint or blur client work (24 Oct): the services ambient blur, the black and white service frames and the dark hover
   veil on the logo wall are retired; the wall's label rides a Bone cut corner box instead */
body .sp-amb{display:none!important}
body .sp-media .bw{filter:none}
body .brands .logos .has::before{display:none}
body .brands .logos .has i{left:50%;right:auto;transform:translateX(-50%);width:max-content;padding:8px 12px 8px 12px;background:none;color:#F4F2E8;border:1px solid rgb(244 242 232 / .8)}
body .brands .logos .has:is(:hover,:focus-visible) .lo{opacity:0}
/* the next case sits mid page: its frame hugs the section, not the header line; held (stacked) it no longer clips */
.case-next.sf .sf-fr{inset:var(--fi)}
@media (max-width:760px){
  .land-hero.sf .tb h1,body .land-hero.sf h1{font-size:clamp(20px,6vw,24px);line-height:1.1}
  .mission .tb .tb-mission{font-size:clamp(20px,5.2vw,24px)}}
.tb .tb-mission{font-family:var(--d);font-weight:700;letter-spacing:-.025em;line-height:1.12;font-size:clamp(20px,2vw,32px);color:#F4F2E8;text-wrap:balance}
/* headings on the picture keep their box to the type (the phone fit counts lines by height) */
.tb>:is(h1,h2,h3,.tb-mission){padding:0;margin:2px 0;border-top:0!important}
.case-hero .tb.tb-r{--tbw:420px}
/* sitefix (24 Oct): the strip on the future scene takes the same soft gradient from the picture's top edge, never a box */
.line.sf::after{content:"";position:absolute;z-index:1;left:0;right:0;top:0;height:calc(var(--hdr) + 150px);pointer-events:none;background:linear-gradient(180deg,rgb(12 14 15 / .74),rgb(12 14 15 / .62) 55%,rgb(12 14 15 / 0))}
.line .tag span{color:#F4F2E8}
.scene:not(.sf) .band .lab{color:rgb(244 242 232 / .94)}
/* phones: page heroes drop the receipts line and close up cases drop the Proves row, so the copy stays low, under the face */
@media (max-width:760px){.land-hero.sf .tb .rx{display:none}.case-hero:is(.hold-ph,.case-hero--hold) .tb .tb-top{display:none}}
/* the services panel on wide screens (sitefix): the list reads off a soft gradient from the picture's left edge, the right of the
   picture (the subject) is untouched; the list is narrower so it stays on the gradient; the services not pointed at are lifted */
@media (min-width:761px){
  .svc.sf .tb::before{display:none}
  .svc.sf::after{content:"";position:absolute;z-index:-1;left:0;top:0;bottom:0;width:70%;pointer-events:none;
    background:linear-gradient(90deg,rgb(12 14 15 / .86) 0%,rgb(12 14 15 / .78) 65%,rgb(12 14 15 / 0) 100%)}
  .svc.sf .svc-list{max-width:min(600px,44vw)}
  .svc.sf .svc-list b{font-size:clamp(24px,3.3vw,56px)}
}
.svc.sf .svc-list b{color:rgb(244 242 232 / .74)}.svc.sf .svc-list em,.svc.sf .svc-list .lab{color:#F4F2E8}
.svc.sf .svc-list a.is-on b{color:#F4F2E8}
/* labels on a picture's top edge: a little more gradient where a bright sky meets them */
.sf:has(>.sf-tag,>.media>.sf-tag)::after{background:linear-gradient(180deg,rgb(12 14 15 / .84) 0%,rgb(12 14 15 / .74) 60%,rgb(12 14 15 / 0) 100%)}
/* phones: a page hero can name its own phone crop (--php on the picture) so no face sits under the copy */
@media (max-width:760px){.land-hero.sf .media .bg[style*="--php"]{object-position:var(--php)!important}}
@media (orientation:landscape) and (max-height:500px){.land-hero.sf .media .bg[style*="--pls"]{object-position:var(--pls)!important}}
/* phones held sideways: the copy keeps to the left half, the subject keeps the right */
@media (orientation:landscape) and (max-height:500px){
  .sf:not(.svc,.hl,.road) .tb,.land-hero.sf .band.tb,.case-hero.sf:not(.case-film--vertical) .tb{--tbw:min(380px,44vw)}
  .sf .sf-tag{display:none}.sf:has(>.sf-tag,>.media>.sf-tag)::after{display:none}
  .svc.sf .svc-bg{left:48vw}.svc.sf::after{display:none}.svc.sf .svc-list{max-width:calc(48vw - var(--pad) - 16px)}.svc.sf .svc-list b{font-size:24px}.svc.sf .svc-list a{min-height:44px;align-items:center}.sf-fr i{display:none}
  .land-hero.sf{padding-top:calc(var(--hdr) + 16px)}.land-hero.sf .tb h1,body .land-hero.sf h1{font-size:24px}
  .sf .tb .lede,.sf .tb .rx{display:none}
}
/* the 404 scene: its shade reaches the label, and on a phone held sideways the whole picture edge under the copy */
.lost .shade{height:82%}.lost .band .lab{color:#F4F2E8}
@media (orientation:landscape) and (max-height:500px){.lost .shade{height:100%;background:linear-gradient(0deg,rgb(12 14 15 / .9) 0%,rgb(12 14 15 / .75) 60%,rgb(12 14 15 / .3) 100%)}}
/* phones: the Think picture behind the services list shifts so its face clears the list's label */
@media (max-width:760px){.svc.sf .svc-bg>[data-k=think]{object-position:82% 20%!important}}
/* phones: the Supernova next card is a square close up (a face fills it), so on a phone the square sits at the card's top and the
   copy reads below the face on the picture's lower edge */
@media (max-width:760px){.case-next.sf:has(>.bg[src*="case-supernova"])>.bg{bottom:auto;height:auto;aspect-ratio:1}}
/* phones held sideways, from the face check (sitefix): a next case card puts its picture on the right half and the copy beside it,
   as the services panel does; the mission drops its credit cells and a case hero its Proves row; a right hand hero copy moves left, clear of the face */
@media (orientation:landscape) and (max-height:500px){
  .case-next.sf>.bg{left:50%;width:50%}
  .case-next.sf .tb,.case-next.sf .tb-r{--tbw:calc(50vw - 2 * var(--tbx) - 8px);margin-left:var(--tbx)!important;margin-right:auto!important}
  .case-next.sf .tb::before{display:none}
  .mission.sf .tb-cells{display:none}
  .case-hero.sf .tb .tb-top{display:none}
  .case-hero.sf .tb-r{margin-left:var(--tbx)!important;margin-right:auto!important}.case-hero.sf .tb-r::before{right:auto;left:calc(-1 * var(--tbx))}
}

/* ───────── v26m premium details (24 Oct 2026; Jacob 14:12: "Feeling like a real brand. How to add small details to give us a
   higher end feeling. Premium, polished."). Spec: brand-2027/kit-2027/SPEC-v26m.md, shared with the deck. One curve, one type
   scale on an 8 px rhythm, tabular figures, caps at .13em, 1 px strokes, square corners but the C cut, no shadows on dark or
   photos, stone paper on Sand, plate lines on every frame, frames that draw on, a slow fill on the buttons, a crosshair over
   pictures and a short chrome mark intro once a visit. scripts/details27.py writes the page side (run by site27.py shell). ───── */
:root{--ez:cubic-bezier(.2,.7,.1,1);--t1:600ms;--t2:750ms;--t3:900ms;--ease:var(--ez);--rev:var(--ez);--wipe:var(--ez);
  /* the one type scale (px) and the 8 px rhythm; every size in this file maps to a step (details27.py css) */
  --f11:11px;--f12:12px;--f14:14px;--f16:16px;--f20:20px;--f24:24px;--f32:32px;--f40:40px;--f56:56px;--f72:72px;--f96:96px;--f128:128px;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:40px;--s6:48px;--s8:64px;--s10:80px;--s12:96px;--track:.13em;
  --edge:0 0 #0000}
/* 1 · typography: tabular lining figures on the elements that hold only numbers (a span per digit run broke grid cells), kerning and optical sizing on display, lines on the 4 px grid */
/* tabular lining figures on every number. The face's tnum also swaps in a wide word space, so they sit on the digit runs only
   (details27.py wraps each in .tn) and on the parts that hold nothing but a number */
:is(.tn,.num b,.pick-days b,.pick-time,[data-tc],[data-year],[data-count],.road-y,.ix-no){font-variant-numeric:tabular-nums lining-nums!important}
body{line-height:24px;font-kerning:normal;hanging-punctuation:first allow-end last}
:is(h1,h2,h3,.disp,.d1,.d2,.d3,.tb-mission,.bk-close,.num b,.pick-time,.pick-day,.ix-nm,.road-y,.lock span,.tb-cells b){
  font-kerning:normal!important;font-optical-sizing:auto!important;text-rendering:optimizeLegibility;font-feature-settings:"kern" 1,"liga" 1,"calt" 1}
.d1{line-height:round(nearest,.98em,8px)}.d2{line-height:round(nearest,1em,8px)}.d3{line-height:round(nearest,1.06em,8px)}
.tb h1,.tb h2,.tb .d1,.tb .d2,.tb .disp{line-height:round(nearest,1.06em,8px)}.tb-mission{line-height:round(nearest,1.12em,8px)}
.lede{line-height:round(nearest,1.5em,4px)}.copy{line-height:24px}
.lab,.olab,.rx span,.src,.num span,.bel,.tb .tb-cells,.ftr-grid h2,.ftr-grid h3,.prog-n,.pick-head span,.pick-nav p{line-height:16px}
h1,h2,h3,.d1,.d2,.d3,.tb-mission,.bk-close,.quotes blockquote,.case-quote blockquote{text-wrap:balance}
.lede,.copy,p{text-wrap:pretty}
/* a centred or right aligned caps label: the trailing track must not push it off centre */
.pick-days>span,.logos .has i,.logos .more{text-indent:var(--track)}
.wnd-r .lab,.wnd-r .src{margin-right:calc(-1 * var(--track))}
/* the hanging quote: the opening mark sits outside the text edge so the letters align (its own advance in the face) */
.hang{display:inline-block;margin-left:-.42em;width:.42em}
/* 2 · one rhythm across columns: labels, headlines and numbers start on the same line in every row of cells */
.tb .tb-cells>div{align-content:start}
.ftr-grid{align-items:start}.ftr-grid h2{margin:0 0 16px}.ftr-grid h3{margin:24px 0 8px}
.nums{align-items:start}.num b{line-height:1}.num span{margin-top:16px}
.bel-grid,.beliefs-list,.road-list{align-items:start}
/* 5 · motion. Staggered reveals: a block with two or more block children reveals them in turn, 12 px rise, 70 ms apart, six
   steps at most (muus-2027.js sets data-stagger and --i); a block of one piece fades and rises as one */
[data-reveal]{transform:translateY(12px);transition:opacity var(--t3) var(--ez),transform var(--t3) var(--ez)}
[data-reveal][data-stagger]{opacity:1;transform:none}
.js [data-reveal][data-stagger]:not(.is-in)>*{opacity:0}
[data-reveal][data-stagger].is-in>*{animation:rv27 var(--t3) var(--ez) backwards;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes rv27{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
/* frame lines draw on: the four edges grow from the corners (8 strokes meeting mid edge), the corner marks scale from their
   corner, then the twelve ticks follow 20 ms apart. Until the frame is in view it is undrawn (only with script) */
@property --dr{syntax:"<percentage>";inherits:false;initial-value:100%}
.sf-fr{border:0;--dh:calc(var(--dr) / 2);transition:--dr var(--t3) var(--ez);
  background:linear-gradient(var(--fl),var(--fl)) 0 0/var(--dh) 1px no-repeat,linear-gradient(var(--fl),var(--fl)) 100% 0/var(--dh) 1px no-repeat,
    linear-gradient(var(--fl),var(--fl)) 0 100%/var(--dh) 1px no-repeat,linear-gradient(var(--fl),var(--fl)) 100% 100%/var(--dh) 1px no-repeat,
    linear-gradient(var(--fl),var(--fl)) 0 0/1px var(--dh) no-repeat,linear-gradient(var(--fl),var(--fl)) 0 100%/1px var(--dh) no-repeat,
    linear-gradient(var(--fl),var(--fl)) 100% 0/1px var(--dh) no-repeat,linear-gradient(var(--fl),var(--fl)) 100% 100%/1px var(--dh) no-repeat}
.sf-fr i{transition:transform var(--t3) var(--ez)}
.sf-fr i:nth-child(1){transform-origin:100% 100%}.sf-fr i:nth-child(2){transform-origin:0 100%}
.sf-fr i:nth-child(3){transform-origin:100% 0}.sf-fr i:nth-child(4){transform-origin:0 0}
.sf-fr::before,.sf-fr::after{clip-path:inset(0);transition:clip-path 240ms steps(12,end) var(--t3)}
.js :not(.is-drawn)>.sf-fr{--dr:0%}
.js :not(.is-drawn)>.sf-fr i{transform:scale(0)}
.js :not(.is-drawn)>.sf-fr::before,.js :not(.is-drawn)>.sf-fr::after{clip-path:inset(0 100% 0 0);transition:none}
/* the slow fill: 700 ms on the one curve; the label colour crosses at the midpoint. C cut corner: the fill sweeps in from the cut
   corner on a 45 degree front. B pair and A strike: from the left on the 45 degree edge, then the second strike fills in. Touch
   devices: no hover fill, the pressed state only (instant) */
.chip,.hdr-menu,.filters button{transition:color 200ms var(--ez) 250ms}
.chip::before,.hdr-menu::before,.filters button::before{
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);
  background:linear-gradient(225deg,var(--bone) 50%,transparent 50%) 0 100%/300% 300% no-repeat;transition:background-position 700ms var(--ez)}
.chip:is(:focus-visible,[aria-pressed=true])::before,.hdr-menu:focus-visible::before,.filters button:is(:focus-visible,[aria-pressed=true])::before{
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);background-position:100% 0}
@media (hover:hover){.chip:hover::before,.hdr-menu:hover::before,.filters button:hover::before{clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);background-position:100% 0}}
.chip:not(.chip--solid):active::before,.hdr-menu:active::before,.filters button:active::before{background-position:100% 0;transition-duration:0s}
.chip.chip--solid,.ix-pages .ix-book{transition:color 200ms var(--ez) 250ms}
.chip.chip--solid::before,.ix-pages .ix-book::before{background:linear-gradient(135deg,#F4F2E8 50%,transparent 50%) 100% 100%/300% 300% no-repeat,var(--rose);
  transition:background-position 700ms var(--ez)}
.chip.chip--solid::after,.ix-pages .ix-book::after{transition:clip-path 600ms var(--ez) 300ms,background-color 600ms var(--ez) 300ms;
  clip-path:polygon(evenodd,var(--bh) 0,100% 0,calc(100% - var(--bh)) 100%,0 100%,var(--bh) 0,
    calc(var(--bh) + .414px) 1px,2.414px calc(100% - 1px),calc(100% - var(--bh) - .414px) calc(100% - 1px),calc(100% - 2.414px) 1px,calc(var(--bh) + .414px) 1px)}
.chip.chip--solid:focus-visible::before,.ix-pages .ix-book:focus-visible::before{background:linear-gradient(135deg,#F4F2E8 50%,transparent 50%) 0 0/300% 300% no-repeat,var(--rose)}
.chip.chip--solid:focus-visible::after,.ix-pages .ix-book:focus-visible::after,
.chip.chip--solid:active::after,.ix-pages .ix-book:active::after{background:var(--bone);
  clip-path:polygon(evenodd,var(--bh) 0,100% 0,calc(100% - var(--bh)) 100%,0 100%,var(--bh) 0,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%)}
@media (hover:hover){
  .chip.chip--solid:hover::before,.ix-pages .ix-book:hover::before{background:linear-gradient(135deg,#F4F2E8 50%,transparent 50%) 0 0/300% 300% no-repeat,var(--rose)}
  .chip.chip--solid:hover::after,.ix-pages .ix-book:hover::after{background:var(--bone);
    clip-path:polygon(evenodd,var(--bh) 0,100% 0,calc(100% - var(--bh)) 100%,0 100%,var(--bh) 0,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%)}
}
.chip.chip--solid:active::before,.ix-pages .ix-book:active::before{background:linear-gradient(135deg,#F4F2E8 50%,transparent 50%) 0 0/300% 300% no-repeat,var(--rose);transition-duration:0s}
.chip.chip--solid:active::after,.ix-pages .ix-book:active::after{transition-duration:0s;transition-delay:0s}
/* the crosshair over pictures and films (a fine pointer only): 1 px bone, 24 px, a 4 px gap, difference blend; links and buttons
   over a picture keep their own cursor */
.xh{position:fixed;left:0;top:0;z-index:80;width:24px;height:24px;margin:-12px 0 0 -12px;pointer-events:none;mix-blend-mode:difference;opacity:0;
  background:linear-gradient(#F4F2E8,#F4F2E8) 0 50%/10px 1px no-repeat,linear-gradient(#F4F2E8,#F4F2E8) 100% 50%/10px 1px no-repeat,
    linear-gradient(#F4F2E8,#F4F2E8) 50% 0/1px 10px no-repeat,linear-gradient(#F4F2E8,#F4F2E8) 50% 100%/1px 10px no-repeat}
.xh.is-on{opacity:1}
.xh-on,.xh-on :is(img,video,canvas,picture,.sf-fr,.case-film){cursor:none}
.xh-on :is(.tb,.olab,.plate,.band){cursor:auto}
/* the chrome mark intro, the first load of a visit only (the inline flag in <head> adds .intro and remembers it in sessionStorage).
   About .9 s: off black, the chrome pair draws in with a light sweep while the frame corners draw, then the curtain lifts on
   the one curve. The page paints underneath from the first frame, so nothing waits for it; any key, click, tap, scroll or wheel
   skips it (muus-2027.js), and reduced motion never shows it */
html.intro::before{content:"";position:fixed;inset:0;z-index:1000;pointer-events:none;background-color:#0C0E0F;
  --ci:clamp(16px,3vw,40px);
  background-image:linear-gradient(#F4F2E8,#F4F2E8),linear-gradient(#F4F2E8,#F4F2E8),linear-gradient(#F4F2E8,#F4F2E8),linear-gradient(#F4F2E8,#F4F2E8),
    linear-gradient(#F4F2E8,#F4F2E8),linear-gradient(#F4F2E8,#F4F2E8),linear-gradient(#F4F2E8,#F4F2E8),linear-gradient(#F4F2E8,#F4F2E8);
  background-repeat:no-repeat;
  background-position:var(--ci) var(--ci),var(--ci) var(--ci),calc(100% - var(--ci)) var(--ci),calc(100% - var(--ci)) var(--ci),
    var(--ci) calc(100% - var(--ci)),var(--ci) calc(100% - var(--ci)),calc(100% - var(--ci)) calc(100% - var(--ci)),calc(100% - var(--ci)) calc(100% - var(--ci));
  background-size:28px 1px,1px 28px,28px 1px,1px 28px,28px 1px,1px 28px,28px 1px,1px 28px;
  animation:out27 600ms var(--xq,ease) 150ms forwards}
html.intro::after{content:"";position:fixed;left:50%;top:50%;z-index:1001;width:min(34vw,240px);aspect-ratio:1540/1170;pointer-events:none;
  translate:-50% -50%;-webkit-mask:url(/assets/27/mark.svg) center/100% 100% no-repeat;mask:url(/assets/27/mark.svg) center/100% 100% no-repeat;
  background:linear-gradient(105deg,rgb(255 255 255 / 0) 38%,rgb(255 255 255 / .95) 50%,rgb(255 255 255 / 0) 62%) 160% 0/260% 100% no-repeat,
    linear-gradient(180deg,#FBFAF4 0,#B9B9B3 46%,#E6E5DE 54%,#7C7E7C 100%);
  opacity:0;
  animation:in27m 300ms var(--xo,ease) forwards,out27 600ms var(--xq,ease) 150ms forwards}
/* v26p: transform and opacity only, lifting from 150 ms, gone by 750 ms; the page is painted underneath the whole time */
@keyframes in27m{from{opacity:0;scale:.96}to{opacity:1;scale:1}}
@keyframes sw27{to{background-position:-60% 0,0 0}}
@keyframes in27c{to{background-size:28px 1px,1px 28px,28px 1px,1px 28px,28px 1px,1px 28px,28px 1px,1px 28px;
  background-position:var(--ci) var(--ci),var(--ci) var(--ci),calc(100% - var(--ci)) var(--ci),calc(100% - var(--ci)) var(--ci),
    var(--ci) calc(100% - var(--ci)),var(--ci) calc(100% - var(--ci)),calc(100% - var(--ci)) calc(100% - var(--ci)),calc(100% - var(--ci)) calc(100% - var(--ci))}}
@keyframes out27{from{transform:translateY(0)}to{transform:translateY(-100%)}}
html.intro.intro-skip::before,html.intro.intro-skip::after{animation:out27 var(--t1) var(--ez) forwards}
html.intro.intro-skip::after{opacity:1}
/* 3 · the plate line, one format a site: mono caps, 11 px, .13em, tabular. Sheet number · credit · place · date, and the corner
   details beside it (coordinates where the source files are certain, a running timecode on film heroes). It sits on the frame's
   inner bottom edge, on the side the title block does not use; narrower screens set it under the title block */
.plate{position:absolute;z-index:4;bottom:calc(var(--fi) + 16px);right:calc(var(--fi) * 2 + 8px);left:auto;display:flex;flex-wrap:wrap;gap:4px 16px;
  justify-content:flex-end;max-width:min(560px,calc(50% - 2 * var(--fi)));margin:0;pointer-events:none;
  font:500 11px/16px "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.13em;text-transform:uppercase;color:rgb(244 242 232 / .92)}
.plate span{white-space:nowrap}
.plate .pl-l{white-space:normal;text-align:right}
.sf:has(>.tb-r)>.plate,.sf:has(>.band.tb-r)>.plate,.case-next.sf:has(>.tb-r)>.plate{right:auto;left:calc(var(--fi) * 2 + 8px);justify-content:flex-start}
.sf:has(>.tb-r)>.plate .pl-l{text-align:left}
.ground .plate{color:#0C0E0F}
@media (max-width:1099px) and (min-width:601px) and (min-height:501px){
  .sf>.plate,.sf:has(>.tb-r)>.plate{left:calc(var(--fi) * 2 + 8px);right:calc(var(--fi) * 2 + 8px);max-width:none;justify-content:flex-start;bottom:calc(var(--fi) + 14px)}
  .sf>.plate .pl-l{text-align:left}
  .sf:has(>.plate)>.tb,.sf:has(>.plate)>.band.tb,.sf:has(>.plate)>.tb-r{margin-bottom:calc(var(--fi) * 2 + 40px)!important}
  .sf--top:has(>.plate)>.tb{margin-bottom:0!important}
}
@media (max-width:760px) and (min-width:601px) and (min-height:501px){
  .sf>.plate,.sf:has(>.tb-r)>.plate{left:calc(var(--fi) * 2);right:calc(var(--fi) * 2);bottom:calc(var(--fi) + 14px)}
  .sf:has(>.plate)>.tb,.sf:has(>.plate)>.band.tb,.sf:has(>.plate)>.tb-r{margin-bottom:calc(var(--fi) * 2 + 44px)!important}
  .plate{gap:0 12px}
}
.hl>.plate,.road>.plate{bottom:calc(var(--fi) + 12px)}
/* phones (600 px wide and under, or held sideways) leave the plate out: there is no room for it without moving the title block onto
   the picture (the faces check proved it), the same rule as the deck */
@media (max-width:600px),(max-height:500px){.sf>.plate{display:none}}
/* 7 · finish: square corners everywhere but the C cut (a clip path, never a radius); no shadows on off black or on pictures (Sand
   cards keep their flat elevation); one stroke weight */
*,*::before,*::after{border-radius:0!important}
.pick{box-shadow:none}.ground .pick{box-shadow:var(--el2),var(--edge)}
.hdr-nav a[aria-current=page]{box-shadow:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat}
.pick-time{border-bottom-width:1px}
.prog li::before{height:1px}
.wnd-ring{border-width:1px}
.wnd-cursor{box-shadow:none!important;clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%)}
.sv-case .tile-media{box-shadow:none}
.sp-pill::before{width:12px;height:8px;background:var(--rose);clip-path:polygon(5px 0,12px 0,7px 8px,0 8px)}
.fm-f [aria-invalid="true"]{box-shadow:none}
/* stone paper on Sand only, as the Sand surface's own background layer (multiply), so it never sits over a picture; it loads after
   the page (html.ld, muus-2027.js) so it never competes with the first paint */
html.ld .ground[data-tone=sand]{background-image:url(/assets/27/paper.webp),radial-gradient(120% 90% at 10% -10%,rgb(255 255 255 / .3),rgb(255 255 255 / 0) 65%),
    radial-gradient(110% 90% at 100% 112%,rgb(var(--shc) / .16),rgb(var(--shc) / 0) 62%);
  background-size:256px 256px,auto,auto;background-repeat:repeat,no-repeat,no-repeat;background-blend-mode:multiply,normal,normal}
.wnd-slab{background-blend-mode:inherit}
/* 6 · blur up: a lazy picture fades in over its own tiny placeholder (muus-2027.js) */
img.bu{opacity:0}
img.bu.bu-in{opacity:1;transition:opacity var(--t1) var(--ez)}
/* a digit run (.tn, details27.py) is invisible to layout: it only switches on tabular figures, whatever span rule it sits under */
html span.tn.tn{display:inline!important;margin:0!important;padding:0!important;max-width:none!important;min-width:0!important;font:inherit!important;letter-spacing:inherit!important;color:inherit!important;text-transform:inherit!important;background:none!important;border:0!important;font-variant-numeric:tabular-nums lining-nums!important}
/* the home services rows keep a 44 px tap target on phones now that the row type sits on the 24 px step */
.svc-list a{min-height:44px}
/* the colophon (fine print, set like a source line) */
.ftr-colo{flex-basis:100%;margin:8px 0 0;font:400 12px/16px var(--t);letter-spacing:0;color:var(--b58)}
/* reduced motion: no intro, no reveals, no draw on, no wipes; instant states */
@media (prefers-reduced-motion:reduce){
  html.intro::before,html.intro::after{display:none!important}
  [data-reveal],[data-reveal]>*{opacity:1!important;transform:none!important;translate:none!important;animation:none!important}
  .js :not(.is-drawn)>.sf-fr{--dr:100%}.js :not(.is-drawn)>.sf-fr i{transform:none}
  .js :not(.is-drawn)>.sf-fr::before,.js :not(.is-drawn)>.sf-fr::after{clip-path:none}
  img.bu{opacity:1}
}
/* ── v26p motion and full screen (25 Oct; Jacob 13:08 "Premium high end. Full screen. Animations and motions?"). The deck's one language:
   the frame draws on, the picture opens from the cut corner, headlines rise line by line behind a mask (60 ms apart), ease out expo and
   quint, 500 to 1200 ms. Transform and opacity only, apart from the corner wipe on page change. Reduced motion: none of it ───── */
:root{--xo:cubic-bezier(.16,1,.3,1);--xq:cubic-bezier(.22,1,.36,1);--tf:200ms}
/* the hero is a full screen film: as the first screen scrolls away the Sand lifts off the window and the film fills the screen
   (scroll driven, on the compositor; browsers without scroll timelines keep the Window as it was) */
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .wnd{view-timeline:--hero block}
  .wnd .wnd-slab{animation:wOpen linear forwards;animation-timeline:--hero;animation-range:exit 4% exit 46%}
  .wnd .win-cut,.wnd .wnd-foot{animation:wFade linear forwards;animation-timeline:--hero;animation-range:exit 2% exit 14%}
  .wnd .wnd-top,.wnd .wnd-shade{animation:wShade linear forwards;animation-timeline:--hero;animation-range:exit 4% exit 46%}
  .wnd .wnd-film img,.wnd .wnd-film video{animation:wPush linear forwards;animation-timeline:--hero;animation-range:exit 0% exit 100%}
}}
@keyframes wOpen{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.8)}}
@keyframes wFade{from{opacity:1}to{opacity:0}}
@keyframes wShade{from{opacity:0}to{opacity:1}}
@keyframes wPush{from{transform:scale(1)}to{transform:scale(1.06)}}
/* headlines below the first screen: each line rises behind its own mask, once, as it enters (muus-2027.js splits them) */
.lm{display:inline-block;padding:.16em 0 .22em;margin:-.16em 0 -.22em}
.li{display:inline-block}
.js .ln-wait .lm,.js .ln-run .lm{overflow:hidden}
.js .ln-wait .lm>.li{transform:translateY(150%)}
.js .ln-run .lm>.li{animation:lnUp27 760ms var(--xo) backwards;animation-delay:calc(var(--ln,0) * 60ms)}
@keyframes lnUp27{from{transform:translateY(150%)}to{transform:none}}
.js .ln-wait .sk{background-size:0 100%!important}
.js .ln-run .sk{animation:skDraw27 560ms var(--xq) backwards;animation-delay:calc(280ms + var(--ln,0) * 60ms)}
@keyframes skDraw27{from{background-size:0 100%}to{background-size:100% 100%}}
/* source lines never wait on a reveal: a number is never on screen without its source */
.js [data-reveal][data-stagger]:not(.is-in)>.src{opacity:1}
/* page to page: the next page opens from the cut corner over the last one, which eases back and fades */
@view-transition{navigation:auto}
@keyframes vtIn27{from{clip-path:polygon(100% 0,100% 0,100% 0)}to{clip-path:polygon(100% 0,-100% 0,100% 200%)}}
@keyframes vtOut27{to{opacity:.45;transform:scale(.985)}}
::view-transition-old(root){animation:vtOut27 700ms var(--xq) both}
::view-transition-new(root){animation:vtIn27 820ms var(--xo) both}
/* case pages open on the picture: it widens from the cut corner while the frame draws on (first screen only, once) */
@keyframes caseIn27{from{clip-path:polygon(100% 0,100% 0,100% 0)}to{clip-path:polygon(100% 0,-100% 0,100% 200%)}}
@keyframes push27{from{transform:scale(1)}to{transform:scale(1.04)}}
.js .case-hero>:is(img,picture,video,.case-film){animation:caseIn27 1000ms var(--xo) 120ms both}
.js .case-hero>img.bg,.js .case-hero>picture img{animation:push27 14s linear both}
/* the Work grid: a slow zoom on the picture and the frame line drawing in from the corners, no lift */
.tile:hover{transform:none}
.tile-media img,.tile-media video{transition:transform 1200ms var(--xo),opacity 600ms var(--xo)}
.tile:hover .tile-media img,.tile:hover .tile-media video{transform:scale(1.04)}
.tile-media::before,.tile-media::after{content:"";position:absolute;inset:10px;z-index:3;pointer-events:none;border:0 solid rgb(244 242 232 / .8);transition:transform 900ms var(--xo)}
.tile-media::before{border-width:1px 0;transform:scaleX(0);transform-origin:0 50%}
.tile-media::after{border-width:0 1px;transform:scaleY(0);transform-origin:50% 100%}
.tile:is(:hover,:focus-visible) .tile-media::before{transform:scaleX(1)}
.tile:is(:hover,:focus-visible) .tile-media::after{transform:scaleY(1)}
/* buttons: a 200 ms ink fill and a pressed state */
.chip::before,.hdr-menu::before,.filters button::before,.chip.chip--solid::before,.ix-pages .ix-book::before{transition-duration:var(--tf)!important}
.chip,.hdr-menu,.filters button,.chip.chip--solid,.ix-pages .ix-book{transition-delay:calc(var(--tf) / 2)!important;transition-duration:var(--tf)!important}
.chip:active,.hdr-menu:active,.filters button:active{translate:0 1px}
/* numbers: the DOM keeps the final figure while the running one is drawn over it (hidden from screen readers) */
[data-count].cnt{position:relative;color:transparent!important}
[data-count].cnt::after{content:attr(data-cv) / "";position:absolute;left:0;top:0;color:var(--cc);white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
@media (prefers-reduced-motion:reduce){
  .js .ln-wait .lm>.li,.js .ln-run .lm>.li{transform:none!important;animation:none!important}.js .ln-wait .sk{background-size:100% 100%!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
  .js .case-hero>*{animation:none!important}.tile-media img,.tile-media video,.tile-media::before,.tile-media::after{transition:none!important}
}