:root{--navy:#17235E;--navy-d:#0E1740;--red:#BC2B22;--paper:#F4F5F1;--ink:#1B1D22;--ink2:#5A6070;--line:#DEE0DA}
*{box-sizing:border-box}
body{margin:0;font-family:Archivo,system-ui,sans-serif;background:var(--paper);color:var(--ink);font-size:17px;line-height:1.6}
img{display:block;max-width:100%}
.w{max-width:1100px;margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}

/* Header */
header{position:sticky;top:0;z-index:9;background:#fff;border-bottom:1px solid var(--line)}
header .w{display:flex;align-items:center;justify-content:space-between;gap:12px;height:66px}
.logo{display:block;line-height:0;min-width:0}
.logo>img,.logo .reveal{display:block;height:42px;width:auto;aspect-ratio:900/316;max-width:100%;object-fit:contain;object-position:left}
.hdr-links{display:flex;align-items:center;gap:10px;flex-shrink:0}
.call{background:var(--red);color:#fff;text-decoration:none;font-weight:500;font-size:15px;padding:11px 18px;border-radius:6px;white-space:nowrap}
.quote-link{color:var(--navy);text-decoration:none;font-weight:500;font-size:15px;padding:10px 14px;border:1px solid var(--navy);border-radius:6px;white-space:nowrap}
.quote-link .short{display:none}
@media (max-width:420px){.logo>img,.logo .reveal{height:30px}.call{font-size:12.5px;padding:9px 9px}.quote-link{font-size:12.5px;padding:8px 9px}.hdr-links{gap:7px}.quote-link .long{display:none}.quote-link .short{display:inline}}

/* Hero */
.hero{background:var(--navy);color:#fff;padding:30px 0 46px}
/* Intro: full-screen logo build on first visit per session, built by intro.js.
   Wand slides in, wordmark is "washed" clean left to right, splash blooms,
   then the whole stage docks into the header logo slot. */
html.intro-active header .logo{visibility:hidden}
#intro{position:fixed;inset:0;z-index:50;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .5s}
#intro.docking{background-color:rgba(255,255,255,0);pointer-events:none}
#intro .stage{position:relative;width:min(74vw,560px);aspect-ratio:900/316;transform-origin:0 0;will-change:transform}
#intro .stage img{position:absolute;inset:0;width:100%;height:100%}
#intro .ghost{filter:grayscale(1) blur(1.5px);opacity:.28}
#intro .text{clip-path:inset(0 100% 0 0);animation:i-wipe 1s .45s cubic-bezier(.4,0,.2,1) forwards}
#intro .edge{position:absolute;top:-4%;bottom:-4%;left:0;width:7%;background:linear-gradient(90deg,rgba(120,200,255,0),rgba(120,200,255,.6) 55%,rgba(120,200,255,0));transform:translateX(-120%);opacity:0;animation:i-edge 1s .45s cubic-bezier(.4,0,.2,1) forwards}
#intro .wand{animation:i-wand .5s cubic-bezier(.2,.8,.3,1) both}
#intro .splash{opacity:0;transform-origin:64% 55%;animation:i-splash .5s 1.35s cubic-bezier(.2,.9,.3,1.25) forwards}
#intro .drops{position:absolute;left:63%;top:27%;width:0;height:0}
#intro .drops i{position:absolute;width:5px;height:5px;border-radius:50%;background:#5FB8F0;opacity:0;animation:i-drop .7s ease-out both}
#intro .drops i:nth-child(1){--dx:50px;--dy:-24px;animation-delay:.5s}
#intro .drops i:nth-child(2){--dx:80px;--dy:8px;animation-delay:.58s}
#intro .drops i:nth-child(3){--dx:60px;--dy:38px;animation-delay:.66s}
#intro .drops i:nth-child(4){--dx:95px;--dy:-8px;animation-delay:.76s}
#intro .drops i:nth-child(5){--dx:45px;--dy:60px;animation-delay:.86s}
#intro .drops i:nth-child(6){--dx:105px;--dy:30px;animation-delay:.96s}
#intro .drops i:nth-child(7){--dx:72px;--dy:-40px;animation-delay:1.06s}
#intro .drops i:nth-child(8){--dx:88px;--dy:52px;animation-delay:1.16s}
/* .done = skipped or finished: every layer jumps to its final state */
#intro.done .stage *{animation:none!important}
#intro.done .text{clip-path:inset(0 0 0 0)}
#intro.done .edge,#intro.done .drops{display:none}
#intro.done .wand{transform:none;opacity:1}
#intro.done .splash{opacity:1;transform:none}
@keyframes i-wand{from{transform:translateX(-22%);opacity:0}to{transform:none;opacity:1}}
@keyframes i-wipe{to{clip-path:inset(0 0 0 0)}}
@keyframes i-edge{from{opacity:1;transform:translateX(-120%)}to{opacity:1;transform:translateX(1450%)}}
@keyframes i-splash{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}
@keyframes i-drop{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}}
.hero h1{font-size:clamp(1.18rem,2.5vw,1.5rem);font-weight:500;line-height:1.35;margin:0;max-width:30rem}
.creds{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:16px 0 26px}
.creds li{border:1px solid #3B4C8E;border-radius:99px;padding:6px 14px;font-size:13.5px;color:#DCE4F5}
.hint{margin:12px 0 0;font-size:14px;color:#9DAFD6}

/* Before/after compare slider (see compare.js) */
.compare{position:relative;overflow:hidden;border-radius:10px;aspect-ratio:1400/950;background:var(--navy-d);user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.compare img:last-of-type{clip-path:inset(0 0 0 50%)} /* no-JS fallback: static 50/50 split */
.compare-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-1.5px)}
.compare-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:#fff;color:var(--navy);display:grid;place-items:center;font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.compare-label{position:absolute;bottom:12px;font-size:12.5px;background:rgba(9,14,38,.72);color:#fff;padding:5px 11px;border-radius:5px}
.compare-label.before{left:12px}
.compare-label.after{right:12px;background:var(--red)}
.compare-range{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.compare:focus-within{outline:3px solid var(--red);outline-offset:2px}

/* Sections */
section{padding:64px 0}
h2{font-size:clamp(1.6rem,3.4vw,2.25rem);margin:0 0 10px;font-weight:700}
.sub{margin:0 0 34px;color:var(--ink2);max-width:34rem}

/* Services */
.services{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.services article{background:#fff;display:flex;flex-direction:column}
.services article img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.svc-body{padding:18px 20px 22px}
.services h3{margin:0 0 7px;font-size:16.5px}
.services p{margin:0;font-size:14.6px;color:var(--ink2);line-height:1.62}

/* Recent work */
.work{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.grid{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.pair{margin:0}
.pair .compare{border-radius:9px}
.drag{font-weight:400;color:var(--ink2);font-size:13.5px;margin-left:8px}
.imgs{display:grid;grid-template-columns:1fr 1fr;gap:3px;border-radius:9px;overflow:hidden;background:var(--line)}
.imgs span{position:relative;display:block}
.imgs img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.tag{position:absolute;left:8px;bottom:8px;font-style:normal;font-size:11.5px;background:rgba(9,14,38,.75);color:#fff;padding:4px 9px;border-radius:4px}
.tag.after{background:var(--red)}
figcaption{margin-top:11px;font-size:15px;font-weight:500}

/* Promise */
.promise{background:var(--navy);color:#fff}
.promise h2{color:#fff}
.promise .sub{color:#C3CFEA}
.promise ul{list-style:none;padding:0;margin:20px 0 0;max-width:34rem}
.promise li{padding:12px 0;border-top:1px solid #33427F;color:#DCE4F5;font-size:15.5px}
.promise .alt{margin:14px 0 0;font-size:14.5px;color:#C3CFEA}
.promise .alt a{color:#fff}
.cta{display:inline-block;margin-top:26px;background:var(--red);color:#fff;text-decoration:none;font-weight:500;padding:14px 26px;border-radius:6px}

/* Work subpages (work/*.html, generated by tools/build-work-pages.py) */
.work-page h1{font-size:clamp(1.6rem,3.4vw,2.25rem);margin:8px 0 10px;font-weight:700}
.back{display:inline-block;font-size:14.5px;color:var(--ink2);text-decoration:none}
.back:hover{color:var(--navy)}
.wp-figure{margin:0 0 38px}
.wp-figure>img{width:100%;height:auto;border-radius:9px;max-height:82vh;object-fit:contain;background:var(--line)}
.wp-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wp-pair span{position:relative;display:block}
.wp-pair img{width:100%;height:auto;border-radius:9px;display:block}
.wp-figure .compare{border-radius:9px}
.compare.portrait{max-width:640px}
.wp-cta{margin-top:10px;padding-top:30px;border-top:1px solid var(--line)}
.wp-cta .alt{margin:14px 0 0;font-size:14.5px;color:var(--ink2)}
.wp-cta .alt a{color:var(--navy)}
@media (max-width:640px){.wp-pair{grid-template-columns:1fr}}
/* "See the work" link on service cards */
.svc-body{display:flex;flex-direction:column;flex:1}
.svc-more{margin-top:auto;padding-top:12px;font-size:14px;font-weight:500;color:var(--navy);text-decoration:none}
.svc-more:hover{text-decoration:underline}

/* Quote form */
.quote{background:var(--paper)}
.quote .sub a{color:var(--navy);font-weight:500}
.qform{max-width:40rem;background:#fff;border:1px solid var(--line);border-radius:10px;padding:26px 22px}
.qform label{display:block;font-size:14.5px;font-weight:500;margin-bottom:16px}
.qform .opt{font-weight:400;color:var(--ink2)}
.qform input:not([type=checkbox]),.qform select,.qform textarea{display:block;width:100%;margin-top:6px;font:inherit;font-size:16px;padding:11px 12px;border:1px solid #C9CCC4;border-radius:6px;background:#fff;color:var(--ink)}
.qform input:focus,.qform select:focus,.qform textarea:focus{outline:2px solid var(--navy);outline-offset:1px;border-color:var(--navy)}
.qform textarea{resize:vertical;min-height:6rem}
.qform .row{display:grid;gap:0 16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.qform .cta{margin-top:4px;border:0;cursor:pointer;font:inherit;font-weight:500}
.qform .cta[disabled]{opacity:.6;cursor:default}
.qform .botcheck{position:absolute;left:-9999px}
.qerror{color:var(--red);font-size:14.5px;margin:0 0 12px}
.qsent{margin:16px 0 0;font-weight:500;color:var(--navy)}
.qform.is-sent > :not(.qsent){display:none}
.qform.is-sent .qsent{display:block}

/* Footer */
footer{background:var(--navy-d);color:#B9C4E2;padding:40px 0;font-size:14.5px}
footer a{color:#B9C4E2}
footer p{margin:0 0 6px}
footer .name{color:#fff}
footer .copy{margin:18px 0 0;font-size:13px;color:#8494C0}