/* Layout: blocky expanded caps on cool paper, cobalt bands as "billboards", sunny-yellow stickers for energy. Hash-routed multi-page site. */
:root{
  --paper:#F3F4F8; --card:#FFFFFF; --ink:#0E1124; --muted:#555B78; --line:#DADDE8;
  --blue:#2340FF; --blue-deep:#1428C8; --on-blue:#FFFFFF; --sun:#FFD23F; --on-sun:#0E1124;
  --coral:#FF6A55; --mint:#36D69A; --shadow:0 1px 0 rgba(14,17,36,.06), 0 18px 40px -24px rgba(14,17,36,.35);
  --map-bg:#E4E8F3; --map-road:#FFFFFF; --map-minor:#F2F4FA; --map-water:#BCCBFF; --map-park:#C9EEDA;
  --display:"Archivo", "Arial Black", Impact, sans-serif;
  --body:"Figtree", "Segoe UI", system-ui, sans-serif;
  --mono:"DM Mono", ui-monospace, Menlo, monospace;
  --r:22px; --wrap:1240px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0B0D1A; --card:#14172A; --ink:#F1F2F8; --muted:#A0A6C2; --line:#272B44;
  --blue:#3D57FF; --blue-deep:#2238E0; --on-blue:#FFFFFF; --sun:#FFD23F; --on-sun:#0E1124;
  --coral:#FF7A66; --mint:#3FE0A4; --shadow:0 1px 0 rgba(0,0,0,.4), 0 18px 40px -24px rgba(0,0,0,.8);
  --map-bg:#151932; --map-road:#2A3052; --map-minor:#1D2240; --map-water:#1C2A6B; --map-park:#14382D; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0B0D1A; --card:#14172A; --ink:#F1F2F8; --muted:#A0A6C2; --line:#272B44;
  --blue:#3D57FF; --blue-deep:#2238E0; --on-blue:#FFFFFF; --sun:#FFD23F; --on-sun:#0E1124;
  --coral:#FF7A66; --mint:#3FE0A4; --shadow:0 1px 0 rgba(0,0,0,.4), 0 18px 40px -24px rgba(0,0,0,.8);
  --map-bg:#151932; --map-road:#2A3052; --map-minor:#1D2240; --map-water:#1C2A6B; --map-park:#14382D; color-scheme:dark}

*{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
a{color:inherit}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3,.disp{font-family:var(--display);font-stretch:118%;font-weight:900;text-transform:uppercase;line-height:.92;letter-spacing:-.01em;text-wrap:balance;margin:0}
h1{font-size:clamp(2.5rem,7.4vw,6.6rem)}
h2{font-size:clamp(2rem,5vw,4.2rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.02}
p{margin:0}
.lead{font-size:clamp(1.08rem,1.5vw,1.28rem);color:var(--muted);max-width:56ch}
.eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:.6em}
.eyebrow::before{content:"";width:.6em;height:.6em;border-radius:50%;background:var(--blue)}
section{padding-block:clamp(64px,9vw,120px)}

/* Buttons */
.btn{--bg:var(--ink);--fg:var(--paper);display:inline-flex;align-items:center;gap:.6em;padding:.95em 1.5em;border-radius:999px;background:var(--bg);color:var(--fg);font-weight:700;text-decoration:none;border:2px solid var(--bg);font-size:1rem;cursor:pointer;font-family:var(--body);transition:transform .2s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-2px) rotate(-1deg);box-shadow:5px 5px 0 var(--sun)}
.btn.sun{--bg:var(--sun);--fg:var(--on-sun)}
.btn.sun:hover{box-shadow:5px 5px 0 var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.blue{--bg:var(--blue);--fg:var(--on-blue)}
.btn svg{width:1em;height:1em;transition:transform .2s}
.btn:hover svg{transform:translateX(3px)}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* Header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:20px;height:74px}
.logo{font-family:var(--display);font-weight:900;font-stretch:125%;font-size:1.7rem;letter-spacing:-.02em;text-decoration:none;line-height:1}
.nav{display:flex;align-items:center;gap:4px}
.nav a{text-decoration:none;font-weight:600;padding:.5em .9em;border-radius:999px;font-size:.98rem}
.nav a:hover{background:var(--card)}
.nav a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.menu-btn{display:none;background:none;border:2px solid var(--ink);color:var(--ink);border-radius:999px;padding:.45em 1em;font-weight:700;font-family:var(--body);cursor:pointer}
.bar-end{display:flex;align-items:center;gap:14px}
.head-socials,.nav-socials{display:flex;gap:6px}
.nav-socials{display:none}
.head-socials a,.nav .nav-socials a{width:40px;height:40px;padding:0;border-radius:50%;display:grid;place-items:center;color:var(--ink);border:2px solid var(--line);transition:transform .2s ease, background .2s, border-color .2s}
.head-socials a:hover,.nav .nav-socials a:hover{background:var(--sun);border-color:var(--sun);color:var(--on-sun);transform:translateY(-2px) rotate(-6deg)}
.head-socials svg,.nav-socials svg{width:18px;height:18px}
@media (max-width:1200px){
  .head-socials{display:none}
  .nav .nav-socials{display:flex;margin-top:14px;gap:10px}
  .nav .nav-socials a{width:48px;height:48px}
  .nav .nav-socials svg{width:22px;height:22px}
}

/* Map */
.map{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);min-height:420px;background:var(--map-bg)}
.map-art{position:absolute;inset:0}
.map-art svg{position:absolute;inset:0;width:100%;height:100%}
.m-bg{fill:var(--map-bg)}.m-water{fill:var(--map-water)}.m-park{fill:var(--map-park)}
.m-road{stroke:var(--map-road);fill:none;stroke-linecap:round}.m-minor{stroke:var(--map-minor);fill:none;stroke-linecap:round}
.pin{position:absolute;left:50%;top:50%;width:56px;height:56px;transform:translate(-50%,calc(-100% - 8px))}
.pin b{position:absolute;inset:0;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--blue);border:4px solid var(--card);box-shadow:var(--shadow);display:grid;place-items:center}
.pin b span{transform:rotate(45deg);font-family:var(--display);font-weight:900;font-stretch:125%;color:var(--on-blue);font-size:1.35rem;line-height:1}
.pin::before{content:"";position:absolute;left:50%;bottom:-16px;width:26px;height:10px;margin-left:-13px;border-radius:50%;background:var(--blue);animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.55}100%{transform:scale(2.6);opacity:0}}
.map-card{position:absolute;left:20px;bottom:20px;z-index:2;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;max-width:360px;box-shadow:var(--shadow);display:grid;gap:12px}
.map-card .addr{font-family:var(--display);font-weight:900;font-stretch:115%;text-transform:uppercase;font-size:1.3rem;line-height:1.1;user-select:all}
.map-card .hours{color:var(--muted);font-size:.95rem}
@media (max-width:640px){
  .map{min-height:0;display:flex;flex-direction:column}
  .map-art{position:relative;inset:auto;height:260px}
  .map-card{position:static;max-width:none;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none}
}

