/* The home page, laid out like a minimal presentation: full-width spreads that split into white and soft grey, wide-spaced serif titles,
   small light text, and one or two quiet pictures at a time. Square corners; no colour but grey and white. */
:root{--white:#fbfbfa;--grey:#e7e5e1;--deep:#d9d6d0;--ink:#2b2a28;--title:#55534e;--mute:#66635d;--hl:#cfccc6;--serif:'Cormorant Garamond','Cormorant','Garamond','Times New Roman',serif;--sans:'Jost','Helvetica Neue',Arial,sans-serif;--pad:clamp(28px,5.5vw,96px)}
*{box-sizing:border-box;border-radius:0}
html{overflow-anchor:none;scroll-behavior:smooth;scroll-padding-top:60px}
body{margin:0;background:var(--white);color:var(--mute);font:300 13px/1.95 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
b{font-weight:500;color:var(--ink)}
.btn{display:inline-block;border:1px solid var(--ink);background:var(--ink);color:#fff;padding:14px 24px;font:400 10.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .25s,color .25s,transform .25s}
.btn:hover{background:transparent;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}.btn.ghost:hover{background:var(--ink);color:#fff}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}

/* the header that stays with you, with a line that fills as you read */
.nav{position:sticky;top:0;z-index:30;background:rgba(251,251,250,.96);border-bottom:1px solid var(--hl)}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);transform:scaleX(var(--scroll,0));transform-origin:left;pointer-events:none}
.navstrip{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--pad);font:400 10.5px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase}
.navstrip>*{padding:28px 0;transition:padding .35s ease-out}.nav.small .navstrip>*{padding:14px 0}
.navstrip .brand{display:inline-flex;align-items:center}.navstrip .brand img{height:30px;width:auto;transition:height .35s ease-out}.nav.small .navstrip .brand img{height:21px}
.navstrip nav{display:flex;gap:clamp(20px,3.4vw,52px)}
.navstrip nav a,.navstrip .acts a{text-decoration:none;color:var(--title);transition:color .2s}.navstrip nav a:hover,.navstrip .acts a:hover{color:var(--ink)}
.navstrip .acts{display:flex;justify-content:flex-end;gap:26px;align-items:center}
.navstrip .acts .join{border:1px solid var(--ink);background:var(--ink);padding:0;color:#fff;overflow:hidden;display:inline-block}
.navstrip .acts a.join:hover{color:#fff}
.join span{padding:10px 18px}.nav.small .join span{padding:8px 16px}
.join span{display:block;position:relative;line-height:1.3;white-space:nowrap;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.join span::after{content:attr(data-t);position:absolute;left:0;top:100%;padding:inherit}
.join:hover span,.join:focus-visible span{transform:translateY(-100%)}

main{padding:0}
.sheet{width:100%;margin:0;background:var(--white)}

/* the cover: a large photograph, a grey card with the title laid over its corner, and a quiet column of words */
.hero{position:relative;height:calc(100svh - 93px);min-height:560px;max-height:960px;overflow:hidden;background:var(--white)}
.hero .himg{position:absolute;left:0;top:0;bottom:0;width:60%;overflow:hidden}
.hero .himg img{width:100%;height:100%;object-fit:cover;object-position:53% 50%}
.hcard{position:absolute;left:0;bottom:0;width:40%;min-height:34%;background:var(--grey);padding:clamp(24px,3.4vw,52px) var(--pad) 112px;display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(14px,2vw,28px)}
.hcard .tag{font:400 10px/1.6 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.hero h1{margin:0;font:400 clamp(26px,3.3vw,52px)/1.28 var(--serif);letter-spacing:.3em;text-transform:uppercase;color:var(--title)}
.hero h1 span{display:block}
.hcopy{position:absolute;right:0;top:0;bottom:0;width:40%;display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad) 0 clamp(24px,4vw,64px);max-width:none}
.hcopy p{margin:0 0 26px;max-width:340px}
.hbtns{display:flex;gap:12px;flex-wrap:wrap}.hbtns .btn{padding:14px 20px}

/* a spread: title and words on one side, pictures on the other; the white and grey swap from one spread to the next */
.cols{display:grid;grid-template-columns:minmax(300px,40%) 1fr;grid-template-rows:auto 1fr;grid-template-areas:"vt art" "txt art";min-height:min(86vh,780px)}
.vt{grid-area:vt}.txt{grid-area:txt}.art{grid-area:art}
.vt,.txt{background:var(--white)}.art{background:var(--grey)}
.vt{margin:0;padding:clamp(48px,7vw,110px) var(--pad) 0;font:400 clamp(24px,2.7vw,42px)/1.3 var(--serif);letter-spacing:.32em;text-transform:uppercase;color:var(--title)}
.txt{padding:clamp(22px,2.6vw,38px) var(--pad) clamp(40px,6vw,88px);display:flex;flex-direction:column;max-width:none}
.txt p{margin:0 0 14px;max-width:420px}
.txt .lead{font:400 clamp(20px,1.9vw,27px)/1.35 var(--serif);color:var(--ink);margin-bottom:22px;letter-spacing:.01em}
.txt .links{margin-top:auto;padding-top:20px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:0;max-width:420px}
.txt .links a{font:400 10.5px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:4px}
.txt .links span{font-size:11px;color:var(--mute)}
.art{padding:clamp(28px,5vw,88px);display:flex;align-items:center;justify-content:center}
#agencies .cols,#safety .cols,#contact .cols{grid-template-columns:1fr minmax(300px,40%);grid-template-areas:"art vt" "art txt"}
#agencies .vt,#agencies .txt,#safety .vt,#safety .txt,#contact .vt,#contact .txt{background:var(--grey)}
#agencies .art,#safety .art,#contact .art{background:var(--white)}
.cols.rev{grid-template-columns:1fr minmax(300px,40%);grid-template-areas:"art vt" "art txt"}
.rev .vt,.rev .txt{background:var(--grey)}.rev .art{background:var(--white)}

.grid9{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,.7vw,12px);width:min(100%,900px)}
.grid9 img{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 25%;filter:grayscale(1)}
#talent .art{padding:clamp(20px,3vw,56px)}

.slider{width:100%;max-width:860px;position:relative}
.slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.slides::-webkit-scrollbar{display:none}
.slides figure{flex:0 0 100%;margin:0;scroll-snap-align:start;padding:0 2px 26px}
.slides img{width:100%;background:#fff;box-shadow:0 18px 40px -26px rgba(43,42,40,.45)}
.slides figcaption{padding:14px 0 0;color:var(--mute);font-size:12px;line-height:1.6}
.sl-bar{display:flex;align-items:center;gap:18px;margin-top:6px;font:400 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink)}
.sl-bar button{width:38px;height:38px;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;font:300 16px/1 var(--sans);transition:background .25s,color .25s}
.sl-bar button:hover{background:var(--ink);color:#fff}
.sl-dots{display:flex;gap:8px;margin-left:auto}
.sl-dots i{display:block;width:26px;height:2px;background:var(--hl);position:relative;overflow:hidden;cursor:pointer}
.sl-dots i::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left}
.sl-dots i.on::after{transform:scaleX(1);transition:transform var(--dur,5s) linear}
.sl-dots i.done::after{transform:scaleX(1)}

/* the portal: the title and words across the top, three screens below on grey */
#portal .cols{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;grid-template-areas:"vt txt" "art art";min-height:0}
#portal .vt{padding-bottom:clamp(30px,4vw,56px)}#portal .txt{padding-top:clamp(52px,7.4vw,114px);justify-content:flex-start}
.shots{display:grid;gap:clamp(14px,2vw,32px);width:100%}.shots.three{grid-template-columns:repeat(3,1fr);align-self:stretch;max-width:1300px}
.shots figure{margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.shots figcaption{font:400 10.5px/1.6 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}.shots figcaption span{display:block;margin-top:8px;font-weight:300;text-transform:none;letter-spacing:0;color:var(--mute);font-size:12px}
.shots img{width:100%;background:#fff;box-shadow:0 18px 40px -26px rgba(43,42,40,.45)}

/* designs: the title and words across the top, seven cards in a row */
#designs .cols{grid-template-columns:calc(var(--pad) + 400px + clamp(32px,4.5vw,72px)) 1fr;grid-template-rows:auto auto auto;grid-template-areas:"vt txt" "view txt" "art art";min-height:0}
#designs .vt{grid-area:vt}#designs .txt{grid-area:txt;padding-top:clamp(52px,7.4vw,114px);align-self:stretch}
/* the design switcher under the title: one card large, crossfading through the designs */
.dview{grid-area:view;background:var(--white);padding:clamp(28px,3.4vw,52px) var(--pad) clamp(40px,5vw,72px);min-width:0}
.dview:empty{display:none}
.dv-stage{position:relative;display:block;width:min(100%,400px);aspect-ratio:3/4;background:var(--grey);overflow:hidden;box-shadow:0 22px 44px -28px rgba(43,42,40,.5)}
.dv-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transform:scale(1.025);transition:opacity .9s ease,transform 1.4s ease}
.dv-stage img.on{opacity:1;transform:none}
.dv-ctl{margin-top:clamp(24px,3vw,44px);padding-top:22px;border-top:1px solid var(--hl);max-width:640px}
.dview .dv-ctl{margin-top:0;padding-top:0;border-top:0}
.dv-cap{display:flex;gap:14px;align-items:baseline;margin:0 0 6px;font-size:10.5px;font-family:var(--sans);font-weight:400;line-height:1.4;letter-spacing:.24em;text-transform:uppercase;color:var(--ink)}
.dv-cap span{color:var(--mute)}
.dv-desc{margin:0 0 20px;max-width:440px;font-size:12px;line-height:1.6;color:var(--mute)}
.dv-tabs{display:flex;flex-wrap:wrap;gap:8px 22px}
.dv-tabs button{position:relative;padding:8px 0;border:0;background:none;font:300 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);cursor:pointer}
.dv-tabs button.on{color:var(--ink)}
.dv-tabs button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left}
.dv-tabs button.on::after{transform:scaleX(1);transition:transform var(--dur,4.5s) linear}
.dv-tabs button.done::after{transform:scaleX(1)}
#designs .txt p{max-width:640px}
.dcols{grid-area:art;display:grid;grid-template-columns:repeat(7,1fr);min-width:0;background:var(--grey);padding:0 var(--pad);gap:0}
.dcol{display:flex;flex-direction:column;text-decoration:none;color:inherit;min-width:0;padding:clamp(24px,3vw,48px) clamp(8px,1vw,16px) 0;border-left:1px solid #fff}
.dcol:first-child{border-left:0;padding-left:0}.dcol:last-child{padding-right:0}
.dcol .dn{font:400 10px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink)}
.dcol .dd{margin:6px 0 16px;font-size:11px;line-height:1.55;color:var(--mute)}
.dcol img{margin-top:auto;width:100%;max-width:none;aspect-ratio:3/4;object-fit:cover;object-position:top;box-shadow:0 -10px 30px -22px rgba(43,42,40,.5)}
.dcol .open{position:absolute;left:-9999px}
.dcol:hover .dn{text-decoration:underline}

/* how it works */
#how .cols{grid-template-columns:repeat(3,1fr);grid-template-rows:auto 1fr;grid-template-areas:none;min-height:min(70vh,560px)}
#how .vt{grid-area:auto;grid-column:1/-1}
.step{grid-area:auto;padding:clamp(24px,3vw,44px) var(--pad);display:flex;flex-direction:column;background:var(--grey)}
.step:nth-child(3){background:var(--deep)}.step:nth-child(4){background:var(--grey)}
.step .num{font:400 10.5px/1 var(--sans);letter-spacing:.3em;color:var(--mute)}
.step h3{margin:auto 0 14px;font:400 clamp(24px,2.5vw,38px)/1.2 var(--serif);text-transform:uppercase;letter-spacing:.2em;color:var(--title)}
.step p{margin:0;max-width:280px}
.bleed{display:block;width:100%;height:100%;min-height:360px;object-fit:cover;object-position:50% 50%}
#safety .art{padding:0}
.solo img{width:min(100%,420px);aspect-ratio:3/4;object-fit:cover;filter:grayscale(1)}

/* pricing */
#pricing .cols{grid-template-columns:repeat(3,1fr);grid-template-rows:auto 1fr;grid-template-areas:none;min-height:min(78vh,640px)}
#pricing .vt{grid-area:auto;grid-column:1/-1}
.plan{padding:clamp(24px,3vw,44px) var(--pad);display:flex;flex-direction:column;background:var(--grey)}
.plan:nth-child(3){background:var(--deep)}.plan:nth-child(4){background:var(--grey)}
.plan .pn{font:400 10.5px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase}
.plan .price{margin:16px 0 22px;font:400 clamp(26px,2.9vw,44px)/1.1 var(--serif);text-transform:uppercase;letter-spacing:.14em;color:var(--title)}
.plan ul{list-style:none;margin:0 0 26px;padding:0}.plan li{padding:9px 0;border-top:1px solid var(--hl)}.plan li:last-child{border-bottom:1px solid var(--hl)}
.plan .btn{margin-top:auto;align-self:flex-start}

/* questions */
#faq .cols{grid-template-columns:minmax(300px,40%) 1fr;grid-template-rows:1fr;grid-template-areas:none;min-height:min(80vh,680px)}
#faq .vt{grid-area:auto;background:var(--white)}
.qs{background:var(--grey);padding:clamp(36px,6vw,96px) var(--pad)}
.qs details{border-bottom:1px solid var(--hl)}.qs details:first-child{border-top:1px solid var(--hl)}
.qs summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;justify-content:space-between;gap:16px;font:400 11px/1.6 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.qs summary::-webkit-details-marker{display:none}
.qs summary::after{content:"+";font-weight:300;font-size:18px;line-height:1}.qs details[open] summary::after{content:"–"}
.qs details p{margin:0;padding:0 0 22px;max-width:620px}

/* contact */
#contact .art{align-items:center}
.form{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px;width:100%;max-width:640px}
.form label{display:flex;flex-direction:column;gap:8px;font:400 10px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.form .wide,.form .status,.form .btn{grid-column:1/-1}
.form input,.form select,.form textarea{font:300 14px/1.5 var(--sans);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--hl);padding:9px 0;border-radius:0;letter-spacing:0;text-transform:none;width:100%}
.form textarea{border:1px solid var(--hl);padding:12px}
.form{align-items:start}.form label{min-width:0}.form input,.form select{box-sizing:border-box;height:44px;margin:0;padding:0;line-height:1.2;-webkit-appearance:none;appearance:none}.form select{padding-right:24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%232b2a28' stroke-width='1.2'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 2px center}.form textarea{box-sizing:border-box}.form label:has(input[type=email]){grid-column:1/-1}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--ink)}
.form .btn{justify-self:start}
/* the confirmation that replaces the contact form once it is sent */
.sent{width:100%;max-width:640px;padding:clamp(28px,4vw,48px) 0;border-top:1px solid var(--hl);border-bottom:1px solid var(--hl);animation:sent-in .7s cubic-bezier(.2,.7,.1,1) both}
.sent-k{margin:0 0 22px;font:400 10px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.sent-h{margin:0 0 22px;font:400 clamp(24px,2.6vw,38px)/1.2 var(--serif);letter-spacing:.2em;text-transform:uppercase;color:var(--title)}
.sent-p{margin:0 0 4px;font:300 15px/1.6 var(--sans);color:var(--mute)}
.sent-to{margin:0 0 22px;font:400 15px/1.6 var(--sans);color:var(--ink);word-break:break-all}
.sent-s{margin:0 0 26px;font:300 13px/1.6 var(--sans);color:var(--mute)}
.sent-again{padding:0 0 4px;border:0;border-bottom:1px solid var(--ink);background:none;color:var(--ink);font:400 10.5px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;cursor:pointer;border-radius:0}
@keyframes sent-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sent{animation:none}}

.hp{position:absolute!important;left:-9999px!important}
.status{margin:0;min-height:1.4em;color:var(--mute)}.status.err{color:var(--ink);text-decoration:underline}

/* footer and the call to action */
.foot{width:100%;margin:0;padding:clamp(40px,6vw,88px) var(--pad) 104px;background:#1d1d1c;color:#fff;font-size:14px}
.foot a{color:inherit;text-decoration:none}
.ft-top{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;padding-bottom:clamp(40px,7vw,110px);border-bottom:1px solid rgba(255,255,255,.22)}
.ft-id{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,32px)}.ft-m{display:block;width:clamp(48px,5vw,72px);height:auto}
.ft-tag{margin:0;max-width:260px;font-size:13px;line-height:1.7;color:#a9a8a4}
.ft-mark{display:block;width:min(46vw,620px)}.ft-mark img{display:block;width:100%;height:auto;filter:invert(1) brightness(2)}
.ft-main{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,6vw,120px);padding:clamp(32px,4.4vw,64px) 0 clamp(40px,6vw,96px)}
.ft-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ft-cols h2{margin:0 0 22px;font:400 16px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:#fff}
.ft-cols a{display:block;padding:5px 0;color:#a9a8a4;font-size:15px;line-height:1.4;transition:color .25s ease}
.ft-cols a:hover{color:#fff}
.ft-cta p{margin:0 0 clamp(28px,4vw,56px);max-width:400px;font-size:16px;line-height:1.6;color:#fff}
.ft-big{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.7);font:300 clamp(22px,2.6vw,38px)/1.2 var(--sans);color:#fff;transition:padding .35s ease}
.ft-big i{font-style:normal;transition:transform .35s ease}.ft-big:hover i{transform:translateX(8px)}
.ft-small{display:inline-block;margin-top:18px;font-size:13px;color:#a9a8a4;border-bottom:1px solid #6e6d69;padding-bottom:2px}.ft-small:hover{color:#fff}
.ft-bot{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;font-size:13px;color:#fff}
.ft-bot p{margin:0}.ft-bot a{color:#fff}.ft-up{white-space:nowrap}.ft-up:hover{text-decoration:underline}
.foot a:focus-visible{outline:1px solid #fff;outline-offset:3px}
.cta{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:25;width:min(760px,calc(100% - 36px));display:flex;align-items:center;justify-content:space-between;gap:22px;background:rgba(251,251,250,.97);border:1px solid var(--hl);padding:10px 12px 10px 20px;box-shadow:0 14px 34px -20px rgba(43,42,40,.5);font:300 12px/1.4 var(--sans);transition:width .45s ease-out,bottom .45s ease-out,padding .45s ease-out,box-shadow .45s ease-out,border-color .45s ease-out}
.cta.full{width:100%;bottom:0;justify-content:center;gap:clamp(20px,3vw,48px);padding:14px var(--pad);border-width:1px 0 0;box-shadow:0 -12px 30px -24px rgba(43,42,40,.4)}
.cta b{font-weight:500;text-transform:uppercase;letter-spacing:.16em;font-size:10.5px}
.cta .btn{padding:12px 16px;white-space:nowrap}

/* a phone: everything stacks, white and grey in turn */
@media(max-width:860px){
  html{scroll-padding-top:60px}
  .navstrip{grid-template-columns:auto 1fr}.navstrip nav{display:none}.navstrip .acts{justify-self:end}
  .navstrip>*,.nav.small .navstrip>*{padding:14px 0}.navstrip .brand img,.nav.small .navstrip .brand img{height:22px}
  .hero{height:auto;max-height:none;min-height:0;display:flex;flex-direction:column}
  .hero .himg{position:relative;width:100%;height:auto;aspect-ratio:3/2}
  .hcard{position:relative;width:100%;min-height:0;padding:34px var(--pad)}
  .hero h1{font-size:clamp(24px,7vw,40px);letter-spacing:.24em}
  .hcopy{position:relative;width:100%;padding:34px var(--pad) 44px}
  .cols,#agencies .cols,#safety .cols,#contact .cols,#portal .cols,#designs .cols,#faq .cols,#how .cols,#pricing .cols{display:block;min-height:0}
  .vt{padding:44px var(--pad) 0;font-size:clamp(22px,6.4vw,32px)}
  .txt,#portal .txt,#designs .txt{padding:18px var(--pad) 40px}
  #agencies .art,#safety .art,#contact .art{background:var(--white)}
  .art{padding:28px 18px 40px}
  .shots.three{grid-template-columns:1fr}
  .dview{padding:8px var(--pad) 36px}
  .dcols{display:grid;grid-template-columns:repeat(2,1fr);padding:24px var(--pad) 0}
  .dcol:nth-child(odd):last-child{grid-column:1/-1}
  .step,.plan{padding:30px var(--pad)}.step h3{margin-top:22px}
  .qs{padding:24px var(--pad) 40px}
  .form{grid-template-columns:1fr}
  .cta{left:14px;right:14px;width:auto;transform:none;padding:8px 8px 8px 14px;transition:left .45s ease-out,right .45s ease-out,bottom .45s ease-out,padding .45s ease-out}.cta.full{left:0;right:0;width:auto;padding:12px 14px;justify-content:space-between}.cta span{font-size:11px}
  .ft-top{flex-direction:column-reverse;align-items:flex-start}.ft-mark{width:70%}.ft-main{grid-template-columns:1fr}.ft-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.ft-cols>div:last-child{grid-column:1/-1}
}
/* the portal tour: three tabs, one large screen at a time, a phone beside it */
#portal .art{padding:clamp(28px,4.5vw,84px) var(--pad) clamp(52px,7vw,120px)}
.tour{display:grid;grid-template-columns:minmax(220px,29%) 1fr;gap:clamp(24px,4vw,72px);width:100%;max-width:1400px;align-items:start}
.tour-tabs{list-style:none;margin:0;padding:0;border-top:1px solid var(--hl)}
.tour-tabs li{border-bottom:1px solid var(--hl)}
.tour-tabs button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:34px 1fr;gap:2px 8px;width:100%;padding:22px 0 24px;cursor:pointer;position:relative;color:var(--mute);opacity:.62;transition:opacity .35s}
.tour-tabs button:hover,.tour-tabs button.on{opacity:1}
.tour-tabs .n{grid-row:1/3;font:400 10.5px/2.2 var(--sans);letter-spacing:.3em}
.tour-tabs b{font:400 clamp(15px,1.5vw,21px)/1.35 var(--serif);text-transform:uppercase;letter-spacing:.22em;color:var(--title)}
.tour-tabs .d{font-size:12.5px;line-height:1.7;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s ease,opacity .5s ease,margin .5s ease}
.tour-tabs button.on .d{max-height:7em;opacity:1;margin-top:8px}
.tour-tabs .bar{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left}
.tour-tabs button.on .bar{transform:scaleX(1);transition:transform var(--dur,6s) linear}
.tour-tabs button:focus-visible{outline-offset:-2px}
.tour-stage{position:relative;margin-bottom:clamp(40px,7vw,96px)}
.tour-screens{position:relative;aspect-ratio:1600/1088;background:var(--white);box-shadow:0 30px 60px -34px rgba(43,42,40,.5)}
.tour-screens figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .7s ease;pointer-events:none}
.tour-screens figure.on{opacity:1;pointer-events:auto}
.tour-screens img{width:100%;height:100%;object-fit:cover;display:block}
.chip{position:absolute;left:clamp(12px,3%,32px);bottom:clamp(12px,4%,30px);background:var(--ink);color:#fff;padding:12px 18px;font:300 12px/1.45 var(--sans);opacity:0;transform:translateY(16px)}
.chip b{display:block;font:400 9.5px/1.5 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:#fff}
.phones{position:absolute;right:clamp(-30px,-2vw,-12px);bottom:clamp(-72px,-5vw,-24px);width:min(24%,230px);aspect-ratio:1/2;background:var(--ink);padding:6px;box-shadow:0 34px 60px -26px rgba(20,19,18,.7)}
.phones img{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);object-fit:cover;object-position:top;opacity:0;transition:opacity .7s ease}
.phones img.on{opacity:1}
@media(prefers-reduced-motion:no-preference){
  .tour-screens figure.on .chip{animation:chip 5.2s .9s cubic-bezier(.2,.7,.2,1) both}
  @keyframes chip{0%{opacity:0;transform:translateY(16px)}10%{opacity:1;transform:none}86%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}
  .rv-on .spread:not(.in) .tour-stage .phones{transform:translateY(70px);opacity:0}
  .phones{transition:transform 1.1s .5s cubic-bezier(.2,.7,.2,1),opacity 1.1s .5s ease}
}
@media(prefers-reduced-motion:reduce){.tour-screens figure.on .chip{opacity:1;transform:none}}
@media(max-width:860px){
  #portal .art{padding:28px var(--pad) 48px}
  .tour{grid-template-columns:1fr;gap:28px}
  .tour-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-top:0;gap:0}
  .tour-tabs li{border-bottom:0}
  .tour-tabs button{grid-template-columns:1fr;padding:12px 8px 16px 0;border-bottom:1px solid var(--hl)}
  .tour-tabs .n{grid-row:auto}.tour-tabs b{font-size:11px;letter-spacing:.14em}.tour-tabs .d{display:none}
  .tour-stage{order:-1;margin-bottom:56px}
  .phones{width:30%;right:-6px}
  .chip{padding:8px 12px;font-size:11px}.chip b{font-size:8.5px}
}

@media print{.nav,.cta{display:none}}

/* motion: the cover settles in, spreads rise as they arrive, pictures answer the pointer */
@media(prefers-reduced-motion:no-preference){
  @keyframes drift{from{transform:scale(1.07)}to{transform:scale(1)}}
  @keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
  @keyframes slide{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
  .hero .himg img{animation:drift 2.8s cubic-bezier(.2,.7,.2,1) both}
  .hcard{animation:slide 1.2s .25s cubic-bezier(.2,.7,.2,1) both}
  .hcopy{animation:rise 1.1s .6s cubic-bezier(.2,.7,.2,1) both}
  .rv-on .spread:not(.in) .cols>*{opacity:0;transform:translateY(26px)}
  .cols>*{transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
  .cols>*:nth-child(2){transition-delay:.12s}.cols>*:nth-child(3){transition-delay:.24s}.cols>*:nth-child(4){transition-delay:.36s}
  .grid9 img,.shots img,.dcol img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
  .grid9>*,.shots figure,.dcol{overflow:hidden}
  .grid9 img:hover,.shots img:hover{transform:scale(1.03)}
  .dcol:hover img{transform:scale(1.03)}
  .btn:hover{transform:translateY(-2px)}
}

/* the features pages: a list of guides to read */
.readlist{display:flex;flex-direction:column;width:min(100%,560px)}
.readlist a{display:flex;flex-direction:column;gap:4px;padding:22px 0;border-top:1px solid var(--hl);text-decoration:none;color:inherit}
.readlist a:last-child{border-bottom:1px solid var(--hl)}
.readlist b{font:400 clamp(20px,1.9vw,26px)/1.3 var(--serif);color:var(--ink);transition:letter-spacing .5s ease}
.readlist span{font-size:13px;color:var(--mute)}
.readlist a:hover b{letter-spacing:.02em}
.nav nav a[aria-current=page]{color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:4px}
@media(min-width:861px){.hero.feat h1{font-size:clamp(20px,2.3vw,34px);letter-spacing:.24em}}

/* the mobile menu */
.burger{display:none;position:relative;width:44px;height:44px;margin-left:-8px;padding:0;border:0;background:none;cursor:pointer}
.burger i{position:absolute;right:10px;height:2px;background:var(--ink);transition:width .3s ease}
.burger i:nth-child(1){top:14px;width:26px}.burger i:nth-child(2){top:21px;width:18px}.burger i:nth-child(3){top:28px;width:11px}
.burger:hover i:nth-child(2),.burger:focus-visible i:nth-child(2){width:26px}.burger:hover i:nth-child(3),.burger:focus-visible i:nth-child(3){width:26px}
.menu{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;background:#1d1d1c;color:#fff;opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .3s ease,transform .3s ease,visibility 0s .3s;overflow-y:auto;overscroll-behavior:contain}
.menu[hidden]{display:none}
.menu.open{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease,transform .3s ease}
.menu-top{display:flex;justify-content:space-between;align-items:center;padding:14px var(--pad)}
.menu-top .brand img{height:22px;width:auto;filter:invert(1) brightness(2)}
.menu-x{position:relative;width:44px;height:44px;margin-right:-10px;padding:0;border:0;background:none;cursor:pointer;color:#fff}
.menu-x i{position:absolute;left:10px;right:10px;top:21px;height:1px;background:#fff;transform:rotate(45deg)}.menu-x i:last-child{transform:rotate(-45deg)}
.menu-posts{padding:clamp(8px,2.4vh,22px) 0 0;min-height:0}
.mp-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);scrollbar-width:none;padding:0 var(--pad)}
.mp-track::-webkit-scrollbar{display:none}
.mp-card{flex:0 0 78%;scroll-snap-align:start;display:flex;flex-direction:column;gap:7px;text-decoration:none;color:#fff}
.mp-card img{display:block;width:100%;aspect-ratio:12/5;object-fit:cover;object-position:50% 25%;filter:saturate(.9)}
.mp-kick{font:400 10px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:#a9a8a4}
.mp-card b{font:400 19px/1.25 var(--serif);color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mp-more{font:400 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#fff;border-bottom:1px solid rgba(255,255,255,.5);align-self:flex-start;padding-bottom:3px}
.mp-dots{display:flex;gap:8px;padding:12px var(--pad) 0}
.mp-dots button{width:22px;height:2px;border:0;padding:0;background:rgba(255,255,255,.25);cursor:pointer}.mp-dots button.on{background:#fff}
.menu-nav{list-style:none;margin:auto 0;padding:clamp(18px,4vh,36px) var(--pad);display:flex;flex-direction:column;gap:clamp(2px,.8vh,8px)}
.menu-nav a{display:flex;align-items:baseline;gap:22px;text-decoration:none;color:#fff;font:400 clamp(28px,8.4vw,40px)/1.25 var(--serif);letter-spacing:.06em;text-transform:uppercase}
.menu-nav a span{flex:0 0 22px;font:400 9px/1 var(--sans);letter-spacing:.1em;color:#a9a8a4}
.menu-foot{padding:0 var(--pad) max(22px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:18px}
.menu-cta{background:#fff;color:var(--ink);border-color:#fff;text-align:center;padding:16px 20px}
.menu-meta{display:flex;flex-wrap:wrap;gap:8px 22px;font:400 11px/1.6 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#a9a8a4}.menu-meta a{color:#fff;text-decoration:none}.menu-meta span{margin-left:auto}
html.menu-open,html.menu-open body{overflow:hidden}
.menu>*{flex-shrink:0}
@media(max-height:720px){.menu-nav a{font-size:25px}.menu-nav{padding-top:14px;padding-bottom:14px}.mp-card img{aspect-ratio:3/1}.mp-card b{font-size:17px}}
@media(max-width:860px){
  .burger{display:block}
  .navstrip .acts a:not(.join){display:none}.navstrip .acts{gap:14px}
}
@media(min-width:861px){.menu{display:none!important}}
@media(prefers-reduced-motion:reduce){.menu{transition:none}}
.txt .more{margin:0 0 14px}.txt .more a{font:400 10.5px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:4px}

/* the home cover: a tagline in the title's style, with the supporting words under it */
.hero:not(.feat) .hcopy .htag{margin:0 0 clamp(16px,2vw,28px);max-width:none;font:400 clamp(20px,2.4vw,40px)/1.28 var(--serif);letter-spacing:.3em;text-transform:uppercase;color:var(--title)}
.hero:not(.feat) .hcopy .htag span{display:block}
@media(max-width:860px){.hero:not(.feat) .hcopy .htag{font-size:clamp(20px,6vw,30px);letter-spacing:.24em}}
@media(min-width:861px) and (max-width:1180px){.navstrip nav{gap:clamp(14px,2vw,26px)}.navstrip .acts{gap:16px}.navstrip{letter-spacing:.2em}}
/* FAQ: a line to type a question; the answer replaces the list with videos first, then short steps */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#faq .faq-l{background:var(--white);display:flex;flex-direction:column;min-width:0}
#faq .faq-l .vt{padding-bottom:0}
.faq-ask-wrap{margin-top:auto;padding:clamp(36px,5vw,72px) var(--pad) clamp(44px,6vw,96px)}
.faq-lead{margin:0 0 clamp(22px,2.4vw,34px);max-width:380px;font:300 17px/1.65 var(--sans);color:var(--mute)}
.faq-line{display:flex;align-items:center;border-bottom:1px solid var(--ink);transition:border-color .2s}
.faq-line:focus-within{border-bottom-width:2px;margin-bottom:-1px}
.faq-line input{flex:1;min-width:0;padding:16px 0;border:0;background:transparent;font:300 clamp(20px,1.7vw,26px)/1.3 var(--serif);letter-spacing:.01em;color:var(--ink);border-radius:0;-webkit-appearance:none;appearance:none}
.faq-line input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.faq-line input::placeholder{color:var(--mute)}
.faq-line input:focus{outline:0}
.faq-go{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-8px;border:0;background:none;color:var(--ink);cursor:pointer;border-radius:0;transition:transform .3s ease}
.faq-go:hover,.faq-go:focus-visible{transform:translateX(4px)}
.faq-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;max-width:520px}
.faq-chip{padding:9px 14px;border:1px solid var(--hl);background:transparent;font:300 13.5px/1.2 var(--sans);color:var(--ink);cursor:pointer;border-radius:0;transition:background .25s ease,border-color .25s ease}
.faq-chip:hover{background:var(--grey);border-color:var(--mute)}
.faq-res[hidden]{display:none}
.fr-back{margin:0 0 22px;padding:0;border:0;background:none;color:var(--mute);font:400 10.5px/1.6 var(--sans);letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.fr-back::before{content:"\2190  "}.fr-back:hover{color:var(--ink)}
.fr-q{margin:0 0 6px;font:400 clamp(24px,2.4vw,36px)/1.2 var(--serif);color:var(--ink);letter-spacing:0;text-transform:none}
.fr-h{margin:28px 0 14px;font:400 10.5px/1.5 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.fr-wait,.fr-lead{margin:18px 0;font:300 16px/1.6 var(--sans);color:var(--mute)}
.fr-vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,260px));gap:12px}
.fr-vid{display:flex;flex-direction:column;border:1px solid var(--hl);background:var(--white);padding:0;cursor:pointer;text-align:left;text-decoration:none;color:var(--ink);border-radius:0;font:inherit}
.fr-vid:hover{background:#fff}
.fr-vid span.i{position:relative;display:block;aspect-ratio:16/10;background:#111;overflow:hidden}
.fr-vid img{display:block;width:100%;height:100%;object-fit:cover}
.fr-vid span.i::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border:1px solid rgba(255,255,255,.9);background:rgba(0,0,0,.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center/22px no-repeat}
.fr-vid b{font:400 14px/1.35 var(--sans);padding:10px 12px 2px}.fr-vid em{font:300 12.5px/1.4 var(--sans);font-style:normal;color:var(--mute);padding:0 12px 12px}
.fr-steps{list-style:none;counter-reset:s;margin:0;padding:0;max-width:560px}
.fr-steps li{counter-increment:s;position:relative;padding:13px 0 13px 46px;border-top:1px solid var(--hl);font:300 17px/1.45 var(--sans);color:var(--ink);animation:frin .35s ease both}
.fr-steps li:last-child{border-bottom:1px solid var(--hl)}
.fr-steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:15px;font:400 12px/1.8 var(--sans);letter-spacing:.2em;color:var(--mute)}
@keyframes frin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.fr-steps li{animation:none}}
.fr-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.fr-links a{padding:9px 13px;border:1px solid var(--ink);font:400 12px/1.3 var(--sans);color:var(--ink);text-decoration:none}.fr-links a:hover{background:var(--ink);color:#fff}
.fr-note{margin:20px 0 0;max-width:560px;font:300 12.5px/1.6 var(--sans);color:var(--mute)}.fr-note a{color:var(--ink)}
.vmodal{width:min(1000px,94vw);max-height:94vh;padding:0;border:1px solid var(--ink);background:#111;color:#fff;border-radius:0;overflow:hidden}
.vmodal::backdrop{background:rgba(0,0,0,.8)}
.vm-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px;background:var(--white);color:var(--ink);font:400 14px/1.3 var(--sans)}
.vm-bar button{border:0;background:none;color:var(--ink);font:400 10.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;cursor:pointer}
.vmodal video{display:block;width:100%;max-height:74vh;background:#000}
.vm-foot{padding:12px 16px;background:var(--white);font:300 14px/1.4 var(--sans)}.vm-foot a{color:var(--ink)}

/* the pre-header: a thin black bar that alternates a talent and an agency call to action */
.pre{position:relative;display:grid;background:#111;color:#fff;height:34px;overflow:hidden;border-bottom:1px solid #2a2a2a}
.pre-i{grid-area:1/1;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 var(--pad);font:400 10.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:#fff;text-decoration:none;white-space:nowrap;animation:pre-a 10s ease-in-out infinite}
.pre-i b{font-weight:500;letter-spacing:.26em}.pre-i span{color:#cfcdc8}.pre-i i{font-style:normal;letter-spacing:0;font-size:13px;transition:transform .3s ease}
.pre-i:hover i,.pre-i:focus-visible i{transform:translateX(4px)}
.pre-i:hover span{color:#fff}
.pre-b{animation-name:pre-b}
@keyframes pre-a{0%,42%{opacity:1;visibility:visible}50%,92%{opacity:0;visibility:hidden}100%{opacity:1;visibility:visible}}
@keyframes pre-b{0%,42%{opacity:0;visibility:hidden}50%,92%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
.pre:hover .pre-i,.pre:focus-within .pre-i{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.pre-i{animation:none}.pre-b{display:none}}
@media(max-width:560px){.pre-i{letter-spacing:.14em;gap:8px;font-size:10px}.pre-i span{overflow:hidden;text-overflow:ellipsis}}
/* the menu sits next to the logo instead of in the middle */
@media(min-width:861px){
  .navstrip{grid-template-columns:auto 1fr auto}
  .navstrip nav{justify-self:start;margin-left:clamp(36px,5vw,84px)}
}
.pre-i b{color:#fff}

/* the portal title and its intro sit in the box with the tabs */
#portal .cols{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"art"}
#portal .art{grid-area:art}
.tour-side{min-width:0}
.tour-side .tour-title{margin:0 0 clamp(18px,2vw,28px);padding:0;font:400 clamp(24px,2.4vw,36px)/1.3 var(--serif);letter-spacing:.32em;text-transform:uppercase;color:var(--title);background:none}
.tour-intro{margin:0 0 clamp(26px,3vw,44px)}
.tour-intro .lead{margin:0 0 14px;font:400 clamp(20px,1.9vw,27px)/1.35 var(--serif);color:var(--ink)}
.tour-intro p:not(.lead){margin:0;font-size:14.5px;line-height:1.7;color:var(--mute)}
@media(max-width:860px){.tour-side .tour-title{letter-spacing:.26em}}
#portal .tour-side .tour-title{padding:0}
/* designs, wide screens: everything sits in the middle with a short gap; the card keeps its size and the words are spread to the card's height,
   the lead level with its top and the design names level with its bottom, with the big title above the card */
@media(min-width:861px){
  #designs .cols{grid-template-columns:minmax(0,400px) minmax(0,620px);grid-template-rows:auto auto;grid-template-areas:"vt ." "view txt";column-gap:clamp(36px,4.5vw,72px);justify-content:center;padding:0 var(--pad) clamp(52px,6.5vw,104px);background:var(--white);min-height:0}
  #designs .vt{padding:clamp(48px,6vw,96px) 0 clamp(22px,2.6vw,38px)}
  #designs .dview{padding:0;min-width:0}
  #designs .dv-stage{width:100%}
  #designs .txt{padding:0;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between}
  #designs .txt p{margin:0}
  #designs .txt .dv-ctl{margin-top:0}
}

/* no blue, anywhere: the browser paints autofilled fields light blue, selections and focus rings blue, taps blue-grey. Keep the field as designed. */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active,textarea:-webkit-autofill,textarea:-webkit-autofill:focus,select:-webkit-autofill,select:-webkit-autofill:focus{-webkit-text-fill-color:currentColor!important;caret-color:currentColor;transition:background-color 600000s ease-in-out 0s!important;background-clip:text!important}
input:autofill,textarea:autofill,select:autofill{background:transparent!important;color:inherit!important;filter:none!important}
::selection{background:#2b2a28;color:#fbfbfa}
*{-webkit-tap-highlight-color:transparent}
input,textarea,select,progress,meter{accent-color:#2b2a28}
:focus-visible{outline-color:currentColor}
.form[hidden]{display:none}