/* Labautomationz. Light is brightfield, dark is darkfield, and the opening of the Home page is always darkfield.
   One typeface, Instrument Sans, set narrow and tight for headlines and at full width for reading. */
@font-face{font-family:"Instrument Sans";src:url(/media/instrument-sans.woff2) format("woff2");font-weight:400 700;font-stretch:75% 100%;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --field:#f4f6f5; --surface:#fff; --surface-2:#eef2f0;
  --ink:#10211c; --ink-2:#4f615b; --pine:#0d6e5d; --pine-deep:#0a5a4c;
  --edge:rgba(16,33,28,.12); --hairline:rgba(16,33,28,.085);
  --field-edge:#7f8c87;
  --lamp:#f2b544; --lamp-top:#ffd488; --lamp-ink:#3f2a00;
  --bar:rgba(244,246,245,.74);
  --key:linear-gradient(180deg,#2c3f3a 0%,#10211c 100%); --key-ink:#fff;
  --key-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.3),0 1px 2px rgba(16,33,28,.3),0 8px 21px -8px rgba(16,33,28,.45);
  --key-pressed:inset 0 2px 4px rgba(0,0,0,.45);
  --cap:linear-gradient(180deg,#fff 0%,#f1f4f3 100%);
  --cap-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(16,33,28,.12),0 1px 2px rgba(16,33,28,.08),0 5px 13px -8px rgba(16,33,28,.22);
  --cap-pressed:inset 0 2px 3px rgba(16,33,28,.14),0 0 0 1px rgba(16,33,28,.14);
  --panel-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(16,33,28,.05),0 21px 55px -34px rgba(16,33,28,.34);
  --gutter:clamp(20px,5vw,64px); --max:1216px;
  --font:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --press:420ms cubic-bezier(.2,1.3,.4,1);
}
@supports (transition-timing-function:linear(0,1)){
  :root{--press:420ms linear(0,.081,.269,.498,.718,.899,1.029,1.106,1.14,1.14,1.119,1.088,1.055,1.026,1.004,.989,.982,.98,.981,.985,.99,.994,1)}
}
:root[data-theme=dark]{
  color-scheme:dark;
  --field:#06090a; --surface:#0f1415; --surface-2:#161c1d;
  --ink:#e9efed; --ink-2:#9db0a9; --pine:#6ed3bb; --pine-deep:#8ce2cd;
  --edge:rgba(255,255,255,.12); --hairline:rgba(255,255,255,.085);
  --field-edge:#64716d;
  --bar:rgba(6,9,10,.72);
  --key:linear-gradient(180deg,#ffd488 0%,#f2b544 100%); --key-ink:#3f2a00;
  --key-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(120,70,0,.28),0 1px 2px rgba(0,0,0,.7),0 8px 34px -13px rgba(242,181,68,.55);
  --key-pressed:inset 0 2px 4px rgba(120,70,0,.5);
  --cap:linear-gradient(180deg,#242c2d 0%,#191f20 100%);
  --cap-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(255,255,255,.09),0 1px 2px rgba(0,0,0,.7);
  --cap-pressed:inset 0 2px 3px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);
  --panel-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 34px 89px -44px #000;
}

*{box-sizing:border-box}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.26s}
::view-transition-group(bar){animation:none}
::view-transition-old(bar){display:none}
::view-transition-new(bar){animation:none}
html{background:var(--field);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--field);color:var(--ink);font-family:var(--font);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
a{color:var(--pine)}
::selection{background:rgba(242,181,68,.34)}
:focus-visible{outline:2px solid var(--lamp);outline-offset:3px;border-radius:5px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
img{display:block;max-width:100%}

h1,h2,h3{margin:0;font-weight:600;color:var(--ink)}
h1{font-size:clamp(50px,7.6vw,104px);line-height:.96;font-stretch:78%;letter-spacing:-.034em;max-width:13ch}
h2{font-size:clamp(36px,5.2vw,68px);line-height:1;font-stretch:80%;letter-spacing:-.03em;max-width:16ch}
h3{font-size:23px;line-height:1.2;font-stretch:92%;letter-spacing:-.012em}
.lede{font-size:clamp(19px,1.9vw,23px);line-height:1.42;color:var(--ink-2);max-width:40ch;margin:21px 0 34px}
.intro{color:var(--ink-2);max-width:56ch;margin:16px 0 0}

/* header: a sheet of glass over the page */
.top-bar{view-transition-name:bar;position:sticky;top:0;z-index:40;background:var(--bar);-webkit-backdrop-filter:blur(21px) saturate(170%);backdrop-filter:blur(21px) saturate(170%);box-shadow:inset 0 -1px 0 var(--hairline);transition:background-color .3s ease}
.top{display:flex;align-items:center;gap:10px 21px;min-height:60px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:20px;font-stretch:88%;letter-spacing:-.014em;text-decoration:none;color:var(--ink);margin-right:auto}
.lamp{width:11px;height:11px;border-radius:50%;background:var(--lamp);box-shadow:0 0 0 4px rgba(242,181,68,.22),0 0 13px rgba(242,181,68,.55);flex-shrink:0}
.tabs{display:flex;gap:2px}
.tabs a{color:var(--ink-2);text-decoration:none;font-size:15px;font-weight:500;padding:6px 13px;border-radius:10px;white-space:nowrap;transition:color .16s ease,background-color .16s ease}
.tabs a:hover{color:var(--ink);background:var(--hairline)}
.tabs a[aria-current=page]{color:var(--ink);font-weight:600}
.theme{all:unset;box-sizing:border-box;width:36px;height:36px;display:grid;place-items:center;border-radius:13px;cursor:pointer;color:var(--ink);background:var(--cap);box-shadow:var(--cap-shadow);transition:transform var(--press),box-shadow .18s ease}
.theme:active{transform:translateY(1px) scale(.96);box-shadow:var(--cap-pressed);transition-duration:70ms}
.theme:focus-visible{outline:2px solid var(--lamp);outline-offset:2px}
.theme svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme .sun{display:none}
:root[data-theme=dark] .theme .sun{display:block}
:root[data-theme=dark] .theme .moon{display:none}

/* While the header sits over a dark section it borrows that section's light */
.top-bar.over-dark{background:rgba(0,0,0,.42);box-shadow:inset 0 -1px 0 rgba(255,255,255,.09)}
.top-bar.over-dark .brand,.top-bar.over-dark .tabs a[aria-current=page],.top-bar.over-dark .tabs a:hover,.top-bar.over-dark .theme{color:#fff}
.top-bar.over-dark .tabs a{color:rgba(255,255,255,.72)}
.top-bar.over-dark .tabs a:hover{background:rgba(255,255,255,.1)}
.top-bar.over-dark .theme{background:linear-gradient(180deg,#242c2d,#191f20);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(255,255,255,.09)}

/* keys */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 21px;border-radius:13px;font:inherit;font-weight:600;font-size:16.5px;letter-spacing:-.005em;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:transform var(--press),box-shadow .18s ease,filter .18s ease}
.btn:active{transform:translateY(1px) scale(.98);transition-duration:70ms}
.btn-solid{background:var(--key);color:var(--key-ink);box-shadow:var(--key-shadow)}
.btn-solid:active{box-shadow:var(--key-pressed)}
.btn-ghost{background:var(--cap);color:var(--ink);box-shadow:var(--cap-shadow)}
.btn-ghost:active{box-shadow:var(--cap-pressed)}
@media (hover:hover){.btn:hover{filter:brightness(1.07)}}
.top .btn{min-height:36px;padding:0 13px;font-size:14.5px}
.ctas{display:flex;flex-wrap:wrap;gap:13px}

/* On darkfield the main key is the lamp, whatever the theme */
.darkfield{--ink:#f1f5f3;--ink-2:#aebdb7;--pine:#8ce2cd;--edge:rgba(255,255,255,.13);--hairline:rgba(255,255,255,.09);
  --key:linear-gradient(180deg,#ffd488 0%,#f2b544 100%);--key-ink:#3f2a00;
  --key-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(120,70,0,.28),0 1px 2px rgba(0,0,0,.7),0 8px 34px -13px rgba(242,181,68,.55);
  --key-pressed:inset 0 2px 4px rgba(120,70,0,.5);
  --cap:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.06) 100%);
  --cap-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px rgba(255,255,255,.13);
  --cap-pressed:inset 0 2px 3px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.12);
  background:#000;color:var(--ink)}

/* Light theme: the opening is brightfield, the way a stained slide looks under an ordinary microscope:
   the field is light, the specimen keeps its stain, and the switchboard is frosted glass. Dark theme keeps darkfield. */
:root:not([data-theme=dark]) .opening{--ink:#10211c;--ink-2:#4f615b;--pine:#0d6e5d;--edge:rgba(16,33,28,.12);--hairline:rgba(16,33,28,.085);
  --cap:linear-gradient(180deg,#fff 0%,#f1f4f3 100%);
  --cap-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(16,33,28,.12),0 1px 2px rgba(16,33,28,.08),0 5px 13px -8px rgba(16,33,28,.22);
  --cap-pressed:inset 0 2px 3px rgba(16,33,28,.14),0 0 0 1px rgba(16,33,28,.14);
  background:var(--field);color:var(--ink)}
:root:not([data-theme=dark]) .opening .veil{background:var(--field)}
:root:not([data-theme=dark]) .opening .lens{box-shadow:inset 0 0 0 1px rgba(16,33,28,.18),inset 0 0 55px 8px rgba(16,33,28,.28),0 34px 89px -21px rgba(16,33,28,.35)}
:root:not([data-theme=dark]) .board{background:rgba(255,255,255,.88);color:var(--ink);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(16,33,28,.1),0 55px 144px -34px rgba(16,33,28,.45)}
:root:not([data-theme=dark]) .board-tabs{background:rgba(16,33,28,.06)}
:root:not([data-theme=dark]) .board-tabs button{color:#4f615b}
:root:not([data-theme=dark]) .board-tabs button:focus-visible{outline-color:var(--ink)}
:root:not([data-theme=dark]) .board-head,:root:not([data-theme=dark]) .example,:root:not([data-theme=dark]) .run small{color:#4f615b}
:root:not([data-theme=dark]) .run li{background:rgba(16,33,28,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);color:var(--ink)}
:root:not([data-theme=dark]) .run li.final{color:var(--lamp-ink)}
:root:not([data-theme=dark]) .run .ic{background:#0d6e5d;color:#fff}

/* The opening. The lens is one memorable thing; everything around it stays still. Without JavaScript, or with
   reduced motion, this is simply a dark section: the copy, the lens, then the examples. */
.opening{position:relative;overflow:clip}
.stage{--cx:77%;--cy:53%;--r:min(39vh,27vw);position:relative;min-height:calc(100svh - 60px);display:flex;flex-direction:column;overflow:hidden}
.specimen{position:absolute;inset:0;clip-path:circle(var(--r) at var(--cx) var(--cy));will-change:clip-path}
.specimen img{position:absolute;inset:-4%;width:108%;height:108%;max-width:none;object-fit:cover;transform:translate3d(var(--px,0),var(--py,0),0) scale(var(--zoom,1))}
.veil{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
.lens{position:absolute;left:var(--cx);top:var(--cy);width:calc(var(--r)*2);height:calc(var(--r)*2);transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 0 89px 21px rgba(0,0,0,.62),0 0 233px 34px rgba(201,58,109,.2)}
/* The focus ring of a microscope: fine knurling, and a metal band that catches the light */
.lens::before,.lens::after{content:"";position:absolute;inset:-21px;border-radius:50%;-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 15px),#000 calc(100% - 14px));mask:radial-gradient(closest-side,transparent calc(100% - 15px),#000 calc(100% - 14px))}
.lens::before{background:repeating-conic-gradient(#14181a 0 .9deg,#3a4145 .9deg 1.8deg);transform:rotate(var(--turn,0deg))}
.lens::after{background:conic-gradient(from 205deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 10%,rgba(255,255,255,0) 24%,rgba(255,255,255,.16) 52%,rgba(255,255,255,0) 66%,rgba(255,255,255,.3) 84%,rgba(255,255,255,0) 100%);mix-blend-mode:screen}

.opening-copy{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;width:100%;padding-block:34px 55px}
.opening-copy .lede{max-width:34ch}
.opening-copy>*{max-width:min(44vw,600px)}
.opening-copy h1{font-size:clamp(46px,6.5vw,96px)}
.based{margin:21px 0 0;font-size:15.5px;color:var(--ink-2)}
.opening-board{position:relative;z-index:3;width:min(640px,calc(100% - var(--gutter)*2));margin:0 auto 55px}

/* Pinned: the page holds still while scrolling turns the focus and the lens opens up to fill the screen */
.pin .opening{height:var(--track,320svh)}
.pin .stage{position:sticky;top:0;height:100svh;min-height:0}
.pin .opening-copy{padding-top:89px}
.pin .opening-board{position:absolute;left:50%;top:calc(50% + 28px);margin:0;transform:translate(-50%,-50%) translateY(var(--rise,34px)) scale(var(--grow,.97));opacity:var(--show,0);filter:blur(var(--soft,0));pointer-events:none}
.pin .opening-board.live{pointer-events:auto}
.pin .top-bar{margin-bottom:calc(-1*var(--bar-h,60px))}

/* Everything comes into focus once, together */
.focus .specimen img{animation:rack 1.7s cubic-bezier(.16,1,.3,1) both}
.focus .lens{animation:appear 1.1s ease both}
.focus .opening-copy h1,.focus .opening-copy .lede,.focus .opening-copy .ctas,.focus .opening-copy .based{animation:settle 1.15s cubic-bezier(.16,1,.3,1) both}
.focus .opening-copy .lede{animation-delay:.1s}
.focus .opening-copy .ctas{animation-delay:.18s}
.focus .opening-copy .based{animation-delay:.26s}
@keyframes rack{from{filter:blur(26px) saturate(.7) brightness(.8)}to{filter:none}}
@keyframes appear{from{opacity:0}to{opacity:1}}
@keyframes settle{from{opacity:0;filter:blur(9px)}to{opacity:1;filter:none}}

/* The switchboard: slide glass laid over the specimen */
.board{background:rgba(8,12,13,.84);-webkit-backdrop-filter:blur(34px) saturate(140%);backdrop-filter:blur(34px) saturate(140%);color:#e9efed;border-radius:21px;padding:8px 8px 13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 1px rgba(255,255,255,.1),0 55px 144px -34px #000}
.board-tabs{display:flex;gap:2px;background:rgba(255,255,255,.07);border-radius:13px;padding:3px;-webkit-tap-highlight-color:transparent}
.board-tabs button{all:unset;box-sizing:border-box;cursor:pointer;text-align:center;padding:8px 8px;border-radius:10px;font-size:15px;font-weight:500;color:#b4c4be;flex:1 1 auto;transition:transform var(--press),color .16s ease,background-color .16s ease}
.board-tabs button:active{transform:scale(.97);transition-duration:70ms}
.board-tabs button[aria-selected=true]{background:linear-gradient(180deg,#ffd488,#f2b544);color:var(--lamp-ink);font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 2px rgba(0,0,0,.5)}
.board-tabs button:focus-visible{outline:2px solid #fff;outline-offset:1px}
.board-head{padding:13px 13px 0;font-size:15px;color:#b4c4be;min-height:36px}
.run{list-style:none;margin:10px 0 0;padding:0 8px;display:flex;flex-direction:column;gap:8px;min-height:290px}
.run li{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;padding:10px 13px;border-radius:13px;background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);font-size:16px;line-height:1.36;color:#e9efed}
.run .ic{width:20px;height:20px;border-radius:50%;background:#8ce2cd;display:grid;place-items:center;font-size:12px;color:#06231c;margin-top:1px}
.run small{display:block;color:#b4c4be;font-size:14px;margin-top:1px}
.run li.final{background:linear-gradient(180deg,#ffd488,#f2b544);color:var(--lamp-ink);font-weight:600;grid-template-columns:1fr}
.run li.wait{opacity:0;filter:blur(5px)}
.run li.in{transition:opacity .4s ease,filter .4s ease}
.example{margin:10px 13px 0;font-size:13.5px;color:#b4c4be}

/* page rhythm */
.page-head{padding-block:clamp(55px,9vw,123px) clamp(34px,5vw,64px)}
.page-head .lede{margin-bottom:0}
.page-head .ctas{margin-top:34px}
.sec{padding-block:clamp(64px,9vw,123px)}
.band{background:var(--surface)}

/* video, in a machined frame */
.intro-video{display:grid;grid-template-columns:1fr minmax(0,330px);gap:clamp(34px,6vw,89px);align-items:center}
.intro-video .frame{border-radius:34px;padding:8px;background:linear-gradient(135deg,#3a4145 0%,#101416 34%,#101416 66%,#3a4145 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 55px 89px -55px rgba(16,33,28,.65)}
.intro-video video{display:block;width:100%;height:auto;aspect-ratio:9/16;background:#040b1e;border-radius:26px}

/* the offer list */
.offers{margin:55px 0 0;padding:0;list-style:none;border-top:1px solid var(--edge)}
.offers li{border-bottom:1px solid var(--edge)}
.offers a{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.5fr) auto;gap:8px 34px;align-items:baseline;padding:28px 0;text-decoration:none;color:var(--ink)}
.offers .name{font-weight:600;font-size:clamp(34px,4.4vw,55px);font-stretch:78%;letter-spacing:-.028em;line-height:1;transition:font-stretch .5s cubic-bezier(.16,1,.3,1),color .2s ease}
.offers .kind{display:block;font-weight:400;font-size:15.5px;font-stretch:100%;letter-spacing:0;color:var(--ink-2);margin-top:8px}
.offers .what{color:var(--ink-2);max-width:46ch}
.offers .go{font-weight:600;font-size:16px;color:var(--pine);white-space:nowrap}
@media (hover:hover){.offers a:hover .name{font-stretch:100%}}

/* products */
.jump{position:sticky;top:var(--bar-h,60px);z-index:5;background:var(--bar);-webkit-backdrop-filter:blur(21px) saturate(170%);backdrop-filter:blur(21px) saturate(170%);box-shadow:inset 0 -1px 0 var(--hairline)}
.jump div{display:flex;gap:2px;padding-block:6px;overflow-x:auto}
.jump a{padding:5px 13px;border-radius:10px;text-decoration:none;color:var(--ink-2);font-weight:500;font-size:15px;white-space:nowrap}
.jump a:hover{color:var(--ink);background:var(--hairline)}
.product{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,89px);align-items:center;scroll-margin-top:123px}
.product.flip .copy{order:2}
.copy p{margin:13px 0 0;color:var(--ink-2);max-width:48ch}
.copy .kind{color:var(--pine);font-weight:600;font-size:16.5px;margin:0 0 13px}
.copy ul{margin:21px 0 28px;padding:0;list-style:none;color:var(--ink-2)}
.copy li{padding:8px 0;border-top:1px solid var(--hairline)}
.copy li:last-child{border-bottom:1px solid var(--hairline)}

/* A screen is a sheet of dark glass. It tips up into place as it scrolls in. */
.screen{--ink:#e9efed;background:linear-gradient(180deg,#141a1c 0%,#0c1011 100%);color:#e9efed;border-radius:21px;padding:21px;font-size:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 0 0 1px rgba(0,0,0,.5),0 55px 89px -55px rgba(16,33,28,.8);min-width:0}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .tilt{perspective:1400px}
    .tilt .screen{transform-origin:50% 100%;animation:tip linear both;animation-timeline:view();animation-range:entry 0% cover 42%}
    @keyframes tip{from{transform:rotateX(14deg) scale(.95)}to{transform:none}}
  }
}
.screen .bar{display:flex;justify-content:space-between;gap:13px;color:#9db0a9;font-size:14px;padding-bottom:13px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:13px}
.say{margin:0 0 8px;padding:10px 13px;border-radius:13px;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);max-width:85%;line-height:1.4;color:#e9efed}
.say.me{margin-left:auto;background:#8ce2cd;color:#06231c;box-shadow:none}
.rows{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.rows th{text-align:left;color:#9db0a9;font-weight:500;padding:0 8px 8px 0}
.rows td{padding:10px 8px 10px 0;border-top:1px solid rgba(255,255,255,.1);vertical-align:top;color:#e9efed}
.rows td:last-child,.rows th:last-child{text-align:right;padding-right:0;white-space:nowrap}
.tag{display:inline-block;font-size:13px;background:rgba(255,255,255,.12);padding:1px 8px;border-radius:8px;margin-top:3px}
.tag.warn{background:linear-gradient(180deg,#ffd488,#f2b544);color:var(--lamp-ink);font-weight:600}
.screen-note{margin:13px 0 0;font-size:14px;color:var(--ink-2)}

/* tailored */
.services{display:grid;grid-template-columns:repeat(3,1fr);margin-top:55px;border-top:1px solid var(--edge)}
.svc{padding:28px 28px 34px 0;border-bottom:1px solid var(--edge)}
.svc:not(:nth-child(3n)){border-right:1px solid var(--edge)}
.svc:not(:nth-child(3n+1)){padding-left:28px}
.svc h3{margin-bottom:8px}
.svc p{margin:0;color:var(--ink-2);font-size:17px}
.steps{list-style:none;margin:55px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:34px;counter-reset:s}
.steps li{counter-increment:s;border-top:1px solid var(--edge);padding-top:21px}
.steps li::before{content:counter(s);font-weight:600;font-stretch:78%;font-size:55px;line-height:1;letter-spacing:-.03em;display:block;margin-bottom:21px;color:var(--pine);font-variant-numeric:tabular-nums}
.steps h3{font-size:21px;margin-bottom:5px}
.steps p{margin:0;font-size:16.5px;color:var(--ink-2)}
.who{display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 0;padding:0;list-style:none}
.who li{background:var(--cap);box-shadow:var(--cap-shadow);border-radius:13px;padding:8px 13px;font-size:16.5px}

/* pricing */
.prices{margin:55px 0 0;padding:0;list-style:none;border-top:1px solid var(--edge)}
.prices li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:13px 55px;padding:28px 0;border-bottom:1px solid var(--edge);align-items:start}
.prices h3{font-size:clamp(25px,3vw,34px);font-stretch:82%;letter-spacing:-.022em}
.prices p{margin:8px 0 0;color:var(--ink-2);max-width:44ch}
.cost strong{display:block;font-size:clamp(25px,3vw,34px);font-weight:600;font-stretch:82%;line-height:1.12;letter-spacing:-.022em;font-variant-numeric:tabular-nums}
.cost span{display:block;color:var(--ink-2);font-size:16.5px;margin-top:5px}
.cost a{display:inline-block;margin-top:8px;font-weight:600}

/* about and the belief lists */
.story{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(34px,6vw,89px);align-items:start}
.story-text p{margin:0 0 21px;font-size:21px;line-height:1.45;max-width:52ch}
.story-text .intro{font-size:inherit;color:var(--ink-2)}
.beliefs{margin:0;padding:0;list-style:none;border-top:1px solid var(--edge)}
.beliefs li{padding:21px 0;border-bottom:1px solid var(--edge)}
.beliefs strong{display:block;font-size:20px;font-weight:600;letter-spacing:-.012em}
.beliefs span{color:var(--ink-2);font-size:16.5px}

/* The close of each page returns to darkfield */
.closer-sec{position:relative;overflow:hidden;padding-block:clamp(89px,12vw,178px)}
.closer-sec::after{content:"";position:absolute;right:calc(-1*min(34vw,377px));top:50%;width:min(68vw,754px);aspect-ratio:1;border-radius:50%;transform:translateY(-50%);background:url(/media/stain-field-1200.webp) center/170%;box-shadow:inset 0 0 89px 21px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.14),0 0 233px 34px rgba(201,58,109,.18);opacity:.92}
.closer{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:34px}
.closer p{margin:13px 0 0;color:var(--ink-2);max-width:40ch;font-size:clamp(19px,1.9vw,23px);line-height:1.42}
.closer h2{max-width:13ch}

/* contact */
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(34px,6vw,89px);align-items:start;padding-bottom:clamp(64px,9vw,123px)}
.contact h1{font-size:clamp(46px,6vw,80px);max-width:11ch}
.contact .note{color:var(--ink-2);max-width:40ch;margin:21px 0 0}
.contact .note strong{color:var(--ink);font-weight:600}
form{background:var(--surface);border-radius:21px;padding:clamp(21px,3vw,34px);display:grid;grid-template-columns:1fr 1fr;gap:21px 13px;box-shadow:var(--panel-shadow),0 0 0 1px var(--hairline)}
label{display:flex;flex-direction:column;gap:5px;font-size:15px;font-weight:600;min-width:0}
label.full{grid-column:1/-1}
input,textarea,select{font:inherit;font-size:17px;font-weight:400;color:var(--ink);background:var(--field);border:1px solid var(--field-edge);border-radius:13px;padding:10px 13px;width:100%;box-shadow:inset 0 1px 2px rgba(16,33,28,.05);transition:border-color .16s ease,box-shadow .16s ease}
textarea{min-height:110px;resize:vertical}
::placeholder{color:var(--ink-2);opacity:1}
select{appearance:none;-webkit-appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%234f615b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center}
:root[data-theme=dark] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%239db0a9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5'/%3E%3C/svg%3E")}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--pine);box-shadow:0 0 0 3px color-mix(in srgb,var(--pine) 18%,transparent)}
form .btn{grid-column:1/-1;justify-self:start}
.form-msg{grid-column:1/-1;margin:0;font-size:15.5px;color:var(--pine);font-weight:600;min-height:1.4em}
.form-msg.bad{color:#b4380f}
:root[data-theme=dark] .form-msg.bad{color:#fdb07c}
.form-fine{grid-column:1/-1;margin:0;font-size:14px;color:var(--ink-2)}

footer{background:#000;color:#aebdb7;padding:21px 0 34px;font-size:15px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.foot-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:13px 21px}
.foot-links{display:flex;flex-wrap:wrap;gap:0 21px}
.foot-links a{display:inline-block;padding:8px 0}
footer a{color:#cdd8d4}

@media (max-width:960px){
  .product,.story,.contact,.intro-video{grid-template-columns:1fr}
  .intro-video .frame{max-width:330px;margin-inline:auto;width:100%}
  .product.flip .copy{order:0}
  .services{grid-template-columns:1fr 1fr}
  .svc,.svc:not(:nth-child(3n+1)){padding:21px 21px 26px 0;border-right:none}
  .svc:not(:nth-child(3n)){border-right:none}
  .svc:nth-child(odd){border-right:1px solid var(--edge)}
  .svc:nth-child(even){padding-left:21px}
  .steps{grid-template-columns:1fr 1fr}
  .offers a{grid-template-columns:1fr}
  .prices li{grid-template-columns:1fr}
}
@media (max-width:820px){
  /* The lens rises from the bottom of the screen, under the copy */
  .stage{--cx:60%;--cy:calc(100% + 13vh);--r:max(66vw,36vh)}
  .opening-copy{justify-content:flex-start;padding-block:21px 25vh}
  .opening-copy>*{max-width:100%}
  .opening-copy .lede{margin-block:13px 21px}
  .opening-copy .based{margin-top:13px;font-size:14.5px}
  .opening-copy .btn{padding-inline:13px;font-size:15.5px;min-height:44px}
  .opening-copy .ctas{gap:8px}
  .pin .opening-copy{padding-top:calc(var(--bar-h,97px) + 21px)}
}
@media (max-width:760px){
  .top{padding-block:8px;gap:5px 8px}
  .tabs{order:3;width:100%;justify-content:space-between;overflow-x:auto;scrollbar-width:none}
  .tabs a{font-size:13.5px;padding:5px 3px}
  :root{--bar-h:97px}
}
@media (max-width:640px){
  body{font-size:17px}
  .services{grid-template-columns:1fr}
  .svc,.svc:nth-child(odd),.svc:nth-child(even){padding:21px 0;border-right:none}
  .steps{grid-template-columns:1fr}
  form{grid-template-columns:1fr}
  .brand{font-size:19px}
  .run{min-height:300px}
  .board-tabs button{font-size:13.5px;padding:8px 4px}
  .story-text p{font-size:19px}
  .closer-sec::after{opacity:.5}
}
@media (max-width:350px){
  .top .btn{display:none}
  .tabs a{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  *,::before,::after{animation:none!important;transition-duration:1ms!important}
  .run li.wait{opacity:1;filter:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}