@media (max-width:1200px){
  .nav{display:none;position:absolute;left:0;right:0;top:74px;flex-direction:column;align-items:stretch;background:var(--paper);padding:12px max(20px,env(safe-area-inset-right,0px)) 24px max(20px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .nav a{font-family:var(--display);font-stretch:118%;text-transform:uppercase;font-size:1.5rem;padding:.4em .2em;font-weight:900}
  .nav a[aria-current="page"]{background:none;color:var(--blue)}
  .menu-btn{display:inline-block}
  .bar .btn{display:none}
}

/* Hero */
.hero{padding-block:clamp(48px,7vw,96px) clamp(48px,6vw,80px)}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center}
.hero-grid > *{min-width:0}
.hero h1 .swap{display:inline-grid;vertical-align:bottom;background:var(--sun);color:var(--on-sun);padding:.04em .18em .02em;border-radius:.16em;transform:rotate(-2deg);margin-top:.08em}
.swap span{grid-area:1/1}
.swap.on span{animation:swap 10s infinite;opacity:0}.swap.on span:nth-child(2){animation-delay:2.5s}.swap.on span:nth-child(3){animation-delay:5s}.swap.on span:nth-child(4){animation-delay:7.5s}
.swap span:first-child{opacity:1}
@keyframes swap{0%{opacity:0;transform:translateY(.3em)}3%,22%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateY(-.3em)}}
.hero .lead{margin-block:28px 32px}
.proof{display:flex;align-items:center;gap:14px;margin-top:34px;font-size:.95rem;color:var(--muted)}
.dots{display:flex}.dots i{width:34px;height:34px;border-radius:50%;border:3px solid var(--paper);margin-left:-10px;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:.75rem;color:var(--on-blue)}
.dots i:first-child{margin-left:0;background:var(--blue)}.dots i:nth-child(2){background:var(--coral)}.dots i:nth-child(3){background:var(--mint);color:var(--on-sun)}.dots i:nth-child(4){background:var(--sun);color:var(--on-sun)}

