/* CBA Architects: one stylesheet for every page. The pages are written by tools/build-site.mjs. */
@font-face{font-family:"NCL Gastrub";src:url("../fonts/NCLGastrub-Regular.woff2") format("woff2");font-weight:300 400;font-display:swap}
@font-face{font-family:"Ladinta";src:url("../fonts/Ladinta-Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Ladinta";src:url("../fonts/Ladinta-LightItalic.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-Variable.woff2") format("woff2");font-weight:300 600;font-display:swap}
@font-face{font-family:"Bebas Neue";src:url("../fonts/BebasNeue-Regular.woff2") format("woff2");font-weight:400;font-display:swap}

/* the brand: deep teal ground, cream type, coral only for the dot */
:root{
  --ink:#074349;
  --ink-deep:#053a3f;
  --cream:#EFEEE8;
  --coral:#ED8879;
  --coral-text:#EE8E7F;
  --fg:var(--cream);
  --fg-2:rgb(239 238 232 / .74);
  --fg-3:rgb(239 238 232 / .52);
  --line:rgb(239 238 232 / .16);
  --wash:rgb(239 238 232 / .06);
  /* three faces, by size: NCL Gastrub only big (page titles, section headings, the opening, the big numbers); Ladinta
     for the middle sizes; Inter for small names and everything read */
  --display:"NCL Gastrub","Ladinta",Georgia,serif;
  --serif:"Ladinta",Georgia,serif;
  --italic:"Ladinta",Georgia,serif;
  --label:"Bebas Neue","Arial Narrow",Impact,sans-serif;
  --ui:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:max(clamp(20px,4.4vw,64px),env(safe-area-inset-left,0px));
  --max:1480px;
  --hd:56px;
  --r:28px;
  --ease:cubic-bezier(.16,1,.3,1);
  --dot:url("../brand/dot-mask.svg");
  color-scheme:dark;
}
/* a section on cream: the same parts, in ink */
.cream{--fg:var(--ink);--fg-2:rgb(7 67 73 / .76);--fg-3:rgb(7 67 73 / .56);--line:rgb(7 67 73 / .16);--wash:rgb(7 67 73 / .06);
  background:var(--cream);color:var(--ink);color-scheme:light}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hd) + 24px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--ink);color:var(--fg);font:300 17px/1.65 var(--ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
/* no grey flash over what a finger taps; anything pressed gives a little under the finger instead */
html{-webkit-tap-highlight-color:transparent}
.btn:active,.tab:active,.menu-btn:active,.tabbar a:active,.views button:active,.lb button:active{scale:.97}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
::selection{background:var(--coral);color:var(--ink)}
[hidden]{display:none!important}
.nw{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:12px;top:-80px;z-index:100;padding:10px 16px;border-radius:16px;background:var(--cream);color:var(--ink);font:400 14px/1 var(--ui)}
.skip:focus{top:12px}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}

/* type */
.eyebrow{display:flex;align-items:center;gap:12px;font:400 14px/1 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-2)}
.d1,.d2,.d3{text-wrap:balance}
.d1{font:400 clamp(52px,8.2vw,132px)/.92 var(--display);letter-spacing:-.028em}
.d2{font:400 clamp(44px,6.2vw,100px)/.95 var(--display);letter-spacing:-.025em}
.d3{font:300 clamp(30px,3.3vw,50px)/1.08 var(--serif);letter-spacing:-.012em}
.d4{font:500 clamp(18px,1.35vw,21px)/1.3 var(--ui);letter-spacing:-.012em}
.lead{font-size:clamp(18px,1.45vw,22px);line-height:1.5;color:var(--fg-2)}
.body p{color:var(--fg-2)}
.body p+p{margin-top:1em}
em.i{font:300 italic 1.04em/1 var(--italic);letter-spacing:0}

/* the brand's dot, drawn from its own outline: as a mark beside a word, and as a frame for a picture */
.dot{display:inline-block;flex:none;width:9px;aspect-ratio:1.1437;background:var(--coral);-webkit-mask:var(--dot) center/contain no-repeat;mask:var(--dot) center/contain no-repeat}

/* links */
.more{display:inline-flex;align-items:center;gap:10px;padding-bottom:7px;font:400 15px/1 var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--fg);
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat,linear-gradient(var(--line),var(--line)) 0 100%/100% 1px no-repeat;transition:background-size .8s var(--ease)}
.more::after{content:"";width:14px;height:9px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M0 4.5h12.5M9 1l3.5 3.5L9 8' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M0 4.5h12.5M9 1l3.5 3.5L9 8' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .7s var(--ease)}
@media (hover:hover) and (pointer:fine){.more:hover{background-size:100% 1px,100% 1px}}
@media (hover:hover) and (pointer:fine){.more:hover::after{transform:translateX(4px)}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border:1px solid var(--line);border-radius:999px;font:400 15px/1 var(--label);letter-spacing:.16em;text-transform:uppercase;
  background:linear-gradient(var(--fg),var(--fg)) 50% 100%/100% 0 no-repeat;transition:background-size .7s var(--ease),color .55s var(--ease),border-color .55s,scale .16s var(--ease)}
@media (hover:hover) and (pointer:fine){.btn:hover{background-size:100% 100%;color:var(--ink);border-color:var(--fg)}}
@media (hover:hover) and (pointer:fine){.cream .btn:hover{color:var(--cream)}}

/* a picture: cropped to its box, ground showing while it loads, a slow push on hover */
.ph{position:relative;overflow:hidden;border-radius:var(--r);background:var(--wash);isolation:isolate}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
a:focus-visible .ph img{transform:scale(1.035)}
@media (hover:hover) and (pointer:fine){a:hover .ph img{transform:scale(1.035)}}

/* things come into view whole, once */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1.2s var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
.js [data-reveal].in{opacity:1;transform:none}

/* header */
.hd{--hd-fg:var(--cream);position:fixed;inset:0 0 auto;z-index:50;height:calc(var(--hd) + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);color:var(--hd-fg);transition:box-shadow .45s}
/* a quiet glass: the page shows through, blurred, with only a little tint; over the cream sections (site.js marks them)
   it turns light and its words dark */
