:root{--ink:#031d1c;--teal:#05524f;--teal2:#0b7a74;--cream:#f4f0e4;--red:#b30f16;--blue:#17149e;--orange:#c9690b;--black:#0a0b0c;--line:rgba(3,29,28,.18)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--cream);font:400 17px/1.5 Archivo,system-ui,sans-serif;overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;line-height:1;letter-spacing:.005em;margin:0}
p{margin:0}
:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px #031d1c}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:12px;z-index:100}
.skip:focus{left:8px;top:8px}
/* header */
.hd{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:linear-gradient(rgba(3,29,28,.72),rgba(3,29,28,0));transition:background-color .25s}
.hd.solid{background:var(--ink)}
.brand{font:400 21px/1 Anton,Impact,sans-serif;text-transform:uppercase;text-decoration:none;letter-spacing:.02em;display:flex;align-items:center;min-height:44px}
.nav{display:flex;align-items:center;gap:6px}
.nav a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center;padding:0 12px;font-weight:600;font-size:15px}
.nav a[aria-current=page]{text-decoration:underline;text-underline-offset:5px}
.nav .cta,.mcta{background:var(--cream);color:var(--ink);font-weight:700}
.mw{display:none;align-items:center;gap:8px}
.mcta{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;text-decoration:none;font-size:15px}
.burger{width:44px;height:44px;background:none;border:1px solid rgba(244,240,228,.6);color:inherit;display:grid;place-content:center;gap:5px;padding:0;cursor:pointer}
.burger i{display:block;width:20px;height:2px;background:currentColor}
@media(max-width:760px){.mw{display:flex}.nav{display:none;position:fixed;inset:64px 0 auto 0;background:var(--ink);flex-direction:column;align-items:stretch;padding:8px 16px 20px;gap:0}
.nav.open{display:flex}.nav a{font:400 34px/1 Anton,Impact,sans-serif;text-transform:uppercase;min-height:60px;padding:0;border-bottom:1px solid rgba(244,240,228,.2)}.nav .cta{display:none}}
/* hero */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;background:#05524f}
.hero img,.hero canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 42%}
.hero canvas{opacity:0;transition:opacity .35s;touch-action:pan-y}
.hero.gl canvas{opacity:1}
.hero h1{position:absolute;left:16px;right:16px;top:84px;color:var(--cream);font-size:min(29.5vw,19vh);line-height:1.04;text-shadow:0 2px 24px rgba(3,29,28,.5)}
.hero h1 span{display:block}
@media(max-aspect-ratio:686/1000){.hero img{transform:scale(1.25);transform-origin:62% 0}.hero h1{font-size:min(25.5vw,15.5vh);top:78px}}
.hero h1 .s{font-size:.62em;line-height:1.12}
.hero.gl h1{color:transparent;text-shadow:none;pointer-events:none}
.hf{position:absolute;left:0;right:0;bottom:0;padding:90px 16px 22px;background:linear-gradient(rgba(3,29,28,0),rgba(3,29,28,.86) 55%);transition:opacity .6s,transform .6s}
.hero.gl:not(.done) .hf{opacity:0;transform:translateY(14px)}
.hf p{font-size:18px;font-weight:600;max-width:30em;margin-bottom:14px}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;font-weight:700;text-decoration:none;background:var(--cream);color:var(--ink);border:2px solid var(--cream);font-size:17px;cursor:pointer}
.btn.o{background:transparent;color:var(--cream)}
.btn.d{background:var(--ink);color:var(--cream);border-color:var(--ink)}
@media(min-width:900px){.hero h1{left:48px;right:auto;top:92px;font-size:min(12.5vw,27vh)}.hf{padding:100px 48px 34px}}
/* mirror */
.film{position:relative;height:88vh;height:88svh;min-height:560px;overflow:hidden;background:var(--teal)}
.film img,.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hs-vid{opacity:0;transition:opacity .4s}.hs-vid.hs-on{opacity:1}
.hs-fb{opacity:0;transition:opacity .4s}.hs-fb.hs-on{opacity:1}
.film .cap{position:absolute;left:0;right:0;bottom:0;padding:90px 16px 24px;background:linear-gradient(rgba(3,29,28,0),rgba(3,29,28,.85) 60%)}
.film h2{font-size:clamp(64px,19vw,150px)}
.film p{font-size:18px;max-width:27em;margin-top:8px;font-weight:500}
@media(min-width:900px){.film .cap{padding:120px 48px 40px}}
/* paints */
.chip-sec{position:sticky;top:0;height:84vh;height:84svh;min-height:540px;overflow:hidden;display:block;text-decoration:none;color:var(--ink)}
.chip-sec>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chip{position:absolute;left:16px;bottom:18px;width:min(250px,64vw);background:var(--cream);box-shadow:0 10px 26px rgba(0,0,0,.35)}
.chip i{display:block;height:92px;background:var(--c)}
.chip b{display:block;font:400 30px/1.05 Anton,Impact,sans-serif;text-transform:uppercase;padding:11px 13px 2px}
.chip span{display:block;padding:0 13px 12px;font-size:15px;line-height:1.3}
@media(min-width:900px){.chip{left:48px;bottom:40px}}
@media(prefers-reduced-motion:reduce){.chip-sec{position:relative}}
/* services list */
.sv{background:var(--cream);color:var(--ink);padding:44px 16px 34px;position:relative}
.sv h2{font-size:18px;font-family:Archivo,sans-serif;font-weight:700;text-transform:none;margin-bottom:12px}
.sv ul{list-style:none;margin:0;padding:0}
.sv li{border-top:1px solid var(--line)}
.sv li a{display:flex;align-items:center;min-height:56px;padding:6px 0;text-decoration:none;font:400 clamp(28px,8vw,66px)/1.05 Anton,Impact,sans-serif;text-transform:uppercase}
@media(min-width:900px){.sv{padding:80px 48px}}
.fin{background:var(--teal);padding:34px 16px;position:relative}
.fin h2{font-size:clamp(40px,12vw,90px)}
.fin p{margin-top:8px;max-width:30em}
@media(min-width:900px){.fin{padding:60px 48px}}
.say{background:var(--ink);padding:40px 16px;position:relative}
.say blockquote{margin:0 0 22px;font:400 clamp(30px,8.4vw,60px)/1.12 Anton,Impact,sans-serif;text-transform:uppercase}
.say cite{display:block;font:500 15px/1.4 Archivo,sans-serif;text-transform:none;margin-top:8px}
@media(min-width:900px){.say{padding:80px 48px}}
.end{background:var(--red);padding:44px 16px;position:relative}
.end h2{font-size:clamp(56px,17vw,140px);margin-bottom:16px}
@media(min-width:900px){.end{padding:80px 48px}}
/* footer */
.ft{background:var(--ink);border-top:1px solid rgba(244,240,228,.2);padding:30px 16px 34px;position:relative;font-size:15px}
.ft img{width:96px;height:auto;margin-bottom:12px}
.ft a{display:inline-flex;align-items:center;min-height:44px;margin-right:16px}
.ft .cr{margin-top:14px;opacity:.82}
@media(min-width:900px){.ft{padding:40px 48px}}
/* inner pages */
.ph{padding:96px 16px 26px;background:var(--bg,var(--teal))}
.ph h1{font-size:clamp(68px,22vw,190px)}
.ph p{margin-top:10px;max-width:32em;font-size:18px}
@media(min-width:900px){.ph{padding:120px 48px 40px}}
.filters{display:flex;gap:6px;overflow-x:auto;padding:14px 12px;background:var(--ink);position:sticky;top:64px;z-index:20}
.filters button{flex:none;min-height:44px;padding:0 10px;background:none;border:1px solid rgba(244,240,228,.5);color:inherit;font:600 15px Archivo,sans-serif;cursor:pointer}
.filters button[aria-pressed=true]{background:var(--cream);color:var(--ink)}
.wk{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;padding:0 0 4px}
.wk figure{margin:0;position:relative;grid-column:span 1;background:#062e2c}
.wk figure.w{grid-column:span 2}
.wk img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.wk .w img{aspect-ratio:5/4}
.wk figcaption{position:absolute;left:0;bottom:0;right:0;padding:32px 10px 9px;background:linear-gradient(rgba(3,29,28,0),rgba(3,29,28,.86));font-size:14px;line-height:1.25}
.wk figcaption b{display:block;font:400 21px/1.1 Anton,Impact,sans-serif;text-transform:uppercase}
.wk [hidden]{display:none}
@media(min-width:900px){.wk{grid-template-columns:repeat(4,1fr)}}
.svc{display:grid;grid-template-columns:1fr;background:var(--cream);color:var(--ink)}
.svc article{display:grid;grid-template-columns:1fr}
.svc img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.svc div{padding:20px 16px 30px}
.svc h2{font-size:clamp(38px,10vw,70px);margin-bottom:8px}
@media(min-width:900px){.svc article{grid-template-columns:1fr 1fr;align-items:center}.svc article:nth-child(even) img{order:2}.svc div{padding:40px 48px}}
/* build tool */
.tool{background:var(--cream);color:var(--ink);padding:26px 16px 40px}
.tool fieldset{border:0;padding:0;margin:0 0 26px}
.tool legend,.tool label.l{font:400 26px/1.1 Anton,Impact,sans-serif;text-transform:uppercase;padding:0;margin-bottom:10px;display:block}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opts label{position:relative;display:block;cursor:pointer}
.opts input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.opts span{display:flex;align-items:center;min-height:52px;padding:8px 12px;border:2px solid var(--ink);font-weight:600;font-size:15px;line-height:1.2;height:100%}
.opts input:checked+span{background:var(--ink);color:var(--cream)}
.opts input:focus-visible+span{outline:3px solid var(--teal2);outline-offset:2px}
.sw{grid-template-columns:repeat(3,1fr)}
.sw span{flex-direction:column;align-items:stretch;padding:0;gap:0}
.sw img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.sw em{font-style:normal;padding:7px 8px;font-size:14px;min-height:50px}
.tool input[type=text],.tool textarea{width:100%;min-height:50px;font:400 17px Archivo,sans-serif;border:2px solid var(--ink);background:#fff;color:var(--ink);padding:11px;border-radius:0}
.preview{background:var(--teal);color:var(--cream);padding:14px;margin-bottom:12px;white-space:pre-wrap;font-size:16px;min-height:80px}
.tool .btn{width:100%;margin-bottom:10px}
.small{font-size:14px;margin-top:6px}
@media(min-width:900px){.tool{padding:50px 48px;display:grid;grid-template-columns:1.2fr 1fr;gap:48px}.tool .sticky{position:sticky;top:90px;align-self:start}.opts{grid-template-columns:repeat(3,1fr)}.sw{grid-template-columns:repeat(6,1fr)}}
.rise{opacity:0;transform:translateY(16px);transition:opacity .55s,transform .55s}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.rise{opacity:1;transform:none}}

@media(min-width:900px){.film img,.film video{left:auto;right:0;width:46%}.film .cap{right:46%;background:none;top:0;display:flex;flex-direction:column;justify-content:flex-end}
.chip-sec{background:var(--c)}.chip-sec>img{left:auto;right:0;width:62%}}
article[id]{scroll-margin-top:64px}