/* Guided Pixel, 2026 rebuild of the 2002 look.
   Palette recovered from the original guidedpixel.com (Wayback, Aug-Dec 2002). */
:root{
  --char:#333333; --char2:#444444; --mid:#666666; --gray:#cccccc; --light:#eeeeee;
  --orange:#ff6600; --orange-hi:#ffbc43; --orange-text:#a24100; --orange-ast:#ff6e0d; --navy:#0a376f; --gold:#f3b300;
  --ink:#1a1a1a; --white:#ffffff;
  --ui: Verdana, Geneva, Tahoma, "DejaVu Sans", sans-serif;
  --alt: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  --mono: "Courier New", "DejaVu Sans Mono", monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; color:var(--ink); font:15px/1.6 var(--ui);
  background-color:#d4d4d4;
  background-image:
    linear-gradient(rgba(0,0,0,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.06) 1px,transparent 1px);
  background-size:12px 12px;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy)}
a:hover{color:var(--orange-text)}
:focus-visible{outline:3px solid #111;outline-offset:2px;box-shadow:0 0 0 2px var(--orange)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hidden{display:none!important}
.skip{position:absolute;left:-9999px;min-height:24px;top:0;background:var(--orange);color:#000;padding:8px 12px;z-index:9;font-weight:bold}
.skip:focus{left:8px;top:8px}

.frame{max-width:1120px;margin:24px auto;display:grid;grid-template-columns:240px 1fr;gap:4px;
  background:var(--white);border:1px solid #000;box-shadow:4px 4px 0 rgba(0,0,0,.35);padding:4px}

/* ----- sidebar ----- */
.side{background:var(--char);color:#fff;padding:0 0 16px}
.logo{display:block;padding:11px 11px 0}
.logo img{width:218px;image-rendering:pixelated}
.gp{font:900 1em/1 "Arial Black","Helvetica Neue",Arial,sans-serif;letter-spacing:-.06em;color:#fff}
.ast{color:var(--orange-ast);font:900 .9em/1 Arial,sans-serif;vertical-align:.35em;margin-left:-.05em}
.navhead{margin:10px 11px 6px;padding:6px 8px;background:var(--mid);border:1px solid #777;border-bottom:4px solid #999;
  font:bold 15px/1 var(--ui);color:var(--light);letter-spacing:.02em}
.navhead .ast{color:var(--orange-hi);font-size:20px}
.navhead .gp{font-size:20px;color:#fff;margin-right:2px}
.navlist{list-style:none;margin:0 11px;padding:4px;background:#fff;border:1px solid #999}
.navlist li+li{margin-top:3px}
.navlist a{display:flex;align-items:center;gap:6px;text-decoration:none;color:#222;padding:2px 4px;min-height:24px;border:1px solid #fff}
.navlist b{font:19px/1.05 "Arial Narrow","Helvetica Neue",Arial,sans-serif;letter-spacing:.04em;font-weight:normal;white-space:nowrap}
.navlist i{flex:1;height:14px;background:var(--gray)}
.navlist a:hover,.navlist a:focus-visible{border-color:#000}
.navlist a:hover b,.navlist a:focus-visible b{font-weight:bold}
.navlist a:hover i,.navlist a:focus-visible i{background:linear-gradient(90deg,var(--orange) 0 22px,var(--gray) 22px)}
.navlist a:hover::before,.navlist a:focus-visible::before{content:"";width:9px;height:12px;border:1px solid #000;flex:none}

.news{margin:16px 11px 0;background:#e0e0e0;color:#222;border:9px solid var(--mid);border-top:0}
.newshead{display:flex;gap:6px;align-items:center;background:var(--char);padding:6px 6px 4px;margin:0 -9px;border:3px solid var(--mid)}
.newshead .gp{font-size:26px;background:#fff;color:var(--char);padding:2px 3px;border:2px solid #888}
.newshead .ast{display:none}
.newshead strong{display:block;color:var(--orange);font:bold 22px/1 Arial,sans-serif;letter-spacing:.02em}
.newshead small{display:block;color:#fff;font:bold 10px/1.3 var(--ui)}
.pixstrip{display:flex;gap:3px;background:var(--char);padding:0 6px 6px;margin:0 -9px}
.pixstrip i{width:10px;height:8px;background:#777}
.pixstrip i:first-child{background:var(--orange)}
.pixstrip i:nth-child(2){background:#bbb}.pixstrip i:nth-child(3){background:#aaa}.pixstrip i:nth-child(4){background:#999}
.pixstrip i:nth-child(n+7){background:#555}
.newslist{list-style:none;margin:0;padding:8px;font:12px/1.45 var(--alt)}
.newslist li{padding:6px 0;border-bottom:1px dotted #999}
.newslist time{display:inline;font:bold 11px var(--mono);color:var(--orange-text)}
.newslist li::before{content:"GP* ";font:bold 11px var(--mono);color:var(--navy)}
.newslist time::after{content:"";display:block}

/* ----- panels ----- */
main{display:grid;gap:4px;min-width:0}
.panel{background:#fff;border:2px outset #ddd;padding:22px 26px}
.bar{margin:-22px -26px 20px;padding:10px 14px;background:var(--char);color:var(--orange);
  font:bold 22px/1.1 var(--ui);border-bottom:4px solid var(--orange);letter-spacing:.01em}
.bar .gp{font-size:24px;margin-right:2px}
.bar .ast{margin-right:10px}

.hero{background:#d9d9d9 url(/img/hero-grid.svg) no-repeat right top;border:2px outset #eee;position:relative}
.kicker{font:bold 13px/1.4 var(--mono);position:relative;z-index:1;color:var(--orange-text);margin:0 0 14px;letter-spacing:.02em}
.hero>*{position:relative;z-index:1}
.kicker,.hero h1,.lede,.hero .fine{background:#d9d9d9;width:fit-content}
.kicker .spaced{letter-spacing:.62em;margin-right:-.3em}
.hero h1{font:bold clamp(28px,4.2vw,44px)/1.18 var(--ui);margin:0 0 14px;color:var(--char);letter-spacing:-.02em;max-width:18ch}
.lede{font-size:17px;max-width:56ch;margin:0 0 20px}
.fine{font-size:12px;color:#555;margin:10px 0 0}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.center{text-align:center;margin:22px 0 0}

.btn{display:inline-block;padding:10px 18px;font:bold 14px/1.2 var(--ui);text-decoration:none;text-transform:uppercase;letter-spacing:.03em;
  border:2px outset;cursor:pointer}
.btn-orange{background:var(--orange);color:#000;border-color:#ffa366 #a34100 #a34100 #ffa366}
.btn-orange:hover{background:var(--orange-hi);color:#000}
.btn-gray{background:var(--light);color:#000;border-color:#fff #888 #888 #fff}
.btn-gray:hover{background:#fff;color:#000}
.btn:active{border-style:inset;transform:translate(1px,1px)}
.btn-big{font-size:17px;padding:14px 26px}

/* hooks grid, styled after the 2002 portfolio tiles */
.tiles{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.tile{background:var(--navy);color:#fff;padding:16px 16px 14px;border:3px solid #fff;outline:1px solid #999;position:relative}
.tile::before{content:"";position:absolute;left:0;top:0;border:7px solid transparent;border-left-color:#ddd;border-top-color:#ddd}
.tile h3{margin:0 0 6px;font:bold 17px/1.25 var(--ui);color:var(--gold)}
.tile p{margin:0 0 10px;font-size:13.5px;color:#e6ecf5}
.tile .fix{margin:0;padding:8px 10px;background:#fff;color:#222;border-left:6px solid var(--orange);font-size:13.5px}
.tile .fix b{color:var(--orange-text)}

.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.box{background:var(--light);border:2px inset #ddd;padding:14px 16px}
.box h3{margin:0 0 8px;font:bold 16px/1.2 var(--ui);color:var(--char)}
.num{font:bold 12px var(--mono);color:var(--orange-text);margin-right:6px}
.box p{margin:0;font-size:14px}

.work{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.card{background:#ededed;border:1px solid #999;padding:10px}
.shot{border:3px solid #fff;outline:1px solid #888;background:#fff}
.chev{height:16px;background:var(--orange);clip-path:polygon(0 0,100% 0,50% 100%);margin:0 18%}
.caption{background:#fff;border:1px dashed #999;padding:12px 14px;margin-top:8px}
.caption h3{margin:0;font:bold 18px/1.2 var(--ui)}
.tag{margin:2px 0 8px;font:12px var(--mono);color:#555}
.proof{margin:0 0 8px;padding-left:18px;font-size:13.5px}
.proof li{margin:4px 0}
.proof li::marker{content:"\25B8  ";color:var(--orange)}
.wip{display:inline-block;vertical-align:middle;font:bold 10px/1 var(--mono);background:var(--gold);color:#000;padding:3px 5px;border:1px solid #000;margin-left:6px}
.link{font-weight:bold;display:inline-block;padding:4px 0}
.muted{color:#555;font-size:13px;margin:0}

.cred{display:grid;grid-template-columns:1fr 1.25fr;gap:20px;align-items:start}
.about p{margin:0 0 12px}
.resume{border:2px outset #ddd;background:#fff}
.titlebar{display:flex;justify-content:space-between;background:var(--navy);border-right:28px solid #3a6ea5;color:#fff;font:bold 12px/1 var(--ui);padding:5px 8px}
.resume dl{margin:0;padding:12px 14px;font:13px/1.5 var(--ui);max-height:none}
.resume dt{font:bold 13px var(--mono);color:var(--orange-text);margin-top:10px}
.resume dt:first-child{margin-top:0}
.resume dt::before{content:"> "}
.resume dd{margin:2px 0 0 0}

.cta .cta-inner{text-align:center;max-width:620px;margin:0 auto}
.cta h3{font:bold 26px/1.2 var(--ui);margin:4px 0 8px;color:var(--char)}
.socials{list-style:none;padding:0;margin:14px 0 0;display:flex;gap:14px;justify-content:center}

.foot{grid-column:1/-1;background:var(--char);color:#ccc;text-align:center;padding:14px 10px 16px;font-size:12px}
.foot p{margin:10px 0 0}
.badges{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.b88{width:88px;min-height:31px;display:flex;flex-direction:column;justify-content:center;align-items:center;
  font:bold 10px/1 var(--ui);letter-spacing:.03em;border:1px solid #000;box-shadow:inset 1px 1px 0 rgba(255,255,255,.6),inset -1px -1px 0 rgba(0,0,0,.4)}
.b88 small{font:8px/1.1 var(--ui);letter-spacing:.06em}
.b-gp{flex-direction:row;gap:1px;background:var(--char);color:#fff;font-size:16px}
.b-gp small{font-size:8px;margin-left:4px;color:var(--orange-ast)}
.b-dark{background:#111;color:var(--gold)}
.b-orange{background:var(--orange);color:#000}
.b-navy{background:var(--navy);color:#fff}

/* ----- responsive ----- */
@media (max-width:900px){
  .frame{grid-template-columns:1fr;margin:0;border:0;box-shadow:none;padding:0;gap:0}
  .side{padding-bottom:10px;display:grid;grid-template-columns:auto 1fr;gap:0 10px;align-items:center}
  .logo{padding:10px}
  .logo img{width:150px}
  .navhead,.news{display:none}
  .navlist{margin:10px 10px 10px 0}
  .navlist b{font-size:16px}
  .cols3,.work,.cred{grid-template-columns:1fr}
  main{gap:0}
  .panel{border-width:0 0 4px;border-style:solid;border-color:#bbb;padding:20px 18px}
  .bar{margin:-20px -18px 18px;font-size:19px}
}
@media (max-width:520px){
  .side{grid-template-columns:1fr}
  .logo{display:flex;justify-content:center;padding-bottom:0}
  .navlist{margin:10px;display:grid;grid-template-columns:1fr 1fr;gap:3px}
  .navlist li+li{margin-top:0}
  .navlist i{display:none}
  .hero h1{font-size:28px}
  .btn{width:100%;text-align:center}
}
@media print{.side,.foot{display:none}.frame{display:block;box-shadow:none;border:0}}
.li{margin:0;font-size:14px}
.foot a{color:var(--orange-hi);display:inline-block;padding:4px 0}
.foot .a11y{max-width:70ch;margin:12px auto 0;line-height:1.5}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.btn:active{transform:none}}
@media (forced-colors:active){.btn,.b88,.tile{border:2px solid ButtonText}.navlist i,.pixstrip{forced-color-adjust:auto}}

/* ----- site check chat (works as a plain form without JS) ----- */
.chatwin{text-align:left;margin:18px 0 0;border:2px outset #ddd;background:#ececec}
.chatwin .titlebar{border-right-width:0}
.intake{padding:14px 16px 16px;margin:0}
.intake .intro{margin:0 0 10px;font-size:12px;color:#444}
.step{border:0;margin:0 0 14px;padding:0;min-width:0}
.step label,.step legend{display:block;font:bold 14px/1.3 var(--ui);color:var(--char);margin:8px 0 4px;padding:0}
.req{color:var(--orange-text)}
.opt{font-weight:normal;color:#555}
.intake input[type=text],.intake input[type=email],.intake input[type=tel],.intake textarea{
  width:100%;font:15px/1.4 var(--mono);color:#000;background:#fff;padding:8px;border:2px inset #ccc;border-radius:0;min-height:40px}
.intake textarea{resize:vertical}
.intake [aria-invalid=true]{border-color:#b00000;background:#fff6f6}
.hint{margin:4px 0 0;font-size:12px;color:#555}
.err{margin:4px 0 0;font:bold 13px/1.4 var(--ui);color:#b00000}
.err::before{content:"! "}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:block;margin:0!important}
.chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.chip span{display:block;padding:8px 12px;min-height:24px;font:13px/1.2 var(--ui);color:#000;background:var(--light);border:2px outset #ddd;cursor:pointer}
.chip span::before{content:"\25CB  ";color:#555}
.chip input:checked+span{background:var(--navy);color:#fff;border-style:inset;border-color:#0a376f}
.chip input:checked+span::before{content:"\25CF  ";color:var(--orange-hi)}
.chip input:focus-visible+span{outline:3px solid #111;outline-offset:2px;box-shadow:0 0 0 2px var(--orange)}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.step-send .btn{margin-top:4px}
.chatlog{list-style:none;margin:0;padding:12px 14px;background:#fff;border-bottom:2px inset #ccc;font:14px/1.45 var(--mono)}
.msg{margin:0 0 8px;padding:6px 10px;max-width:85%;width:fit-content;border:1px solid #999;overflow-wrap:anywhere;white-space:pre-wrap}
.msg .who{font-weight:bold}
.msg.bot{background:var(--light);color:#000}
.msg.bot .who{color:var(--orange-text)}
.msg.me{margin-left:auto;background:var(--navy);color:#fff;border-color:#000}
.msg.me .who{color:var(--orange-hi)}
.msg.oops{background:#fff6f6;color:#b00000;border-color:#b00000}
.chatnav{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.review dl{margin:0 0 10px;padding:10px 12px;background:#fff;border:1px dashed #999;font:13px/1.5 var(--ui)}
.review dt{font:bold 12px var(--mono);color:var(--orange-text)}
.review dd{margin:0 0 6px;overflow-wrap:anywhere;white-space:pre-wrap}
.is-chat .step{display:none}
.is-chat .step.on{display:block}
.is-chat .intro{display:none}
.done{padding:18px 16px;text-align:center;background:#fff}
.done h4{font:bold 20px/1.2 var(--ui);color:var(--char);margin:0 0 6px}
.foot .fallback{color:#ccc;font-size:12px;margin-top:6px}
.page-simple{max-width:640px;margin:40px auto;display:block}
@media (max-width:520px){.msg{max-width:100%}.chatnav .btn{width:auto;flex:1}}
@media (forced-colors:active){.chip span{border:2px solid ButtonText}.chip input:checked+span{border:4px double Highlight}}