@font-face{font-family:"Unbounded";src:url(fonts/Unbounded-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Onest";src:url(fonts/Onest.woff2) format("woff2");font-weight:400 500;font-style:normal;font-display:swap}

:root{
  --bg:#f3f4f1;--surface:#e5e8e3;--ink:#14181c;--muted:#2f363d;
  --red:#c8202f;--red-ink:#ffffff;--ochre:#e8a817;--ochre-ink:#14181c;--blue:#245f8f;--blue-ink:#ffffff;
  --mono:clamp(4.5rem,26vw,24rem);
  --head:clamp(1.625rem,1rem + 2.8vw,3.25rem);
  --lead:clamp(1.25rem,1.1rem + 0.7vw,1.625rem);
  --body:clamp(1.0625rem,1rem + 0.25vw,1.1875rem);
  --small:1rem;
  --m:clamp(16px,2.2vw,32px);
  --gap:clamp(96px,13vw,200px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --display:"Unbounded","Arial Black",Arial,sans-serif;
  --text:"Onest",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--body)/1.55 var(--text);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul{margin:0}
p{max-width:62ch}
.credits{max-width:75ch}
ul{padding:0;list-style:none}
::selection{background:var(--ink);color:var(--bg)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.on-dark :focus-visible,.ink-field :focus-visible,.site-footer :focus-visible{outline-color:var(--bg)}
.skip{position:absolute;left:var(--m);top:8px;background:var(--ink);color:var(--bg);padding:12px 16px;z-index:50;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.skip:focus{clip-path:none;width:auto;height:auto}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{padding-inline:var(--m)}
.display{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;line-height:1}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.04;text-transform:uppercase}
h2{font-size:var(--head);max-width:16ch}
.lead{font-size:var(--lead);line-height:1.4;max-width:34ch}
.small{font-size:var(--small);color:var(--muted)}

/* header */
.site-header{background:var(--bg);position:sticky;top:0;z-index:30}
.bar{display:flex;align-items:center;gap:20px;min-height:72px}
.brand{font-family:var(--display);font-weight:800;text-decoration:none;font-size:1.0625rem;letter-spacing:-.03em;text-transform:uppercase;min-height:44px;display:inline-flex;align-items:center;margin-right:auto;white-space:nowrap}
.nav ul{display:flex;gap:6px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;font-weight:500}
.nav a:hover,.nav a[aria-current]{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;background:var(--ink);color:var(--bg);font:500 var(--body)/1 var(--text);text-decoration:none;border:0;border-radius:0;cursor:pointer;transition:transform .2s var(--ease),background-color .2s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn.on-field{background:var(--bg);color:var(--ink)}
.call-short{display:none}
.menu-btn{display:none;width:48px;height:48px;background:none;border:0;padding:0;cursor:pointer;color:var(--ink)}
.menu-btn span{display:block;width:26px;height:3px;background:currentColor;margin:5px auto;transition:transform .25s var(--ease),opacity .2s}
.menu-btn[aria-expanded=true] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-btn[aria-expanded=true] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded=true] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* hero: the name as three paint fields */
.hero h1{position:relative;display:grid;grid-template-columns:repeat(3,1fr);font-size:min(28vw,26rem);font-family:var(--display)}
.hero .f{display:flex;align-items:flex-end;padding:.03em var(--m) .07em;line-height:.8;overflow:hidden;transform-origin:50% 100%}
.hero .f b{display:block;font-weight:800;letter-spacing:-.04em;line-height:.8;padding-top:.06em}
.f-k{background:var(--red);color:var(--red-ink)}
.f-a{background:var(--ochre);color:var(--ochre-ink)}
.f-s{background:var(--blue);color:var(--blue-ink)}
.hero-band{display:grid;grid-template-columns:1fr auto;gap:24px var(--m);align-items:end;padding:28px var(--m) 32px}
.hero-band .cta{display:flex;gap:12px 24px;align-items:center;flex-wrap:wrap}
.link{display:inline-flex;align-items:center;min-height:44px;font-weight:500;text-underline-offset:5px;text-decoration-thickness:2px}

section{position:relative}
.sec{padding-block:var(--gap)}
.sec.tight{padding-block:calc(var(--gap)*.6)}

/* live: the wall */
.try{background:var(--surface)}
.try-grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--m);align-items:center}
.try h2{margin-bottom:20px}
.room{display:block;width:100%;height:auto;background:var(--bg)}
.room .wall{fill:var(--wall,#c23a2b);transition:fill .45s var(--ease)}
.room[hidden]{display:none}
.try-side .lead{margin-bottom:28px}
.modes{display:flex;gap:8px;margin-bottom:20px}
.mode{min-height:48px;padding:0 22px;background:var(--bg);color:var(--ink);border:0;font:500 var(--body)/1 var(--text);cursor:pointer;transition:transform .2s var(--ease)}
.mode[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.mode:hover{transform:translateY(-2px)}
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sw{display:flex;flex-direction:column;justify-content:flex-end;min-height:88px;padding:10px 12px;border:0;text-align:left;font:500 var(--small)/1.2 var(--text);cursor:pointer;transition:transform .2s var(--ease)}
.sw:hover{transform:translateY(-3px)}
.sw[aria-pressed=true]{outline:3px solid var(--ink);outline-offset:3px}
.no-js .try-ui{display:none}
.try-note{margin-top:20px}

/* services in the page */
.svc{display:grid;grid-template-columns:5fr 7fr;gap:var(--m);align-items:end}
.svc figure img{width:100%;aspect-ratio:3/4;object-fit:cover}
.svc .ph{overflow:hidden}
.svc-list{display:grid;gap:0}
.svc-list li{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;font-size:var(--head);line-height:1.1;padding:.3em 0}
.svc-list li a{text-decoration:none}
.svc-list li a:hover{text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:.15em}
.svc h2{margin-bottom:28px}
figcaption{font-size:var(--small);color:var(--muted);margin-top:12px;max-width:60ch}

/* place picture */
.place{margin:0}
.place .ph{overflow:hidden}
.place img{width:100%;aspect-ratio:2.4/1;object-fit:cover;object-position:50% 12%;height:auto}
.place figcaption{padding:12px var(--m) 0;max-width:none}
@media(max-width:700px){.place img{aspect-ratio:1.5/1;object-position:15% 10%}}

/* ink statements */
.ink-field{background:var(--ink);color:var(--bg)}
.ink-field .small,.ink-field figcaption{color:#c9d0d6}
.stmt{display:grid;grid-template-columns:5fr 7fr;gap:var(--m);align-items:start}
.stmt p.big{font-size:var(--lead);line-height:1.35;max-width:30ch}
.stmt p.big+p.big{margin-top:20px}
.rec{background:var(--ochre);color:var(--ochre-ink)}
.rec .small{color:#2a2a1f}
.rec blockquote{margin:0;font-size:var(--lead);line-height:1.35;max-width:30ch}

/* close */
.close h2{margin-bottom:20px;max-width:20ch}
.mail{display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.04em;line-height:1;font-size:clamp(1.5rem,5.4vw,5.5rem);text-decoration:none;margin:clamp(36px,6vw,80px) 0 28px;overflow-wrap:anywhere}
.mail:hover{text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.1em}
.close .cta{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}

/* subpages */
.page-head{padding:clamp(56px,8vw,120px) 0 clamp(40px,6vw,80px)}
.page-head h1{font-size:clamp(3.25rem,16.4vw,18rem);max-width:none;line-height:.95;letter-spacing:-.045em}
.page-head.red{background:var(--red);color:var(--red-ink)}.page-head.ochre{background:var(--ochre);color:var(--ochre-ink)}.page-head.blue{background:var(--blue);color:var(--blue-ink)}
.page-head .lead{margin-top:20px}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:0 var(--m)}
.tile.pic .ph{width:100%;height:100%;overflow:hidden}
.tile{margin:0;display:flex;align-items:flex-end;min-height:clamp(240px,38vw,520px);padding:var(--m);font:500 var(--head)/1.05 var(--text);letter-spacing:-.03em}
.tile.red{background:var(--red);color:var(--red-ink)}
.tile.ochre{background:var(--ochre);color:var(--ochre-ink)}
.tile.blue{background:var(--blue);color:var(--blue-ink)}
.tile.ink{background:var(--ink);color:var(--bg)}
.tile.pic{padding:0;background:var(--surface)}
.tile.pic img{width:100%;height:100%;object-fit:cover;min-height:inherit}
.facts{display:grid;grid-template-columns:34% 1fr;gap:var(--m)}
.facts dl{margin:0;display:grid;gap:22px;align-content:start}
.facts dt{font-size:var(--small);color:var(--muted)}
.facts dd{margin:2px 0 0;font-weight:500}
.facts .wide{font-size:var(--lead);line-height:1.4;max-width:34ch}
.facts .wide p+p{margin-top:18px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 var(--m)}
.trio .ph{overflow:hidden}
.trio img{width:100%;aspect-ratio:4/5;object-fit:cover}
.trio-cap{padding:12px var(--m) 0}

/* form */
.contact-grid{display:grid;grid-template-columns:5fr 7fr;gap:var(--m);align-items:start}
.ways li{padding:10px 0}
.ways a{font-weight:500;font-size:var(--lead);display:inline-flex;align-items:center;min-height:44px}
.notice{background:var(--ochre);color:var(--ochre-ink);padding:16px 18px;margin-bottom:28px}
.form h2{font-size:var(--lead);max-width:none;margin-bottom:16px;text-transform:none;letter-spacing:-.02em}
label{display:block;font-weight:500;margin:18px 0 6px}
input,textarea{width:100%;min-height:48px;padding:12px 14px;background:var(--surface);border:0;border-radius:0;font:inherit;color:var(--ink)}
input:focus,textarea:focus{outline:3px solid var(--ink);outline-offset:0}
textarea{min-height:130px;resize:vertical}
.form .btn{margin-top:24px}
.demo-result{margin-top:18px;background:var(--surface);padding:14px 16px}

/* footer */
.site-footer{background:var(--ink);color:var(--bg);padding:clamp(56px,8vw,120px) 0 36px}
.foot-name{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.04em;line-height:.95;font-size:clamp(2.5rem,13vw,14rem);white-space:nowrap;margin-bottom:clamp(36px,6vw,80px)}
.foot-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px var(--m)}
.site-footer a{display:inline-flex;align-items:center;min-height:44px}
.foot-links{display:grid}
.credits{margin-top:36px;color:#c9d0d6;font-size:var(--small);max-width:70ch}
.credits a{display:inline;min-height:0}
.disclaimer{margin-top:16px;font-size:var(--small);color:#c9d0d6}

/* motion: everything below ends visible */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0)*80ms)}
.js .rv.in{opacity:1;transform:none}
.js .hero .f{animation:rise .6s var(--ease) both}
.js .hero .f-a{animation-delay:.05s}
.js .hero .f-s{animation-delay:.1s}
@keyframes rise{from{transform:scaleY(.0001)}to{transform:none}}
.js .hero .f b{animation:up .6s .12s var(--ease) both}
@keyframes up{from{transform:translateY(40%);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .js .hero .f,.js .hero .f b{animation:none}
  .btn,.mode,.sw,.room .wall{transition:none}
}

@media(max-width:900px){
  .try-grid,.svc,.stmt,.contact-grid,.facts{grid-template-columns:1fr}
  .trio{grid-template-columns:1fr}.trio img{aspect-ratio:4/3}
  .svc figure img{aspect-ratio:4/3;object-position:50% 40%}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);padding:8px var(--m) 24px}
  .nav.open{display:block}
  .nav ul{display:grid;gap:0}
  .nav a{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:var(--head);padding:10px 0;min-height:56px}
  .call-label{display:none}.call-short{display:inline}
  .btn-call{padding:0 18px}
  .hero-band{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .swatches{grid-template-columns:repeat(3,1fr)}
}

html,body{overflow-x:clip}