/* The real estate pages (from mock-up J): the real estate home in the language of BYQ's Avenir template. The brand ink and ivory,
   Geist for the headings and the body, a mono label font for the eyebrows, cards with a 12px radius, a hero
   photograph edge to edge. Colours are the brand: ink, vermilion, ivory, silver. */
:root{
  --teal:#191A18; --light:#F2EEE6; --grey:#E9E5DD; --beige:#E3DED4; --wash:#B6BAB4; --accent:#FF5A3C; --white:#FFFFFF;
  --t88:rgba(25,26,24,.88); --t64:rgba(25,26,24,.72); --t48:rgba(25,26,24,.62); --t16:rgba(25,26,24,.16); --t8:rgba(25,26,24,.08); --t4:rgba(25,26,24,.04);
  --l88:rgba(242,238,230,.88); --l64:rgba(242,238,230,.72); --l32:rgba(242,238,230,.32); --l16:rgba(242,238,230,.16); --l8:rgba(242,238,230,.08);
  --display:"Satoshi","Geist",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --serif:var(--display); --sans:"Satoshi","Geist",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ink:#191A18; --paper:#F2EEE6; --card:#FBF9F5; --ink-hover:#2B2D2A; --paper-glass:rgba(242,238,230,.94); --bad-bg:#F7E1DB;
  --r:12px; --r-s:8px; --gutter:40px; --max:1800px; --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);color:var(--ink);scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--sans);font-size:16px;line-height:25px;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:clip;background:var(--paper)}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
section{padding:120px 0}
@media(max-width:959px){:root{--gutter:20px}}
@media(max-width:767px){section{padding:72px 0}}

/* type */
.tag{font-family:var(--mono);font-size:12px;line-height:16px;letter-spacing:.75px;text-transform:uppercase;font-weight:400;color:var(--t64)}
.on-dark .tag{color:var(--l64)}
h1,h2,h3,.h1,.h2,.h3,.h5{font-family:var(--display);font-weight:500}
.h1{font-size:60px;line-height:64px;letter-spacing:-1.5px;font-weight:500}
.h2{font-size:48px;line-height:54px;letter-spacing:-1.25px}
.h3{font-size:36px;line-height:42px;letter-spacing:-.9px}
.h5{font-size:25px;line-height:31px;letter-spacing:-.5px}
.b1{font-size:24px;line-height:28px}
.b3{font-size:14px;line-height:20px;letter-spacing:.25px}
.mute{color:var(--t64)}
.on-dark .mute{color:var(--l64)}
@media(max-width:767px){.h1{font-size:40px;line-height:46px;letter-spacing:-1px}.h2{font-size:34px;line-height:40px;letter-spacing:-1.25px}.h3{font-size:30px;line-height:34px;letter-spacing:-1px}.h5{font-size:24px;line-height:30px}.b1{font-size:20px;line-height:26px}}

/* reveals */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0) * 120ms)}
.rv.in{opacity:1;transform:none}
.scrub .w{opacity:.24;transition:opacity .4s}
.scrub .w.on{opacity:1}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.scrub .w{opacity:1}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:var(--r-s);font-family:var(--sans);font-size:14px;line-height:20px;font-weight:500;border:1px solid transparent;transition:background-color .3s,color .3s,border-color .3s;white-space:nowrap}
.btn--teal{background:var(--ink);color:var(--paper)}
.btn--teal:hover{background:var(--ink-hover)}
.btn--light{background:var(--light);color:var(--teal)}
.btn--light:hover{background:var(--white)}
.btn--ghost{background:var(--l8);color:var(--light);border-color:var(--l32)}
.btn--ghost:hover{background:var(--l16)}
.btn--ghost-teal{background:transparent;color:var(--ink);border-color:var(--t16)}
.btn--ghost-teal:hover{border-color:var(--ink)}
.btn--line{background:rgba(18,19,17,.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--light);border-color:var(--l64)}
.btn--line:hover{border-color:var(--light)}
.ulink{font-family:var(--sans);font-size:14px;line-height:20px;font-weight:500;position:relative;padding-bottom:2px}
.ulink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.5;transition:opacity .3s}
.ulink:hover::after{opacity:1}
.btn-row{display:flex;flex-wrap:wrap;gap:20px;align-items:center}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:28px;padding:20px var(--gutter);color:var(--light);transition:background-color .35s,color .35s,box-shadow .35s}
.nav__links{display:flex;gap:28px;margin-left:auto;font-size:14px;line-height:20px;font-weight:400;letter-spacing:0;text-transform:none}
.nav__links>a,.nav__item>a{display:block;padding:8px 0;opacity:.9;transition:opacity .3s}
.nav__links>a:hover,.nav__item:hover>a{opacity:1}
.nav__item{position:relative}
.peek{position:absolute;left:-16px;top:100%;padding-top:10px;width:400px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .25s,transform .25s,visibility 0s .25s;z-index:5}
.nav__item:hover .peek,.nav__item:focus-within .peek{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .25s}
.peek__in{display:block;background:var(--paper);color:var(--ink);border-radius:var(--r);padding:10px;box-shadow:0 24px 60px rgba(25,26,24,.3)}
.peek__win{border-radius:var(--r-s);overflow:hidden;background:var(--teal)}
.peek__bar{display:flex;align-items:center;gap:5px;padding:7px 10px;background:#E3DFD7}
.peek__bar i{width:7px;height:7px;border-radius:50%;background:#C4BFB6}
.peek__bar span{flex:1;margin-left:6px;padding:2px 8px;border-radius:5px;background:#F2EEE6;font-family:var(--mono);font-size:9px;line-height:12px;color:var(--t64);text-align:center;text-transform:none;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.peek__win img{aspect-ratio:16/9;object-fit:cover}
.peek__txt{padding:14px 8px 8px;display:flex;flex-direction:column;gap:4px;text-transform:none;letter-spacing:0;font-weight:400}
.peek__txt b{font-weight:500;font-size:14px;line-height:20px}
.peek__txt span{font-size:13px;line-height:18px;color:var(--t64)}
.peek__txt .tag{margin-top:8px;font-size:11px}
.nav__logo{display:block;height:20px;width:auto;justify-self:center}
/* the nav stays on screen: clear over the hero photograph, solid ivory once the page moves */
.nav__logo--ink{display:none}
.nav--page .nav__logo--ink{display:block}
.nav--page .nav__logo--ivory{display:none}
.nav.is-stuck{background:var(--paper-glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--ink);box-shadow:0 1px 0 var(--t8)}
.nav.is-stuck .nav__logo--ivory{display:none}
.nav.is-stuck .nav__logo--ink{display:block}
.nav.is-stuck .btn--light{background:var(--ink);color:var(--paper)}
.nav.is-stuck .btn--line,.nav--page .btn--line{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;color:inherit;border-color:color-mix(in srgb,currentColor 48%,transparent)}
.nav.is-stuck .btn--line:hover,.nav--page .btn--line:hover{border-color:currentColor}
html{scroll-padding-top:88px}
.nav__right{display:flex;justify-content:flex-end;align-items:center;gap:20px}
.nav__menu{display:none;flex-direction:column;justify-content:center;gap:5px;width:28px;height:28px;padding:4px;justify-self:end}
.nav__menu i{display:block;height:1.5px;width:100%;background:currentColor;border-radius:2px;transition:transform .3s,opacity .3s}
body.menu-open .nav__menu i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-open .nav__menu i:nth-child(2){opacity:0}
body.menu-open .nav__menu i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
/* the menu: a pane of frosted glass that settles in below the bar, the page still showing softly through it */
.menu{display:flex;position:fixed;top:90px;left:14px;right:14px;z-index:19;flex-direction:column;gap:40px;padding:36px 32px 32px;border-radius:20px;color:var(--ink);
  background:rgba(242,238,230,.58);-webkit-backdrop-filter:blur(28px) saturate(1.6);backdrop-filter:blur(28px) saturate(1.6);
  border:1px solid rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 30px 80px rgba(18,19,17,.28);
  opacity:0;visibility:hidden;transform:translateY(-10px) scale(.985);transform-origin:top right;transition:opacity .35s var(--ease),transform .5s var(--ease),visibility 0s .5s}
body.menu-open .menu{opacity:1;visibility:visible;transform:none;transition:opacity .35s var(--ease),transform .5s var(--ease)}
html[data-theme=dark] .menu{background:rgba(18,19,17,.5);border-color:rgba(242,238,230,.14);box-shadow:inset 0 1px 0 rgba(242,238,230,.12),0 30px 80px rgba(0,0,0,.45)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.menu{background:var(--paper-glass)}}
.menu__links{display:flex;flex-direction:column;gap:14px}
.menu__links a{font-family:var(--display);font-weight:500;font-size:30px;line-height:34px;letter-spacing:-1px}
.menu .btn{align-self:stretch}
/* the studio switcher: the two studios side by side, the one you are in filled. The same control sits in the design
   studio's header, so moving between the two always happens in the same place */
.nav__home{flex:none}
.ssw{display:inline-flex;align-items:center;flex:none;padding-left:24px;border-left:1px solid color-mix(in srgb,currentColor 30%,transparent);font-size:14px;line-height:20px;font-weight:400;letter-spacing:0;text-transform:none;white-space:nowrap}
.ssw a{position:relative;padding:4px 0;opacity:.78;transition:opacity .3s}
.ssw__sep{margin:0 10px;opacity:.4}
.ssw a:hover,.ssw a.is-on{opacity:1}
.ssw a.is-on{font-weight:500}
/* a small dot under the studio you are in */
.ssw a::after{content:"";position:absolute;left:50%;bottom:-5px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--accent);opacity:0;transform:scale(0);transition:opacity .3s,transform .4s var(--ease)}
.ssw a.is-on::after{opacity:1;transform:none}
.ssw--menu{display:none;align-self:flex-start;padding-left:0;border-left:0;font-size:16px}
.nav__links a.is-on{opacity:1;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px}
/* below a wide laptop the page links move into the menu; below a tablet the switcher follows them */
@media(max-width:1300px){.nav__links{display:none}.nav__right{margin-left:auto}.nav__menu{display:flex}.menu{left:auto;width:420px}}
@media(max-width:959px){.nav{gap:6px;padding:16px var(--gutter)}.nav .ssw,.nav__right .btn{display:none}.dusk{width:40px;height:40px}.nav__logo{height:28px}.menu{left:14px;width:auto}.ssw--menu{display:inline-flex}}

/* hero: the photograph edge to edge, as on the entry page */
.hero{position:relative;height:100vh;height:100dvh;min-height:640px}
.hero__card{position:relative;height:100%;overflow:hidden;background:var(--teal);color:var(--light)}
.hero__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:34% 45%}
.hero__card::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(25,26,24,.72) 0%,rgba(25,26,24,.55) 45%,rgba(25,26,24,.25) 70%,rgba(25,26,24,0) 85%),radial-gradient(ellipse 80% 75% at 0% 100%,rgba(25,26,24,.8),rgba(25,26,24,0)),linear-gradient(to top,rgba(25,26,24,.55),rgba(25,26,24,0) 45%),linear-gradient(to bottom,rgba(25,26,24,.72),rgba(25,26,24,0) 30%)}
/* the hero copy sits in the bottom left: the headline, then what we do and where, then the plain facts, then the buttons */
.hero__body{position:absolute;z-index:2;left:0;right:0;bottom:calc(57px + clamp(36px,7vh,88px));padding:0 var(--gutter);display:flex;flex-direction:column;align-items:flex-start}
.hero__h{font-family:var(--display);font-size:clamp(46px,5.4vw,84px);line-height:1;letter-spacing:-.035em;font-weight:500;text-wrap:balance}
.hero__sub{max-width:34ch;margin-top:clamp(20px,2.6vh,28px);font-size:clamp(18px,1.45vw,22px);line-height:1.45;color:var(--l88);text-wrap:pretty}
/* the plain facts run along the foot of the photograph, spread across its width */
.hero__facts{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;justify-content:flex-start;gap:12px 48px;margin:0 var(--gutter);padding:18px 0 20px;border-top:1px solid var(--l16);font-family:var(--mono);font-size:13px;line-height:18px;letter-spacing:.02em;color:var(--l88)}
.hero__facts .nw{white-space:nowrap}
.hero__body .btn-row{margin-top:clamp(28px,4vh,40px)}
@media(max-width:767px){.hero{height:auto;max-height:none;min-height:0}.hero__card{height:100vh;height:100dvh;min-height:560px}.hero__card img{object-position:48% 50%}.hero__body{padding:0 20px;bottom:128px}.hero__h{font-size:clamp(34px,9.6vw,46px);line-height:1.04}.hero__facts{flex-direction:column;gap:4px;margin:0 20px;padding:14px 0 18px;font-size:12px;line-height:16px}}