.hd::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;background:rgb(7 67 73 / .34);-webkit-backdrop-filter:saturate(140%) blur(18px);backdrop-filter:saturate(140%) blur(18px);transition:opacity .45s,background-color .45s}
.hd.solid::before{opacity:1}
.hd.solid{box-shadow:0 1px 0 rgb(239 238 232 / .1)}
.hd.light{--hd-fg:var(--ink)}
.hd.light::before{background:rgb(239 238 232 / .5)}
.hd.light.solid{box-shadow:0 1px 0 rgb(7 67 73 / .08)}
.menu-open .hd{--hd-fg:var(--cream)}
.hd-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:100%}
.lock{position:relative;display:block;aspect-ratio:744/292.11;color:var(--cream)}
.lock>*{position:absolute;display:block;max-width:none}
/* the wordmark takes the colour of its words, so the header can turn it dark */
.lock .wm{inset:0;width:100%;height:100%;background:currentColor;-webkit-mask:url(/assets/brand/wordmark-cream.svg) center/contain no-repeat;mask:url(/assets/brand/wordmark-cream.svg) center/contain no-repeat;transition:background-color .45s}
.lock .boil{left:79.351%;top:37.366%;width:20.688%;height:46.071%}
.hd .lock{width:clamp(78px,6.2vw,92px);color:var(--hd-fg)}
.nav{display:flex;gap:clamp(22px,2.6vw,40px)}
.nav a{position:relative;display:block;padding:8px 0;font:400 17px/1 var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--hd-fg);perspective:200px;transition:color .3s,opacity .3s}
@media (hover:hover) and (pointer:fine){.nav:hover a:not(:hover){opacity:.6}}
/* on hover the word tips back and away, and its copy rolls up from below into its place */
.nav a span{display:block;transform-origin:50% 100%;transition:transform .35s var(--ease),opacity .35s var(--ease)}
.nav a span+span{position:absolute;inset:8px 0 auto;transform-origin:50% 0;transform:translateY(70%) rotateX(-90deg);opacity:0}
@media (hover:hover) and (pointer:fine){.nav a:hover span:first-child{transform:translateY(-70%) rotateX(90deg);opacity:0}}
@media (hover:hover) and (pointer:fine){.nav a:hover span+span{transform:none;opacity:1}}
.menu-btn{display:inline-flex;align-items:center;gap:12px;height:44px;font:400 16px/1 var(--label);letter-spacing:.16em;color:var(--hd-fg);transition:color .3s,scale .16s var(--ease)}
.menu-btn i{position:relative;display:block;width:22px;height:8px}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .3s var(--ease)}
.menu-btn i::before{top:0}.menu-btn i::after{bottom:0}
@media (hover:hover) and (pointer:fine){.menu-btn:hover i::after{transform:scaleX(.6);transform-origin:right}}
.menu-open .menu-btn i::before{transform:translateY(3.25px) rotate(45deg)}
.menu-open .menu-btn i::after{transform:translateY(-3.25px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;justify-content:space-between;gap:40px;
  padding:calc(var(--hd) + env(safe-area-inset-top,0px) + 28px) var(--pad) calc(env(safe-area-inset-bottom,0px) + 32px);
  background:var(--ink);opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s}
.menu-open .menu{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}
.menu-open .hd::before{opacity:0}
.menu nav a{display:flex;align-items:center;gap:14px;padding:9px 0;font:400 clamp(20px,5.4vw,26px)/1 var(--label);letter-spacing:.12em;text-transform:uppercase}
.menu nav a .dot{width:14px;opacity:0}
.menu nav a[aria-current] .dot{opacity:1}
.menu-foot{display:grid;gap:6px;color:var(--fg-2)}
.menu-foot a{color:var(--cream)}
html.menu-open,html.menu-open body{overflow:hidden}
/* phones: the wordmark at the left above, and the way around in a pill floating at the foot of the screen, in reach
   of a thumb: three pages and the menu for the rest */
.tabbar{display:none}
@media (max-width:820px){
  .hd .nav{display:none}
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .tabbar{position:fixed;inset:auto 12px calc(12px + env(safe-area-inset-bottom,0px));z-index:55;display:flex;align-items:stretch;height:58px;padding:0 6px;border-radius:999px;background:rgb(7 67 73 / .82);-webkit-backdrop-filter:saturate(140%) blur(18px);backdrop-filter:saturate(140%) blur(18px);box-shadow:0 10px 30px rgb(0 0 0 / .25),inset 0 0 0 1px rgb(239 238 232 / .12)}
  .tabbar a,.tabbar .menu-btn{flex:1;display:flex;align-items:center;justify-content:center;height:auto;font:400 15px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--cream);opacity:.62;transition:opacity .3s,scale .16s var(--ease)}
  .tabbar [aria-current],.tabbar .menu-btn,.tabbar a:active{opacity:1}
  .tabbar .menu-btn{flex:.8}
  /* the menu's pages at the foot too, just above the pill and to the right, under the thumb; the ways to get in touch up top */
  .menu{flex-direction:column-reverse;padding-bottom:calc(84px + env(safe-area-inset-bottom,0px) + 20px)}
  .menu nav a{flex-direction:row-reverse;justify-content:flex-start}
  .menu nav a .dot{display:none}
  .menu-foot{justify-items:end;text-align:right}
}

/* page heads */
.pg-hd{padding-top:calc(var(--hd) + clamp(56px,10vw,140px));padding-bottom:clamp(48px,6vw,88px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,640px);gap:28px 64px;align-items:start}
/* (a page's title, a size down from the home page's, so a long one fits its column beside the lead) */
.pg-hd .d1{font-size:clamp(48px,6vw,100px)}
.pg-hd .eyebrow{grid-column:1/-1}
.pg-hd .lead{padding-bottom:.4em}
@media (max-width:1100px){.pg-hd{grid-template-columns:1fr}}
/* (the smallest phones: a long word in a title, which doesn't break, still fits the width) */
@media (max-width:400px){.pg-hd .d1{font-size:clamp(34px,11.4vw,48px)}}
.crumbs{display:flex;flex-wrap:wrap;gap:10px;font:400 14px/1 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.crumbs a{color:var(--fg-2);transition:color .3s}
.crumbs a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:color .3s,background-size .6s var(--ease)}
@media (hover:hover) and (pointer:fine){.crumbs a:hover{color:var(--fg);background-size:100% 1px}}

/* ---------- home ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:640px;max-height:1200px;overflow:hidden;background:var(--ink-deep);color:var(--cream)}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1.2s var(--ease),transform 7s var(--ease)}
/* the picture being left stays whole underneath while the next one comes in over it */
.js .hero:not(.ready) .hero-media img{opacity:0;transform:scale(1.05)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgb(5 52 57 / .45) 0,rgb(5 52 57 / 0) 22%),linear-gradient(0deg,rgb(5 52 57 / .62) 0,rgb(5 52 57 / .3) 30%,rgb(5 52 57 / 0) 56%)}
.hero-in{position:absolute;inset:auto 0 0;z-index:2;padding-bottom:calc(env(safe-area-inset-bottom,0px) + clamp(28px,5vh,56px))}
.js .hero-in{animation:rise 1.4s var(--ease) .15s both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
.hero-title{max-width:7em;text-shadow:0 2px 30px rgb(5 52 57 / .35);font:400 clamp(46px,7.6vw,124px)/.95 var(--display);letter-spacing:-.03em}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 40px;margin-top:clamp(26px,4.5vh,48px);padding-top:22px;border-top:1px solid rgb(239 238 232 / .22)}
.hero-cap{display:grid;margin-left:auto;text-align:right;font:400 14px/1.3 var(--label);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.hero-cap a{display:inline-flex;justify-content:flex-end;gap:10px;padding-bottom:4px;background:linear-gradient(currentColor,currentColor) 100% 100%/0 1px no-repeat;transition:background-size .6s var(--ease)}
@media (hover:hover) and (pointer:fine){.hero-cap a:hover{background-size:100% 1px}}
.hero-cap span{color:rgb(239 238 232 / .66)}
@media (max-width:700px){
  .hero{min-height:560px}
  .hero::after{background:linear-gradient(180deg,rgb(5 52 57 / .45) 0,rgb(5 52 57 / 0) 18%),linear-gradient(0deg,rgb(5 52 57 / .72) 0,rgb(5 52 57 / .45) 34%,rgb(5 52 57 / 0) 62%)}
  .hero-foot{flex-direction:column;align-items:flex-start}
  .hero-cap{margin-left:0;text-align:left}.hero-cap a{justify-content:flex-start}
}

/* what the firm is, in a heading and a few lines */
.facts-sec{padding-block:clamp(88px,12vw,180px)}
/* the words, and beside them a picture standing a little taller than wide */
.facts-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.75fr);gap:clamp(28px,6vw,112px);align-items:center}
.facts-lead{font:300 clamp(40px,4.2vw,68px)/1.05 var(--serif);letter-spacing:-.014em}
.facts-sec .lead{margin-top:clamp(20px,2.4vw,32px);font-size:clamp(16px,1.2vw,18px)}
.facts-pic{aspect-ratio:6/5}
@media (max-width:900px){.facts-grid{grid-template-columns:1fr}}

