/* Cream City Sites. Milwaukee's own materials: Cream City brick for the paper, Lake Michigan blue for the
   accent, warm ink for the type. Legacy X-ray and Dohyo Data keep their own colors inside their bands. */
/* Fonts are self-hosted (latin subsets from Google Fonts, SIL OFL) so the first paint doesn't wait on another host.
   The "fallback" faces are Arial/Consolas resized to the web fonts' measurements (tools: fontTools, see README), so
   nothing moves when the real font arrives. */
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:800 900;font-display:swap;src:url(/fonts/big-shoulders-display.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/instrument-sans.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jetbrains-mono.woff2) format("woff2")}
@font-face{font-family:"Display Fallback";font-weight:100 900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Roboto Bold"),local("Roboto-Bold");size-adjust:69.37%;ascent-override:141.84%;descent-override:30.7%;line-gap-override:0%}
@font-face{font-family:"Body Fallback";font-weight:100 900;src:local("Arial"),local("ArialMT"),local("Roboto"),local("Roboto-Regular");size-adjust:101.72%;ascent-override:95.36%;descent-override:24.58%;line-gap-override:0%}
@font-face{font-family:"Mono Fallback";font-weight:100 900;src:local("Consolas");size-adjust:109.13%;ascent-override:93.47%;descent-override:27.49%;line-gap-override:0%}
:root{
  --paper:#F3EDDC; --paper-2:#E9E0C6; --card:#FFFDF7; --ink:#1B1A17; --ink-2:#3A362E; --muted:#6B6558; --line:#D6CDB4;
  --accent:#1F5C8A; --accent-hi:#2A74AD; --accent-soft:#DCE8F2; --brick:#E6D9B6;
  --xr:#0E2C47; --xr-2:#163F63; --xr-gold:#F4B43E; --xr-ink:#E6EDF5; --xr-mut:#A9BBCD;
  --dd:#12131A; --dd-2:#1D1F29; --dd-red:#C8102E; --dd-gold:#D4A017; --dd-ink:#ECEDF1; --dd-mut:#A3A7B5;
  --display:"Big Shoulders Display","Display Fallback","Arial Narrow",Impact,sans-serif;
  --body:"Instrument Sans","Body Fallback","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono","Mono Fallback",ui-monospace,Consolas,monospace;
  --r:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding-inline:20px}
.mono{font-family:var(--mono);font-weight:500;letter-spacing:.01em}
.display{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:.005em;line-height:.95;text-wrap:balance;margin:0}
h2.display{font-size:clamp(2.4rem,5.4vw,4.2rem)}
h3,h4{margin:0}
p{margin:0}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:12px;background:var(--ink);color:var(--paper);padding:8px 12px;border-radius:8px;z-index:10}
:focus-visible{outline:3px solid var(--accent-hi);outline-offset:3px;border-radius:4px}
.lead{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--ink-2);line-height:1.6}
.narrow{max-width:62ch}
.kicker{font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--accent)}
.fine{font-size:.86rem;color:var(--muted)}
.textlink{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:3px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font:600 1rem var(--body);text-decoration:none;background:var(--accent);color:#fff;border:2px solid var(--accent);border-radius:999px;padding:12px 22px;transition:background .15s,border-color .15s}
.btn:hover{background:var(--accent-hi);border-color:var(--accent-hi)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.gold{background:var(--xr-gold);border-color:var(--xr-gold);color:#14202c}
.btn.gold:hover{background:#ffc75e;border-color:#ffc75e}
.btn.red{background:var(--dd-red);border-color:var(--dd-red);color:#fff}
.btn.red:hover{background:#e01a3b;border-color:#e01a3b}

/* header */
.top{border-bottom:1px solid var(--line);background:var(--paper)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 1.45rem/1 var(--display);text-transform:uppercase;letter-spacing:.06em}
.mark{width:30px;height:30px;flex:none}
.mark rect{fill:var(--accent)}.mark .bricks rect{fill:var(--brick)}
.nav{display:flex;align-items:center;gap:4px 18px;flex-wrap:wrap;font-weight:500;font-size:.95rem}
.nav a{text-decoration:none;color:var(--ink-2);padding:4px 0}
.nav a:hover{color:var(--accent)}
.nav .navcta{border:1.5px solid var(--ink);border-radius:999px;padding:5px 14px;color:var(--ink)}
.nav .navcta:hover{background:var(--ink);color:var(--paper)}

/* hero */
.hero{padding-block:clamp(36px,6vw,80px) clamp(40px,6vw,72px);overflow:hidden}
.herogrid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.herotext{display:grid;gap:22px;justify-items:start}
.coord{font:500 .78rem var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.hero h1{font:900 clamp(3.4rem,9vw,7.2rem)/.86 var(--display);text-transform:uppercase;letter-spacing:-.005em;margin:0;text-wrap:balance}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.trio{position:relative;height:clamp(420px,46vw,560px)}
.phone{position:absolute;margin:0;width:clamp(150px,17vw,220px);border:7px solid var(--ink);border-radius:30px;overflow:hidden;background:var(--ink);box-shadow:0 24px 50px -24px rgba(17,26,33,.55)}
.phone img{border-radius:22px;aspect-ratio:390/844;object-fit:cover;object-position:top}
.triocap{position:absolute;left:0;right:0;bottom:-6px;text-align:center;font-size:.74rem;color:var(--muted)}
.trio .phone{overflow:visible}
.trio .phone img{border-radius:22px}
.p1{left:0;top:8%;transform:rotate(-5deg)}
.p2{left:50%;top:0;transform:translateX(-50%);z-index:2;width:clamp(170px,19vw,240px)}
.p3{right:0;top:10%;transform:rotate(5deg)}
.fine.mono{font-size:.8rem}

/* manifest */
.manifest{padding-block:clamp(48px,7vw,88px);border-top:1px solid var(--line);background:var(--card)}
.manifest h2{margin-bottom:28px}
.rows{display:grid;border-top:2px solid var(--ink);list-style:none;margin:0;padding:0}
.row{display:grid;grid-template-columns:18px 1.1fr 2.2fr 1.5fr .9fr 24px;gap:18px;align-items:baseline;padding:20px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);transition:background .15s}
.row:hover{background:var(--paper)}
.sw{width:14px;height:14px;border-radius:3px;align-self:center}
.sw-web{background:var(--accent)}.sw-xr{background:var(--xr-2);box-shadow:inset 0 0 0 3px var(--xr-gold)}.sw-dd{background:var(--dd);box-shadow:inset 0 0 0 3px var(--dd-red)}
.row .name{font:800 1.7rem/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.row .what{color:var(--ink-2)}
.row .for{color:var(--muted);font-size:.92rem}
.row .price{font-size:.88rem;color:var(--ink)}
.row .go{font-size:1.2rem;color:var(--accent)}

/* websites */
.web{padding-block:clamp(56px,8vw,104px);display:block}
.web>.wrap{display:grid;gap:28px}
.gets{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:6px}
.gets div{display:grid;gap:6px;align-content:start;border-top:2px solid var(--ink);padding-top:14px}
.gets h3{font:700 1.02rem var(--body)}
.gets p{color:var(--ink-2);font-size:.95rem}
h3.sub{font-size:clamp(1.6rem,3vw,2.2rem);margin-top:18px}
.pkgs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pkg{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:grid;gap:14px;align-content:start}
.pkg.rec{border:2px solid var(--accent);box-shadow:0 18px 40px -28px rgba(31,92,138,.55)}
.pkg header{display:grid;gap:4px}
.pkg h4{font:700 1.08rem var(--body);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tag{font:600 .66rem var(--mono);text-transform:uppercase;letter-spacing:.08em;background:var(--accent);color:#fff;border-radius:4px;padding:2px 6px}
.amt{font:900 2.6rem/1 var(--display);letter-spacing:.01em}
.pkg .for{font-size:.84rem;color:var(--muted)}
.pkg ul{margin:0;padding-left:1.05rem;display:grid;gap:6px;font-size:.92rem;color:var(--ink-2)}
.care{color:var(--ink-2);font-size:.95rem;max-width:80ch}
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.split h3.sub{margin:0 0 14px}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.92rem;font-weight:500}
.steps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:14px}
.steps li{counter-increment:s;display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start;color:var(--ink-2)}
.steps li::before{content:counter(s);font:900 2rem/1 var(--display);color:var(--accent)}
.steps b{color:var(--ink)}
.honest{display:flex;justify-content:space-between;align-items:center;gap:16px 28px;flex-wrap:wrap;background:var(--ink);color:var(--paper);border-radius:var(--r);padding:22px 26px}
.honest p{max-width:70ch}

/* bands */
.xray,.dohyo{padding-block:clamp(56px,8vw,104px)}
.xray{background:var(--xr);color:var(--xr-ink)}
.dohyo{background:var(--dd);color:var(--dd-ink)}
.bandgrid{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center}
.bandgrid>div{display:grid;gap:18px;justify-items:start}
.bandgrid.flip{grid-template-columns:1.05fr 1fr}
.bandgrid.flip>div{order:2}
.bandgrid h2{font-size:clamp(2rem,4.2vw,3.3rem)}
.xray p{color:var(--xr-mut)} .dohyo p{color:var(--dd-mut)}
.logo-xr{font:700 1.3rem var(--body);color:var(--xr-ink)!important}.logo-xr span{color:var(--xr-gold)}
.logo-dd{font:900 1.6rem/1 var(--display);text-transform:uppercase;letter-spacing:.06em;color:var(--dd-ink)!important}.logo-dd span{color:var(--dd-gold)}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.facts li{display:flex;gap:10px;align-items:baseline}
.facts li::before{content:"";width:8px;height:8px;border-radius:2px;flex:none;transform:translateY(-1px)}
.xray .facts li::before{background:var(--xr-gold)} .dohyo .facts li::before{background:var(--dd-red)}
.proof{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:center;border:1px solid rgba(244,180,62,.35);background:rgba(255,255,255,.04);border-radius:10px;padding:14px 18px;max-width:560px}
.proof .num{font-size:1.5rem;color:#6fd19c}
.proof span:last-child{font-size:.9rem;color:var(--xr-mut)}
.links{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.xray .textlink{color:var(--xr-ink)}
.note{font-size:.82rem}
.browser{margin:0;border-radius:12px;overflow:hidden;background:#0a1018;box-shadow:0 30px 60px -30px rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.12)}
.chrome{display:flex;align-items:center;justify-content:center;height:34px;background:rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.1)}
.chrome span{font-size:.74rem;color:var(--xr-mut);background:rgba(0,0,0,.25);border-radius:6px;padding:3px 14px}
.browser.dark .chrome span{color:var(--dd-mut)}

/* about */
.about{padding-block:clamp(56px,8vw,104px)}
.aboutgrid{display:grid;grid-template-columns:minmax(220px,360px) 1fr;gap:48px;align-items:center}
.aboutgrid>div{display:grid;gap:16px;justify-items:start}
.aboutgrid p{max-width:62ch;color:var(--ink-2)}
.portrait{border-radius:var(--r);width:100%;aspect-ratio:1;object-fit:cover;filter:saturate(.92);box-shadow:0 24px 50px -30px rgba(17,26,33,.6)}
.dossier{margin:4px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;width:100%;max-width:620px;border-top:2px solid var(--ink);padding-top:14px}
.dossier dt{font:500 .72rem var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.dossier dd{margin:2px 0 0;font-weight:600}

/* contact */
.contact{padding-block:clamp(56px,8vw,104px);background:var(--card);border-top:1px solid var(--line)}
.contact .wrap{display:grid;gap:22px}
.reach{display:flex;gap:16px;flex-wrap:wrap}
.big{display:grid;gap:4px;text-decoration:none;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px 22px;font:800 clamp(1.5rem,3.4vw,2.2rem)/1.1 var(--display);letter-spacing:.02em;overflow-wrap:anywhere}
.big:hover{border-color:var(--accent)}
.lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}

/* 404 */
.lost{padding-block:80px;display:grid;gap:20px;justify-items:start}
.lost h1{font-size:clamp(3rem,10vw,6rem)}

/* footer */
.foot{padding-block:28px 40px;font-size:.82rem;color:var(--muted)}
.foot .wrap{display:grid;gap:6px}

/* narrow screens */
@media (max-width:980px){
  .gets,.pkgs{grid-template-columns:repeat(2,1fr)}
  .row{grid-template-columns:18px 1fr auto;grid-template-areas:"sw name price" ". what what" ". for for";gap:6px 14px}
  .row .sw{grid-area:sw}.row .name{grid-area:name}.row .price{grid-area:price}.row .what{grid-area:what}.row .for{grid-area:for}.row .go{display:none}
}
@media (max-width:860px){
  .herogrid,.bandgrid,.bandgrid.flip,.split,.aboutgrid{grid-template-columns:1fr}
  .bandgrid.flip>div{order:0}
  .trio{height:clamp(300px,84vw,520px);margin-bottom:10px}
  .phone{width:31%}.p2{width:35%}
  .aboutgrid .portrait{max-width:300px}
}
@media (max-width:560px){
  body{font-size:16px}
  .gets,.pkgs{grid-template-columns:1fr}
  .phone{border-width:5px;border-radius:22px}.trio .phone img{border-radius:17px}
  .triocap{font-size:.66rem;bottom:-14px}
  .dossier{grid-template-columns:1fr}
  .nav a:not(.navcta){display:none}
  .bar{flex-wrap:nowrap}
  .brand{font-size:1.25rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}