/* the statement, with photographs between the words */
.intro{text-align:center;padding:140px 0 0}
.intro .h2{max-width:1040px;margin:0 auto}
.intro .chip{display:inline-block;vertical-align:middle;width:72px;height:44px;border-radius:6px;overflow:hidden;margin:0 6px;position:relative;top:-4px}
.intro .chip img{width:100%;height:100%;object-fit:cover}
.intro .b3{margin-top:32px;color:var(--t64)}
@media(max-width:767px){.intro{padding:88px 0 0}.intro .chip{width:48px;height:30px;margin:0 3px;top:-3px}.intro .b3{margin-top:24px}}

/* what we do: sticky copy, tall cards with glass captions */
.what__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.what__copy{position:sticky;top:64px;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.what__copy .h2{max-width:480px}
.what__copy p{max-width:420px;color:var(--t64)}
.what__cards{display:flex;flex-direction:column;gap:16px}
.tall{position:sticky;top:calc(72px + var(--k,0) * 64px);border-radius:var(--r);overflow:hidden;aspect-ratio:4/4.4;background:var(--teal);color:var(--light);box-shadow:0 -16px 40px rgba(25,26,24,.35)}
.desk{position:absolute;inset:0;background:linear-gradient(160deg,#2B2D2A,#191A18 60%);display:flex;align-items:flex-start;justify-content:center;padding:40px 40px 0}
.win{width:100%;max-width:640px;border-radius:10px 10px 0 0;overflow:hidden;background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.win__bar{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#E3DFD7;border-bottom:1px solid #D3CFC7}
.win__bar i{width:9px;height:9px;border-radius:50%;background:#C4BFB6}
.win__bar span{flex:1;margin-left:8px;padding:4px 10px;border-radius:6px;background:#F2EEE6;font-family:var(--mono);font-size:10px;line-height:14px;color:var(--t64);text-align:center}
.win img{display:block;width:100%;height:auto}
.tall img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tall__glass{position:absolute;left:0;right:0;top:0;height:64px;padding:0 24px;background:linear-gradient(to bottom,rgba(25,26,24,.7),rgba(25,26,24,0));display:flex;align-items:center;justify-content:space-between;gap:24px;z-index:2}
.tall__glass .h5{font-size:22px;line-height:28px;white-space:nowrap}
.tall__glass p{font-size:14px;line-height:20px;color:var(--l64);max-width:520px;text-align:right}
.tall--site{background:linear-gradient(160deg,#3A3C38,#191A18 60%)}
.tall--site .mock{position:absolute;left:32px;right:32px;top:120px;height:auto;bottom:32px}
.tall--site .lap{width:84%}
.tall--site .lap img,.tall--site .ph img{position:static;inset:auto;width:100%;height:auto;object-fit:fill}
.tall--site .lap{top:0;bottom:auto}
.tall--site .ph{top:30%;bottom:auto}
@media(max-width:959px){.what__grid{grid-template-columns:1fr;gap:40px}.what__copy{position:static}.tall{aspect-ratio:4/5;top:calc(16px + var(--k,0) * 56px)}.tall__glass{height:56px;padding:0 16px}.tall__glass p{display:none}.desk{padding:24px 16px 0}.win__bar span{display:none}.tall--site .mock{left:16px;right:16px;top:90px;bottom:16px}}
/* the studio: dark, stat cards, the brokerages */
.studio{background:var(--teal);color:var(--light);padding:140px 0 0;overflow:hidden}
.studio__grid{display:grid;grid-template-columns:5fr 7fr;gap:96px;align-items:end}
.who{display:flex;flex-direction:column;gap:24px}
.who__stage{position:relative;border-radius:var(--r);background:linear-gradient(to bottom,rgba(242,238,230,.03),rgba(242,238,230,.08));overflow:hidden;padding:48px 32px 0;display:flex;justify-content:center;align-items:flex-end;aspect-ratio:4/4.6}
.who__stage img{display:block;width:92%;height:auto;margin-bottom:-6%}
.who__names{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 8%;text-align:center}
.who__names p{font-size:14px;line-height:20px;color:var(--l64)}
.who__names b{display:block;font-weight:500;font-size:16px;line-height:22px;color:var(--light)}
.studio__copy{display:flex;flex-direction:column}
.studio__copy .h2{font-size:56px;line-height:60px;letter-spacing:-1.5px;max-width:640px}
.studio__copy>p{font-size:18px;line-height:28px;color:var(--l64);max-width:600px;margin-top:28px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:48px;padding:36px 0;border-top:1px solid var(--l16);border-bottom:1px solid var(--l16)}
.stat{padding:0 32px;border-left:1px solid var(--l16);display:flex;flex-direction:column;gap:12px}
.stat:first-child{padding-left:0;border-left:0}
.stat b{font-weight:500;font-size:44px;line-height:48px;letter-spacing:-1.5px;white-space:nowrap}
.stat b .num{display:inline-block;filter:blur(0);transition:filter .6s}
.stat b .num.blur{filter:blur(8px)}
.stat>span{font-size:14px;line-height:20px;color:var(--l64)}
.studio__ask{margin-top:48px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.studio__ask .h5{font-size:30px;line-height:36px;letter-spacing:-.75px}
.studio__ask p{color:var(--l64)}
.studio__ask .btn{margin-top:16px}
@media(max-width:959px){.studio{padding-top:80px}.studio__grid{grid-template-columns:1fr;gap:48px}.who__stage{aspect-ratio:4/4.2;padding:32px 16px 0}.studio__copy .h2{font-size:38px;line-height:42px;letter-spacing:-1.25px}.studio__copy>p{font-size:16px;line-height:24px}.stats{grid-template-columns:1fr;gap:0;padding:0;border:0}.stat{padding:20px 0;border-left:0;border-top:1px solid var(--l16)}.stat:first-child{padding-left:0}.stat b{font-size:34px;line-height:38px}.firms__head{margin-top:56px}}

/* what agents say: the quote alone on a photograph */
.voice{position:relative;color:var(--light);overflow:hidden;padding:140px 0;text-align:center}
.voice__bg{position:absolute;inset:0;z-index:0}
.voice__bg img{width:100%;height:100%;object-fit:cover;filter:blur(4px);transform:scale(1.06)}
.voice__bg::after{content:"";position:absolute;inset:0;background:rgba(25,26,24,.6)}
.voice__copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:40px;max-width:1040px;margin:0 auto}
.voice__copy blockquote{font-family:var(--display);font-weight:400;font-size:40px;line-height:48px;letter-spacing:-1.25px;color:var(--l88);transition:opacity .4s}
.voice__copy figure.is-swapping blockquote,.voice__copy figure.is-swapping figcaption{opacity:0}
.voice__copy figcaption{display:flex;justify-content:center;gap:16px;align-items:baseline;margin-top:32px;transition:opacity .4s}
.voice__copy figcaption b{font-weight:500}
.voice__copy figcaption .tag{color:var(--l64)}
.voice__ctl{display:flex;gap:24px;align-items:center}
.voice__ctl .ulink{color:var(--l88)}
.voice__ctl .ulink:hover{color:var(--light)}
@media(max-width:959px){.voice{padding:80px 0}.voice__copy{gap:28px}.voice__copy blockquote{font-size:26px;line-height:32px;letter-spacing:-.75px}}

/* builders and designers */
/* the design studio's section keeps the studio's ivory in both themes */
.design{--ink:#191A18;--paper:#F2EEE6;--card:#FBF9F5;--grey:#E9E5DD;--beige:#E3DED4;--ink-hover:#2B2D2A;
  --t88:rgba(25,26,24,.88);--t64:rgba(25,26,24,.64);--t48:rgba(25,26,24,.48);--t16:rgba(25,26,24,.16);--t8:rgba(25,26,24,.08);--t4:rgba(25,26,24,.04);
  background:var(--paper);color:var(--ink)}
.design__grid{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center}
.design__pic{border-radius:var(--r);overflow:hidden;aspect-ratio:4/4.3}
.design__pic img{width:100%;height:100%;object-fit:cover}
.design__copy{display:flex;flex-direction:column;align-items:flex-start;gap:40px}
.design__copy .h2{max-width:560px}
.design__pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%}
.card{background:var(--grey);border-radius:var(--r);padding:32px;display:flex;flex-direction:column;gap:32px}
.card p{color:var(--t64)}
.design__pair .card{align-items:flex-start;text-align:left;padding:28px;gap:16px}
.design__pair .card .h5{font-size:24px;line-height:30px}
.design__pair .card p{font-size:14px;line-height:20px;max-width:none}
.design__note{max-width:520px}
.design__note b{display:block;font-weight:500;margin-bottom:8px}
.design__note p{color:var(--t64);font-size:14px;line-height:20px}
@media(max-width:959px){.design__grid{grid-template-columns:1fr;gap:40px}.design__pic{aspect-ratio:4/3}.design__pair{grid-template-columns:1fr}}

/* pricing tabs */
.price{background:var(--grey)}
.price__grid{display:grid;grid-template-columns:4fr 8fr;gap:64px;align-items:start}
.price__copy{display:flex;flex-direction:column;align-items:flex-start;gap:24px;position:sticky;top:64px}
.price__copy p{color:var(--t64);max-width:380px}
.plist{display:flex;flex-direction:column;border-top:1px solid var(--t16)}
.prow{display:grid;grid-template-columns:1fr auto;gap:8px 40px;padding:32px 0;border-bottom:1px solid var(--t16);align-items:baseline}
.prow .h5{font-size:26px;line-height:32px}
.prow .from{font-weight:400;font-size:32px;line-height:36px;letter-spacing:-.02em;white-space:nowrap;text-align:right}
.prow p{grid-column:1 / -1;color:var(--t64);max-width:560px}
.price__note{margin-top:24px;color:var(--t48);font-size:14px;line-height:20px}
.addons{margin-top:48px}
.addons>.tag{display:block;margin-bottom:16px}
.addons__list{display:grid;grid-template-columns:1fr 1fr;gap:12px 32px;border-top:1px solid var(--t16)}
.addon{display:grid;grid-template-columns:1fr auto;gap:2px 24px;padding:18px 0;border-bottom:1px solid var(--t16);align-items:baseline}
.addon b{font-weight:500}
.addon .from{font-weight:500;white-space:nowrap;text-align:right;color:var(--t64)}
.addon p{grid-column:1 / -1;font-size:14px;line-height:20px;color:var(--t64)}
.addons__list--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:767px){.addons__list,.addons__list--3{grid-template-columns:1fr}}
.seg{margin:0 0 32px;padding:0;border:0;min-width:0}
.seg legend{float:left;width:100%;margin-bottom:12px}
.seg__opts{clear:both;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;padding:4px;border-radius:var(--r-s);background:var(--t8)}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;padding:10px 6px;border-radius:6px;font-size:14px;line-height:20px;font-weight:500;text-align:center;white-space:nowrap;color:var(--t64);transition:background-color .3s,color .3s}
.seg label:hover span{color:var(--ink)}
.seg input:checked+span{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.seg input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
@media(max-width:767px){.seg__opts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.size{display:flex;flex-direction:column;gap:8px;width:100%;max-width:320px}
.size label{font-family:var(--mono);font-size:12px;line-height:16px;letter-spacing:.75px;text-transform:uppercase;color:var(--t64)}
.size select{appearance:none;-webkit-appearance:none;width:100%;padding:14px 44px 14px 16px;border-radius:var(--r-s);border:1px solid var(--t16);background:var(--paper) 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 1l5 5 5-5' fill='none' stroke='%23191A18' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center;font:inherit;font-weight:500;color:var(--ink);cursor:pointer}
.size select:focus{outline:0;border-color:var(--ink)}
.prow .from{transition:opacity .3s}
.prow.is-swapping .from{opacity:0}
@media(max-width:959px){.price__grid{grid-template-columns:1fr;gap:32px}.price__copy{position:static}.prow{padding:24px 0;gap:6px 16px}.prow .h5{font-size:22px;line-height:28px}.prow .from{font-size:24px;line-height:28px}}
/* recent work: photographs, films, reels and websites in one grid, filtered */
.work{background:var(--paper)}
.work__more{margin-top:40px;text-align:center;font-size:14px;line-height:20px;color:var(--t64)}
.work__more .ulink{color:var(--ink)}
.mock{position:relative;margin-top:auto;width:100%;height:84%}
.lap{position:absolute;right:0;bottom:0;width:72%;display:flex;flex-direction:column}
.lap__screen{background:#0E0F0E;border-radius:14px 14px 4px 4px;padding:10px 10px 0;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.lap__screen img{display:block;width:100%;height:auto;border-radius:6px 6px 0 0}
.lap__base{height:10px;margin:0 -3%;border-radius:0 0 8px 8px;background:linear-gradient(#C9CBC7,#9FA29D);box-shadow:0 2px 0 #6F716D}
.ph{position:absolute;left:0;bottom:0;width:21%;background:#0E0F0E;border-radius:14% / 7%;padding:3.5%;box-shadow:0 24px 50px rgba(0,0,0,.55);z-index:2}
.ph img{display:block;width:100%;height:auto;border-radius:9% / 4.5%}

/* questions */
.faq__grid{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.faq__copy{display:flex;flex-direction:column;align-items:flex-start;gap:24px;position:sticky;top:64px}
.faq__copy p{max-width:380px;color:var(--t64)}
.faq__list{display:flex;flex-direction:column}
.faq__list details{border-bottom:1px solid var(--t16)}
.faq__list summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;cursor:pointer;font-family:var(--display);font-weight:400;font-size:18px;line-height:26px;letter-spacing:-.01em}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary i{position:relative;flex:none;width:28px;height:28px}
.faq__list summary i::before,.faq__list summary i::after{content:"";position:absolute;left:7px;top:13.5px;width:14px;height:1.5px;background:var(--ink);transition:transform .3s}
.faq__list summary i::after{transform:rotate(90deg)}
.faq__list details[open] summary i::after{transform:rotate(0)}
.faq__list details p{padding:0 56px 24px 0;color:var(--t64);max-width:620px}
.faq__more{align-self:flex-start;margin-top:28px}
@media(max-width:959px){.faq__grid{grid-template-columns:1fr;gap:32px}.faq__copy{position:static}.faq__list summary{font-size:17px;line-height:24px;padding:18px 0}.faq__list details p{padding:0 0 20px}}

/* the band: type on a warm panel, the signature on the button */
.band{padding:0 var(--gutter) 120px;background:var(--paper)}
.band__in{background:var(--grey);border-radius:var(--r);padding:88px 72px;display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:end}
.band__copy{display:flex;flex-direction:column;gap:20px}
.band__copy .h2{font-size:56px;line-height:60px;letter-spacing:-1.75px;max-width:620px;text-wrap:balance}
.band__side{display:flex;flex-direction:column;gap:28px;padding-bottom:8px}
.band__side p{font-size:18px;line-height:28px;color:var(--t64);max-width:400px}
.band__side .btn-row{gap:28px}
.design+.band{padding-top:120px}
.btn--sig{background:var(--accent);color:#191A18}
.btn--sig:hover{background:#FF7A5E}
@media(max-width:959px){.band{padding-bottom:72px}.design+.band{padding-top:72px}.band__in{grid-template-columns:1fr;gap:28px;padding:48px 24px}.band__copy .h2{font-size:42px;line-height:46px;letter-spacing:-1.25px}.band__side p{font-size:16px;line-height:24px}}

/* the footer: the contact details large, the links in three short columns, then the name across the full width */
.foot{padding:clamp(72px,11vh,120px) 0 28px;background:var(--teal);color:var(--light)}
.foot__top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px 64px;align-items:start}
.foot__k{margin-bottom:18px;font-family:var(--mono);font-size:11px;line-height:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--l64)}
.foot__say{display:grid;justify-items:start;gap:10px}
.foot__mail{font-family:var(--display);font-size:clamp(20px,1.6vw,24px);line-height:1.1;letter-spacing:-.025em;text-decoration:underline;text-decoration-color:var(--l32);text-decoration-thickness:1px;text-underline-offset:.18em;transition:text-decoration-color .3s}
.foot__mail:hover{text-decoration-color:var(--light)}
.foot__tel{font-family:var(--display);font-size:clamp(17px,1.2vw,19px);line-height:1.3;letter-spacing:-.015em;color:var(--l88);transition:color .3s}
.foot__tel:hover{color:var(--light)}
.foot__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.foot__col{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:15px;line-height:22px}
.foot__col a{color:var(--l88);transition:color .3s}
.foot__col a:hover{color:var(--light)}
.foot__word{display:block;width:100%;aspect-ratio:2948/366;margin-top:clamp(72px,12vh,140px);background:linear-gradient(to bottom,rgba(242,238,230,.1),rgba(242,238,230,.035));transition:background .5s;-webkit-mask:url(../img/brand/wordmark-platinum-2x.png) center/100% 100% no-repeat;mask:url(../img/brand/wordmark-platinum-2x.png) center/100% 100% no-repeat}
.foot__word:hover{background:linear-gradient(to bottom,rgba(242,238,230,.16),rgba(242,238,230,.05))}
.foot__legal{display:flex;gap:8px 32px;flex-wrap:wrap;margin-top:28px;padding-top:20px;border-top:1px solid var(--l16);font-family:var(--sans);font-size:13px;line-height:20px;color:var(--l64)}
.foot__legal a{margin-left:auto;color:var(--l64);transition:color .3s}
.foot__legal a:hover{color:var(--light)}
@media(max-width:959px){.foot__top{grid-template-columns:1fr}.foot__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 16px}}
@media(max-width:560px){.foot__mail{font-size:min(20px,5.6vw)}.foot__legal{flex-direction:column}.foot__legal a{margin-left:0}}

.play{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:transparent;border:1.5px solid rgba(242,238,230,.9);color:var(--light);box-shadow:0 4px 18px rgba(0,0,0,.22);filter:drop-shadow(0 1px 3px rgba(0,0,0,.25));transition:background-color .3s,transform .3s var(--ease)}
.play svg{width:20px;height:20px;margin-left:3px}
.play:hover{background:rgba(242,238,230,.16);transform:scale(1.06)}
@media(max-width:767px){.play{width:48px;height:48px}.play svg{width:18px;height:18px}}
/* lightbox */
.lb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(25,26,24,.96);padding:24px}
.lb.is-open{display:flex}
.lb iframe{width:min(1200px,100%);aspect-ratio:16/9;border:0;border-radius:var(--r-s)}
.lb .btn{position:absolute;top:24px;right:24px}
/* ---------- shared across the page set ---------- */
/* the real estate card in the nav carries the pages of the site */
.peek__site{display:block}
.peek__links{display:flex;flex-wrap:wrap;gap:4px 16px;margin:4px 8px 6px;padding-top:12px;border-top:1px solid var(--t8);text-transform:none;letter-spacing:0;font-weight:500;font-size:14px;line-height:20px}
.peek__links a{color:var(--ink);transition:opacity .3s}
.peek__links a:hover{opacity:.56}
/* the nav on a page without a hero */
.top{position:sticky;top:0;z-index:20;background:var(--paper)}
.nav--page{position:relative;top:0;left:0;right:0;color:var(--ink)}
.nav--page .nav__links>a.is-on,.nav--page .nav__item>a.is-on{opacity:1;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
/* the page head: a heading and three facts, then the work */
.phead{padding:72px 0 56px}
.phead__grid{display:grid;grid-template-columns:1fr auto;align-items:end;gap:48px}
.phead .h1{font-size:72px;line-height:76px;letter-spacing:-2.25px}
.phead__facts{display:flex;gap:0;list-style:none}
.phead__facts li{display:flex;flex-direction:column;gap:6px;padding:0 32px;border-left:1px solid var(--t16)}
.phead__facts li:first-child{padding-left:0;border-left:0}
.phead__facts b{font-weight:500;font-size:20px;line-height:26px}
.phead__facts span{font-size:14px;line-height:20px;color:var(--t64)}
.pwork{padding:0 0 120px}
.sub{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:96px 0 32px}
.sub .h3{font-size:44px;line-height:50px;letter-spacing:-.03em}
.sub p{color:var(--t64);font-size:17px;line-height:26px;max-width:560px}
@media(max-width:767px){.sub .h3{font-size:32px;line-height:38px}}
@media(max-width:959px){.phead{padding:40px 0 32px}.phead__grid{grid-template-columns:1fr;gap:28px}.phead .h1{font-size:46px;line-height:50px}.phead__facts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0}.phead__facts li{padding:0 12px}.phead__facts li:first-child{padding-left:0}.phead__facts b{font-size:15px;line-height:20px}.phead__facts span{font-size:12px;line-height:16px}.pwork{padding-bottom:72px}.sub{flex-direction:column;align-items:flex-start;gap:8px;margin:64px 0 20px}.sub p{text-align:left}.top .menu{top:76px}.nav--page{padding:18px var(--gutter)}}
/* photography: a masonry of whole photographs, never cropped */
.masonry{columns:3 320px;column-gap:16px}
.masonry figure{break-inside:avoid;margin:0 0 16px;border-radius:var(--r);overflow:hidden;background:var(--grey)}
.masonry img{display:block;width:100%;height:auto}
.masonry figure:first-child{column-span:all}
.masonry figure:first-child img{aspect-ratio:2/1;object-fit:cover}
@media(max-width:767px){.masonry{columns:2;column-gap:8px}.masonry figure{margin-bottom:8px;border-radius:8px}}
/* film: a lead film, a grid, then the reels */
.films{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fc{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;background:#000;color:var(--light)}
.fc--lead{grid-column:1 / -1;aspect-ratio:2.2/1}
.fc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.fc:hover img{transform:scale(1.03)}
.fc::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(25,26,24,.78) 0%,rgba(25,26,24,.5) 25%,rgba(25,26,24,0) 55%);pointer-events:none}
.fc .film__play{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center}
.fc__name{position:absolute;left:24px;bottom:20px;z-index:2;font-size:15px;line-height:20px;font-weight:500;color:var(--light)}
.reels{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.reels .fc{aspect-ratio:9/16}
@media(max-width:959px){.films{grid-template-columns:1fr;gap:8px}.fc--lead{aspect-ratio:16/10}.reels{grid-template-columns:1fr 1fr;gap:8px}.fc__name{left:16px;bottom:14px;font-size:14px}}
/* websites: one dark panel per site, the laptop and the phone large */
.sf{display:grid;grid-template-columns:4fr 8fr;gap:48px;align-items:end;background:var(--teal);color:var(--light);border-radius:var(--r);padding:56px 56px 0;margin-bottom:16px;overflow:hidden}
.sf__copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-bottom:56px}
.sf__copy .tag{color:var(--l64)}
.sf__copy .h3{font-size:36px;line-height:42px}
.sf__copy p{color:var(--l64);max-width:360px}
.sf .mock{height:560px;margin-top:0}
.sf .lap{width:86%}
.sf .ph{width:20%}
/* the campaign sites side by side: each card stacks its words over the laptop and phone */
@media(min-width:960px){.sf--light{align-items:stretch}.sf--light .sf__copy{align-self:start;padding-bottom:0}.sf--light .mock{align-self:end}}
.sf-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sf-pair .sf{grid-template-columns:1fr;gap:36px;align-items:start;margin-bottom:0;padding:48px 48px 0}
.sf-pair .sf__copy{padding-bottom:0}
.sf-pair .sf .mock{height:auto;aspect-ratio:16/10.5;margin-top:auto}
.sf-pair .sf .lap{width:88%}
.sf-pair .sf .ph{width:21%}
.sf__more{display:flex;justify-content:center;margin-top:40px}
@media(max-width:959px){.sf-pair{grid-template-columns:1fr}.sf-pair .sf{padding:28px 20px 0;gap:24px}.sf{grid-template-columns:1fr;gap:24px;padding:28px 20px 0}.sf__copy{padding-bottom:0}.sf__copy .h3{font-size:28px;line-height:34px}.sf .mock{height:auto;aspect-ratio:16/11}}
/* pricing as a page */
.pnotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:64px}
.pnote{border-top:1px solid var(--t16);padding-top:20px;display:flex;flex-direction:column;gap:6px}
.pnote b{font-weight:500}
.pnote p{font-size:15px;line-height:22px;color:var(--t64)}
.price--page{padding-top:0;background:var(--paper)}
@media(max-width:959px){.pnotes{grid-template-columns:1fr;gap:0;margin-top:40px}.pnote{padding:16px 0}}
/* contact */
.ct{display:grid;grid-template-columns:4fr 8fr;gap:96px;align-items:start}
.ct__side{display:flex;flex-direction:column;gap:28px;position:sticky;top:40px}
.ct__side a.big{font-size:22px;line-height:28px;font-weight:500}
.ct__side dl{display:flex;flex-direction:column;gap:20px}
.ct__side dt{font-family:var(--mono);font-size:12px;line-height:16px;letter-spacing:.75px;text-transform:uppercase;color:var(--t64);margin-bottom:4px}
.ct__side dd{font-size:16px;line-height:24px}
.ct__side dd span{display:block;color:var(--t64);font-size:14px;line-height:20px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:24px 16px}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1 / -1}
.field label,.field legend{font-family:var(--mono);font-size:12px;line-height:16px;letter-spacing:.75px;text-transform:uppercase;color:var(--t64)}
.field input,.field textarea{width:100%;padding:15px 16px;border-radius:var(--r-s);border:1px solid var(--t16);background:var(--card);font:inherit;color:var(--ink);transition:border-color .3s}
.field textarea{min-height:160px;resize:vertical}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--ink)}
.field fieldset{border:0;display:flex;flex-direction:column;gap:12px}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.check{position:relative;cursor:pointer}
.check input{position:absolute;opacity:0;pointer-events:none}
.check span{display:inline-block;padding:10px 16px;border-radius:999px;border:1px solid var(--t16);font-family:var(--sans);font-size:14px;line-height:20px;letter-spacing:0;text-transform:none;color:var(--ink);transition:background-color .25s,color .25s,border-color .25s}
.check input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.check input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.form__foot{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:8px}
.form__foot p{font-size:14px;line-height:20px;color:var(--t64);max-width:420px}
.ct-faq{padding-top:40px}
@media(max-width:959px){.ct{grid-template-columns:1fr;gap:48px}.ct__side{position:static}.form{grid-template-columns:1fr}.form__foot{flex-direction:column;align-items:flex-start}}
/* the lightbox, with a portrait frame for reels */
.lb iframe.is-v{width:auto;height:min(86vh,960px);aspect-ratio:9/16}

/* the real estate menu: they are already on this site, so it shows its pages instead of a preview */
.mega{position:absolute;left:-16px;top:100%;padding-top:10px;width:min(780px,calc(100vw - 64px));opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .25s,transform .25s,visibility 0s .25s;z-index:5}
.nav__item:hover .mega,.nav__item:focus-within .mega{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .25s}
.mega__in{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:8px;background:var(--paper);border-radius:var(--r);box-shadow:0 24px 60px rgba(25,26,24,.3);color:var(--ink);text-transform:none;letter-spacing:0}
.mega__in a{display:flex;flex-direction:column;gap:10px;padding:0 0 10px;border-radius:8px;transition:background-color .3s}
.mega__in a:hover,.mega__in a.is-on{background:var(--grey)}
.mega__pic{display:block;border-radius:8px;overflow:hidden;aspect-ratio:4/3;background:var(--grey)}
.mega__pic img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.mega__in a:hover .mega__pic img{transform:scale(1.05)}
.mega__t{padding:0 10px;font-family:var(--display);font-weight:500;font-size:16px;line-height:20px}

/* the websites tile in the menu shows the whole page, like a small screen */
.mega__pic--site{background:var(--teal);display:flex;align-items:center;justify-content:center;padding:12px}
.mega__pic--site img{height:auto;object-fit:contain;border-radius:4px;box-shadow:0 8px 20px rgba(0,0,0,.35)}
/* websites page: the listing site on a light panel, the campaign sites below, then Tend */
.sf--light{background:var(--grey);color:var(--ink)}
.sf--light .sf__copy .tag,.sf--light .sf__copy p{color:var(--t64)}
.sf__facts{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:4px;padding-top:20px;border-top:1px solid var(--t16);width:100%;max-width:360px}
.sf__facts li{display:flex;justify-content:space-between;gap:16px;font-size:14px;line-height:20px;color:var(--t64)}
.sf__facts b{font-weight:500;color:var(--ink)}
.sf--light .lap__screen{box-shadow:0 30px 70px rgba(25,26,24,.28)}
.tend{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center;margin-top:96px;padding:56px;border-radius:var(--r);background:var(--card);border:1px solid var(--t8)}
.tend__copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.tend__copy img{width:148px;height:auto}
.tend__copy .h3{font-size:34px;line-height:40px}
.tend__copy p{color:var(--t64);max-width:420px}
.tend__shot{position:relative;border-radius:10px;overflow:hidden;box-shadow:0 24px 60px rgba(25,26,24,.22)}
.tend__shot img{display:block;width:100%;height:auto}
@media(max-width:959px){.tend{grid-template-columns:1fr;gap:28px;padding:28px 20px;margin-top:64px}}
/* about */
.ab{display:grid;grid-template-columns:5fr 7fr;gap:96px;align-items:end}
.ab__copy{display:flex;flex-direction:column}
.ab__copy .h2{max-width:560px}
.ab__copy>p{font-size:19px;line-height:30px;color:var(--t64);max-width:600px;margin-top:28px}
.ab .who__stage{background:linear-gradient(to bottom,#2B2D2A,#191A18)}
.ab .who__names p{color:var(--t64)}
.ab .who__names b{color:var(--ink)}
.ab .stats{border-color:var(--t16)}
.ab .stat{border-color:var(--t16)}
.ab .stat>span{color:var(--t64)}
.areas{display:grid;grid-template-columns:4fr 8fr;gap:48px;margin-top:140px}
.areas__list{list-style:none;border-top:1px solid var(--t16)}
.areas__list li{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:24px 0;border-bottom:1px solid var(--t16)}
.areas__list b{font-family:var(--display);font-weight:500;font-size:26px;line-height:32px;letter-spacing:-.5px}
.areas__list span{font-size:14px;line-height:20px;color:var(--t64);text-align:right}
.studios2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:120px}
.st2{position:relative;display:block;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;color:var(--light)}
.st2 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.st2:hover img{transform:scale(1.03)}
.st2::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(25,26,24,.7),rgba(25,26,24,0) 55%)}
.st2__t{position:absolute;left:32px;right:32px;bottom:28px;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.st2__t .h3{font-size:36px;line-height:40px}
.st2__t span{font-size:14px;line-height:20px;color:var(--l88);white-space:nowrap}
@media(max-width:959px){.ab{grid-template-columns:1fr;gap:40px}.ab__copy>p{font-size:17px;line-height:26px}.areas{grid-template-columns:1fr;gap:20px;margin-top:80px}.areas__list li{flex-direction:column;gap:4px}.areas__list b{font-size:21px;line-height:26px}.areas__list span{text-align:left}.studios2{grid-template-columns:1fr;gap:8px;margin-top:72px}.st2__t{left:20px;right:20px;bottom:18px}.st2__t .h3{font-size:28px;line-height:32px}.firms--light{margin-top:72px}}

/* about: the story */
.story2{padding:24px 0 140px}
.story2__grid{display:grid;grid-template-columns:5fr 7fr;gap:96px;align-items:start}
.story2__head{position:sticky;top:48px;display:flex;flex-direction:column;gap:20px}
.story2__head .h2{max-width:460px;text-wrap:balance}
.story2__body{display:flex;flex-direction:column;gap:24px;max-width:640px}
.story2__body p{font-size:19px;line-height:31px;color:var(--t88)}
.story2__body .story2__pull{font-family:var(--display);font-weight:500;font-size:44px;line-height:48px;letter-spacing:-1.25px;color:var(--ink);padding:20px 0 24px;border-left:3px solid color-mix(in srgb,currentColor 32%,transparent);padding-left:28px;margin:8px 0}
@media(max-width:959px){.story2{padding:8px 0 80px}.story2__grid{grid-template-columns:1fr;gap:28px}.story2__head{position:static}.story2__body p{font-size:17px;line-height:27px}.story2__body .story2__pull{font-size:32px;line-height:36px;padding:12px 0 14px 20px}}

/* what we do: the five services as photograph cards in one row, a scrolling row on phones */
.what2{padding:112px 0 120px}
.what2__head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px 64px;align-items:end}
.what2__head .h2{text-wrap:balance;max-width:520px}
.what2__head p{font-size:21px;line-height:32px;color:var(--t64);max-width:680px;text-wrap:pretty}
.pill{display:inline-block;padding:7px 14px;border:1px solid var(--t16);border-radius:999px;font-family:var(--mono);font-size:11px;line-height:14px;letter-spacing:1px;text-transform:uppercase;color:var(--t64)}
.svc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:64px}
.svc__card{display:flex;flex-direction:column;gap:6px}
.svc__pic{display:block;aspect-ratio:4/5;margin-bottom:14px;border-radius:var(--r);overflow:hidden;background:var(--grey)}
.svc__pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.svc__card:hover .svc__pic img{transform:scale(1.03)}
.svc__pic--site{position:relative;background:linear-gradient(160deg,#3A3C38,#232422 60%)}
.svc__pic--site .mock{position:absolute;left:8%;right:8%;top:0;bottom:0;width:auto;height:auto;margin:0}
.svc__pic--site .lap{top:50%;bottom:auto;right:0;width:92%;transform:translateY(-50%)}
.svc__pic--site .lap__screen{padding:6px 6px 0;border-radius:8px 8px 3px 3px}
.svc__pic--site .lap__base{height:6px}
.svc__pic--site .ph{top:56%;bottom:auto;left:0;width:30%;padding:3%}
.svc__pic--site img{width:100%;height:auto;object-fit:fill;transform:none!important}
.svc__t{font-family:var(--display);font-weight:400;font-size:22px;line-height:28px;letter-spacing:-.02em}
.svc__card p{font-size:15px;line-height:22px;color:var(--t64);text-wrap:pretty}
@media(max-width:959px){.what2{padding:88px 0 72px}.what2__head{grid-template-columns:1fr}.what2__head p{font-size:18px;line-height:28px}.svc{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;gap:12px;margin:40px calc(-1 * var(--gutter)) 0;padding:0 var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);scrollbar-width:none}.svc::-webkit-scrollbar{display:none}.svc__card{scroll-snap-align:start}}

/* the brokerages at the foot of pricing */

/* added for the live site: skip link, the enquiry form's states, the privacy page */
.skip-link{position:absolute;left:16px;top:-80px;z-index:100;padding:12px 16px;border-radius:var(--r-s);background:var(--ink);color:var(--paper);font-size:14px;line-height:20px;transition:top .2s}
.skip-link:focus{top:16px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.opt{color:var(--t48);letter-spacing:.5px;margin-left:4px}
.field__err{font-size:14px;line-height:20px;color:#B3321C;min-height:0}
.field__err:empty{display:none}
.field[data-invalid] input,.field[data-invalid] textarea{border-color:#B3321C}
.form__msg{grid-column:1 / -1;padding:16px 20px;border-radius:var(--r-s);font-size:15px;line-height:22px}
.form__msg b{font-weight:500;margin-right:4px}
.form__msg a{text-decoration:underline;text-underline-offset:3px}
.form__msg--ok{background:var(--ink);color:var(--paper)}
.form__msg--bad{background:var(--bad-bg);color:var(--ink)}
.form__foot .ulink{color:var(--ink)}
.btn:disabled{opacity:.6;cursor:default}
.prose{max-width:760px}
.prose .lede{font-size:20px;line-height:30px;margin-bottom:40px}
.prose h2{font-size:24px;line-height:30px;font-weight:500;letter-spacing:-.4px;margin:40px 0 12px}
.prose p{color:var(--t88);margin-bottom:16px}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose__date{margin-top:40px;font-size:14px;color:var(--t64)}

/* ---------- after dark: the theme switch ----------
   A sun on the horizon. Switched on, its rays fold away and it sets below the line, the horizon takes the vermilion
   afterglow and two stars come out; then night falls down the page with a soft edge (morning comes up from
   below on the way back). ink and paper are the page; teal and light stay fixed on the panels that are
   dark in both themes (hero, studio, films, footer). */
.dusk{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--r-s);color:inherit;opacity:.85;transition:opacity .3s}
.dusk:hover{opacity:1}
.dusk:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.dusk svg{width:20px;height:20px;overflow:visible}
.dusk__sunset{transition:transform .9s .15s var(--ease)}
.dusk__sun{fill:currentColor;transition:fill .6s .2s}
.dusk__rays{stroke:currentColor;stroke-width:1.6;stroke-linecap:round;transform-origin:16px 13px;transition:transform .7s var(--ease),opacity .4s}
.dusk__glow{fill:var(--accent);opacity:0;transform-origin:16px 25px;transform:scaleX(.4);transition:opacity .7s .35s,transform .9s .3s var(--ease)}
.dusk__line{stroke:currentColor;stroke-width:1.5;stroke-linecap:round;transition:stroke .6s .3s}
.dusk__star{fill:currentColor;opacity:0;transform:scale(.2);transform-box:fill-box;transform-origin:center;transition:opacity .4s,transform .5s var(--ease)}
.dusk:hover .dusk__rays{transform:rotate(45deg) scale(1.08)}
html[data-theme=dark] .dusk__rays{transform:rotate(-45deg) scale(.4);opacity:0}
html[data-theme=dark] .dusk__sunset{transform:translateY(10px)}
html[data-theme=dark] .dusk__sun{fill:currentColor}
html[data-theme=dark] .dusk__glow{opacity:0;transform:none}
html[data-theme=dark] .dusk__line{stroke:currentColor}
html[data-theme=dark] .dusk__star{opacity:1;transform:none;transition-delay:.65s}
html[data-theme=dark] .dusk__star--2{transition-delay:.85s}
html[data-theme=dark] .dusk:hover .dusk__sunset{transform:translateY(8px)}

html[data-theme=dark]{color-scheme:dark;
  --ink:#ECE8E0; --paper:#121311; --card:#1A1B19; --grey:#1D1E1B; --beige:#252623; --ink-hover:#FFFFFF; --paper-glass:rgba(18,19,17,.9); --bad-bg:#3A1F19;
  --t88:rgba(236,232,224,.88); --t64:rgba(236,232,224,.72); --t48:rgba(236,232,224,.56); --t16:rgba(236,232,224,.14); --t8:rgba(236,232,224,.08); --t4:rgba(236,232,224,.04)}
html[data-theme=dark] .nav--page .nav__logo--ink,html[data-theme=dark] .nav.is-stuck .nav__logo--ink{display:none}
html[data-theme=dark] .nav--page .nav__logo--ivory,html[data-theme=dark] .nav.is-stuck .nav__logo--ivory{display:block}
html[data-theme=dark] .peek__bar,html[data-theme=dark] .win__bar{background:#2B2D2A;border-color:#3A3C38}
html[data-theme=dark] .peek__bar i,html[data-theme=dark] .win__bar i{background:#4A4C48}
html[data-theme=dark] .peek__bar span,html[data-theme=dark] .win__bar span{background:#1D1E1B}
html[data-theme=dark] .size select{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 1l5 5 5-5' fill='none' stroke='%23ECE8E0' stroke-width='1.5'/%3E%3C/svg%3E")}
html[data-theme=dark] .tend__copy img{filter:invert(.92)}
html[data-theme=dark] .studio,html[data-theme=dark] .foot,html[data-theme=dark] .sf:not(.sf--light){box-shadow:inset 0 1px 0 var(--l8)}
html[data-theme=dark] .field__err{color:#FF8A70}
html[data-theme=dark] .field[data-invalid] input,html[data-theme=dark] .field[data-invalid] textarea{border-color:#FF8A70}

/* night falls from the top; morning rises from below */
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:none;mix-blend-mode:normal}
html[data-fall=down]::view-transition-new(root){-webkit-mask:linear-gradient(to bottom,#000 40%,transparent 60%) 0 100%/100% 300% no-repeat;mask:linear-gradient(to bottom,#000 40%,transparent 60%) 0 100%/100% 300% no-repeat;animation:dusk-fall 1.1s cubic-bezier(.45,0,.2,1) forwards}
html[data-fall=up]::view-transition-new(root){-webkit-mask:linear-gradient(to top,#000 40%,transparent 60%) 0 0/100% 300% no-repeat;mask:linear-gradient(to top,#000 40%,transparent 60%) 0 0/100% 300% no-repeat;animation:dusk-rise 1.1s cubic-bezier(.45,0,.2,1) forwards}
@keyframes dusk-fall{from{-webkit-mask-position:0 100%;mask-position:0 100%}to{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes dusk-rise{from{-webkit-mask-position:0 0;mask-position:0 0}to{-webkit-mask-position:0 100%;mask-position:0 100%}}
@media(prefers-reduced-motion:reduce){.dusk__sunset,.dusk__sun,.dusk__rays,.dusk__glow,.dusk__line,.dusk__star{transition:none}}

/* Geist, the design studio's typeface, in its lighter weights: large type at 300, small headings at 400 */
:root{--display:"Geist",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--sans:var(--display)}
h1,h2,h3,.h1,.h2,.h3{font-weight:300}
.h1{letter-spacing:-.04em}.h2{letter-spacing:-.035em}.h3{letter-spacing:-.03em}
.h5{font-weight:400;letter-spacing:-.02em}
.hero__h{font-weight:300;letter-spacing:-.045em;line-height:1.02}
.menu__links a,.story2__body .story2__pull,.voice__copy blockquote{font-weight:300}
.areas__list b,.mega__t{font-weight:400}
@media(max-width:767px){.h1,.h2,.h3{letter-spacing:-.035em}}

/* ---------- the type scale, shared with the design studio (ad.css carries the same values) ----------
   Display 80 · H1 64 · H2 44 · H3 28 · card 22 · lead 20 · body 17 · small 14 · label mono 12.
   Headings at 300, reading text at 400, 500 only for buttons and links. Tracking in em so it holds on a phone.
   :root raises each rule just above the section rules it replaces */
:root{--t-display:80px;--t-h1:64px;--t-h2:44px;--t-h3:28px;--t-card:22px;--t-lead:20px;--t-body:17px;--t-small:14px;--t-label:12px;
  --lh-display:1;--lh-h1:1.03;--lh-h2:1.09;--lh-h3:1.21;--lh-card:1.27;--lh-lead:1.55;--lh-body:1.59;--lh-small:1.5}
@media(max-width:767px){:root{--t-display:44px;--t-h1:40px;--t-h2:30px;--t-h3:22px;--t-card:20px;--t-lead:18px;--t-body:16px;--t-label:11px;
  --lh-display:1.05;--lh-h1:1.05;--lh-h2:1.13;--lh-h3:1.27;--lh-card:1.3;--lh-lead:1.56;--lh-body:1.56}}
:root body{font-size:var(--t-body);line-height:var(--lh-body)}
:root .hero__h{font-size:var(--t-display);line-height:var(--lh-display);letter-spacing:-.045em;font-weight:300}
:root .h1,:root .phead .h1{font-size:var(--t-h1);line-height:var(--lh-h1);letter-spacing:-.04em;font-weight:300}
:root .h2,:root .band__copy .h2,:root .studio__copy .h2,:root .ab__copy .h2,:root .sub .h3{font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:-.03em;font-weight:300}
:root .h3,:root .sf__copy .h3,:root .st2__t .h3,:root .story2__body .story2__pull,:root .prow .from{font-size:var(--t-h3);line-height:var(--lh-h3);letter-spacing:-.02em}
:root .story2__body .story2__pull{font-weight:300}
:root .prow .from{font-weight:400}
:root .h5,:root .prow .h5,:root .design__pair .card .h5,:root .svc__t,:root .areas__list b{font-size:var(--t-card);line-height:var(--lh-card);letter-spacing:-.02em;font-weight:400}
/* the quote is the one display line inside a section: H2 size, set a touch looser for three lines */
:root .voice__copy blockquote{font-size:var(--t-h2);line-height:1.2;letter-spacing:-.025em;max-width:30ch;margin:0 auto}
:root .hero__sub,:root .what2__head p,:root .ab__copy>p,:root .band__side p,:root .phead__facts b,:root .faq__list summary{font-size:var(--t-lead);line-height:var(--lh-lead);font-weight:400}
:root .faq__list summary{letter-spacing:-.01em}
:root .story2__body p,:root .studio__copy>p,:root .prow p,:root .sub p,:root .faq__list details p,:root .faq__copy p,:root .price__copy p{font-size:var(--t-body);line-height:var(--lh-body)}
/* reading width: 32em holds 65 to 70 characters of Geist at any size */
:root .story2__body p,:root .prow p,:root .sub p,:root .faq__list details p,:root .what2__head p,:root .design__note p,:root .ab__copy>p,:root .studio__copy>p{max-width:32em}
:root .faq__list summary{max-width:34em}
:root .addon b,:root .addon .from{font-weight:400}
:root .addon p,:root .svc__card p,:root .price__note,:root .phead__facts span,:root .design__pair .card p,:root .design__note p,:root .foot__col,:root .work__more{font-size:var(--t-small);line-height:var(--lh-small)}
:root .btn,:root .ulink{font-size:15px;line-height:20px}
/* one label: mono 12, tracked 0.08em, upper case */
:root .tag,:root .foot__k,:root .size label,:root .field label,:root .field legend,:root .ct__side dt{font-family:var(--mono);font-size:var(--t-label);line-height:16px;letter-spacing:.08em;text-transform:uppercase;font-weight:400}
:root .opt{letter-spacing:.08em}
/* the brokerages are names, not headings: 20 at 400 */
:root .foot__mail,:root .ct__side a.big{font-size:var(--t-card);line-height:var(--lh-card);font-weight:400}
:root .foot__tel,:root .ct__side dd,:root .who__names b{font-size:var(--t-body);line-height:var(--lh-body)}
:root .who__names b{font-weight:400}
:root .pnote p,:root .ct__side dd span{font-size:var(--t-small);line-height:var(--lh-small)}
:root .foot__legal{font-size:13px;line-height:20px}

/* ---------- spacing, on one 8-point scale shared with the design studio ----------
   4 · 8 · 16 · 24 · 32 · 48 · 64 · 96 · 120. Sections 120 apart (72 on a phone); label to heading 16,
   heading to text 24, card title to text 8, text to button 32; buttons 48 high with 24 at the sides. */
@media(max-width:959px){:root{--gutter:24px}}
/* sections */
:root .what2,:root .voice{padding-top:120px;padding-bottom:120px}
:root .story2{padding-bottom:120px}
:root .phead{padding-bottom:64px}
:root .foot{padding-top:96px;padding-bottom:32px}
:root .foot__word{margin-top:120px}
:root .foot__legal{padding-top:24px}
@media(max-width:767px){:root .what2,:root .voice{padding-top:72px;padding-bottom:72px}:root .story2{padding-bottom:72px}:root .foot{padding-top:72px}:root .foot__word{margin-top:72px}}
/* the hero: H1, 24, subtitle, 32, buttons, 64, the facts strip (56 high) */
:root .hero__sub{margin-top:24px}
:root .hero__body .btn-row{margin-top:32px}
:root .hero__body{bottom:120px}
:root .hero__facts{padding:20px 0;line-height:16px}
@media(max-width:767px){:root .hero__body{padding:0 var(--gutter);bottom:136px}:root .hero__facts{margin:0 var(--gutter);padding:16px 0 24px}}
/* heading to text */
:root .what2__head,:root .sub{row-gap:24px;gap:24px}
:root .band__copy,:root .story2__head{gap:16px}
:root .ab__copy>p,:root .studio__copy>p{margin-top:24px}
:root .design__copy{gap:32px}
:root .sub{margin:96px 0 32px}
@media(max-width:959px){:root .sub{margin:64px 0 24px}}
:root .sf__copy{gap:8px}
:root .sf__copy .tag{margin-bottom:8px}
:root .sf__copy>a{margin-top:16px}
/* components */
:root .btn{min-height:48px;padding:0 24px}
:root .svc{gap:24px}
:root .svc__card{gap:8px}
:root .svc__pic{margin-bottom:8px}
:root .design__pair .card{padding:32px;gap:8px}
:root .addon{padding:16px 0;row-gap:4px}
:root .faq__list summary{padding:24px 0}
@media(max-width:959px){:root .faq__list summary{padding:16px 0}}
:root .faq__more{margin-top:32px}
:root .seg span{padding:12px 8px;line-height:16px}
:root .check span{padding:12px 16px;line-height:16px}
:root .field input,:root .field textarea{padding:16px;line-height:22px}
:root .menu{padding:32px}
:root .phead__facts li{gap:8px}
:root .band__in{padding:96px 72px}
@media(max-width:959px){:root .band__in{padding:48px 24px}:root .sf,:root .sf-pair .sf{padding:24px 24px 0}}
/* icons: 44-point boxes, 10 to 12 points of room */
:root .nav__menu{width:44px;height:44px;padding:0 10px;margin-right:-10px}
:root .dusk{width:44px;height:44px}
@media(max-width:959px){:root .nav{gap:8px}}
@media(max-width:767px){:root .play svg{width:16px;height:16px;margin-left:2px}}
:root .voice__ctl .ulink{padding:12px 0}
:root .voice__ctl .ulink::after{bottom:10px}
:root .ssw--menu a{padding:10px 0}
:root .ssw--menu a::after{bottom:2px}
:root .foot__say,:root .foot__col{gap:8px}
:root .foot__k{margin-bottom:16px}
:root .areas{margin-top:120px}
:root .who__names{padding:0 40px}
@media(max-width:959px){:root .areas{margin-top:72px}}
/* exempt from the scale: the 2px hairline under text links, and the bezels drawn on the laptop and phone mock-ups */
@media(max-width:959px){:root .prow{row-gap:8px}:root .nav--page{padding-top:16px;padding-bottom:16px}:root .story2__body .story2__pull{padding:16px 0 16px 24px}}
/* each sentence of the hero headline balanced on its own, so no word is left alone on a line */
:root .hero__h span{display:block;text-wrap:balance}

/* ---------- colour: three surfaces in the dark theme, the footer the darkest; the size options at 70% in the light theme ---------- */
html[data-theme=dark] .foot{background:#0B0C0B}
html:not([data-theme=dark]) .seg span{color:rgba(25,26,24,.7)}
html:not([data-theme=dark]) .seg input:checked+span{color:var(--ink)}
:root .voice .tag{color:var(--light)}

/* ---------- photo-first, in the language of the design studio ----------
   Square corners, no grey boxes, photographs edge to edge with 2px seams, hairlines between sections,
   no labels above headings. */
:root{--r:0px;--r-s:0px}
:root .menu,:root .seg span,:root .check span,:root .pill,:root .mega__in a,:root .mega__pic{border-radius:0}
/* the brokerages: one line, not a marquee */
/* sections meet at a hairline instead of a change of fill */
:root .price{background:transparent;border-top:1px solid var(--t16)}
:root .voice,:root .faq{border-top:1px solid var(--t16)}
/* the work: one photograph across the page, then pairs */
:root .work{padding:120px 0}
.work__head{margin-bottom:48px}
.reel{display:grid;gap:2px}
.reel__pair{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.reel figure{position:relative;margin:0;overflow:hidden;background:var(--grey)}
.reel img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.reel figure:hover img{transform:scale(1.02)}
.reel__full{aspect-ratio:2/1}
.reel__half{aspect-ratio:3/2}
.reel__film .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2}
.reel__film .play:hover{transform:translate(-50%,-50%) scale(1.06)}
.reel__film::after{content:"";position:absolute;inset:0;background:rgba(10,10,12,.18);pointer-events:none;transition:background .4s}
.reel__film:hover::after{background:rgba(10,10,12,.08)}
:root .work__more{margin-top:40px;text-align:center}
@media(max-width:767px){:root .work{padding:72px 0}.work__head{margin-bottom:32px}.reel__pair{grid-template-columns:1fr}.reel__full{aspect-ratio:4/3}}
/* the testimonial: type on the page */
:root .voice{padding:120px 0;color:var(--ink);text-align:center}
:root .voice__copy blockquote{color:var(--ink)}
:root .voice .tag,:root .voice__copy figcaption .tag{color:var(--t64)}
:root .voice__copy figcaption b{color:var(--ink)}
:root .voice__ctl .ulink{color:var(--ink)}
@media(max-width:767px){:root .voice{padding:72px 0}}
/* the close and the builders' cards: hairlines, no panels */
:root .band__in{background:transparent;border-top:1px solid var(--t16);padding:96px 0 0}
@media(max-width:959px){:root .band__in{padding:48px 0 0}}
:root .design__pair .card{background:transparent;padding:24px 0 0;border-top:1px solid var(--t16)}

/* websites: the title and one line, then each site as screenshots first and its name beneath, like the work on
   the home page; no sub-headings, no rules */
.phead__grid--lede{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:end;gap:24px 64px}
.phead__lede{max-width:32em;font-size:var(--t-lead);line-height:var(--lh-lead);color:var(--t64)}
/* each site is one panel in its own brand colour: what it is and what was done across the top, then the desktop
   screen with the phone overlapping its corner */
.site{background:var(--stage);color:var(--light);overflow:hidden}
.site+.site{margin-top:16px}
.sites{margin-top:32px}
.site__copy{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px 64px;align-items:end;padding:48px 48px 0}
.site__kind{font-family:var(--mono);font-size:var(--t-label);line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--l72,rgba(242,238,230,.72));margin-bottom:12px}
.site__name{font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:-.03em;font-weight:300}
.site__copy p:not(.site__kind){max-width:32em;color:rgba(242,238,230,.78)}
.site__copy .ulink{display:inline-block;margin-top:16px;color:var(--light)}
.site__stage{position:relative;display:block;aspect-ratio:16/8}
.site__stage img{position:absolute;display:block;object-fit:cover;object-position:top;box-shadow:0 30px 80px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.06);transition:transform 1.2s var(--ease)}
.site__desk{left:14%;top:12%;width:66%;aspect-ratio:16/10}
.site__phone{right:9%;top:31%;width:15%;aspect-ratio:390/844;border-radius:14px}
.site:hover .site__desk{transform:translateY(-6px)}
.site:hover .site__phone{transform:translateY(-12px)}
@media(max-width:959px){.site__copy{grid-template-columns:1fr;padding:32px 24px 0}.site__stage{aspect-ratio:4/3}.site__desk{left:6%;top:12%;width:78%}.site__phone{right:5%;top:34%;width:22%;border-radius:8px}}
@media(max-width:959px){.phead__grid--lede{grid-template-columns:1fr}}
.pwork--reel{padding-top:0}

/* pricing: one list of prices; the terms below it in small type, so the prices are the only large figures */
.pterms{margin-top:48px;border-top:1px solid var(--t16)}
.pterms>div{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:8px 32px;padding:16px 0;border-bottom:1px solid var(--t16)}
.pterms dt{font-size:var(--t-small);line-height:var(--lh-small);color:var(--ink)}
.pterms dd{font-size:var(--t-small);line-height:var(--lh-small);color:var(--t64);max-width:40em}
@media(max-width:767px){.pterms>div{grid-template-columns:1fr}}
:root .price--page{border-top:0}
/* the pricing page: the title heads the left column, level with the size row, so the page opens on the prices */
:root .price--page{padding-top:72px}
:root .price--page .price__copy{gap:24px;top:112px}
:root .price--page .price__copy .h1{margin-bottom:8px}
:root .price--page .seg{margin-top:16px}
@media(max-width:959px){:root .price--page{padding-top:40px}}

/* after the work: the quote in its own pool of light (the raised surface, faded to the page at both edges so
   there is no line), then one photograph across the page before the questions */
:root .voice{border-top:0;background:linear-gradient(to bottom,var(--paper) 0%,var(--grey) 30%,var(--grey) 70%,var(--paper) 100%)}
.pause{margin:0;aspect-ratio:21/9;overflow:hidden;background:var(--grey)}
.pause img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.pause+.faq{border-top:0}
@media(max-width:767px){.pause{aspect-ratio:4/3}}