/* a market: its name, its words, and three pictures with their names right under them */
.mk{padding-top:clamp(96px,12vw,180px)}
/* the last market, before the firm on cream */
.mk:has(+ .firm){padding-bottom:clamp(96px,12vw,180px)}
/* the title, and level with its foot on the right, a link to the rest */
.mk-hd{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:18px 40px;margin-bottom:clamp(32px,4vw,60px)}
.mk-hd .more{margin-bottom:clamp(6px,1vw,14px)}
.mk-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(18px,2.2vw,32px)}
.mk-grid figure{display:flex;flex-direction:column}
.mk-grid a{display:flex;flex-direction:column;height:100%}
.mk-lead{grid-row:span 2}
.mk-lead .ph{flex:1;min-height:320px}
/* the big picture takes the height of the two beside it, never its own, so their feet line up */
.mk-lead .ph img{position:absolute;inset:0}
.mk-side .ph{aspect-ratio:3/2}
.mk.flip .mk-grid{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.mk.flip .mk-lead{grid-column:2;grid-row:1/span 2}
.cap{display:flex;justify-content:space-between;align-items:baseline;gap:6px 16px;flex-wrap:wrap;padding-top:14px}
.cap b{font:600 clamp(17px,1.25vw,19px)/1.3 var(--ui);letter-spacing:-.01em}
.cap span{font:400 13px/1.2 var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2)}
@media (max-width:820px){
  .mk-grid,.mk.flip .mk-grid{grid-template-columns:1fr 1fr}
  .mk-lead,.mk.flip .mk-lead{grid-column:1/-1;grid-row:auto}
  .mk-lead .ph{flex:none;min-height:0;aspect-ratio:4/3}
  .mk-side .ph{aspect-ratio:1}
  .mk-side .cap{flex-direction:column}
}

/* the firm */
.firm{padding-block:clamp(96px,12vw,180px)}
.firm-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(40px,6vw,110px);align-items:center}
.firm-photo{position:relative}
.firm-photo .ph{aspect-ratio:4/3}
.firm-boil{position:absolute;right:clamp(-52px,-3.6vw,-10px);top:clamp(-52px,-3.6vw,-26px);width:clamp(104px,11vw,168px);aspect-ratio:1.1437}
.firm-copy .d2{margin:22px 0 28px;font-size:clamp(40px,4.6vw,78px)}
.firm-copy .lead{margin-bottom:22px;color:var(--fg)}
.firm-copy .links{display:flex;flex-wrap:wrap;gap:20px 36px;margin-top:36px}
@media (max-width:900px){.firm-grid{grid-template-columns:1fr}}

/* the films: as wide as the screen, held still behind the page, which moves over each as a window (clipped to it). A
film holds its first frame till its window is two-thirds up the screen, then plays through and ends just as its window's
bottom reaches the bottom of the screen, when the next part of the page comes up over it. Nothing dims it.
A phone held upright gets each film's middle */
.film-win{position:relative;clip-path:inset(0);background:var(--ink-deep);height:226vh;height:226svh}
.film-in{position:fixed;top:0;left:0;right:0;height:100vh;height:100lvh;pointer-events:none}
.js .film:not(.near) .film-in{visibility:hidden}
.film-in img,.film-in canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film-in canvas{opacity:0;transition:opacity .4s}
.film.playing canvas{opacity:1}
/* on a phone a film is a band 70% of the screen high, centred, so less of each frame is cut away */
@media (max-width:700px){.film-win{background:var(--ink)}.film-in{top:15vh;top:15lvh;height:70vh;height:70lvh}.film-in img{object-position:calc(var(--x,.5) * 100%) 50%}}
.mk + .film{margin-top:clamp(96px,12vw,180px)}

/* ---------- work ---------- */
.fl{position:sticky;top:calc(var(--hd) + env(safe-area-inset-top,0px));z-index:30;padding-block:14px;background:rgb(7 67 73 / .9);-webkit-backdrop-filter:saturate(150%) blur(20px);backdrop-filter:saturate(150%) blur(20px);border-block:1px solid var(--line)}
.no-js .fl{display:none}
.fl-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad)}
.tabs::-webkit-scrollbar{display:none}
.tab{display:inline-flex;align-items:center;gap:8px;flex:none;height:40px;padding:0 15px;border:1px solid var(--line);border-radius:999px;font:400 15px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);transition:background-color .3s,color .3s,border-color .3s}
.tab{background:linear-gradient(var(--wash),var(--wash)) 50% 100%/100% 0 no-repeat;transition:background-size .3s var(--ease),background-color .3s,color .3s,border-color .3s,scale .16s var(--ease)}
@media (hover:hover) and (pointer:fine){.tab:hover{color:var(--fg);border-color:var(--fg-3);background-size:100% 100%}}
.tab[aria-pressed=true]{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.field{position:relative;display:flex;align-items:center}
.field select{height:40px;border:1px solid var(--line);border-radius:999px;background:transparent;font-size:15px;font-weight:300;color:var(--fg);transition:border-color .3s}
.field select:focus{outline:0;border-color:var(--fg-2)}
.fl-market{display:none}
.field select{appearance:none;-webkit-appearance:none;padding:0 36px 0 16px;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23EFEEE8' stroke-opacity='.6' stroke-width='1.2'/%3E%3C/svg%3E") right 15px center/10px 6px no-repeat}
.field select option,.field select optgroup{background:var(--ink);color:var(--cream)}
.views{display:flex;padding:3px;border:1px solid var(--line);border-radius:999px}
.views button{height:32px;padding:0 13px;border-radius:999px;font:400 14px/1 var(--label);letter-spacing:.14em;color:var(--fg-2);transition:background-color .3s,color .3s,scale .16s var(--ease)}
.views button[aria-pressed=true]{background:var(--wash);color:var(--fg)}
.count{padding-top:clamp(28px,3vw,40px)}
@media (max-width:820px){
  .fl{padding-block:10px}
  /* phones: one row, the markets in a menu and the rest behind Filters */
  .fl-in{display:block}
  .tabs{display:none}
  .fl-market{display:flex}
  .tools{display:block}
  .fl-market select{font:400 15px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--fg)}
  .field select{width:100%}
  .views{display:none}
}

.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,56px) clamp(18px,2vw,30px);padding-bottom:clamp(96px,10vw,160px)}
.card .ph{aspect-ratio:3/2}
.card-name{margin-top:16px}
.card-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:15px;color:var(--fg-2)}
.card-meta span+span::before{content:"";display:inline-block;width:3px;height:3px;margin:0 14px 3px 0;border-radius:50%;background:var(--fg-3);vertical-align:middle}
.card-extra{display:none}
@media (max-width:1000px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}
/* the work's grid in a rhythm (site.js names each card's shape): rows of one height, the pictures in them as wide
   as their columns, so the gaps stay even and the bottoms line up. Heights are in widths of the grid (cqw) */
