/* the inner pages. tokens, header and footer match index.html, which keeps its
   own copy inline so the homepage stays one file */
:root{
  --void:#000000;
  --paper:#F4F2F7;
  --soft:#B9B3C6;
  --dim:#7A7290;
  --line:#1E1A28;
  --acid:#C6FF3D;
  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --t-title:23px;                            /* the wordmark */
  --t-page:clamp(2.4rem,5.4vw,4.6rem);       /* each page's headline */
  --t-display:clamp(1.6rem,8.6vw,7.6rem);    /* the address */
  --t-sub:clamp(28px,2.8vw,38px);            /* item names: work, questions, people */
  --t-lead:clamp(1.5rem,3.2vw,2.5rem);       /* the credibility line */
  --t-copy:clamp(16px,1.4vw,19px);           /* running text */
  --t-meta:12.5px;                           /* the bar, labels */
}
*{box-sizing:border-box}
html{background:var(--void);scroll-behavior:smooth}
body{
  margin:0;
  background:var(--void);
  color:var(--paper);
  font-family:var(--ui);
  font-weight:300;
  font-size:15px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
p,li,dd{text-wrap:pretty}
h1,h2,h3,dt{text-wrap:balance}
.wrap{max-width:1240px;margin:0 auto;padding-inline:34px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* a fact still owed. loud on purpose so none of them ships */
.tbd{
  color:var(--acid);
  background:rgba(198,255,61,.08);
  border-radius:4px;
  padding:0 .2em;
  font-style:normal;
}

/* ───────── header ───────── */
.site-head{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.head-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:15px 34px;
  max-width:1240px;
  margin:0 auto;
}
.brand{
  font-family:var(--display);
  font-size:var(--t-title);
  line-height:1;
  text-decoration:none;
  display:inline-block;
  position:relative;
  z-index:2;
}
.bwrap{position:relative;display:inline-block;white-space:nowrap;letter-spacing:.005em}
.bgh{position:absolute;left:0;top:0;opacity:0;mix-blend-mode:screen;transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.bgh-c{color:#00AEEF}
.bgh-m{color:#EC008C}
.bgh-y{color:#FFF200}
.bmain{position:relative;color:var(--paper)}
/* home is one click away on every inner page, so the mark answers the pointer:
   the plates slip out of register the way the address does */
.brand:hover .bgh,.brand:focus-visible .bgh{opacity:.7}
.brand:hover .bgh-c,.brand:focus-visible .bgh-c{transform:translate(-2px,-.4px)}
.brand:hover .bgh-m,.brand:focus-visible .bgh-m{transform:translate(0,2px)}
.brand:hover .bgh-y,.brand:focus-visible .bgh-y{transform:translate(2px,-.4px)}

.nav{display:flex;align-items:center;gap:26px}
.nav a,.status{
  font-family:var(--ui);
  font-size:var(--t-meta);
  font-weight:400;
  letter-spacing:.01em;
  color:var(--dim);
  text-decoration:none;
  transition:color .2s ease;
}
.nav a:hover,.nav a:focus-visible,.nav a[aria-current="page"],
.status:hover,.status:focus-visible{color:var(--paper)}
.status{display:flex;align-items:center;gap:9px;margin:0}
.statusdot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#FF8A5B;
  flex:none;
  animation:availbreathe 3.6s ease-in-out infinite;
}
@keyframes availbreathe{0%,100%{opacity:1}50%{opacity:.42}}

/* ───────── page ───────── */
.page-head{padding-block:clamp(72px,10vw,140px) clamp(40px,5vw,72px)}
h1{
  font-family:var(--display);
  font-weight:400;
  font-size:var(--t-page);
  line-height:1.04;
  letter-spacing:-.016em;
  margin:0;
  max-width:17ch;
}
.lede{
  font-size:var(--t-copy);
  line-height:1.6;
  color:var(--soft);
  max-width:46ch;
  margin:clamp(22px,2.6vw,34px) 0 0;
  /* two or three lines at most: pretty still left one word alone on the last
     line, balance evens the lines out so that can't happen */
  text-wrap:balance;
}
/* headline and lede side by side, on the same columns as the work and FAQ rows */
.page-head.split{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  column-gap:clamp(28px,6vw,96px);
  align-items:end;
}
.page-head.split .lede{margin:0;max-width:52ch}
/* six homepage orbs (orb.js), one per person, in the space above the lede */
.head-side{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.orb-team{
  --team:clamp(320px,40vw,600px);
  display:block;
  width:var(--team);
  aspect-ratio:1 / .5;
  /* the orbits in orb.js keep every glass at least .045 of the width in from
     the sides and .05 from top and bottom; pull the canvas in by that so the
     system lines up with the lede and sits a step above it */
  margin:calc(var(--team) * -.04) 0 calc(var(--team) * -.05 + clamp(18px,2.2vw,32px)) calc(var(--team) * -.045);
  pointer-events:none;
}
.section{padding-block:clamp(40px,6vw,88px)}

/* the homepage's wave rule, between sections */
.sep{display:flex;justify-content:center;color:var(--dim);opacity:.5;padding-block:clamp(30px,3.8vw,56px)}
.sep svg{display:block;overflow:hidden}
.sep g{animation:wiggleflow 9s linear infinite}
.sep-rev g{animation-direction:reverse}
@keyframes wiggleflow{to{transform:translateX(-24px)}}

/* name on the left, words on the right: the work teasers and the FAQ */
.list{margin:0;padding:0;list-style:none}
.item{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:18px clamp(28px,6vw,96px);
  align-items:baseline;
  padding-block:clamp(28px,3.4vw,44px);
  border-top:1px solid var(--line);
}
.item-name{
  font-family:var(--display);
  font-weight:400;
  font-size:var(--t-sub);
  line-height:1.1;
  letter-spacing:-.008em;
  margin:0;
}
.item-body{
  font-size:var(--t-copy);
  line-height:1.6;
  color:var(--soft);
  margin:0;
  max-width:52ch;
}

/* work: each item gets the homepage practice glyph that fits it (glyphs.js),
   above its name the way the practice rows set theirs */
.item.has-glyph{grid-template-areas:"glyph ." "name body";row-gap:16px}
.item.has-glyph .glyph{grid-area:glyph;width:96px;height:96px;display:block;align-self:start}
.item.has-glyph .item-name{grid-area:name}
.item.has-glyph .item-text{grid-area:body;max-width:52ch}
.item.has-glyph.is-on .item-name{font-style:italic}
/* the homepage blurb leads, then the work that shows it */
.item-lede{
  font-family:var(--display);
  font-size:clamp(21px,1.9vw,27px);
  line-height:1.2;
  color:var(--soft);
  margin:0;
  transition:color .28s ease;
}
.item.is-on .item-lede{color:var(--paper)}
.ex{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.ex li{font-size:var(--t-copy);line-height:1.6;color:var(--soft)}
.ex-name{display:block;font-weight:400;color:var(--paper)}

/* the homepage hero's star field (flow.js) behind the page title */
.flow-head{
  position:relative;
  overflow:hidden;
  min-height:clamp(300px,46vh,500px);
  display:flex;
  align-items:flex-end;
}
.flow-head .flow{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  /* on the homepage the orb is the light and the stars sit back; here the stars
     are the whole picture, so they burn brighter */
  filter:brightness(2.4);
  /* fades out before the list starts, so the field has no hard bottom edge */
  -webkit-mask-image:linear-gradient(#000 55%,transparent);
  mask-image:linear-gradient(#000 55%,transparent);
}
.flow-head .page-head{position:relative;width:100%;pointer-events:none}

/* ───────── about ───────── */
.cred{
  font-family:var(--display);
  font-size:var(--t-lead);
  line-height:1.16;
  letter-spacing:-.012em;
  margin:0;
  max-width:36ch;
}
.team{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:clamp(40px,5vw,72px) clamp(28px,7.8vw,100px);
}
.person{display:flex;flex-direction:column;gap:6px}
.person-name{font-family:var(--display);font-size:var(--t-sub);line-height:1.08;letter-spacing:-.008em}
.person-role{font-size:var(--t-meta);font-weight:400;letter-spacing:.01em;color:var(--dim)}
.person-line{font-size:var(--t-copy);line-height:1.6;color:var(--soft);margin-top:8px;max-width:34ch}

/* ───────── contact form ───────── */
/* the ask on the left, the form beside it; the rule and address span both */
.contact{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  column-gap:clamp(40px,7vw,120px);
  align-items:start;
}
.contact > .sep,.contact > .brandfoot{grid-column:1 / -1}
/* the block is as wide as the headline, and the lede fills that width without
   adding to it, so the small text never runs past the big */
.contact .page-head{padding-bottom:0;width:fit-content}
.contact .page-head .lede{width:0;min-width:100%;max-width:none}
.contact h1{font-size:clamp(2.4rem,4.4vw,4.2rem)}
/* bottom: the same air a .section leaves before the wave rule */
.contact-form{padding-top:clamp(80px,10.6vw,150px);padding-bottom:clamp(40px,6vw,88px)}
.form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px clamp(24px,4vw,48px);
  max-width:820px;
}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field-wide{grid-column:1 / -1}
.field label{font-size:var(--t-meta);font-weight:400;letter-spacing:.01em;color:var(--dim)}
.field input,.field select,.field textarea{
  font:inherit;
  font-size:var(--t-copy);
  font-weight:300;
  color:var(--paper);
  background:transparent;
  border:0;
  border-bottom:1px solid #2E2840;
  border-radius:0;
  padding:10px 0 12px;
  width:100%;
  transition:border-color .2s ease;
}
/* room for a real answer up front (four lines), then it grows with the text
   (site.js) instead of making anyone drag a corner */
.field textarea{resize:none;min-height:calc(4 * 1.5em + 22px);line-height:1.5;overflow:hidden}
.field input:hover,.field select:hover,.field textarea:hover{border-bottom-color:#4A4260}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--paper)}
.field input:-webkit-autofill{-webkit-text-fill-color:var(--paper);-webkit-box-shadow:0 0 0 60px var(--void) inset;caret-color:var(--paper)}
.field select{
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
  padding-right:28px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237A7290' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 4px center;
}
.field select:invalid{color:var(--dim)}
.field option{background:var(--void);color:var(--paper)}

/* custom dropdown. site.js draws it over the native select, which stays in the
   form underneath to hold the value and raise the required check */
.dd{position:relative}
.dd-native{position:absolute;left:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none}
.dd-btn{
  font:inherit;
  font-size:var(--t-copy);
  font-weight:300;
  color:var(--paper);
  background:transparent;
  border:0;
  border-bottom:1px solid #2E2840;
  border-radius:0;
  padding:10px 28px 12px 0;
  width:100%;
  text-align:left;
  cursor:pointer;
  position:relative;
  transition:border-color .2s ease;
}
.dd-btn:hover{border-bottom-color:#4A4260}
.dd-btn:focus-visible,.dd.open .dd-btn{outline:none;border-bottom-color:var(--paper)}
.dd-btn.empty{color:var(--dim)}
.dd.invalid .dd-btn{border-bottom-color:#FF2D9B}
.dd-btn::after{
  content:"";
  position:absolute;
  right:4px;
  top:50%;
  width:12px;
  height:8px;
  margin-top:-4px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237A7290' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  transition:transform .25s cubic-bezier(.2,.7,.2,1);
}
.dd.open .dd-btn::after{transform:rotate(180deg)}
.dd-list{
  position:absolute;
  z-index:20;
  left:-14px;
  right:-14px;
  top:calc(100% + 8px);
  margin:0;
  padding:6px;
  list-style:none;
  max-height:min(320px,50vh);
  overflow-y:auto;
  background:rgba(12,10,18,.94);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 22px 60px rgba(0,0,0,.65);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .18s ease,transform .22s cubic-bezier(.2,.7,.2,1),visibility 0s linear .22s;
}
.dd.open .dd-list{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.dd-list:focus{outline:none}
.dd-opt{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:11px 14px;
  border-radius:9px;
  font-size:var(--t-copy);
  color:var(--soft);
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
}
.dd-opt.active{background:#17131F;color:var(--paper)}
.dd-opt[aria-selected="true"]{color:var(--paper)}
.dd-opt[aria-selected="true"]::after{
  content:"";
  flex:none;
  width:13px;
  height:10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10'%3E%3Cpath d='M1.5 5.2l3.4 3.3L11.5 1.5' fill='none' stroke='%23F4F2F7' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}
/* a bot fills every field it sees; people never see this one */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-foot{grid-column:1 / -1;display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:6px}
/* set like the address in the footer: the word in display type, its process
   plates a touch out of register until the pointer pulls them together */
.send{
  position:relative;
  isolation:isolate;
  font-family:var(--display);
  font-size:var(--t-sub);
  font-weight:400;
  line-height:1;
  letter-spacing:-.01em;
  color:var(--paper);
  background:transparent;
  border:1px solid #2E2840;
  border-radius:999px;
  padding:.34em 1.1em;
  cursor:pointer;
  transition:border-color .3s ease,opacity .2s ease;
}
.sp{display:block;white-space:nowrap}
/* clean at rest; on hover the plates slip out of register, as the wordmark's do */
.sp-c,.sp-m,.sp-y{
  position:absolute;
  inset:.34em 1.1em;
  opacity:0;
  mix-blend-mode:screen;
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.2,1);
}
.sp-k{position:relative}
.sp-c{color:#00AEEF}
.sp-m{color:#EC008C}
.sp-y{color:#FFF200}
.send:hover,.send:focus-visible{border-color:var(--paper)}
.send:hover .sp-c,.send:hover .sp-m,.send:hover .sp-y,
.send:focus-visible .sp-c,.send:focus-visible .sp-m,.send:focus-visible .sp-y{opacity:.7}
.send:hover .sp-c,.send:focus-visible .sp-c{transform:translate(-.07em,-.015em)}
.send:hover .sp-m,.send:focus-visible .sp-m{transform:translate(0,.07em)}
.send:hover .sp-y,.send:focus-visible .sp-y{transform:translate(.07em,-.015em)}
.send:focus-visible{outline:none}
.send[disabled]{opacity:.5;cursor:default}
.send[disabled] .sp-c,.send[disabled] .sp-m,.send[disabled] .sp-y{opacity:0}
.form-note{font-size:var(--t-copy);color:var(--soft);margin:0}
.form-note:empty{display:none}
.sent .form{display:none}
.thanks{display:none;font-family:var(--display);font-size:var(--t-lead);line-height:1.16;margin:0;max-width:30ch}
.sent .thanks{display:block}

/* ───────── footer: the address ───────── */
.brandfoot{overflow:hidden;padding-block:calc(clamp(76px,10vw,132px) + 8px) calc(clamp(72px,10vw,150px) + 8px)}
.bigmail{
  display:block;
  position:relative;
  isolation:isolate;
  text-align:center;
  text-decoration:none;
  font-size:var(--t-display);
  margin-top:-.22em;
}
.fm{display:block;font-family:var(--display);line-height:1.26;white-space:nowrap;letter-spacing:-.018em}
.fm-k{position:relative;color:var(--paper);transition:color .3s ease}
.fm-c,.fm-m,.fm-y{
  position:absolute;
  left:0;
  right:0;
  top:0;
  opacity:.62;
  mix-blend-mode:screen;
  mix-blend-mode:plus-lighter;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.fm-c{color:#00AEEF;transform:translate(-.24em,-.064em)}
.fm-m{color:#EC008C;transform:translate(.036em,.11em)}
.fm-y{color:#FFF200;transform:translate(.24em,-.036em)}
.bigmail:hover .fm-c,.bigmail:focus-visible .fm-c,
.bigmail:hover .fm-m,.bigmail:focus-visible .fm-m,
.bigmail:hover .fm-y,.bigmail:focus-visible .fm-y{transform:translate(0,0)}
@media (hover:none),(max-width:620px){
  .bigmail .fm-c{transform:translate(-.42em,-.11em)}
  .bigmail .fm-m{transform:translate(.06em,.19em)}
  .bigmail .fm-y{transform:translate(.42em,-.06em)}
  .bigmail.resolved .fm-c,
  .bigmail.resolved .fm-m,
  .bigmail.resolved .fm-y{transform:translate(0,0);transition-duration:.85s;transition-delay:.45s}
}

@media (max-width:860px){
  .wrap{padding-inline:22px}
  .head-inner{padding-inline:22px}
  .item{grid-template-columns:1fr}
  .item.has-glyph{grid-template-areas:"glyph" "name" "body";row-gap:14px}
  .flow-head{min-height:clamp(240px,38vh,340px)}
  .item.has-glyph .glyph{width:72px;height:72px}
  .page-head.split{grid-template-columns:1fr}
  .page-head.split .lede{margin-top:clamp(22px,2.6vw,34px)}
  .orb-team{--team:min(100%,440px);margin-top:clamp(20px,5vw,36px)}
  .page-head.split .lede{margin-top:0}
  .brandfoot{padding-top:56px}
  .contact{grid-template-columns:1fr}
  .contact h1{font-size:var(--t-page)}
  .contact-form{padding-top:clamp(44px,8vw,64px)}
}
@media (max-width:620px){
  :root{
    --t-title:clamp(17px,5.3vw,20px);
    --t-page:clamp(36px,10.6vw,44px);
    --t-display:clamp(41px,12.3vw,49px);
    --t-sub:clamp(24px,7.47vw,32px);
    --t-lead:var(--t-sub);
    --t-copy:clamp(15.5px,4.4vw,17.5px);
  }
  .head-inner{padding-block:13px;gap:16px}
  /* the bar is the wordmark and the pages here; Contact stands in for the status line */
  .status{display:none}
  .nav{gap:16px}
  .nav a{font-size:13px}
  .form{grid-template-columns:1fr;gap:28px}
}
@media (max-width:380px){
  .nav{gap:12px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}