/* Monarch Labs — hero.
   Editorial study built from three references: a hairline column grid with vertical edge labels and a
   counter stack, a huge display word on a faded vertical reel, a description set in its own column, all in black, white
   and grey; Monarch green only in a few small marks. One service at a time; everything that marks "which one" moves together.
   Figtree for reading; DM Sans (the closest open match to the Wolf & Whale headline face) for the
   services and the menu. Glass layer from the fourth reference: the page sits on a
   frosted glass panel over soft grey light (black, white and grey only), with glossy pills. */
:root{
  --fg:#111;--lime:#c5ff5f;--muted:#666666;--rule:rgba(17,17,17,.14);--hair:rgba(17,17,17,.065);
  --sans:"Figtree",system-ui,sans-serif;--display:"DM Sans",var(--sans);
  --gut:clamp(20px,4.4vw,64px);--bar:108px;--edge:clamp(56px,6vw,96px);--frame:clamp(10px,1.6vw,24px);--radius:clamp(22px,2.4vw,36px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{height:100%;overflow:hidden;background:#e6e6e6;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:linear-gradient(155deg,#f3f3f3 0%,#e7e7e7 48%,#d9d9d9 100%) fixed;color:var(--fg);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;height:100%;overflow:hidden}  /* one screen, no scroll */
h1,p,ol{margin:0}
ol{padding:0;list-style:none}
::selection{background:var(--lime);color:#111}

/* grey light behind the glass: a charcoal, a mid-grey and a white field the frost picks up */
.aura{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aura i{position:absolute;border-radius:50%;filter:blur(60px)}
.aura i:nth-child(1){width:46vw;height:46vw;right:-8vw;top:-14vw;background:radial-gradient(circle,rgba(28,28,28,.42),rgba(28,28,28,0) 70%)}
.aura i:nth-child(2){width:38vw;height:38vw;left:-10vw;bottom:-16vw;background:radial-gradient(circle,rgba(120,120,120,.5),rgba(120,120,120,0) 70%)}
.aura i:nth-child(3){width:30vw;height:30vw;left:38%;top:30%;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,255,255,0) 70%)}

/* the frosted panel the whole hero sits on */
.frame{position:fixed;inset:var(--frame);z-index:0;border-radius:var(--radius);background:linear-gradient(160deg,rgba(255,255,255,.62),rgba(255,255,255,.34) 55%,rgba(255,255,255,.44));-webkit-backdrop-filter:blur(30px) saturate(1.35);backdrop-filter:blur(30px) saturate(1.35);border:1px solid rgba(255,255,255,.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.4),0 40px 90px -40px rgba(0,0,0,.28)}

/* hairline columns: the hero's grid, drawn (5 lines → 6 columns between the edges) */
.cols{position:fixed;inset:var(--frame) calc(var(--frame) + var(--edge));display:flex;justify-content:space-between;pointer-events:none;z-index:0}
.cols i{width:1px;background:var(--hair)}

/* buttons (presentational: this is a hero study, nothing links yet) */
.btn{display:inline-flex;align-items:center;gap:14px;height:58px;padding:0 30px 0 32px;font:500 16px/1 var(--sans);border-radius:999px;white-space:nowrap;cursor:default}
.btn i{font-style:normal;font-size:18px}
.btn.dark i{color:var(--lime)}  /* Monarch green, kept to small marks: this arrow, the active nav dot, the active-service dot, selection */
/* glossy ink pill: lit top edge, darker belly, soft drop */
.btn.dark{color:#fff;background:linear-gradient(180deg,#363636 0%,#161616 52%,#0b0b0b 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -3px 8px rgba(0,0,0,.45),0 16px 30px -14px rgba(0,0,0,.5)}

/* bar */
.bar{position:absolute;inset:var(--frame) var(--frame) auto;z-index:4;height:var(--bar);display:flex;align-items:center;justify-content:space-between;gap:32px;padding:0 calc(var(--edge) + 1px)}  /* same left line as the word, button and scroll circle */
.mark{display:flex;align-items:center;gap:14px}
.mark .sym{width:26.5px;height:22px;fill:currentColor;flex:none}  /* Wings: the M split into two halves */

/* nav: the four links sit after the logo on the left; the current page (Labs) carries the glass pill and the
   green dot. Start a project is the bar's right end, smaller than a hero pill so it fits the bar. */
.nav{display:flex;align-items:center;gap:4px;margin-left:-8px;margin-right:auto}  /* bar gap 32 - 8 + pill padding 16 = 40px from the logo to the Labs pill text */
.nav a{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 16px;border:1px solid transparent;border-radius:999px;font:500 14px/1 var(--sans);color:#5c5c5c;text-decoration:none;transition:color .3s ease,background-color .3s ease}
.nav a:hover{color:var(--fg)}
.nav a[aria-current="page"]{color:var(--fg);border-color:rgba(255,255,255,.85);background:rgba(255,255,255,.42);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 #fff,0 10px 24px -16px rgba(0,0,0,.35)}
.nav a[aria-current="page"]::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.nav a:focus-visible{outline:1.5px solid var(--fg);outline-offset:2px}
.bar .btn{height:48px;padding:0 22px 0 24px;font-size:15px;gap:12px}
/* the bar's Start a project is a link to the contact page */
.bar a.btn{color:#fff;text-decoration:none;cursor:pointer}
.bar a.btn:focus-visible{outline:1.5px solid var(--fg);outline-offset:3px}
.w-foot-row a.btn{color:#fff;text-decoration:none;cursor:pointer}
.w-foot-row a.btn:focus-visible{outline:1.5px solid var(--fg);outline-offset:3px}
/* on the contact page itself the button is switched off: flat grey glass, muted text, no arrow colour, no clicks */
.bar a.btn[aria-current="page"]{pointer-events:none;cursor:default;color:#5c5c5c;background:rgba(255,255,255,.38);border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 1px 0 #fff;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.bar a.btn[aria-current="page"] i{color:#9a9a9a}

/* edge labels: city line on the left, service counter on the right */
.side{position:fixed;top:50%;z-index:2;font:500 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.side-l{left:calc(var(--frame) + var(--edge) / 2);transform:translate(-50%,-50%) rotate(-90deg);white-space:nowrap}
.side-r{right:calc(var(--frame) + var(--edge) / 2);transform:translate(50%,-50%);display:flex;flex-direction:column;align-items:center;gap:22px}
.count{display:block;height:13px;overflow:hidden;font:500 12px/13px var(--sans);letter-spacing:.1em;color:var(--fg)}
.count b{display:block;font-weight:500}
.ticks{display:flex;flex-direction:column;align-items:flex-end;gap:8px;width:26px}
.ticks i{display:block;height:1.5px;width:14px;background:rgba(17,17,17,.3);transition:width .6s var(--ease),background-color .6s}
.ticks i.on{width:26px;background:var(--fg)}
.lbl{writing-mode:vertical-rl;transform:rotate(180deg)}

/* hero: sits between the edge columns */
.hero{position:relative;z-index:1;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--frame) + var(--bar) + 24px) calc(var(--frame) + var(--edge) + 1px) calc(var(--frame) + var(--bar) + 96px)}

/* the word: a vertical reel. The current service sits in the middle; the one before and the one after
   peek in above and below, faded out by a top and bottom gradient mask. Each step the reel moves up a row.
   --base is the size the layout is built around: .word keeps that footprint, so the description, button
   and foot never move. The reel itself is set 40% larger (--big, held so the longest word still ends inside
   the right edge column) and simply overlaps what is around it. */
.word{--base:min(13vw,18vh,196px);--big:min(calc(var(--base) * 1.4),calc((100vw - var(--edge) - var(--frame) - 24px) / 5.9));
  position:relative;z-index:0;height:calc(var(--base) * 2.2);margin:0;font:600 var(--big)/1.02 var(--display);letter-spacing:-.05em}
.reel{position:absolute;left:0;top:50%;width:calc(100vw - var(--edge) - var(--frame));height:2.2em;transform:translateY(-50%);pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.2) 18%,#000 34%,#000 66%,rgba(0,0,0,.2) 82%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.2) 18%,#000 34%,#000 66%,rgba(0,0,0,.2) 82%,transparent 100%)}
.warp .reel{filter:url(#ml-smudge)}   /* hero.js: on all the time, at zero when still, so it never flickers on/off */
.warp.work-open .reel{filter:none}   /* not while the word zooms in or out of the work view: the filter would stall the zoom */
.reel>span{position:absolute;left:0;top:50%;white-space:nowrap;transform:translateY(calc(-50% + var(--p,0) * 1.02em));transition:transform 1s var(--ease)}
.reel>span.jump{transition:none}
/* --lsb = the first letter's side bearing in DM Sans 600 (measured), so every word's stem sits on the line */
.t{position:relative;display:block;margin-left:calc(var(--lsb,0) * -1em)}
/* image layers: the same word again, filled with a photo (background clipped to the letters). On the current
   service they take turns; everywhere else they are invisible and the word is plain ink. Motion as in the Nowhere
   hero: each photo drifts its own way (pan right, slow zoom in, pan left, zoom out, set per layer by hero.js as
   --s0/--p0 → --s1/--p1) on a soft in-out curve, and crossfades with the next; the leaving photo keeps its place
   while it fades, then resets unseen. */
/* each photo layer carries two cuts; phones take the 1000px one (the letters are small there), so each device fetches one size only */
.t>b{--img:var(--im)}
@media (max-width:820px){.t>b{--img:var(--ims)}}
.t>b{position:absolute;inset:0;z-index:1;font-weight:inherit;color:transparent;background:var(--img) no-repeat;background-size:var(--s0,112%) auto;background-position:var(--p0,50% 50%);
  -webkit-background-clip:text;background-clip:text;opacity:0;
  transition:opacity .2s linear 1.6s,background-size 0s linear 1.85s,background-position 0s linear 1.85s}   /* the leaving photo stays whole underneath until the new one covers it */
.t>b.on{z-index:2;opacity:1;background-size:var(--s1,112%) auto;background-position:var(--p1,50% 50%);
  transition:opacity 1.6s cubic-bezier(.37,0,.63,1),background-size 4s cubic-bezier(.37,0,.63,1),background-position 4s cubic-bezier(.37,0,.63,1)}

/* button + description: a bottom band lifted well clear of the frame edge. Button on the left line,
   description flush right on the bar's right line (the bar's right padding), bottoms aligned. */
.row{position:absolute;z-index:2;left:calc(var(--frame) + var(--edge) + 1px);right:calc(var(--frame) + var(--edge) + 1px);bottom:calc(var(--frame) + clamp(44px,8vh,88px));display:flex;justify-content:flex-end;align-items:flex-end;gap:48px}
.desc{display:grid;max-width:23em;font:400 clamp(17px,1.4vw,21px)/1.55 var(--sans);color:#3d3d3d;text-align:right}
.desc span{grid-area:1/1;opacity:0;transform:translateY(.6em);transition:opacity .5s ease,transform .7s var(--ease)}
.desc span.on{opacity:1;transform:none;transition-delay:.18s}
.row .btn{flex:none}


/* preloader: the same rounded panel as the glass frame, inside the same outer margin, everything centred. The
   service photos flick through inside the Wings as the page loads; the name decodes letter by letter; the percentage
   counts up under it. Exit: the content lifts away, then the panel is revealed away from left to right. If the script never runs, the panel removes itself after 6s (pre-fail). */
.pre{position:fixed;inset:var(--frame);z-index:50;display:grid;place-items:center;border-radius:var(--radius);overflow:hidden;color:var(--fg);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.28);animation:pre-fail 0s linear 6s forwards}
.pre.done{box-shadow:0 40px 90px -40px rgba(0,0,0,0)}
/* exit: once loaded, the content lifts away and the panel is wiped off from left to right, revealing the
   hero underneath (clip-path, rounded corners kept) */
.pre{background:linear-gradient(160deg,#f8f8f8,#eeeeee 55%,#f1f1f1);clip-path:inset(0 0 0 0 round var(--radius));
  transition:clip-path 1.1s cubic-bezier(.76,0,.24,1) .3s,box-shadow .6s ease .3s}
.pre.done{clip-path:inset(0 0 0 100% round var(--radius))}
/* leaving (a nav link to another page): the panel snaps to the left edge, wipes in left to right over the page,
   the Wings and name fade back in, then the next page opens under the same closed panel and runs the preloader */
.pre.from-left{clip-path:inset(0 100% 0 0 round var(--radius))}
.pre.snap,.pre.snap .pre-core{transition:none!important}
.pre.leave{transition:clip-path .9s cubic-bezier(.76,0,.24,1),box-shadow .6s ease}
.pre.leave .pre-core{transition:opacity .5s ease .45s,transform .8s cubic-bezier(.2,.7,.2,1) .45s}
.pre-core{z-index:1;display:flex;flex-direction:column;align-items:center;gap:26px;transition:opacity .5s ease,transform .8s cubic-bezier(.76,0,.24,1)}
.pre.done .pre-core{opacity:0;transform:translateY(-24px)}
/* the Wings, 15% larger than the bar's, cut out of the service photos: the same images as the hero's letters
   flick through inside the shape, much faster (preload.js), each drifting a little as it shows. Ink underneath, so
   the mark reads before any photo has arrived */
.pre-wings{position:relative;width:67px;height:55px;overflow:hidden;background:#161616;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='28 46 200 166'%3E%3Cpath d='M28 212V46l92 92v74H86v-52l-22-22v74zM228 212V46l-92 92v74h34v-52l22-22v74z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='28 46 200 166'%3E%3Cpath d='M28 212V46l92 92v74H86v-52l-22-22v74zM228 212V46l-92 92v74h34v-52l22-22v74z'/%3E%3C/svg%3E") center/contain no-repeat}
.pre-wings i{position:absolute;inset:0;background:var(--img) center/cover no-repeat;opacity:0;scale:1.25;transition:opacity .22s ease,scale 0s linear .25s}
.pre-wings i.on{opacity:1;scale:1;transition:opacity .22s ease,scale .9s cubic-bezier(.2,.7,.2,1)}
.pre-name{margin:0;font:500 12px/1 var(--sans);white-space:pre}
.pre-name i{display:inline-block;width:1.4em;text-align:center;font-style:normal}  /* fixed slots: the decode never shifts the line */
.pre-name b{font-weight:500;color:#9a9a9a}
.pre-num{margin:-12px 0 0;font:500 11px/1 var(--sans);letter-spacing:.14em;color:var(--muted);font-variant-numeric:tabular-nums}  /* under the name */

/* intro after the preloader: everything starts hidden (html.pre-intro, set by preload.js), then each element
   comes in as the reveal sweeps past it, left to right. The delay (--in) is worked out from each element's
   own position, so the order is always the screen's order. Uses the separate translate / scale properties so
   the elements' own transforms (rotated side label, centred counter) are untouched. */
.pre-intro :is(.mark,.nav,.bar .btn,.side-l,.side-r,.word,.desc,.hero .see){opacity:0;translate:0 16px}
.pre-intro .cols i{scale:1 0;transform-origin:50% 0}
.pre-intro.in :is(.mark,.nav,.bar .btn,.side-l,.side-r,.word,.desc,.hero .see){opacity:1;translate:0 0;
  transition:opacity .8s ease var(--in,0s),translate 1s cubic-bezier(.2,.7,.2,1) var(--in,0s)}
.pre-intro.in .cols i{scale:1 1;transition:scale 1.2s cubic-bezier(.65,0,.25,1) var(--in,0s)}


/* "See the work": under the description, a quiet glass pill with the study count; it lights up while the
   pointer is on the current word too (html.hot), since the word opens the same view */
.info{display:flex;flex-direction:column;align-items:flex-end;gap:20px}
.see{display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 6px 0 18px;border:1px solid rgba(255,255,255,.85);border-radius:999px;background:rgba(255,255,255,.42);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 #fff,0 10px 24px -16px rgba(0,0,0,.35);font:500 14px/1 var(--sans);color:var(--fg);cursor:pointer;
  transition:background-color .35s ease,box-shadow .35s ease}
.see b{font-weight:500;font-size:12px;letter-spacing:.08em;color:var(--muted)}
.see i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-style:normal;color:var(--lime);background:linear-gradient(180deg,#363636,#0b0b0b);transition:transform .45s var(--ease)}
.see:hover,.hot .see{background:rgba(255,255,255,.75)}
.see:hover i,.hot .see i{transform:translateX(3px)}
.see:focus-visible{outline:1.5px solid var(--fg);outline-offset:3px}
.hot .word{cursor:zoom-in}

/* zoom: the hero word blows up past the viewer while its photo grows out of it (the work layer); the rest fades */
.word{transition:transform 1.15s cubic-bezier(.7,0,.2,1),opacity .9s ease}
.zoom .word{transform:scale(3.2);opacity:0;transition-delay:0s,.2s}
.measure .word{transform:none!important;transition:none!important}
.row,.side{transition:opacity .5s ease}
.zoom .row,.zoom .side{opacity:0}

/* work view: covers the whole screen. Opening clips it from the word's box out to the full screen (clip-path set
   by work.js) while the photo scales from the word's size; then the white sheet opens in the middle, and the
   photo stays on as a border top, bottom, left and right */
.work{position:fixed;inset:0;z-index:40;overflow:hidden;--rim:var(--frame);
  transition:clip-path 1.15s cubic-bezier(.7,0,.2,1),opacity .6s ease;opacity:0}
.work.full{opacity:1}
.work[hidden]{display:none}
.work.snap,.work-bg i.snap{transition:none!important}
/* landing straight on the work view: it is simply there under the loader's wipe */
.direct :is(.work,.work-bg i,.sheet,.work-top>*,.work-in,.w-intro>*){transition:none!important}
.work-bg{position:absolute;inset:0;background:#222}
.work-bg i{position:absolute;inset:0;background:var(--img) center/cover no-repeat;transform-origin:0 0;opacity:0;
  transition:transform 1.15s cubic-bezier(.7,0,.2,1),opacity 1.2s ease}
.work-bg i.on{opacity:1}
.work:not([hidden]) .work-bg i{animation:work-drift 22s ease-in-out infinite alternate}   /* a slow breath on the border */
@keyframes work-drift{to{scale:1.08}}

.sheet{position:absolute;inset:var(--rim);display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;background:#fbfbfa;color:var(--fg);
  box-shadow:0 0 0 1px rgba(255,255,255,.5),0 40px 100px -30px rgba(0,0,0,.45);
  clip-path:inset(7% 7% 7% 7% round var(--radius));opacity:0;transition:clip-path 1s cubic-bezier(.7,0,.2,1),opacity .5s ease}
.work.ready .sheet{clip-path:inset(0 0 0 0 round var(--radius));opacity:1}

/* top bar: Back · the six services as tabs · close */
.work-top{flex:none;position:relative;height:calc(var(--bar) - 12px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:0 clamp(20px,calc(var(--edge) - var(--rim)),80px);
  border-bottom:1px solid transparent;transition:border-color .4s ease}
.work.under .work-top{border-color:var(--rule)}
.work-top>*{opacity:0;translate:0 -8px;transition:opacity .5s ease,translate .7s var(--ease)}
.work.ready .work-top>*{opacity:1;translate:0 0;transition-delay:.45s}
.work-top button{font:500 14px/1 var(--sans);color:var(--fg);cursor:pointer;-webkit-tap-highlight-color:transparent}
.work-top button:focus-visible{outline:1.5px solid var(--fg);outline-offset:3px}
.work-back{justify-self:start;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px 0 16px;border:1px solid var(--rule);border-radius:999px;background:#fff;transition:background-color .3s}
.work-back:hover{background:#f1f1f0}
.work-back i{font-style:normal;transition:transform .4s var(--ease)}
.work-back:hover i{transform:translateX(-3px)}
.work-tabs{display:flex;gap:2px;padding:4px;border-radius:999px;background:#efefee}
.work-tabs button{height:36px;padding:0 16px;border:0;border-radius:999px;background:none;color:#5c5c5c;transition:background-color .35s ease,color .35s ease}
.work-tabs button:hover{color:var(--fg)}
.work-tabs button[aria-selected="true"]{background:linear-gradient(180deg,#363636,#0b0b0b);color:#fff}
.work-x{justify-self:end;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--rule);border-radius:50%;background:#fff}
.work-x svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;transition:transform .45s var(--ease)}
.work-x:hover svg{transform:rotate(90deg)}

.work-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;outline:0}
.work-scroll::-webkit-scrollbar{display:none}
.work-in{--pad:clamp(20px,calc(var(--edge) - var(--rim)),80px);transition:opacity .35s ease}
.work:not(.ready) .work-in,.work.swap .work-in{opacity:0}

/* intro: the service name, filled with its own photo, as in the hero */
.w-intro{min-height:calc(100svh - 2 * var(--rim) - var(--bar) + 12px);display:flex;flex-direction:column;justify-content:center;padding:24px var(--pad) clamp(36px,7vh,80px)}
.w-intro>*{opacity:0;translate:0 26px;transition:opacity .3s ease,translate .3s ease}
.work.ready:not(.swap) .w-intro>*{opacity:1;translate:0 0;transition:opacity .8s ease calc(.35s + var(--d) * 110ms),translate 1s var(--ease) calc(.35s + var(--d) * 110ms)}
.w-eye{display:flex;align-items:center;gap:12px;font:500 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.dot{display:inline-block;flex:none;width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.w-word{margin:0 0 .18em calc(var(--lsb,0) * -1em);font:600 min(13vw,18vh,196px)/1.24 var(--display);letter-spacing:-.05em;font-size:min(calc(min(13vw,18vh,196px) * 1.3),calc((100vw - 2 * var(--rim) - 2 * var(--pad)) / 6.1));color:var(--fg);overflow-wrap:normal;white-space:nowrap}
.w-under{display:flex;justify-content:space-between;align-items:flex-end;gap:48px}
.w-desc{max-width:24em;font:400 clamp(17px,1.4vw,21px)/1.55 var(--sans);color:#3d3d3d}
.w-index{width:min(560px,46%);border-bottom:1px solid var(--rule)}
.w-index button{display:grid;grid-template-columns:auto auto 1fr auto;align-items:baseline;gap:14px;width:100%;padding:18px 4px;border:0;border-top:1px solid var(--rule);background:none;color:var(--fg);text-align:left;cursor:pointer;font:400 15px/1.35 var(--sans)}
.w-index small{font:500 11px/1 var(--sans);letter-spacing:.1em;color:var(--muted)}
.w-index b{font:600 19px/1 var(--display);letter-spacing:-.02em}
.w-index span{color:#5c5c5c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-index i{font-style:normal;transition:transform .45s var(--ease)}
.w-index button:hover i{transform:translateY(3px)}
.w-index button:focus-visible{outline:1.5px solid var(--fg);outline-offset:-1px}

/* a study */
.w-study{padding:clamp(48px,6vw,96px) var(--pad);border-top:1px solid var(--rule)}
.rv{opacity:0;translate:0 28px;transition:opacity .8s ease calc(var(--d,0) * 90ms),translate 1s var(--ease) calc(var(--d,0) * 90ms)}
.rv.seen{opacity:1;translate:0 0}
.s-head{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font:500 11px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.s-idx{display:flex;align-items:center;gap:12px;color:var(--fg)}
.s-name{margin:clamp(28px,4vw,56px) 0 0 -.05em;font:600 clamp(44px,5.4vw,88px)/1 var(--display);letter-spacing:-.045em}
.s-field{margin-top:18px;font:500 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.s-title{max-width:18em;margin-top:clamp(28px,3.6vw,52px);font:500 clamp(26px,2.7vw,44px)/1.14 var(--display);letter-spacing:-.025em}

/* the product: the study's screens on a plain light grey stage (the photos stay in the border) */
.s-stage{margin:clamp(40px,5vw,80px) 0;padding:clamp(22px,4vw,72px);background:#efefed;color:var(--fg)}
.s-stage-h{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,44px)}
.s-stage-h p{font:500 clamp(22px,2vw,32px)/1.15 var(--display);letter-spacing:-.02em;max-width:18em}
.s-stage-h small{font:500 10px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.s-win{overflow:hidden;border-radius:12px;background:#fff;box-shadow:0 30px 60px -34px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.06)}
.s-win>span{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:#f2f2f1;border-bottom:1px solid rgba(0,0,0,.06);font:500 11px/1 var(--sans);color:#636363}
.s-win>span i{width:9px;height:9px;border-radius:50%;background:#d6d6d4}
.s-win>span em{margin:0 auto;font-style:normal;padding:5px 14px;border-radius:6px;background:#fff}
.s-phone{overflow:hidden;border-radius:clamp(26px,3vw,44px);background:#fff;border:clamp(5px,.6vw,9px) solid #0d0d0d;box-shadow:0 30px 60px -30px rgba(0,0,0,.4)}
.s-phone img{margin:-2px}
.s-note{margin-top:clamp(18px,2vw,28px);font:500 10px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

.s-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:clamp(24px,4vw,64px);padding-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--rule)}
.s-row+.s-row,.s-story+.s-row{margin-top:clamp(48px,6vw,88px)}
.s-row h4,.s-story h4,.s-steps h5{margin:0;font:500 12px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.s-lead{font:400 clamp(19px,1.6vw,24px)/1.5 var(--sans);color:#2a2a2a}
.s-story{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);margin:clamp(48px,6vw,88px) 0 0}
.s-story li{padding-top:22px;border-top:1px solid var(--fg)}
.s-story small,.s-steps small{display:block;margin-bottom:14px;font:500 11px/1 var(--sans);letter-spacing:.1em;color:var(--muted)}
.s-story h4,.s-steps h5{color:var(--fg);margin-bottom:14px}
.s-story p,.s-built p,.s-steps p{margin:0;font:400 16px/1.6 var(--sans);color:#4a4a4a}
.s-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.4vw,36px);margin:0;padding:0;list-style:none}
.s-steps li{padding:22px 22px 26px;border-radius:16px;background:#f1f1ef}
.s-built{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px clamp(24px,3vw,48px);margin:0;padding:0;list-style:none}
.s-built b{display:block;margin-bottom:8px;font:600 clamp(19px,1.5vw,23px)/1.2 var(--display);letter-spacing:-.02em;color:var(--fg)}

/* end: the next service, set large in ink */
.w-foot{padding:clamp(48px,6vw,96px) var(--pad) clamp(36px,4vw,56px);border-top:1px solid var(--rule)}
.w-next{display:flex;flex-direction:column;align-items:flex-start;gap:14px;width:100%;padding:0;border:0;background:none;color:var(--fg);text-align:left;cursor:pointer;position:relative}
.w-next small{font:500 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.w-next span{font:600 clamp(60px,9vw,150px)/1.2 var(--display);letter-spacing:-.05em;color:var(--fg);white-space:nowrap;margin-left:-.05em;transition:color .4s ease}
.w-next:hover span{color:#3d3d3d}
.w-next i{position:absolute;right:0;bottom:.4em;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;font:400 24px/1 var(--sans);font-style:normal;color:var(--lime);background:linear-gradient(180deg,#363636,#0b0b0b);box-shadow:inset 0 1px 0 rgba(255,255,255,.28);transition:transform .5s var(--ease)}
.w-next:hover i{transform:translateX(6px)}
.w-next:focus-visible{outline:1.5px solid var(--fg);outline-offset:8px;border-radius:8px}
.w-foot-row{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-top:clamp(32px,4vw,56px);padding-top:28px;border-top:1px solid var(--rule)}
.w-note{max-width:36em;font:400 14px/1.55 var(--sans);color:var(--muted)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* responsive */
@media (max-width:900px){
  :root{--bar:76px;--edge:var(--gut);--frame:8px;--radius:20px}
  .side{display:none}
  .cols i:nth-child(odd){display:none}
  .hero{height:100svh;justify-content:flex-start;padding-top:calc(var(--bar) + min(18vh,140px));padding-bottom:max(32px,5vh)}
  .word{--base:calc((100vw - 2 * var(--gut)) / 6.2);--big:calc((100vw - var(--gut) - var(--frame) - 8px) / 5.9)}
  .nav{display:none}
  .row{position:relative;left:auto;right:auto;bottom:auto;flex-direction:column;align-items:flex-start;gap:28px;margin-top:32px}
  .desc{padding-left:0;text-align:left}
  .info{align-items:flex-start;gap:18px}
  .work-top{grid-template-columns:1fr auto;padding:0 18px;height:68px}
  .work-tabs{display:none}
  .work-in{--pad:20px}
  .w-intro{min-height:calc(100svh - 2 * var(--rim) - 68px)}
  .w-word{font-size:calc((100vw - 2 * var(--rim) - 40px) / 6.1)}
  .w-under{flex-direction:column;align-items:stretch;gap:28px}
  .w-index{width:100%}
  .w-index span{display:none}
  .w-index button{grid-template-columns:auto 1fr auto}
  .s-stage{margin-left:-8px;margin-right:-8px;padding:18px}
  .s-row,.s-story,.s-built,.s-steps{grid-template-columns:1fr}
  .s-row{gap:14px}
  .w-next i{width:52px;height:52px}
  .w-next span{font-size:calc((100vw - 2 * var(--rim) - 40px) / 7.4)}   /* the longest name still clears the arrow */
  .w-foot-row{flex-direction:column;align-items:flex-start}
  }
@media (max-width:480px){
  .btn{height:52px;padding:0 22px}
}
@media (max-width:360px){
}

/* the screen viewer (studies with views): one full-width frame, view tabs that crossfade, a Desktop / Phone
   toggle, and numbered callouts that match "What we built" */
.s-stage-v{padding:0;background:none;margin-left:0!important;margin-right:0!important}
.s-vbar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 32px;flex-wrap:wrap;margin-bottom:18px}
.s-vtabs,.s-dev{display:flex;gap:clamp(18px,2.4vw,32px)}
.s-vtabs button,.s-dev button{padding:8px 0;border:0;border-bottom:1.5px solid transparent;background:none;font:500 14px/1.2 var(--sans);color:var(--muted);cursor:pointer;white-space:nowrap;transition:color .25s ease,border-color .25s ease}
.s-vtabs small{margin-right:8px;font-size:11px;letter-spacing:.1em}
.s-vtabs button:hover,.s-dev button:hover{color:var(--fg)}
.s-vtabs [aria-pressed="true"],.s-dev [aria-pressed="true"]{color:var(--fg);border-color:var(--fg)}
.s-vtabs button:disabled{opacity:.35;cursor:default}
.s-vtabs button:focus-visible,.s-dev button:focus-visible{outline:1.5px solid var(--fg);outline-offset:4px;border-radius:2px}
.s-desk[hidden],.s-mob[hidden]{display:none}
.s-desk em b{font-weight:400;color:#8a8a8a}
.s-panes{position:relative;aspect-ratio:1200/750;container-type:inline-size}
.s-pane{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}
.s-pane.on{opacity:1;visibility:visible;transition:opacity .5s ease,visibility 0s}
.s-pane img{width:100%;height:100%}
.s-pin{--s:26px;position:absolute;z-index:1;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);border-radius:50%;background:#111;color:#fff;font:600 calc(var(--s) * .46)/var(--s) var(--sans);text-align:center;box-shadow:0 0 0 3px rgba(255,255,255,.92),0 8px 18px -6px rgba(0,0,0,.45);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.s-pin::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid #111;opacity:0;animation:s-ping 2.8s ease-out infinite}
.s-pane:not(.on) .s-pin::after{animation:none}
@keyframes s-ping{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(1.9);opacity:0}}
.s-pin.hot{transform:scale(1.22)}
.s-mob{display:flex;justify-content:center;padding:clamp(28px,4vw,64px) 0;border-radius:12px;background:#efefed}
.s-mob .s-phone{position:relative;width:min(340px,72vw)}
.s-mob .s-phone img{display:block;width:100%;height:auto;margin:0}
.s-cap{margin-top:14px;font:500 10px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.s-built li[data-n]{position:relative;padding-left:42px}
.s-num{position:absolute;left:0;top:-2px;width:26px;height:26px;border-radius:50%;background:#111;color:#fff;font:600 12px/26px var(--sans);text-align:center;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.s-built li.hot .s-num{transform:scale(1.18)}
/* callouts scale with the frame so they never cover the screen on a small display */
.s-panes .s-pin{--s:clamp(15px,2.1cqi,26px)}
.s-mob .s-phone{container-type:inline-size}
.s-mob .s-pin{--s:clamp(18px,7cqi,26px)}
.s-view.is-phone .s-vtabs{display:none}
.s-view.is-phone .s-vbar{justify-content:flex-end}
@media (max-width:700px){
  .s-vtabs{width:100%;overflow-x:auto;scrollbar-width:none}
  .s-pin::after{display:none}
}
@media (prefers-reduced-motion:reduce){.s-pane,.s-pane.on{transition:none}.s-pin::after{animation:none}}