.cards.shaped{container-type:inline-size}
.cards.shaped:not(.list) [data-sz] .ph{aspect-ratio:auto;height:44cqw}
.cards.shaped:not(.list) [data-sz=full] .ph{height:42cqw}
.cards.shaped:not(.list) [data-sz=third] .ph{height:23cqw}
@media (min-width:1001px){
  .cards.shaped:not(.list){grid-template-columns:repeat(12,minmax(0,1fr))}
  .shaped [data-sz]{grid-column:span 4}
  .shaped [data-sz=wide]{grid-column:span 8}
  .shaped [data-sz=full]{grid-column:1/-1}
}
@media (max-width:1000px){
  .shaped [data-sz=full]{grid-column:1/-1}
  .cards.shaped:not(.list) [data-sz=full] .ph{height:56cqw}
  .cards.shaped:not(.list) [data-sz=half] .ph{height:60cqw}
}
@media (max-width:560px){
  .cards.shaped:not(.list) [data-sz=land] .ph{height:66cqw}
  .cards.shaped:not(.list) [data-sz=port] .ph{height:120cqw}
}
/* the same cards, as a list */
.cards.list{display:block}
.cards.list .card a{display:grid;grid-template-columns:96px minmax(0,2.2fr) minmax(0,1.3fr) minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1.1fr);align-items:center;gap:24px;padding-block:12px;border-bottom:1px solid var(--line);transition:background-color .3s}
.cards.list .card:first-child a{border-top:1px solid var(--line)}
@media (hover:hover) and (pointer:fine){.cards.list .card a:hover{background:var(--wash)}}
.cards.list .ph{aspect-ratio:3/2;border-radius:16px}
.cards.list .card-name{margin:0;font-size:22px}
.cards.list .card-meta{display:contents}
.cards.list .card-meta span::before{display:none}
.cards.list .card-extra{display:contents;font-size:15px;color:var(--fg-2)}
.cards.list .card-meta span,.cards.list .card-extra span{font-size:15px;color:var(--fg-2)}

/* a project */
.pj-hd{padding-top:calc(var(--hd) + clamp(40px,7vw,96px));padding-bottom:clamp(32px,4vw,56px)}
.pj-hd .d1{margin:22px 0 24px;max-width:13em;text-wrap:balance}
.pj-meta{display:flex;flex-wrap:wrap;gap:8px 28px;font:400 15px/1.2 var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2)}
.pj-meta span{display:inline-flex;align-items:center;gap:28px}
.pj-meta span+span::before{content:"";width:1px;height:14px;background:var(--line)}
.pj-cover{padding-inline:var(--pad);max-width:calc(var(--max) + 400px);margin-inline:auto}
.pj-cover button{display:block;width:100%;border-radius:calc(var(--r) + 8px);cursor:zoom-in}
.pj-cover .ph{width:100%;aspect-ratio:var(--a);max-height:86vh;border-radius:calc(var(--r) + 8px)}
@media (hover:hover) and (pointer:fine){.pj-cover button:hover .ph img{transform:scale(1.015)}}
html:has(.lb[open]){overflow:hidden}
.pj-about{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px clamp(40px,6vw,120px);padding-block:clamp(64px,8vw,128px)}
.facts-list{align-self:start;border-top:1px solid var(--line)}
.facts-list div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:16px;padding-block:15px;border-bottom:1px solid var(--line)}
.facts-list dt{font:400 14px/1.4 var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2)}
.facts-list dd{font-size:16px;line-height:1.45}
.pj-text{max-width:720px}
.pj-text .lead{margin-bottom:1.6em;font:300 clamp(26px,2.5vw,38px)/1.22 var(--serif);letter-spacing:-.008em;color:var(--fg)}
.pj-text h2{margin:2.2em 0 .8em;font:400 15px/1.2 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg)}
.pj-text h2:first-child{margin-top:0}
.pj-text p{color:var(--fg-2)}
.pj-text p+p{margin-top:1em}
.pj-about.bare{grid-template-columns:minmax(0,1fr)}
.pj-about.bare .facts-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));column-gap:28px;border-top:0}
.pj-about.bare .facts-list div{grid-template-columns:1fr;gap:6px;border-top:1px solid var(--line);border-bottom:0}
@media (max-width:900px){.pj-about{grid-template-columns:1fr}.pj-text{order:-1}}

/* a project's pictures: rows that keep every picture whole, each row's pictures the same height */
.gal{display:grid;gap:clamp(12px,1.4vw,20px);padding-bottom:clamp(80px,9vw,140px)}
.gal-row{display:flex;gap:clamp(12px,1.4vw,20px)}
.gal-row button{display:block;flex:var(--a) 1 0;min-width:0;border-radius:var(--r);cursor:zoom-in}
.gal-row .ph{aspect-ratio:var(--a)}
@media (hover:hover) and (pointer:fine){.gal-row button:hover .ph img{transform:scale(1.025)}}
@media (max-width:640px){.gal-row{flex-direction:column}.gal-row button{flex:none}}

.next{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,2.2vw,32px);padding-bottom:clamp(80px,9vw,140px)}
.next a{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:22px;align-items:center;padding:clamp(14px,1.4vw,20px);border:1px solid var(--line);border-radius:calc(var(--r) + 12px);transition:background-color .4s,border-color .4s}
@media (hover:hover) and (pointer:fine){.next a:hover{background:var(--wash);border-color:var(--fg-3)}}
.next .ph{aspect-ratio:4/3;border-radius:20px}
.next .eyebrow{margin-bottom:12px}
.next small{display:block;margin-top:8px;font-size:15px;color:var(--fg-2)}
@media (max-width:820px){.next{grid-template-columns:1fr}}

.related{padding-block:clamp(80px,9vw,140px);border-top:1px solid var(--line)}
.related-hd{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:clamp(32px,4vw,52px)}
/* a market's page: the way to the others */
.mk-others{display:flex;flex-wrap:wrap;gap:12px 28px;padding-block:4px clamp(32px,4vw,48px)}
.related .cards{padding-bottom:0}

/* the pictures, full screen */
.lb{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:#04292d;color:var(--cream);opacity:0;transition:opacity .4s var(--ease),overlay .4s allow-discrete,display .4s allow-discrete}
.lb[open]{opacity:1}
@starting-style{.lb[open]{opacity:0}}
.lb::backdrop{background:transparent}
.lb figure{position:absolute;inset:calc(env(safe-area-inset-top,0px) + 72px) var(--pad) calc(env(safe-area-inset-bottom,0px) + 80px);display:flex;align-items:center;justify-content:center}
.lb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:16px;transition:opacity .35s}
.lb-bar{position:absolute;inset:auto var(--pad) calc(env(safe-area-inset-bottom,0px) + 22px);display:flex;justify-content:space-between;align-items:center;gap:20px;font:400 14px/1 var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2)}
.lb-bar b{font-weight:400;color:var(--cream)}
.lb-nav{display:flex;gap:8px}
.lb button{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--line);border-radius:50%;color:var(--cream);transition:background-color .3s,border-color .3s,scale .16s var(--ease)}
@media (hover:hover) and (pointer:fine){.lb button:hover{background:rgb(239 238 232 / .1);border-color:rgb(239 238 232 / .4)}}
.lb button svg{width:16px;height:16px}
.lb-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:var(--pad)}

