@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/big-shoulders-display.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/jost.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/lato-300.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/lato-400.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/lato-700.woff2) format('woff2')}
html{scroll-behavior:smooth}
body{margin:0;background:#222220}
.akra section[id],.akra footer[id]{scroll-margin-top:88px}
.akra #top{scroll-margin-top:0}
.akra .card[id]{scroll-margin-top:128px}
h1 .w{margin-right:.26em}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
a{color:#D19393}a:hover{color:#E7B9B9}
.akra *{box-sizing:border-box}
.akra img{display:block}
.akra a:focus-visible,.akra button:focus-visible,.akra input:focus-visible,.akra textarea:focus-visible,.akra select:focus-visible{outline:2px solid #D19393;outline-offset:3px}

/* links + buttons */
.nl{background:linear-gradient(#D19393,#D19393) 0 100%/0 1px no-repeat;transition:background-size .5s cubic-bezier(.2,.7,.2,1),color .3s}
.nl:hover{background-size:100% 1px;color:#FFFFFF !important}
.nld:hover{color:#222220 !important}
.bt{transition:background-color .45s cubic-bezier(.2,.7,.2,1),color .45s,border-color .45s}
.bt:hover{background-color:#D19393 !important;color:#222220 !important;border-color:#D19393 !important}
.ar{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.bt:hover .ar,.tl:hover .ar,.card:hover .ar{transform:translateX(6px)}

/* image hover */
.zm{overflow:hidden;position:relative}
.zm img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.card:hover .zm img{transform:scale(1.045)}
.card .ct{transition:color .4s}
.card:hover .ct{color:#B07474 !important}
.vg{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;background:rgba(34,34,32,.82);color:#FFFFFF;font:400 11px Jost,sans-serif;letter-spacing:.22em;text-transform:uppercase;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s cubic-bezier(.2,.7,.2,1)}
.card:hover .vg,.card:focus-visible .vg{opacity:1;transform:none}

/* hero words */
.w{display:inline-block;position:relative}
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.motion .wm>span{display:inline-block;animation:up 1.1s cubic-bezier(.2,.75,.15,1) both;animation-delay:var(--d,0s)}
@keyframes up{from{transform:translateY(112%)}to{transform:none}}

/* pencil circles */
.ring{position:absolute;left:-18px;right:-18px;top:-12px;bottom:-14px;width:calc(100% + 36px);height:calc(100% + 26px);overflow:visible;pointer-events:none}
.ring path{fill:none;stroke:#D19393;stroke-linecap:round;stroke-linejoin:round}
.ring .p1{stroke-width:1.6}
.ring .p2{stroke-width:.8;opacity:.55}
.motion .ring path{stroke-dasharray:1 1;stroke-dashoffset:1}
.motion .ring-on .p1{animation:draw 1.6s cubic-bezier(.45,.05,.3,1) var(--rd,.15s) forwards}
.motion .ring-on .p2{animation:draw 1.4s cubic-bezier(.45,.05,.3,1) calc(var(--rd,.15s) + .4s) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* hero */
.motion .hz{animation:kb 16s cubic-bezier(.2,.6,.2,1) both}
@keyframes kb{from{transform:scale(1.14)}to{transform:scale(1)}}
.motion .fi{animation:fi 1.4s ease 1.1s both}
@keyframes fi{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.motion .cue{animation:fi 1.4s ease 1.4s both}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* scroll reveals */
@supports (animation-timeline: view()){
.motion .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 5% entry 55%}
@keyframes rv{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
.motion .ri{animation:ri linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
@keyframes ri{from{clip-path:inset(14% 6% 14% 6%)}to{clip-path:inset(0 0 0 0)}}
.motion .ri img{animation:rs linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
@keyframes rs{from{transform:scale(1.18)}to{transform:scale(1)}}
.motion .hdr{animation:hdr linear both;animation-timeline:scroll(root);animation-range:0 420px}
@keyframes hdr{from{background-color:rgba(34,34,32,0);border-color:rgba(255,255,255,0)}to{background-color:#222220;border-color:rgba(255,255,255,.08)}}
.motion .hp{animation:hp linear both;animation-timeline:scroll(root);animation-range:0 900px}
@keyframes hp{to{transform:translateY(18%)}}
}

/* ===== project gallery overlay ===== */
.pv{transition:clip-path .95s cubic-bezier(.76,0,.24,1),-webkit-clip-path .95s cubic-bezier(.76,0,.24,1)}
.still .pv{transition:none}
.fly{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0}
.fly img{width:100%;height:100%;object-fit:cover}
.motion .pv-pre .fly{opacity:1}
.motion .pv-in .fly{animation:flyout 1.6s ease both}
@keyframes flyout{0%,55%{opacity:1}100%{opacity:0}}
.motion .pv-out .fly{opacity:1;transition:opacity .25s ease}
.pc{transition:opacity .35s ease}
.pv-pre .pc,.pv-swap .pc{opacity:0}
.motion .pv-in .pi{animation:pvA .9s cubic-bezier(.2,.75,.15,1) both;animation-delay:var(--d,.6s)}
.motion .pv-in2 .pi{animation:pvB .9s cubic-bezier(.2,.75,.15,1) both;animation-delay:var(--d2,.05s)}
@keyframes pvA{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes pvB{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.sl{opacity:0;transform:scale(1.035);transition:opacity .8s ease,transform 1.4s cubic-bezier(.2,.7,.2,1)}
.sl-on{opacity:1;transform:none}
.th{opacity:.42;outline:1px solid transparent;outline-offset:3px;transition:opacity .3s,outline-color .3s}
.th:hover{opacity:.85}
.th-on{opacity:1;outline-color:#D19393}
.ab{transition:background-color .35s,color .35s,border-color .35s}
.ab:hover{background-color:#D19393 !important;color:#222220 !important;border-color:#D19393 !important}

/* ===== site check-in drawer ===== */
.dr{transition:transform .7s cubic-bezier(.76,0,.24,1)}
.bd{transition:opacity .6s ease}
.still .dr,.still .bd{transition:none}
.fld{display:flex;flex-direction:column;gap:8px;font:400 11px Jost,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#4A4744}
.fld input,.fld select{font:300 17px Lato,sans-serif;letter-spacing:0;text-transform:none;color:#222220;background:#FFFFFF;border:1px solid #CFCAC4;height:50px;padding:0 14px;border-radius:0;width:100%}
.fld input,.fld select{box-sizing:border-box;max-width:100%;min-width:0}
#footer nav a{display:inline-flex;align-items:center;min-height:44px}
.fld input[type=file]{height:auto;padding:12px 14px;font-size:15px}
.fld input:focus,.fld select:focus{border-color:#222220}
.req{color:#B07474}
.chk{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;align-items:start;font:300 15px/1.6 Lato,sans-serif;color:#4A4744;cursor:pointer}
.chk input{width:20px;height:20px;margin:2px 0 0;accent-color:#222220}

@media (prefers-reduced-motion: reduce){.motion *{animation:none !important;transition:none !important}.motion .ring path{stroke-dashoffset:0}}

/* responsive */
@media (max-width: 900px){
.nav-links{display:none !important}
.menu-btn{display:inline-flex !important}
.pg{grid-template-columns:minmax(0,1fr) !important}
.pg>*{grid-column:auto !important;margin-top:0 !important}
.pg .tall{height:440px !important}
.two{grid-template-columns:minmax(0,1fr) !important}
.hero-foot{flex-direction:column;align-items:flex-start !important}
.hide-sm{display:none !important}
.pvg{grid-template-columns:minmax(0,1fr) !important}
.stage{height:380px !important}
.pvn{font-size:64px !important}
.foot-legal{text-align:left !important}
/* hero is the screen height plus 160px: the heading and its circle sit right at the bottom of
   the screen on landing, and the strap line underneath is below the fold */
#top{height:calc(100vh + 160px) !important;height:calc(100svh + 160px) !important;min-height:560px}
}

/* standalone build: conditional blocks are toggled with the hidden attribute */
[hidden]{display:none !important}
.hdr-solid{background-color:#222220 !important;border-color:rgba(255,255,255,.08) !important}
.form-status{margin:0;font-size:15px;line-height:1.6;color:#E9E6E2}
.ci-status{margin:0;font-size:15px;line-height:1.6;color:#B07474}