@font-face{font-family:"Fraunces";src:url(/fonts/fraunces.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Manrope";src:url(/fonts/manrope.woff2) format("woff2");font-weight:200 800;font-display:swap}
:root{
 --ink:#0c0c0d;--ink-2:#151517;--ink-3:#222226;
 --brick:#9c4a2b;--brick-2:#b65d38;--brick-3:#7d3820;--copper:#d08a5c;
 --cream:#f3ece0;--cream-2:#e4d9c6;--chrome:#c3c6cc;--night:#1e2738;
 --slab:"Fraunces",Rockwell,"Roboto Slab",Georgia,serif;
 --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
 --wrap:1240px;--gut:clamp(20px,4vw,48px);
 --ease:cubic-bezier(.2,.7,.1,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--ink);color:var(--cream);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--cream);color:var(--ink);padding:10px 16px;font-weight:700}
.skip:focus{top:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.caps{font:700 12px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase}
.hx{width:1em;height:1.15em;display:inline-block;vertical-align:middle}

/* header */
.top{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--gut);transition:background .35s,padding .35s,box-shadow .35s}
.top.solid{background:rgba(12,12,13,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-top:10px;padding-bottom:10px;box-shadow:0 1px 0 rgba(243,236,224,.08)}
.brand{display:flex;align-items:baseline;gap:.35em;text-decoration:none;font-family:var(--slab);font-weight:900;font-size:22px;letter-spacing:.02em;line-height:1}
.brand-c{font-weight:600;font-style:italic;font-size:.8em;color:var(--copper)}
.top-r{display:flex;align-items:center;gap:6px}
.lang,.top-book{font:700 11.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;padding:12px 12px;min-height:44px;display:inline-flex;align-items:center}
.lang{color:var(--chrome)}
.lang:hover{color:var(--cream)}
.top-book{border:1px solid rgba(243,236,224,.4);padding:12px 16px}
.top-book:hover{background:var(--cream);color:var(--ink)}
.burger{display:inline-flex;align-items:center;gap:10px;background:none;border:0;color:var(--cream);cursor:pointer;padding:10px 4px 10px 12px;min-height:44px;font:700 11.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.burger-l{position:relative;width:26px;height:16px;display:block}
.burger-l i{position:absolute;left:0;height:2px;background:currentColor;transition:transform .45s var(--ease),opacity .25s,width .35s var(--ease)}
.burger-l i:nth-child(1){top:0;width:26px}
.burger-l i:nth-child(2){top:7px;width:18px}
.burger-l i:nth-child(3){top:14px;width:22px}
.burger:hover .burger-l i{width:26px}
.burger[aria-expanded=true] .burger-l i:nth-child(1){transform:translateY(7px) rotate(45deg);width:26px}
.burger[aria-expanded=true] .burger-l i:nth-child(2){opacity:0}
.burger[aria-expanded=true] .burger-l i:nth-child(3){transform:translateY(-7px) rotate(-45deg);width:26px}
@media (max-width:640px){.lang{display:none}.top-book{padding:12px}.burger-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}

/* menu panel */
.menu{position:fixed;inset:0;z-index:35;background:var(--ink);overflow:auto;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='138' viewBox='0 0 120 138'%3E%3Cpath d='M60 1 119 35v68L60 137 1 103V35z' fill='none' stroke='%23f3ece0' stroke-opacity='.06' stroke-width='1.2'/%3E%3C/svg%3E");background-size:120px 138px;
 clip-path:circle(0 at calc(100% - 50px) 36px);transition:clip-path .7s var(--ease),visibility 0s .7s;visibility:hidden}
.menu[hidden]{display:block}
.menu.open{clip-path:circle(150% at calc(100% - 50px) 36px);visibility:visible;transition:clip-path .7s var(--ease)}
.menu-in{min-height:100%;display:grid;align-content:center;gap:40px;padding:96px var(--gut) 40px;max-width:var(--wrap);margin:0 auto}
.menu-l{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.menu-l a{display:flex;align-items:baseline;gap:18px;text-decoration:none;font:800 clamp(34px,7vw,76px)/1.08 var(--slab);padding:4px 0;transition:color .25s}
.menu-l a:hover,.menu-l a:focus-visible,.menu-l a[aria-current=page]{color:var(--copper)}
.menu-l .mn{font:700 12px/1 var(--sans);letter-spacing:.2em;color:var(--chrome);min-width:2.4em}
.menu-l li{opacity:0;transform:translateY(24px);transition:opacity .5s,transform .6s var(--ease)}
.menu.open .menu-l li{opacity:1;transform:none;transition-delay:calc(.18s + var(--i)*.05s)}
.menu-f{display:flex;flex-wrap:wrap;gap:8px 32px;color:var(--chrome);border-top:1px solid rgba(243,236,224,.14);padding-top:22px}
.menu-f p{margin:0}
.menu-f a{text-decoration:none;color:var(--cream)}
body.menu-open{overflow:hidden}

/* CTA: a sign plate with a hexagonal cap */
.cta{display:inline-flex;align-items:stretch;text-decoration:none;color:var(--ink);min-height:58px;position:relative;isolation:isolate}
.cta-plate{display:flex;align-items:center;background:var(--cream);padding:0 26px 0 24px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px var(--cream),inset 0 0 0 4px var(--ink),inset 0 0 0 5px rgba(12,12,13,.4)}
.cta-plate::before{content:"";position:absolute;inset:0;background:var(--brick-2);transform:translateX(-101%);transition:transform .55s var(--ease);z-index:-1}
.cta-txt{font:800 19px/1 var(--slab);letter-spacing:.01em;position:relative;z-index:1;transition:color .3s}
.cta-cap{position:relative;width:58px;display:grid;place-items:center;color:var(--cream);margin-left:-10px;z-index:1}
.cta-cap svg:first-child{position:absolute;inset:0;width:100%;height:100%;fill:var(--brick);transition:transform .6s var(--ease),fill .3s}
.cta-cap .ar{position:relative;width:24px;height:12px;transition:transform .45s var(--ease)}
.cta:hover .cta-plate::before,.cta:focus-visible .cta-plate::before{transform:none}
.cta:hover .cta-txt,.cta:focus-visible .cta-txt{color:var(--cream)}
.cta:hover .cta-cap svg:first-child{transform:rotate(30deg);fill:var(--ink)}
.cta:hover .cta-cap .ar{transform:translateX(4px)}
.cta .cta-plate{z-index:0}
.ghost{display:inline-flex;align-items:center;min-height:58px;padding:0 6px;font:700 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(243,236,224,.45)}
.ghost:hover{border-color:var(--copper);color:var(--copper)}
.ulink{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;border-bottom:1px solid currentColor;padding:6px 0}
.ulink .ar{width:22px;height:10px;transition:transform .3s var(--ease)}
.ulink:hover .ar{transform:translateX(4px)}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.hero-ph{position:absolute;inset:0}
.hero-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;transform:scale(1.06);animation:heroIn 2.4s var(--ease) forwards}
@keyframes heroIn{to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,12,13,.86) 0%,rgba(12,12,13,.55) 34%,rgba(12,12,13,0) 62%),linear-gradient(0deg,rgba(12,12,13,.85) 0%,rgba(12,12,13,0) 40%);pointer-events:none}
.hero-in{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut) clamp(40px,8vh,96px)}
.hero-k{color:var(--chrome);margin:0 0 18px;display:flex;align-items:center;gap:14px}
.hero-k::before{content:"";width:34px;height:1px;background:var(--copper)}
.hero-t{margin:0;font-family:var(--slab);font-weight:900;line-height:.86;letter-spacing:-.01em;font-size:clamp(68px,11.5vw,184px);text-shadow:0 2px 30px rgba(0,0,0,.4)}
.hero-t .ln{display:block;overflow:hidden;padding-bottom:.04em}
.hero-t .ln>span{display:inline-block;transform:translateY(105%);animation:up 1.1s var(--ease) .15s forwards}
.hero-t .ln2>span{font-weight:500;font-style:italic;color:var(--cream-2);animation-delay:.3s;font-size:.62em;letter-spacing:0}
@keyframes up{to{transform:none}}
.hero-s{max-width:30em;font-size:clamp(17px,1.4vw,20px);color:var(--cream-2);margin:22px 0 30px;opacity:0;animation:fade .9s .65s forwards}
.hero-a{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;opacity:0;animation:fade .9s .8s forwards}
@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:760px){
 .hero{min-height:100svh;align-items:stretch}
 .hero-ph img{object-position:60% 30%}
 .hero::after{background:linear-gradient(180deg,rgba(12,12,13,.94) 0%,rgba(12,12,13,.72) 42%,rgba(12,12,13,.1) 62%,rgba(12,12,13,.75) 100%)}
 .hero-in{display:flex;flex-direction:column;padding-top:84px;padding-bottom:28px}
 .hero-t{font-size:clamp(62px,21vw,96px)}
 .hero-s{margin:14px 0 0;font-size:16px;max-width:22em}
 .hero-a{margin-top:auto;gap:12px 20px}
 .hero-k{margin-bottom:12px;font-size:11px}
}