/* ---------- process ---------- */
.pr-open{padding-bottom:clamp(96px,10vw,160px)}
.pr-open .ph{aspect-ratio:21/9}
.pr-open .ph img{width:100%;height:100%;object-fit:cover}
.pr-n{font:400 14px/1 var(--label);letter-spacing:.2em;color:var(--fg-3)}
.pr-stages{padding-block:clamp(88px,10vw,150px)}
.pr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(28px,3.4vw,56px);margin-top:clamp(56px,6vw,96px)}
.pr-grid>li{padding-top:22px;border-top:1px solid var(--fg)}
.pr-grid .d3{margin-top:14px}
.pr-grid .pr-list{margin-top:28px;border-top:1px solid var(--line)}
.pr-list li{padding-block:9px;border-bottom:1px solid var(--line);font-size:16px;line-height:1.4}
.pr-sec{padding-block:clamp(96px,10vw,160px);border-top:1px solid var(--line)}
.pr-stages + .pr-sec{border-top:0}
.pr-hd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:20px 64px;align-items:end}
/* the tools: a drawing each, a name and a line */
.pr-kit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.2vw,32px);margin-top:clamp(48px,5vw,80px)}
.pr-art{position:relative;aspect-ratio:8/5;border-radius:calc(var(--r) * .7);background:#fff;overflow:hidden;color:var(--ink)}
.pa-draw{position:absolute;inset:0}
.pa-draw img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.pa-agenda{position:absolute;inset:0;padding:14px 16px;font:400 11px/1.3 var(--ui);background:#fff}
.ag-hd{display:flex;justify-content:space-between;margin:-14px -16px 8px;padding:10px 16px;background:var(--ink);color:var(--cream);font-weight:600;font-size:12px}
.ag-sec{margin:8px 0 2px;font:400 11px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:#E0604E}
.pa-agenda li{display:grid;grid-template-columns:26px 1fr auto;gap:6px;align-items:center;padding:6px 0;border-bottom:1px solid rgb(7 67 73 / .12)}
.pa-agenda b{font-weight:600}
.pa-agenda em{display:block;font-style:normal;color:rgb(7 67 73 / .6);font-size:10px}
/* Forma issues, as the app shows them */
.fi-pin{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#E0604E;color:#fff;font:600 12px/1 var(--ui);font-style:normal;box-shadow:0 0 0 2px #fff}
.fi-pin.done{background:var(--ink)}
.fi-pin.done::before{content:"";width:9px;height:5px;border:solid #fff;border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}
.pa-draw .fi-pin,.bz-draw .fi-pin{position:absolute;transform:translate(-50%,-50%)}
.fi-st{padding:3px 8px;border-radius:999px;font:600 10px/1.2 var(--ui);white-space:nowrap;background:#FBE3DF;color:#B5402F}
.fi-st.fi-in-review{background:#FCEFD3;color:#8A5A00}
.fi-st.fi-on-hold{background:#E9EBEE;color:#4B5563}
.fi-st.fi-closed{background:#E1EEE9;color:#1F6B57}
.pr-kit .d3{margin-top:22px}
.pr-kit li>p{margin-top:8px;max-width:28ch;font-size:16px;line-height:1.5;color:var(--fg-2)}
.pr-promise{max-width:16ch;margin-top:clamp(80px,9vw,140px)}
.pr-pair{display:grid;grid-template-columns:minmax(0,936fr) minmax(0,520fr);gap:clamp(16px,1.8vw,28px);margin-top:clamp(48px,5vw,80px)}
.pr-pair .ph{height:clamp(300px,40vw,640px)}
.pr-pair .ph img{width:100%;height:100%;object-fit:cover}
/* short labels in a row, no sentences */
.pr-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(28px,3vw,40px)}
.pr-tags li{padding:10px 18px;border:1px solid var(--line);border-radius:999px;font-size:15px;line-height:1.2;color:var(--fg-2)}
.pr-issue{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3vw,48px);margin-top:clamp(48px,5vw,80px)}
.pr-issue .d4{margin:12px 0 6px}
.pr-issue li>p:last-child{font-size:16px;line-height:1.5;color:var(--fg-2)}
.pr-draw{margin-bottom:20px;padding:clamp(10px,1.4vw,18px);border-radius:var(--r);background:#fff}
.pr-draw img{width:100%;height:auto}
.pr-axon{margin-top:clamp(48px,5vw,80px);padding:clamp(24px,5vw,80px)}
.pr-axon img{max-width:900px;margin-inline:auto}
.pr-blz{padding-block:clamp(96px,10vw,160px)}
.pr-blz + .pr-sec{border-top:0}
.pr-blz-art{margin-top:clamp(48px,5vw,80px)}
.bz{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:clamp(14px,1.6vw,24px);align-items:stretch}
.bz-sheet{display:flex;flex-direction:column;justify-content:center;padding:clamp(14px,2vw,32px);border-radius:var(--r);background:#fff}
.bz-draw{position:relative}
.bz-draw img{display:block;width:100%;height:auto}
.bz-draw svg{position:absolute;inset:0;width:100%;height:100%}
.bz-sheet figcaption{margin-top:16px;padding-top:12px;border-top:1px solid rgb(7 67 73 / .16);font:400 13px/1 var(--label);letter-spacing:.16em;text-transform:uppercase;color:rgb(7 67 73 / .6)}
.bz-issues{padding:clamp(16px,1.8vw,26px);border-radius:var(--r);background:#fff;font-family:var(--ui);color:var(--ink)}
.fi-hd{display:flex;align-items:center;gap:8px;padding-bottom:14px;border-bottom:1px solid rgb(7 67 73 / .16);font-weight:600;font-size:16px}
.fi-count{padding:2px 8px;border-radius:999px;background:rgb(7 67 73 / .08);font-size:12px}
.fi-filter{margin-left:auto;padding:4px 10px;border:1px solid rgb(7 67 73 / .2);border-radius:8px;font-weight:400;font-size:12px;color:rgb(7 67 73 / .7)}
.bz-issues li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:12px;align-items:start;padding:14px 0;border-bottom:1px solid rgb(7 67 73 / .1)}
.bz-issues li:last-child{border-bottom:0}
.bz-issues li.closed{opacity:.6}
.fi-title{margin:3px 0;font-size:14px;line-height:1.35;font-weight:500}
.fi-meta{font-size:11.5px;line-height:1.3;color:rgb(7 67 73 / .6)}
.fi-meta b{font-weight:600;color:#E0604E}
.pr-blz-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,56px) clamp(28px,3.4vw,56px);margin-top:clamp(56px,6vw,96px)}
.pr-blz-list li{padding-top:22px;border-top:1px solid var(--fg)}
.pr-blz-list .d3{margin-top:14px}
.pr-blz-list li>p:last-child{margin-top:10px;font-size:16px;line-height:1.5;color:var(--fg-2)}
@media (max-width:1100px){.pr-kit,.pr-blz-list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}}
@media (max-width:900px){.bz{grid-template-columns:1fr}.pr-hd,.pr-pair{grid-template-columns:1fr}.pr-issue{grid-template-columns:1fr}.pr-grid{grid-template-columns:1fr;row-gap:48px}.pr-pair .ph{height:auto;aspect-ratio:4/3}}
@media (max-width:600px){.pr-kit,.pr-blz-list{grid-template-columns:1fr}}

/* ---------- insights ---------- */
.ins-meta,.ins-by{display:flex;flex-wrap:wrap;gap:4px 0;font:400 13px/1.3 var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2)}
.ins-meta span+span::before,.ins-by span+span::before{content:"";display:inline-block;width:3px;height:3px;margin:0 12px 3px;border-radius:50%;background:var(--fg-3);vertical-align:middle}
.ins-by a{color:var(--fg);border-bottom:1px solid var(--line);transition:border-color .3s}
@media (hover:hover) and (pointer:fine){.ins-by a:hover{border-color:currentColor}}
.ins-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:center;padding-bottom:clamp(56px,7vw,104px);margin-bottom:clamp(56px,7vw,104px);border-bottom:1px solid var(--line)}
.ins-top .ph{aspect-ratio:3/2}
.ins-top .d3{margin:18px 0 18px}
.ins-top small,.ins-card small{display:block;margin-top:16px;font-size:15px;color:var(--fg-2)}
.ins-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,4vw,60px) clamp(18px,2vw,30px);padding-bottom:clamp(96px,10vw,160px)}
/* a card runs the height of its row, its author at the foot, so the names line up across the row */
.ins-card a{display:flex;flex-direction:column;height:100%}
.ins-card .ph{aspect-ratio:3/2;margin-bottom:18px}
.ins-card .d4{margin-top:12px;text-wrap:balance}
.ins-card small{margin-top:auto;padding-top:10px}
@media (hover:hover) and (pointer:fine){.ins-top:hover .ph img,.ins-card a:hover .ph img{transform:scale(1.03)}}
.related .ins-cards,.ins-home .ins-cards{padding-bottom:0}
.ins-home{padding-block:clamp(96px,10vw,160px)}
.more-work{padding-top:clamp(96px,10vw,160px)}
.more-work .cards{padding-bottom:0}
@media (max-width:900px){.ins-top{grid-template-columns:1fr}.ins-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.ins-cards{grid-template-columns:1fr}}

/* an insight: read in one column, about 70 characters wide */
.ins{padding-top:calc(var(--hd) + clamp(40px,6vw,88px))}
.ins-hd{max-width:960px;margin-top:32px}
.ins-hd .d2{margin:0 0 26px;font-size:clamp(40px,5vw,80px)}
.ins-hero{aspect-ratio:21/9;margin-block:clamp(40px,5vw,72px)}
.ins-body,.ins-author{max-width:720px;margin-inline:auto}
.ins-body{font-size:clamp(17px,1.3vw,19px);line-height:1.7;color:var(--fg-2)}
.ins-body>*+*{margin-top:1.1em}
.ins-body h2{margin-top:2.2em;font:300 clamp(28px,2.6vw,38px)/1.14 var(--serif);letter-spacing:-.008em;color:var(--fg)}
.ins-body h3,.ins-body h4{margin-top:1.8em;font:500 clamp(18px,1.4vw,21px)/1.3 var(--ui);letter-spacing:-.01em;color:var(--fg)}
.ins-body h2+*,.ins-body h3+*,.ins-body h4+*{margin-top:.6em}
.ins-body strong{font-weight:600;color:var(--fg)}
.ins-body a{color:var(--fg);border-bottom:1px solid var(--line);overflow-wrap:anywhere;transition:border-color .3s}
@media (hover:hover) and (pointer:fine){.ins-body a:hover{border-color:currentColor}}
.ins-body ul,.ins-body ol{padding-left:1.2em}
.ins-body ul{list-style:disc}
.ins-body ol{list-style:decimal}
.ins-body li+li{margin-top:.5em}
.ins-body li::marker{color:var(--fg-3)}
.ins-body blockquote{margin-block:1.8em;padding-left:clamp(20px,2.4vw,32px);border-left:2px solid var(--line);font:300 italic clamp(22px,2vw,28px)/1.38 var(--serif);color:var(--fg)}
.ins-body figure{margin-block:2em}
.ins-body figure img{width:100%;height:auto;border-radius:var(--r)}
.ins-body .fig.light img{background:#fff;padding:clamp(10px,1.4vw,18px)}
.ins-body figcaption{margin-top:12px;font-size:14px;line-height:1.5;color:var(--fg-3)}
.ins-body .ar-note{padding:clamp(22px,2.6vw,32px);border-radius:var(--r);background:var(--wash);border:1px solid var(--line)}
.ins-body .ar-note>*+*{margin-top:.8em}
.ins-body .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.ins-body .two-card{padding:clamp(20px,2.2vw,28px);border:1px solid var(--line);border-radius:var(--r)}
.ins-body .two-card h4{margin-top:0}
.ins-body .case{display:flex;align-items:baseline;gap:16px;margin-top:2.2em}
.ins-body .case-t{font:300 clamp(24px,2.2vw,32px)/1.18 var(--serif);letter-spacing:-.01em;color:var(--fg)}
.ins-body .case-n{font:400 14px/1 var(--label);letter-spacing:.2em;color:var(--fg-3)}
.ins-body .disc{margin-top:3em;padding-top:24px;border-top:1px solid var(--line);font-size:14px;line-height:1.6;color:var(--fg-3)}
.ins-body .disc-l{margin-bottom:12px;font:400 14px/1 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-2)}
.ins-body .disc-b p+p{margin-top:.8em}
.ins-author{padding-block:clamp(48px,6vw,80px) clamp(80px,9vw,140px)}
.ins-end{height:clamp(80px,9vw,140px)}
.ins-author a,.ins-author>div{display:flex;align-items:center;gap:20px;padding-top:28px;border-top:1px solid var(--line)}
.ins-author .ph{width:72px;height:72px;flex:none;border-radius:50%}
.ins-author b{display:block;font:600 clamp(17px,1.3vw,19px)/1.3 var(--ui);letter-spacing:-.01em}
.ins-author small{display:block;margin-top:6px;font-size:15px;color:var(--fg-2)}
@media (max-width:640px){.ins-body .two{grid-template-columns:1fr}.ins-hero{aspect-ratio:4/3}}

/* ---------- people ---------- */
.people{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(36px,4vw,56px) clamp(16px,2vw,28px);padding-bottom:clamp(96px,10vw,160px)}
.people .ph{aspect-ratio:4/5}
.people b{display:block;margin-top:16px;font:600 clamp(17px,1.3vw,19px)/1.3 var(--ui);letter-spacing:-.01em}
.people small{display:block;margin-top:6px;font-size:15px;line-height:1.45;color:var(--fg-2)}
@media (max-width:1000px){.people{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}.people b{font-size:20px}.people small{font-size:14px}}

.band{position:relative}
.band-photo{aspect-ratio:21/9;max-height:80vh;width:100%;object-fit:cover}
.join{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:28px 64px;align-items:end;padding-block:clamp(72px,9vw,140px)}
.join .links{display:flex;flex-wrap:wrap;gap:20px 36px;margin-top:28px}
@media (max-width:900px){.join{grid-template-columns:1fr}.band-photo{aspect-ratio:4/3}}

/* a person */
.ps{padding-top:calc(var(--hd) + clamp(40px,6vw,88px))}
.ps-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,110px);align-items:start;margin-top:32px;padding-bottom:clamp(72px,8vw,120px)}
.ps-photo .ph{aspect-ratio:4/5}
.ps-body .d2{margin:20px 0 10px;text-wrap:balance}
.ps-cred{display:block;margin-bottom:clamp(32px,4vw,52px);font:400 15px/1.2 var(--label);letter-spacing:.2em;color:var(--fg-2)}
.ps-body .body p:first-child{font:300 clamp(22px,1.9vw,28px)/1.34 var(--serif);letter-spacing:-.004em;color:var(--fg)}
.ps-lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:36px;margin-top:clamp(40px,5vw,64px)}
.ps-lists h2{padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--line);font:400 14px/1 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-2)}
.ps-lists li{padding-block:10px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.45}
.ps-lists li span{display:block;color:var(--fg-2)}
@media (max-width:900px){.ps-grid{grid-template-columns:1fr}.ps-photo{max-width:440px}}

