:root{--char:#1b1d20;--char2:#26292d;--aqua:#29b6e8;--blue:#0d7fc0;--ice:#e9f7fd;--grout:#d9dee2;--ink:#1b1d20;--mut:#5b6670;--w:1160px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Karla,system-ui,sans-serif;font-size:17px;line-height:1.6;color:var(--ink);background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:Outfit,system-ui,sans-serif;line-height:1.08;margin:0 0 .5em;letter-spacing:-.01em}
h2{font-size:clamp(28px,4vw,44px);font-weight:800}
h3{font-size:20px;font-weight:700}
.wrap{max-width:var(--w);margin:0 auto;padding:0 22px}
.kicker{display:flex;align-items:center;gap:10px;font-family:Outfit,sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:var(--aqua);margin:0 0 18px}
.kicker span{width:14px;height:14px;background:var(--aqua);box-shadow:16px 0 0 #fff,0 16px 0 #fff,16px 16px 0 var(--blue);margin-right:18px;transform:scale(.6);transform-origin:left top}
.kicker--dark{color:var(--blue)}
.kicker--dark span{box-shadow:16px 0 0 var(--grout),0 16px 0 var(--grout),16px 16px 0 var(--blue)}
/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(27,29,32,.96);backdrop-filter:blur(6px);color:#fff;border-bottom:1px solid #33373c}
.top__inner{display:flex;align-items:center;gap:24px;height:66px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo__tiles{display:grid;grid-template-columns:repeat(2,11px);gap:2px}
.logo__tiles i{width:11px;height:11px;background:#fff}
.logo__tiles i:nth-child(1){background:var(--aqua)}.logo__tiles i:nth-child(4){background:var(--blue)}
.logo__txt{font-family:Outfit,sans-serif;font-weight:800;font-size:20px;letter-spacing:.04em}
.logo__txt b{color:var(--aqua);font-weight:800}
.top__nav{margin-left:auto;display:flex;gap:26px}
.top__nav a{text-decoration:none;font-weight:600;font-size:15px;opacity:.85}
.top__nav a:hover{opacity:1;color:var(--aqua)}
.pill{background:var(--aqua);color:var(--char);text-decoration:none;font-family:Outfit,sans-serif;font-weight:700;padding:9px 18px;border-radius:4px}
/* hero */
.hero{position:relative;background:var(--char);color:#fff;overflow:hidden;padding:72px 0 84px}
.hero__mosaic{position:absolute;right:-40px;top:-40px;width:58%;height:130%;display:grid;grid-template-columns:repeat(24,1fr);gap:3px;transform:skewY(-8deg);opacity:.9;
  -webkit-mask-image:linear-gradient(100deg,transparent 5%,#000 60%);mask-image:linear-gradient(100deg,transparent 5%,#000 60%)}
.hero__mosaic i{aspect-ratio:1;animation:tw 7s ease-in-out infinite}
@keyframes tw{50%{filter:brightness(1.35)}}
.hero__grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(44px,6.6vw,86px);font-weight:800;text-transform:none}
.hero h1 em{font-style:normal;color:var(--aqua)}
.hero__lede{font-size:19px;max-width:30em;color:#cfd6dc}
.hero__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--aqua);color:var(--char);text-decoration:none;font-family:Outfit,sans-serif;font-weight:700;font-size:17px;padding:15px 24px;border-radius:4px;border:2px solid var(--aqua);transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:19px;height:19px;fill:currentColor}
.btn--ghost{background:transparent;color:#fff;border-color:#fff}
.hero__photo{margin:0;border:10px solid #fff;outline:3px solid var(--aqua);outline-offset:6px;transform:rotate(1.5deg);box-shadow:0 30px 60px rgba(0,0,0,.45)}
.hero__photo img{aspect-ratio:4/3;object-fit:cover;width:100%}
/* facts */
.facts{background:var(--grout);padding:3px 0}
.facts__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:0}
.facts__grid div{background:#fff;padding:22px 20px}
.facts__grid b{display:block;font-family:Outfit,sans-serif;font-size:20px;color:var(--blue)}
.facts__grid span{color:var(--mut);font-size:15px}
/* services */
.services{padding:90px 0;background:linear-gradient(var(--grout) 2px,transparent 2px) 0 0/56px 56px,linear-gradient(90deg,var(--grout) 2px,transparent 2px) 0 0/56px 56px,#f7f9fa}
.sub{max-width:36em;color:var(--mut);font-size:18px;margin:0 0 40px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:var(--grout);border:6px solid var(--grout)}
.tile{background:#fff;padding:30px 24px 34px;position:relative;transition:background .2s}
.tile:hover{background:var(--ice)}
.tile__n{display:inline-block;font-family:Outfit,sans-serif;font-weight:800;color:#fff;background:var(--blue);padding:4px 9px;font-size:14px;margin-bottom:18px}
.tile:nth-child(2) .tile__n{background:var(--aqua)}.tile:nth-child(3) .tile__n{background:var(--char)}.tile:nth-child(4) .tile__n{background:#5fcdf2;color:var(--char)}
.tile p{margin:0;color:var(--mut)}
/* projects */
.projects{padding:90px 0 40px;background:var(--char2);color:#fff}
.projects__grid{display:grid;grid-template-columns:1fr 1.3fr;grid-template-rows:auto auto;gap:6px}
.p{margin:0;position:relative;overflow:hidden;background:#111}
.p img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.p:not(.p--tall) img{aspect-ratio:3/2}
.p:hover img{transform:scale(1.04)}
.p--tall{grid-row:span 2;min-height:560px}
.p figcaption{position:absolute;left:0;bottom:0;background:var(--aqua);color:var(--char);font-family:Outfit,sans-serif;font-weight:700;padding:8px 16px}
.p--quote{background:var(--blue);display:flex;flex-direction:column;justify-content:center;padding:40px}
.p--quote p{font-family:Outfit,sans-serif;font-weight:700;font-size:clamp(24px,3vw,36px);line-height:1.15;margin:0 0 12px}
.p--quote span{opacity:.8}
.note{font-size:13px;color:#9aa4ad;margin-top:16px}
/* band */
.band{position:relative;background:url(img/mosaic.jpg) center/cover;color:#fff;text-align:center;padding:100px 0}
.band__mosaic{position:absolute;inset:0;background:rgba(13,40,60,.72)}
.band__inner{position:relative}
.band p{font-size:20px;margin:0 0 26px}
/* contact */
.contact{padding:90px 0}
.contact__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start}
.hours{border-collapse:collapse;width:100%;margin:10px 0 26px}
.hours caption{text-align:left;font-family:Outfit,sans-serif;font-weight:700;font-size:18px;margin-bottom:8px}
.hours th,.hours td{text-align:left;padding:12px 0;border-bottom:2px solid var(--grout)}
.hours td{text-align:right;font-weight:600}
.clist{list-style:none;padding:0;margin:0}
.clist li{display:flex;gap:16px;padding:10px 0;font-size:18px}
.clist span{width:70px;flex:none;font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);padding-top:4px}
.clist a{color:var(--blue);font-weight:600;word-break:break-all}
.contact__map{border:6px solid var(--grout)}
.contact__map iframe{display:block;width:100%;height:420px;border:0}
/* footer */
.foot{background:var(--char);color:#c8cfd5;padding:34px 0 40px;font-size:14px}
.foot b{color:#fff;font-family:Outfit,sans-serif}
.foot__demo{color:#89939c;font-size:13px}
.callbar{display:none}
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s,transform .6s}
.rv.in{opacity:1;transform:none}
@media (max-width:900px){
  .top__nav{display:none}.pill{margin-left:auto}
  .hero{padding:48px 0 60px}
  .hero__grid,.contact__grid{grid-template-columns:1fr;gap:36px}
  .hero__mosaic{width:100%;opacity:.35}
  .tiles,.facts__grid{grid-template-columns:1fr 1fr}
  .projects__grid{grid-template-columns:1fr}
  .p--tall{grid-row:auto;min-height:0}.p--tall img{aspect-ratio:4/5}
}
@media (max-width:600px){
  body{font-size:16px;padding-bottom:62px}
  .logo__txt{font-size:17px}.pill{padding:7px 12px;font-size:14px}
  .tiles{grid-template-columns:1fr}
  .callbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:30}
  .callbar a{padding:18px;text-align:center;font-family:Outfit,sans-serif;font-weight:700;text-decoration:none;background:var(--aqua);color:var(--char)}
  .callbar a+a{background:var(--char);color:#fff}
}
@media (prefers-reduced-motion:reduce){.hero__mosaic i{animation:none}.rv{opacity:1;transform:none}}