/* sections */
.sec{padding:clamp(72px,10vw,140px) 0;position:relative}
.dark{background:var(--ink)}
.brick{background:var(--brick);color:var(--cream);
 background-image:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,0) 40%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='40' viewBox='0 0 96 40'%3E%3Cpath d='M0 19.5h96M0 39.5h96M24 0v19.5M72 0v19.5M48 20v20M0 20v20' stroke='%23000' stroke-opacity='.07' stroke-width='1'/%3E%3C/svg%3E")}
.work{background:var(--ink-2)}
.infos{background:var(--cream);color:var(--ink)}
.sec-h{margin-bottom:clamp(32px,5vw,56px);max-width:760px}
.kick{display:flex;align-items:center;gap:10px;margin:0 0 16px;color:var(--copper)}
.brick .kick{color:var(--cream-2)}
.infos .kick{color:var(--brick)}
.kick .hx{width:18px;height:21px}
.kick span{color:inherit;opacity:.8}
.h1,.h2{font-family:var(--slab);font-weight:800;line-height:1;margin:0;letter-spacing:-.005em}
.h1{font-size:clamp(56px,10vw,132px);font-weight:900}
.h2{font-size:clamp(38px,5.4vw,76px)}
.lede{font-size:clamp(17px,1.4vw,20px);max-width:36em;margin:18px 0 0;opacity:.9}
.hexrule{height:24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='24' viewBox='0 0 28 24'%3E%3Cpath d='M7 1h14l6 11-6 11H7L1 12z' fill='none' stroke='%23d08a5c' stroke-opacity='.35'/%3E%3C/svg%3E") center/28px 24px repeat-x;margin-bottom:56px}

/* service menu */
.menu-grid{display:grid;gap:44px}
@media (min-width:980px){.menu-grid{grid-template-columns:1.25fr 1fr;column-gap:64px}.menu-grid .cat:first-child{grid-row:span 2}}
.menu-grid.full{grid-template-columns:1fr}
.menu-grid.full .cat:first-child{grid-row:auto}
.cat-h{margin:0 0 6px;padding-bottom:12px;border-bottom:2px solid var(--cream);display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.cat-demo{font-weight:600;letter-spacing:.14em;font-size:10.5px;padding:4px 8px;border:1px solid rgba(243,236,224,.55)}
.rows{list-style:none;margin:0;padding:0}
.row{display:grid;grid-template-columns:56px 1fr auto;grid-template-areas:"pic m p" "pic m go";column-gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid rgba(243,236,224,.22)}
.row-img,.row-mono{grid-area:pic;width:56px;height:66px;align-self:start}
.row-img{object-fit:cover;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.row-mono{position:relative;display:grid;place-items:center;color:rgba(243,236,224,.6)}
.row-mono .hx{position:absolute;inset:0;width:100%;height:100%}
.row-mono b{font:800 15px/1 var(--slab);color:var(--cream);position:relative;letter-spacing:-.01em}
.row-m{grid-area:m;min-width:0}
.row-n{margin:0;font:700 clamp(19px,1.6vw,23px)/1.2 var(--slab)}
.row-d{margin:4px 0 0;font-size:15px;opacity:.85}
.row-meta{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;letter-spacing:.06em}
.row-t{font-weight:700}
.onsite{opacity:.75}
.dep{font-weight:700;color:var(--ink);background:var(--cream);padding:2px 8px}
.row-p{grid-area:p;margin:0;font:800 clamp(22px,2vw,28px)/1 var(--slab);text-align:right;white-space:nowrap}
.row-go{grid-area:go;justify-self:end;display:inline-flex;align-items:center;gap:8px;font:700 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;padding:10px 0 4px;min-height:36px}
.row-go .ar{width:20px;height:10px;transition:transform .3s var(--ease)}
.row-go:hover .ar{transform:translateX(4px)}
.row-go:hover{color:var(--ink)}
.row.long .row-go{color:var(--ink);background:var(--cream);padding:10px 12px;margin-top:6px}
.row.long .row-go:hover{background:var(--ink);color:var(--cream)}
.price-note{margin:36px 0 0;font-size:14px;max-width:52em;opacity:.85;padding-left:16px;border-left:2px solid var(--cream-2)}
.more{margin:28px 0 0}
@media (max-width:520px){.row{grid-template-columns:48px 1fr auto;column-gap:14px}.row-img,.row-mono{width:48px;height:56px}}

/* rules */
.rules-w{display:grid;gap:24px}
@media (min-width:980px){.rules-w{grid-template-columns:1fr 1.3fr;align-items:start}}
.rules{list-style:none;margin:0;padding:0;display:grid;gap:0}
.rules li{display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start;padding:22px 0;border-top:1px solid rgba(243,236,224,.14)}
.rules li:last-child{border-bottom:1px solid rgba(243,236,224,.14)}
.rules p{margin:6px 0 0;font-size:18px;color:var(--cream-2)}
.rules strong{display:block;color:var(--cream);font:700 clamp(21px,2vw,26px)/1.2 var(--slab);margin-bottom:4px}
.rule-n{position:relative;width:56px;height:64px;display:grid;place-items:center;color:var(--copper)}
.rule-n .hx{position:absolute;inset:0;width:100%;height:100%}
.rule-n .hx path{stroke-dasharray:130;stroke-dashoffset:130;transition:stroke-dashoffset 1.2s var(--ease) calc(var(--i)*.15s)}
.in .rule-n .hx path,.no-anim .rule-n .hx path{stroke-dashoffset:0}
.rule-n b{font:800 24px/1 var(--slab);color:var(--cream)}

/* work */
.work-g{display:grid;gap:18px;grid-template-columns:repeat(12,1fr)}
.work-g figure{margin:0;position:relative;overflow:hidden;background:var(--ink-3)}
.work-g img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.work-g figure:hover img{transform:scale(1.035)}
.work-g figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 16px;background:linear-gradient(0deg,rgba(12,12,13,.8),rgba(12,12,13,0));font-size:14px;letter-spacing:.04em}
.w1{grid-column:1/8;grid-row:1/3;aspect-ratio:3/4}
.w2{grid-column:8/13;aspect-ratio:4/3}
.w2 img{object-position:50% 40%}
.w3{grid-column:8/13;aspect-ratio:4/3}
.w3 img{object-position:50% 30%}
@media (max-width:760px){.work-g{grid-template-columns:1fr 1fr;gap:10px}.w1{grid-column:1/3;grid-row:auto}.w2,.w3{grid-column:auto;aspect-ratio:3/4}.work-g figcaption{font-size:12.5px;padding:30px 12px 10px}}

/* reviews */
.revs{background:var(--night)}
.score{color:var(--copper)}
.rev-g{display:grid;gap:18px}
@media (min-width:900px){.rev-g{grid-template-columns:1.4fr 1fr 1fr;align-items:stretch}}
.rev{margin:0;padding:30px 28px;border:1px solid rgba(243,236,224,.16);display:flex;flex-direction:column;justify-content:space-between;gap:20px;background:rgba(12,12,13,.25)}
.rev blockquote{margin:0}
.rev p{margin:0;font:500 clamp(19px,1.6vw,24px)/1.35 var(--slab)}
.rev.r0 p{font-size:clamp(22px,2vw,30px)}
.rev figcaption{font:700 11.5px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--chrome)}

/* infos */
.infos-g{display:grid;gap:48px}
@media (min-width:980px){.infos-g{grid-template-columns:1.2fr 1fr;align-items:center}}
.hours{margin:30px 0 0;padding:0;max-width:440px}
.hours div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid rgba(12,12,13,.14)}
.hours dt{font-weight:700}
.hours dd{margin:0;text-align:right}
.contact{display:flex;flex-wrap:wrap;gap:12px 28px;margin:28px 0 0}
.infos .ulink{color:var(--brick-3)}
.infos-cta{margin-top:34px}
.slate{margin:0}
.slate img{width:100%;aspect-ratio:1;object-fit:cover;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.slate figcaption{text-align:center;font-size:14px;margin-top:10px;opacity:.75}

/* sub pages */
.page-h{padding:clamp(120px,16vw,200px) 0 clamp(48px,6vw,80px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='138' viewBox='0 0 120 138'%3E%3Cpath d='M60 1 119 35v68L60 137 1 103V35z' fill='none' stroke='%23f3ece0' stroke-opacity='.06' stroke-width='1.2'/%3E%3C/svg%3E");background-size:120px 138px}
.split{display:grid;gap:44px}
@media (min-width:900px){.split{grid-template-columns:1fr 1.2fr;align-items:center}}
.notes{margin:24px 0 0;padding:0;list-style:none}
.notes li{padding:14px 0 14px 30px;border-top:1px solid rgba(243,236,224,.14);position:relative;color:var(--cream-2)}
.notes li::before{content:"";position:absolute;left:0;top:22px;width:12px;height:14px;background:var(--copper);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}

/* footer */
.foot{background:var(--ink);padding:0 0 32px;border-top:1px solid rgba(243,236,224,.08)}
.foot .hexrule{margin-bottom:48px}
.foot-g{display:grid;gap:28px;padding-bottom:40px}
@media (min-width:860px){.foot-g{grid-template-columns:1.4fr 1fr 1fr}}
.foot-brand{font:900 32px/1 var(--slab);margin:0 0 10px}
.foot-brand span{color:var(--copper)}
.foot p{margin:0}
.foot .caps{color:var(--chrome);font-size:11px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--copper)}
.foot-b{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-top:22px;border-top:1px solid rgba(243,236,224,.1)}
.credit{font-size:12.5px;letter-spacing:.06em;color:var(--chrome);padding:7px 12px;border:1px solid rgba(243,236,224,.14);border-radius:999px;background:rgba(243,236,224,.03)}
.foot .fine{font-size:12.5px;color:#8d8f95;align-self:center}

/* reveal */
.rv{opacity:.4;transform:translateY(26px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important;transition-delay:0s!important}
 html{scroll-behavior:auto}
 .rv{opacity:1;transform:none}
 .hero-ph img{transform:none}
}
.rules-note{margin:18px 0 0;font-size:13.5px;color:var(--chrome)}
@media (max-width:620px){.row.long{grid-template-areas:"pic m p" "pic go go"}.row.long .row-go{justify-self:start;margin-top:12px}.dep{display:inline-block}}