/* ---------- culture ---------- */
.cu-photo .ph{aspect-ratio:16/8;max-height:80vh;border-radius:calc(var(--r) + 8px)}
@media (max-width:700px){.cu-photo .ph{aspect-ratio:4/3}}
.cu-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px clamp(40px,6vw,110px);padding-block:clamp(88px,11vw,170px)}
.cu-intro .d3{max-width:13em}
.mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,17vw,250px);gap:clamp(10px,1.2vw,18px)}
.mosaic figure{border-radius:var(--r)}
.mosaic figure:nth-child(1){grid-column:span 2;grid-row:span 2}
.mosaic figure:nth-child(2){grid-column:span 2}
.mosaic img{width:100%;height:100%;object-fit:cover}
@media (max-width:820px){.mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:42vw}.mosaic figure:nth-child(1){grid-row:span 1}}
.awards{padding-block:clamp(88px,11vw,170px)}
.awards ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(36px,4vw,56px);border-top:1px solid var(--line)}
.awards li{padding:24px 24px 0 0}
.awards li+li{padding-left:clamp(0px,2vw,28px);border-left:1px solid var(--line)}
.awards b{display:block;font:300 clamp(24px,2.2vw,34px)/1.12 var(--serif);letter-spacing:-.008em}
.awards span{display:block;margin-top:12px;font:400 13px/1.3 var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2)}
@media (max-width:820px){.awards ul{grid-template-columns:1fr 1fr;row-gap:32px}.awards li:nth-child(odd){padding-left:0;border-left:0}}
.heights{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px clamp(40px,6vw,110px);align-items:center;padding-block:clamp(88px,11vw,170px)}
.heights .ph{aspect-ratio:4/5}
.heights .d3{margin:20px 0 28px}
@media (max-width:820px){.cu-intro,.heights{grid-template-columns:1fr}}