/* Phone mockups */
.stack{position:relative;height:520px}
.phone{position:absolute;width:220px;aspect-ratio:9/18.5;max-width:100%;border-radius:32px;background:var(--ink);padding:8px;box-shadow:var(--shadow)}
.screen{position:relative;height:100%;border-radius:25px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;color:#fff}
.screen::before{content:"";position:absolute;top:8px;left:50%;width:60px;height:16px;border-radius:9px;background:var(--ink);transform:translateX(-50%)}
.screen .cap{position:relative;font-family:var(--display);font-stretch:110%;font-weight:900;text-transform:uppercase;font-size:1.25rem;line-height:.95}
.screen .cap mark{background:var(--sun);color:var(--on-sun);padding:0 .15em}
.screen .meta{position:relative;font-family:var(--mono);font-size:.7rem;margin-top:8px;opacity:.9}
.screen .rail{position:absolute;right:10px;bottom:90px;display:flex;flex-direction:column;gap:14px;font-family:var(--mono);font-size:.62rem;text-align:center}
.screen .rail b{display:block;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.25);margin:0 auto 3px}
.g1{background:radial-gradient(circle at 30% 20%,#7d8cff,transparent 55%),linear-gradient(160deg,#2340FF,#0a1170)}
.g2{background:radial-gradient(circle at 70% 25%,#ffb199,transparent 50%),linear-gradient(170deg,#FF6A55,#7a1d4a)}
.g3{background:radial-gradient(circle at 40% 30%,#a9ffd8,transparent 50%),linear-gradient(170deg,#1aa673,#0d3b46)}
.g4{background:radial-gradient(circle at 50% 20%,#fff2b8,transparent 50%),linear-gradient(170deg,#f2b705,#b4421c)}
.stack .phone:nth-child(1){left:2%;top:40px;transform:rotate(-7deg)}
.stack .phone:nth-child(2){right:2%;top:0;transform:rotate(5deg);z-index:2}
.sticker{position:absolute;z-index:3;background:var(--sun);color:var(--on-sun);font-family:var(--display);font-stretch:118%;font-weight:900;text-transform:uppercase;padding:.6em .9em;border-radius:14px;line-height:1;transform:rotate(-6deg);box-shadow:var(--shadow);font-size:1rem}
.sticker small{display:block;font-family:var(--mono);font-weight:500;font-size:.62rem;letter-spacing:.08em;margin-top:4px}
.sticker.s1{left:-4%;bottom:40px}.sticker.s2{right:-2%;bottom:110px;background:var(--blue);color:var(--on-blue);transform:rotate(7deg)}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}.stack{height:440px;max-width:420px;width:100%;margin:0 auto}.phone{width:190px}.sticker.s1{left:0}.sticker.s2{right:0}}

/* Ribbon marquee */
.ribbon{background:var(--blue);color:var(--on-blue);overflow:hidden;padding-block:16px;transform:rotate(-1.2deg);margin-block:10px;border-block:3px solid var(--ink)}
.ribbon.sun{background:var(--sun);color:var(--on-sun);transform:rotate(1deg)}
.track{display:flex;gap:40px;width:max-content;animation:slide 32s linear infinite}
.track span{font-family:var(--display);font-stretch:120%;font-weight:900;text-transform:uppercase;font-size:clamp(1.3rem,2.4vw,2rem);white-space:nowrap;display:flex;align-items:center;gap:40px}
.track span::after{content:"✦";font-size:.7em}
@keyframes slide{to{transform:translateX(-50%)}}

/* Section heads */
.head{display:flex;justify-content:space-between;align-items:end;gap:28px;flex-wrap:wrap;margin-bottom:48px}
.head > div{display:grid;gap:18px;min-width:0;max-width:760px}

/* Services */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.svc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:16px;text-decoration:none;transition:transform .25s ease, border-color .25s;min-width:0}
.svc:hover{transform:translateY(-6px);border-color:var(--ink)}
.svc .ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--ink);color:var(--paper)}
.svc:nth-child(2) .ico{background:var(--blue);color:var(--on-blue)}.svc:nth-child(3) .ico{background:var(--sun);color:var(--on-sun)}.svc:nth-child(4) .ico{background:var(--coral);color:#fff}
.svc .ico svg{width:26px;height:26px}
.svc p{color:var(--muted);font-size:.98rem}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.tag{font-family:var(--mono);font-size:.72rem;padding:.35em .75em;border:1px solid var(--line);border-radius:999px;white-space:nowrap}
@media (max-width:1040px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.svc-grid{grid-template-columns:1fr}}

/* Work cards */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.case{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;text-align:left;padding:0;font:inherit;color:inherit;display:flex;flex-direction:column;transition:transform .25s ease}
.case:hover{transform:translateY(-6px)}
.case:hover .visual{filter:saturate(1.15)}
.visual{position:relative;aspect-ratio:16/10;max-width:100%;display:grid;place-items:center;overflow:hidden;transition:filter .3s}
.visual .stat{position:absolute;left:16px;top:16px;background:var(--sun);color:var(--on-sun);border-radius:14px;padding:.5em .8em;font-family:var(--display);font-stretch:118%;font-weight:900;font-size:1.4rem;line-height:1;text-transform:uppercase}
.visual .stat small{display:block;font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.06em;margin-top:3px}
.mini-phone{width:30%;aspect-ratio:9/18;border-radius:18px;background:#0E1124;padding:5px;transform:rotate(-5deg) translateY(14%)}
.mini-phone + .mini-phone{transform:rotate(6deg) translateY(4%);margin-left:-6%}
.mini-phone div{height:100%;border-radius:14px;display:flex;align-items:flex-end;padding:10px;color:#fff;font-family:var(--display);font-weight:900;font-stretch:110%;text-transform:uppercase;font-size:clamp(.6rem,1.3vw,.9rem);line-height:.95}
.pair{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.browser{width:76%;aspect-ratio:16/10;background:#fff;border-radius:12px;box-shadow:0 20px 40px -20px rgba(0,0,0,.5);overflow:hidden;transform:translateY(10%) rotate(-2deg);display:flex;flex-direction:column}
.browser .chrome{height:18px;background:#E8EAF2;display:flex;align-items:center;gap:4px;padding-left:8px}
.browser .chrome i{width:6px;height:6px;border-radius:50%;background:#B5BAD0}
.browser .page{flex:1;padding:8%;display:flex;flex-direction:column;gap:6%;color:#0E1124}
.browser .page b{font-family:var(--display);font-weight:900;font-stretch:118%;text-transform:uppercase;font-size:clamp(.7rem,1.6vw,1.15rem);line-height:.95}
.browser .page i{display:block;height:6%;border-radius:4px;background:#E2E5EF;width:70%}
.browser .page i:nth-of-type(2){width:50%}
.browser .page u{display:block;width:32%;height:12%;border-radius:999px;margin-top:auto}
.dash{width:72%;background:#fff;border-radius:14px;padding:5%;color:#0E1124;transform:translateY(8%) rotate(2deg);box-shadow:0 20px 40px -20px rgba(0,0,0,.5);display:grid;gap:8px}
.dash .lbl{font-family:var(--mono);font-size:clamp(.5rem,1vw,.68rem);color:#555B78;display:flex;justify-content:space-between}
.dash .bars{display:flex;align-items:end;gap:5%;height:70px}
.dash .bars i{flex:1;border-radius:4px 4px 0 0;background:#C9CFF9}
.dash .bars i:last-child,.dash .bars i:nth-last-child(2){background:#2340FF}
.case .body{padding:22px 24px 26px;display:grid;gap:10px}
.case .row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.case .client{font-family:var(--display);font-weight:900;font-stretch:118%;text-transform:uppercase;font-size:1.35rem;line-height:1}
.case p{color:var(--muted);font-size:.98rem}
.ex{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px dashed var(--line);padding:.25em .6em;border-radius:999px;white-space:nowrap}
.work-grid .case:nth-child(4n+1),.work-grid .case:nth-child(4n){}
@media (max-width:760px){.work-grid{grid-template-columns:1fr}}

.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.chip{font:inherit;font-weight:700;font-size:.95rem;padding:.55em 1.1em;border-radius:999px;border:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* Blue billboard (stats) */
.bill{background:var(--blue);color:var(--on-blue);border-radius:clamp(24px,4vw,44px);padding:clamp(36px,6vw,80px);position:relative;overflow:hidden}
.bill .eyebrow{color:var(--on-blue);opacity:.85}.bill .eyebrow::before{background:var(--sun)}
.bill h2{max-width:14ch}
.bill .lead{color:var(--on-blue);opacity:.85;margin-top:20px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;border-top:2px solid rgba(255,255,255,.3);padding-top:36px}
.stat-n{font-family:var(--display);font-weight:900;font-stretch:122%;font-size:clamp(2.4rem,5.4vw,4.6rem);line-height:.9;font-variant-numeric:tabular-nums}
.stat-l{font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin-top:10px;opacity:.85}
.bill .big-a{position:absolute;right:-.06em;bottom:-.28em;font-family:var(--display);font-weight:900;font-stretch:125%;font-size:clamp(14rem,30vw,28rem);line-height:1;color:var(--blue-deep);pointer-events:none;z-index:0}
.bill > *:not(.big-a){position:relative;z-index:1}
@media (max-width:700px){.stats{grid-template-columns:1fr}}

/* Statement */
.statement{font-family:var(--display);font-weight:900;font-stretch:118%;text-transform:uppercase;font-size:clamp(1.9rem,5vw,4.4rem);line-height:1.08;max-width:18ch}
.statement .muted{color:var(--muted)}
.pip{display:inline-flex;vertical-align:middle;width:1.5em;height:.9em;border-radius:.45em;margin:0 .08em;align-items:center;justify-content:center;transform:rotate(-4deg)}
.pip svg{width:.5em;height:.5em}
.pip.b{background:var(--blue);color:var(--on-blue)}.pip.s{background:var(--sun);color:var(--on-sun);transform:rotate(4deg)}.pip.c{background:var(--coral);color:#fff}.pip.m{background:var(--mint);color:var(--on-sun);transform:rotate(3deg)}

/* Reviews */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rev{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:18px;min-width:0}
.rev .stars{color:var(--sun);letter-spacing:2px;font-size:1.1rem;-webkit-text-stroke:1px var(--ink)}
.rev blockquote{margin:0;font-size:1.08rem;line-height:1.5}
.who{display:flex;align-items:center;gap:12px;margin-top:auto}
.who i{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;background:var(--ink);color:var(--paper);font-size:.85rem}
.who b{display:block;line-height:1.2}.who small{color:var(--muted)}
@media (max-width:900px){.rev-grid{grid-template-columns:1fr}}

/* Logos marquee */
.logos{overflow:hidden;border-block:1px solid var(--line);padding-block:30px;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.logos .track{gap:70px;animation-duration:40s}
.logos .track span{font-size:1.5rem;color:var(--muted);gap:70px}
.logos .track span::after{content:none}
.logos .track span:nth-child(3n+1){font-family:var(--body);font-weight:800;text-transform:none;font-stretch:100%}
.logos .track span:nth-child(3n+2){font-family:var(--mono);text-transform:lowercase;font-weight:500;font-stretch:100%}

/* CTA */
.cta{background:var(--ink);color:var(--paper);border-radius:clamp(24px,4vw,44px);padding:clamp(40px,7vw,96px);display:grid;gap:28px;justify-items:start;position:relative;overflow:hidden}
.cta h2{font-size:clamp(2.4rem,7vw,6.2rem);max-width:12ch}
.cta h2 em{font-style:normal;color:var(--sun)}
.cta p{color:color-mix(in srgb,var(--paper) 75%,transparent);max-width:50ch;font-size:1.15rem}
.cta .btn.ghost{color:var(--paper);border-color:var(--paper)}

/* Footer */
footer{padding-block:72px 40px;border-top:1px solid var(--line);margin-top:clamp(64px,9vw,120px)}
.foot{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:32px}
.foot h4{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;font-weight:500}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot a{text-decoration:none}.foot a:hover{text-decoration:underline}
.socials{display:flex;gap:10px}
.socials a{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--paper);transition:transform .2s ease, background .2s, color .2s}
.socials a:hover{transform:translateY(-3px) rotate(-6deg);background:var(--sun);color:var(--on-sun);text-decoration:none}
.socials svg{width:22px;height:22px}
.foot-logo{font-family:var(--display);font-weight:900;font-stretch:125%;font-size:clamp(3.4rem,13vw,11rem);line-height:.8;letter-spacing:-.03em;margin-top:64px;color:var(--ink);white-space:nowrap;overflow:hidden}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:28px;font-size:.88rem;color:var(--muted)}
@media (max-width:1000px){.foot{grid-template-columns:1fr 1fr}}@media (max-width:520px){.foot{grid-template-columns:1fr}}

/* Page heads */
.page-hero{padding-block:clamp(56px,8vw,110px) clamp(40px,5vw,64px);display:grid;gap:26px}
.page-hero h1{font-size:clamp(2.2rem,6.6vw,5.8rem)}
.page-hero h1 span{color:var(--blue)}

/* Services detail */
.svc-detail{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,72px);padding-block:56px;border-top:2px solid var(--ink);align-items:start}
.svc-detail > *{min-width:0}
.svc-detail .num{font-family:var(--mono);font-size:.85rem;color:var(--muted);margin-bottom:16px}
.svc-detail h2{font-size:clamp(2rem,4.4vw,3.6rem)}
.svc-detail .lead{margin-top:18px}
.list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.li{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.li b{display:block;font-size:1.05rem;margin-bottom:4px}
.li span{color:var(--muted);font-size:.94rem;line-height:1.5;display:block}
@media (max-width:860px){.svc-detail{grid-template-columns:1fr}.list{grid-template-columns:1fr}}

/* Process */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;counter-reset:s}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:grid;gap:12px;align-content:start;min-width:0}
.step .n{font-family:var(--display);font-weight:900;font-stretch:125%;font-size:2.6rem;line-height:1;color:var(--blue)}
.step b{font-size:1.1rem}
.step p{color:var(--muted);font-size:.95rem;line-height:1.5}
@media (max-width:1040px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* About */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:start}
.split > *{min-width:0}
.prose{display:grid;gap:18px;font-size:1.1rem;max-width:60ch}
.values{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.val{border-radius:var(--r);padding:28px;display:grid;gap:10px;min-height:200px;align-content:end}
.val:nth-child(1){background:var(--sun);color:var(--on-sun)}
.val:nth-child(2){background:var(--blue);color:var(--on-blue)}
.val:nth-child(3){background:var(--ink);color:var(--paper)}
.val:nth-child(4){background:var(--card);border:1px solid var(--line)}
.val h3{font-size:1.5rem}
.val p{font-size:.98rem;opacity:.85}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.member{display:grid;gap:12px}
.portrait{aspect-ratio:4/5;max-width:100%;border-radius:var(--r);display:grid;place-items:center;font-family:var(--display);font-weight:900;font-stretch:125%;font-size:3.6rem;color:#fff}
.member b{font-size:1.1rem;display:block}.member span{color:var(--muted);font-size:.94rem}
@media (max-width:900px){.split{grid-template-columns:1fr}.team{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.values{grid-template-columns:1fr}}

/* Pricing */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:32px;display:flex;flex-direction:column;gap:18px;min-width:0}
.plan.hot{background:var(--blue);color:var(--on-blue);border-color:var(--blue);transform:translateY(-10px)}
.plan .price{font-family:var(--display);font-weight:900;font-stretch:120%;font-size:2.8rem;line-height:1;font-variant-numeric:tabular-nums}
.plan .price small{font-family:var(--body);font-weight:600;font-size:.95rem;font-stretch:100%;opacity:.75}
.plan ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.plan li{display:flex;gap:10px;align-items:flex-start;line-height:1.45}
.plan li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;background:var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1124' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/11px no-repeat}
.plan .pill{align-self:flex-start;background:var(--sun);color:var(--on-sun);font-family:var(--mono);font-size:.7rem;padding:.35em .8em;border-radius:999px;text-transform:uppercase;letter-spacing:.08em}
.plan .desc{opacity:.8}
.plan .btn{margin-top:auto;justify-content:center}
.plan.hot .btn{--bg:var(--sun);--fg:var(--on-sun)}
@media (max-width:900px){.plans{grid-template-columns:1fr}.plan.hot{transform:none}}

/* FAQ */
.faq{display:grid;gap:12px;max-width:900px}
details{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:0 24px}
summary{list-style:none;cursor:pointer;padding:22px 0;font-weight:700;font-size:1.12rem;display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";flex:none;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:1.3rem;transition:transform .25s}
details[open] summary::after{transform:rotate(45deg);background:var(--blue);color:var(--on-blue)}
details p{padding-bottom:22px;color:var(--muted);max-width:68ch}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:start}
.contact-grid > *{min-width:0}
.ways{display:grid;gap:12px}
.way{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 22px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.way small{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.way b{font-size:1.15rem;user-select:all;word-break:break-all}
.copy{font:inherit;font-size:.85rem;font-weight:700;border:2px solid var(--ink);background:none;color:var(--ink);border-radius:999px;padding:.4em .9em;cursor:pointer;flex:none}
form.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,4vw,40px);display:grid;gap:18px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f2 > *{min-width:0}
label{display:grid;gap:7px;font-weight:700;font-size:.94rem}
input,select,textarea{font:inherit;font-weight:400;font-size:1rem;padding:.85em 1em;border-radius:14px;border:2px solid var(--line);background:var(--paper);color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue)}
textarea{min-height:130px;resize:vertical}
fieldset{border:0;padding:0;margin:0;display:grid;gap:10px}
legend{font-weight:700;font-size:.94rem;margin-bottom:8px}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.checks label{display:inline-flex;align-items:center;gap:8px;font-weight:600;padding:.5em .95em;border:2px solid var(--line);border-radius:999px;cursor:pointer}
.checks input{width:auto;accent-color:var(--blue)}
.checks label:has(input:checked){border-color:var(--blue);background:color-mix(in srgb,var(--blue) 12%,transparent)}
.err{color:var(--coral);font-size:.85rem;font-weight:600}
.thanks{background:var(--sun);color:var(--on-sun);border-radius:var(--r);padding:32px;display:grid;gap:10px}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:520px){.f2{grid-template-columns:1fr}}

/* Modal */
.modal{position:fixed;inset:0;z-index:100;background:rgba(8,10,24,.6);display:grid;place-items:center;padding:20px max(16px,env(safe-area-inset-right,0px)) 20px max(16px,env(safe-area-inset-left,0px))}
.modal-box{background:var(--paper);border-radius:28px;max-width:760px;width:100%;max-height:88vh;overflow:auto;position:relative}
.modal-box .visual{aspect-ratio:16/8}
.modal-body{padding:clamp(24px,4vw,40px);display:grid;gap:18px}
.close{position:absolute;right:14px;top:14px;z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:var(--ink);color:var(--paper);font-size:1.4rem;cursor:pointer}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.kpi b{font-family:var(--display);font-weight:900;font-stretch:118%;font-size:1.6rem;display:block;line-height:1}
.kpi span{font-size:.82rem;color:var(--muted)}
@media (max-width:520px){.kpis{grid-template-columns:1fr}}

main{animation:enter .45s ease both}
@keyframes enter{from{opacity:.4;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.swap span{opacity:0}.swap span:first-child{opacity:1}html{scroll-behavior:auto}}

/* ===== Uitbreiding: meerdere pagina's, blog, steden, projecten ===== */
h1,h2,h3{overflow-wrap:break-word;hyphens:auto}
.hero h1{font-size:clamp(2rem,5.2vw,4.4rem)}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:16px;z-index:200;background:var(--sun);color:var(--on-sun);padding:.6em 1em;border-radius:999px;font-weight:700}
.rev{margin:0}
.rev-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.prose a,.lead a{color:var(--blue);font-weight:600;text-underline-offset:3px}
.svc-p{color:var(--muted);margin-top:16px;max-width:60ch}
.hp{position:absolute!important;left:-9999px!important;height:1px;overflow:hidden}

/* Snelmenu diensten */
.jump{display:flex;flex-wrap:wrap;gap:8px}
.jump a{text-decoration:none;font-weight:700;font-size:.95rem;padding:.55em 1.1em;border-radius:999px;border:2px solid var(--ink)}
.jump a:hover{background:var(--ink);color:var(--paper)}
.svc-detail{scroll-margin-top:96px}

/* SEO-tekstblok */
.seo-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,80px);align-items:start}
.seo-split > *{min-width:0}
.seo-split h2{font-size:clamp(1.7rem,3vw,2.8rem)}
@media (max-width:860px){.seo-split{grid-template-columns:1fr}}

/* Steden */
.city-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.city{border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:14px;text-decoration:none;min-height:280px;transition:transform .25s ease;min-width:0}
.city:hover{transform:translateY(-6px) rotate(-.6deg)}
.city:nth-child(1){background:var(--ink);color:var(--paper)}
.city:nth-child(2){background:var(--blue);color:var(--on-blue)}
.city:nth-child(3){background:var(--sun);color:var(--on-sun)}
.city .eyebrow{color:inherit;opacity:.8}
.city .eyebrow::before{background:currentColor}
.city .disp{font-size:clamp(1.9rem,3.4vw,2.8rem)}
.city p{opacity:.85;font-size:.98rem}
.city .go{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-weight:700}
.city .go i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:2px solid currentColor;transition:transform .25s}
.city .go svg{width:18px;height:18px}
.city:hover .go i{transform:rotate(-45deg)}
@media (max-width:900px){.city-grid{grid-template-columns:1fr}.city{min-height:0}}
.areas{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.area{font-family:var(--mono);font-size:.8rem;padding:.45em .9em;border-radius:999px;border:1px solid rgba(255,255,255,.45);color:var(--on-blue)}

/* Blog */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post-grid.two{grid-template-columns:repeat(2,1fr)}
.post-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:transform .25s ease,border-color .25s;min-width:0}
.post-card:hover{transform:translateY(-6px);border-color:var(--ink)}
.post-cover{position:relative;aspect-ratio:16/10;max-width:100%;overflow:hidden;display:grid;place-items:center}
.post-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.post-cover.c0{background:var(--blue);color:var(--on-blue)}
.post-cover.c1{background:var(--sun);color:var(--on-sun)}
.post-cover.c2{background:var(--coral);color:#fff}
.post-cover span{position:relative;font-family:var(--display);font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:clamp(2.2rem,4.2vw,3.6rem);line-height:.9;transform:rotate(-4deg);transition:transform .35s ease}
.post-card:hover .post-cover span{transform:rotate(0) scale(1.06)}
.post-cover::before{content:"";position:absolute;width:46%;aspect-ratio:1;border-radius:50%;border:3px solid currentColor;opacity:.25;right:-10%;top:-18%}
.post-cover::after{content:"";position:absolute;width:22%;aspect-ratio:1;border-radius:50%;background:currentColor;opacity:.14;left:8%;bottom:-8%}
.post-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:12px;flex:1}
.post-meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:var(--mono);font-size:.74rem;color:var(--muted)}
.post-card h3{font-size:1.25rem;line-height:1.08}
.post-card p{color:var(--muted);font-size:.97rem}
.more{margin-top:auto;font-weight:700;display:inline-flex;gap:.45em;align-items:center}
.more svg{width:1em;height:1em;transition:transform .2s}
.post-card:hover .more svg{transform:translateX(4px)}
@media (max-width:980px){.post-grid{grid-template-columns:repeat(2,1fr)}.post-grid:not(.two) .post-card:first-child{grid-column:span 2}.post-grid:not(.two) .post-card:first-child .post-cover{aspect-ratio:21/9}}
@media (max-width:620px){.post-grid,.post-grid.two{grid-template-columns:1fr}.post-grid:not(.two) .post-card:first-child{grid-column:auto}.post-grid:not(.two) .post-card:first-child .post-cover{aspect-ratio:16/10}}

/* Artikel */
.article-head{padding-block:clamp(48px,7vw,96px) 32px;display:grid;gap:20px;max-width:920px}
.article h1{font-size:clamp(2rem,5vw,4.4rem)}
.article-head .post-meta{justify-content:flex-start}
.crumbs{font-family:var(--mono);font-size:.78rem;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}
.article-cover{border-radius:var(--r);aspect-ratio:21/8}
.article-cover span{font-size:clamp(3rem,10vw,8rem)}
.article-body{max-width:720px;margin:56px auto 0;font-size:1.12rem;line-height:1.75}
.article-body > *:first-child{margin-top:0}
.article-body h2{font-size:clamp(1.5rem,3vw,2.2rem);margin:1.8em 0 .55em;line-height:1}
.article-body h3{margin:1.6em 0 .5em}
.article-body p{margin:0 0 1.1em}
.article-body ul,.article-body ol{padding-left:1.3em;margin:0 0 1.3em}
.article-body li{margin-bottom:.45em}
.article-body li::marker{color:var(--blue);font-weight:700}
.article-body a{color:var(--blue);font-weight:600;text-underline-offset:3px}
.article-body blockquote{border-left:5px solid var(--sun);margin:1.6em 0;padding:.2em 0 .2em 1.2em;font-size:1.3rem;font-weight:700;line-height:1.4}
.article-body img{border-radius:16px;height:auto}
@media (max-width:620px){.article-cover{aspect-ratio:16/9}}
.nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:48px}
.page-numbers{text-decoration:none;font-weight:700;padding:.55em 1em;border-radius:999px;border:2px solid var(--ink)}
.page-numbers.current{background:var(--ink);color:var(--paper)}

/* Projecten */
.visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.visual .stat{z-index:1}
.project-hero .tags{margin-top:0}
.case-hero .visual{aspect-ratio:21/9;border-radius:var(--r)}
@media (max-width:700px){.case-hero .visual{aspect-ratio:4/3}}
.kpis-lg{margin-top:20px}
.kpis-lg .kpi{padding:22px}
.kpis-lg .kpi b{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.site-callout{max-width:720px;margin:48px auto 0;background:var(--ink);color:var(--paper);border-radius:var(--r);padding:28px 32px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.site-callout .eyebrow{color:inherit;opacity:.75}
.site-callout h3{font-size:1.6rem;margin-top:8px}
.site-callout p{font-family:var(--mono);opacity:.75;margin-top:6px;word-break:break-all}
.modal-body .btns{margin-top:4px}

/* Kaart: echte Google Maps in WordPress */
.map-art iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.contact-grid .way .socials a{width:40px;height:40px}
.contact-grid .way .socials svg{width:18px;height:18px}
html{overflow-x:clip}
.modal-box .visual{aspect-ratio:16/7}

/* Logo */
.logo{display:block;line-height:0}
.logo .wordmark{height:26px;width:auto;display:block}
.wordmark .wm-dot{fill:var(--sun)}
.foot-logo{line-height:0;white-space:normal}
.foot-logo .wordmark{width:100%;height:auto;display:block}
@media (max-width:480px){.logo .wordmark{height:21px}}