.careers{padding-block:clamp(88px,11vw,170px)}
.careers-hd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:28px 64px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.careers-hd .body p{font-size:16px}
@media (max-width:900px){.careers-hd{grid-template-columns:1fr}}
.job{border-top:1px solid var(--line)}
.job:last-child{border-bottom:1px solid var(--line)}
.job summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:clamp(22px,2.4vw,32px);cursor:pointer;list-style:none}
.job summary::-webkit-details-marker{display:none}
.job summary .d3{transition:opacity .3s}
@media (hover:hover) and (pointer:fine){.job summary:hover .d3{opacity:.75}}
.job summary i{position:relative;flex:none;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;transition:transform .5s var(--ease),background-color .3s}
.job summary i::before,.job summary i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;margin:-.75px 0 0 -7px;background:currentColor}
.job summary i::after{transform:rotate(90deg)}
.job[open] summary i{transform:rotate(45deg)}
.job-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px 56px;padding-bottom:40px}
.job-body h3{margin:20px 0 10px;font:400 14px/1.2 var(--label);letter-spacing:.2em;text-transform:uppercase}
.job-body p,.job-body li{font-size:15px;color:var(--fg-2)}
.job-body p+p{margin-top:.8em}
.job-body ul{display:grid;gap:6px}
.job-body li{position:relative;padding-left:18px}
.job-body li::before{content:"";position:absolute;left:0;top:.62em;width:7px;aspect-ratio:1.1437;background:var(--coral);-webkit-mask:var(--dot) center/contain no-repeat;mask:var(--dot) center/contain no-repeat}
.job-apply{grid-column:1/-1;margin-top:20px}

/* ---------- contact ---------- */
.ct{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px clamp(40px,6vw,110px);padding-bottom:clamp(88px,10vw,150px)}
.ct-reach{display:grid;gap:36px;align-content:start}
.ct-reach a{display:inline-block;margin-top:14px;font:300 clamp(30px,3.4vw,52px)/1.08 var(--serif);letter-spacing:-.01em;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s var(--ease)}
@media (hover:hover) and (pointer:fine){.ct-reach a:hover{background-size:100% 1px}}
.offices{display:grid;gap:18px}
.office{padding:clamp(24px,2.4vw,34px);border:1px solid var(--line);border-radius:calc(var(--r) + 12px)}
.office h2{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.office address{font:300 clamp(24px,2vw,30px)/1.25 var(--serif);font-style:normal;letter-spacing:-.004em}
.office p{margin-top:14px;font-size:15px;color:var(--fg-2)}
.office .links{display:flex;flex-wrap:wrap;gap:16px 32px;margin-top:22px}
.ct-more{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px clamp(40px,6vw,110px);padding-block:clamp(64px,8vw,110px);border-top:1px solid var(--line)}
.social{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:900px){.ct,.ct-more{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.ft{background:var(--ink);color:var(--cream);overflow:hidden}
.ft-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px 64px;align-items:end;padding-block:clamp(16px,2vw,32px) clamp(56px,6vw,88px)}
.ft-cta .d2{max-width:9em}
.ft-mark{flex:none;width:clamp(92px,7.4vw,112px)}
.ft-base{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;padding-block:28px calc(env(safe-area-inset-bottom,0px) + 30px);border-top:1px solid var(--line);font:400 13px/1.4 var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}
.ft-base>span{margin-right:auto}
.ft-base nav{display:flex;flex-wrap:wrap;gap:10px 24px}
.ft-base a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:color .3s,background-size .6s var(--ease)}
@media (hover:hover) and (pointer:fine){.ft-base a:hover{color:var(--cream);background-size:100% 1px}}
.ft-base .lock{background:none}
@media (max-width:820px){.ft-cta{grid-template-columns:1fr}}

/* the 404 */
.lost{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:28px;padding-top:var(--hd)}
.lost .links{display:flex;flex-wrap:wrap;gap:20px 36px;margin-top:12px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important}
  .js [data-reveal]{opacity:1;transform:none}
  .hero-media img{transform:none}
}
/* phones: the home's words clear the floating pill */
@media (max-width:820px){.hero-in{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}}

/* ---------- the contact page's top: the opening's sketch of a building, faint behind the title and the form ---------- */
.ct-top{position:relative;isolation:isolate;overflow:hidden}
.ct-sketch{position:absolute;z-index:-1;top:calc(var(--hd) * .4);right:0;width:min(58vw,1040px);height:auto;opacity:.55;pointer-events:none;
  -webkit-mask:linear-gradient(to bottom,transparent,#000 22%,#000 45%,transparent 82%),linear-gradient(to right,transparent,#000 35%);-webkit-mask-composite:source-in;
  mask:linear-gradient(to bottom,transparent,#000 22%,#000 45%,transparent 82%),linear-gradient(to right,transparent,#000 35%);mask-composite:intersect}
@media (max-width:900px){.ct-sketch{width:115vw;right:-40vw;top:calc(var(--hd) - 10px);opacity:.38}}

/* ---------- the contact form: two steps, the project then who they are ---------- */
.lf{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:56px clamp(40px,6vw,110px);padding-bottom:clamp(72px,8vw,120px)}
.lf-form{--coral-ink:#B4473A;--field-line:rgb(7 67 73 / .58);--soft:rgb(7 67 73 / .75);align-self:start;scroll-margin-top:calc(var(--hd) + 24px);padding:clamp(24px,3vw,44px);border-radius:calc(var(--r) + 12px);box-shadow:0 30px 80px -30px rgb(0 0 0 / .45)}
.lf-form ::selection{background:var(--coral);color:var(--ink)}
.lf-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}
.lf-top .eyebrow{color:var(--coral-ink)}
/* every step (and the thanks) in the same place, so the card is always the height of the tallest and never jumps */
.lf-steps{display:grid}
.js .lf-steps>*{grid-area:1/1}
.js .lf-step:not(.on){visibility:hidden}
.lf-step{display:flex;flex-direction:column;margin:0;padding:0;border:0;min-width:0}
.lf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;margin-bottom:34px}
.no-js .lf-step+.lf-step{margin-top:44px}
.no-js .lf-done{display:none}
.no-js [data-next],.no-js [data-back]{display:none}
.lf-step legend{float:left;width:100%;margin-bottom:22px;padding:0}
.lf-wide{grid-column:1/-1}
.lf-f{position:relative;display:grid;gap:8px;align-content:start;min-width:0}
.lf-f>span:first-child,.lf-f>label:first-child{font:400 18px/1.1 var(--label);letter-spacing:.06em;text-transform:uppercase;color:var(--fg)}
.lf-opt{margin-left:6px;font:inherit;font-style:normal;color:var(--soft)}
.lf-f input,.lf-f select,.lf-f textarea{width:100%;min-height:50px;padding:12px 16px;border:1px solid var(--field-line);border-radius:16px;background:rgb(255 255 255 / .6);
  font:300 17px/1.4 var(--ui);color:var(--fg);transition:border-color .3s}
.lf-f textarea{resize:vertical;min-height:96px}
.lf-f input::placeholder,.lf-f textarea::placeholder{color:var(--soft);opacity:1}
.lf-f input:focus,.lf-f select:focus,.lf-f textarea:focus{outline:0;border-color:var(--coral);box-shadow:0 0 0 3px rgb(237 136 121 / .3);background-color:#fff}
.lf-f small{font-size:13px;color:var(--fg-3)}
.lf-sel select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
  background:rgb(255 255 255 / .6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23074349' stroke-opacity='.7' stroke-width='1.2'/%3E%3C/svg%3E") right 16px center/10px 6px no-repeat}
.lf-sel select:invalid{color:var(--fg-3)}
.lf-sel option{background:var(--ink);color:var(--cream)}
.lf-f.bad input,.lf-f.bad select,.lf-f.bad .dd-btn{border-color:var(--coral-ink)}
.lf-bad{position:absolute;left:2px;top:calc(100% + 4px);font:500 14px/1.2 var(--ui);font-style:normal;color:var(--coral-ink)}
.lf-reach-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.lf-chk{position:relative;display:flex;align-items:center;gap:12px;min-height:54px;padding:0 16px;border:1px solid var(--field-line);border-radius:16px;background:rgb(255 255 255 / .6);cursor:pointer;transition:border-color .3s,background-color .3s}
.lf-chk input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.lf-chk i{flex:none;display:grid;place-items:center;width:22px;height:22px;border:1.5px solid var(--soft);border-radius:7px;transition:background-color .25s,border-color .25s}
.lf-chk i::after{content:"";width:11px;height:8px;background:var(--ink);opacity:0;transform:scale(.6);transition:opacity .2s,transform .3s var(--ease);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8'%3E%3Cpath d='M1 4l3 3 6-6' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8'%3E%3Cpath d='M1 4l3 3 6-6' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat}
.lf-chk span{font:400 18px/1 var(--label);letter-spacing:.06em;text-transform:uppercase;color:var(--fg)}
@media (hover:hover) and (pointer:fine){.lf-chk:hover{border-color:var(--coral)}}
.lf-chk:has(input:checked){border-color:var(--coral);background:#fff}
.lf-chk input:checked+i{background:var(--coral);border-color:var(--coral)}
.lf-chk input:checked+i::after{opacity:1;transform:none}
.lf-chk:has(input:focus-visible){outline:2px solid var(--coral);outline-offset:3px}
.lf-f.bad .lf-chk{border-color:var(--coral-ink)}
.lf-fine{font-size:14px;line-height:1.5;color:var(--fg-2)}
.lf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lf-err{padding:12px 16px;border-radius:16px;background:rgb(237 136 121 / .22);color:var(--fg);font-size:15px}
.lf-act{display:flex;align-items:center;justify-content:flex-end;gap:28px;margin-top:auto}
.lf-go{min-width:150px;background-color:var(--coral);background-image:linear-gradient(var(--ink),var(--ink));color:var(--ink-deep);border-color:var(--coral);font-size:16px}
@media (hover:hover) and (pointer:fine){.lf-go:hover{color:var(--cream);border-color:var(--ink)}.cream .lf-go:hover{color:var(--cream)}}
.lf-go:disabled{opacity:.6;cursor:progress}
.lf-back::after{transform:scaleX(-1);order:-1}
.lf-done{display:grid;gap:18px;align-content:center;padding-block:clamp(12px,3vw,40px)}
.lf-done:focus{outline:0}
.lf-done.calling .dot{animation:lf-ring 1.1s var(--ease) infinite}
@keyframes lf-ring{0%,100%{transform:scale(1)}50%{transform:scale(1.6)}}
.lf-side{display:grid;gap:36px;align-content:start}
.lf-next{display:grid;gap:18px;counter-reset:n}
.lf-next li{position:relative;padding-left:44px;color:var(--fg-2);counter-increment:n}
.lf-next li::before{content:counter(n);position:absolute;left:0;top:-2px;font:400 clamp(26px,2.2vw,32px)/1 var(--display);color:var(--coral-text)}
.lf-next b{font-weight:500;color:var(--fg)}
.lf-reach a{font-size:clamp(26px,2.4vw,36px)}
.lf-else{display:grid;gap:10px;font-size:16px;line-height:1.5;color:var(--fg-2)}
.lf-else a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
/* our own dropdown, over the select it stands in for (the select stays, hidden, and is what's sent) */
.dd{position:relative}
.dd select{position:absolute;inset:0;opacity:0;pointer-events:none}
.dd-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:50px;padding:12px 16px;border:1px solid var(--field-line);border-radius:16px;
  background:rgb(255 255 255 / .6);font:300 17px/1.4 var(--ui);color:var(--fg);text-align:left;transition:border-color .3s,box-shadow .3s,background-color .3s}
.dd-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-btn.empty span{color:var(--soft)}
.dd-btn::after{content:"";flex:none;width:10px;height:6px;background:var(--fg-2);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .35s var(--ease)}
@media (hover:hover) and (pointer:fine){.dd-btn:hover{border-color:var(--fg)}}
.dd-btn:focus-visible,.dd.open .dd-btn{outline:0;border-color:var(--coral);box-shadow:0 0 0 3px rgb(237 136 121 / .3);background-color:#fff}
.dd.open .dd-btn::after{transform:rotate(180deg)}
.dd-list{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 8px);max-height:300px;overflow-y:auto;padding:6px;border:1px solid var(--line);border-radius:18px;background:#fff;
  box-shadow:0 24px 48px -16px rgb(7 67 73 / .35);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .3s var(--ease),visibility 0s .3s;overscroll-behavior:contain}
.dd.open .dd-list{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .3s var(--ease)}
.dd.up .dd-list{top:auto;bottom:calc(100% + 8px)}
.dd-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-radius:12px;font-size:16px;line-height:1.35;color:var(--fg);cursor:pointer}
.dd-list li.on{background:var(--wash)}
.dd-list li[aria-selected=true]{font-weight:500}
.dd-list li[aria-selected=true]::after{content:"";flex:none;width:9px;aspect-ratio:1.1437;background:var(--coral);-webkit-mask:var(--dot) center/contain no-repeat;mask:var(--dot) center/contain no-repeat}
@media (max-width:900px){.lf{grid-template-columns:1fr}}
@media (max-width:600px){.lf-grid{grid-template-columns:1fr}.lf-act{justify-content:space-between}.lf-go{flex:1}}
.ct .offices{grid-template-columns:repeat(2,minmax(0,1fr));grid-column:1/-1}
@media (max-width:900px){.ct .offices{grid-template-columns:1fr}}