/* Porchlight: Atomic diner look (1950s-60s palette). Art in /img/diner, drawn for Porchlight. */
:root{
  --turq:#3FB8AF;--mint:#A8E0CF;--pink:#F4A6B7;--pink-2:#F8C6D1;--cherry:#D62839;--butter:#F7D774;--tang:#F28C38;--chrome:#C9CED6;--jet:#1E1E24;--cream:#FFF6E5;
  --bg:#FFF6E5;--dot:rgba(244,166,183,.55);--surface:#ffffff;--ink:#1E1E24;--ink-2:#3a3a44;--ink-3:#5d5d68;--line:#1E1E24;
  --accent:#D62839;--accent-ink:#B81F30;--link:#1E7F78;--tint:#FFF0F3;
  --head:"Righteous","Arial Rounded MT Bold",Arial,sans-serif;
  --hand:var(--head);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1E1E24;--dot:rgba(244,166,183,.18);--surface:#2B2B33;--ink:#FFF6E5;--ink-2:#E8E0D2;--ink-3:#C2BAAE;--line:#0E0E12;
  --link:#7FD9D1;--accent-ink:#FF8C98;--tint:#3A2C33;
}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background-color:var(--bg);background-image:radial-gradient(circle at 18px 18px,var(--dot) 3.5px,transparent 4.5px);background-size:36px 36px;
  color:var(--ink);font:17px/1.6 "Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;min-height:100vh}
a{color:var(--link);text-decoration-thickness:2px;text-underline-offset:3px}
.checker{height:22px;background:repeating-conic-gradient(var(--jet) 0 25%,#fff 0 50%) 0 0/22px 22px}
.wrap{max-width:1040px;margin:0 auto;padding:24px 16px 48px}

/* Cards and panels: white with a thick black outline and a solid offset shadow */
.taped{position:relative;background:var(--surface);border:4px solid var(--line);border-radius:22px;box-shadow:7px 7px 0 var(--pink)}

/* Header */
header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand img{width:56px;height:56px}
.brand span{font-family:var(--head);font-size:40px;line-height:1;letter-spacing:.01em}
nav.menu{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
nav.menu a{font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:9px 15px;border-radius:999px;border:3px solid transparent}
nav.menu a:hover{border-color:var(--line);background:var(--pink-2);color:var(--jet)}
nav.menu a[aria-current="page"]{background:var(--pink);border-color:var(--line);color:var(--jet)}

/* Buttons */
.btn{display:inline-block;font:700 14px/1 "Poppins",sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:14px 22px;border-radius:999px;text-decoration:none;border:3px solid var(--line);box-shadow:4px 4px 0 var(--line);transition:transform .08s,box-shadow .08s}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--line)}
.btn-primary{background:var(--cherry);color:#fff}
.btn-ghost{background:var(--cream);color:var(--jet)}
.btn[aria-disabled="true"]{opacity:.7;cursor:default}

/* Hero: big flamingo-pink panel with a turquoise shadow and a butter-yellow sun */
.hero{margin-top:30px;padding:46px 40px 40px;background:var(--pink);color:var(--jet);box-shadow:10px 10px 0 var(--turq);overflow:hidden}
.hero::after{content:"";position:absolute;right:-70px;bottom:-90px;width:270px;height:270px;border-radius:50%;background:var(--butter);border:4px solid var(--line);z-index:0}
.hero>*{position:relative;z-index:1}
.hero h1{font-family:var(--head);font-weight:400;font-size:clamp(38px,6.4vw,60px);line-height:1.04;margin:0 0 16px}
.hero p{font-size:18px;color:var(--jet);max-width:58ch;margin:0 0 22px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero .note{color:var(--jet);opacity:.85;margin-top:22px}
.note{font-size:14px;color:var(--ink-3);margin-top:14px}

/* Section headings with a little starburst */
h2{font-family:var(--head);font-weight:400;font-size:clamp(30px,4.6vw,40px);margin:60px 0 20px;line-height:1.1;display:flex;align-items:center;gap:12px}
h2 .h2ic{width:44px;height:44px;flex:none}

/* Service and project cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:26px 24px}
.card{padding:24px 22px 22px}
.card:nth-child(3n+2){box-shadow:7px 7px 0 var(--turq)}
.card:nth-child(3n){box-shadow:7px 7px 0 var(--butter)}
.card:nth-child(4n+1){background:var(--tint)}
.card h3{margin:0 0 8px;font-size:19px;line-height:1.3;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.card h3 .ic{width:54px;height:54px;flex:none}
.card p{margin:0;color:var(--ink-2);font-size:15.5px}

/* How I can help carousel: 3 cards on desktop, 1 on phone, moves every 15 seconds */
.carousel{position:relative}
.track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/3);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 12px 16px 4px;margin:0 -12px 0 -4px}
.track::-webkit-scrollbar{display:none}
.track>.card{scroll-snap-align:start;color:var(--jet)}
.track>.card:nth-child(6n+1){background:#FCE4EA}
.track>.card:nth-child(6n+2){background:#DDF3EC}
.track>.card:nth-child(6n+3){background:#FDF3CF}
.track>.card:nth-child(6n+4){background:#DCEFF8}
.track>.card:nth-child(6n+5){background:#ECE3F7}
.track>.card:nth-child(6n){background:#FDE7D4}
.track>.card h3,.track>.card p{color:var(--jet)}
.car-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:6px}
.car-btn{width:46px;height:46px;border-radius:50%;border:3px solid var(--line);background:var(--pink);color:var(--jet);font:700 28px/1 "Poppins",sans-serif;cursor:pointer;box-shadow:3px 3px 0 var(--line);padding:0 0 4px}
.car-btn:hover{background:var(--butter)}
.car-dots{display:flex;gap:8px}
.car-dots span{width:12px;height:12px;border-radius:50%;border:2px solid var(--line);background:var(--surface)}
.car-dots span.on{background:var(--cherry)}

/* Steps and call-to-action panels */
.steps{padding:28px 28px 12px;background:var(--pink-2);color:var(--jet);box-shadow:8px 8px 0 var(--pink)}
.steps p,.steps li{color:var(--jet)!important}
.steps ol{margin:0;padding-left:22px}
.steps li{margin-bottom:12px}
.steps b{color:var(--jet)}
.steps:nth-of-type(even){background:var(--mint)}
.card:hover{transform:translate(-2px,-2px)}

/* Inner pages */
.page{margin-top:34px;padding:34px 32px 26px;display:flow-root}
.page:first-of-type{margin-top:30px}
.page h1{font-family:var(--head);font-weight:400;font-size:clamp(38px,6vw,54px);line-height:1.05;margin:0 0 16px}
.page h2{font-family:var(--head);font-size:26px;margin:26px 0 10px;display:block}
.page p,.page li{color:var(--ink-2)}
.page ul{padding-left:22px}
.page li::marker{color:var(--cherry)}
.page .updated{font-size:14px;color:var(--ink-3);margin-top:-6px}
.page:nth-of-type(2n){box-shadow:7px 7px 0 var(--turq)}
.contact-big{font-size:clamp(17px,5vw,22px);font-weight:700;overflow-wrap:anywhere}

/* Footer */
footer.taped{margin-top:60px;padding:20px 24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:15px;background:var(--pink);color:var(--jet);box-shadow:7px 7px 0 var(--turq)}
footer a{color:var(--jet)}
.fbrand{display:inline-flex;align-items:center;gap:12px}.fbrand img{width:64px;height:64px;margin:-14px 0;transform:rotate(-8deg)}
footer.taped{align-items:center}
footer nav{display:flex;gap:16px;flex-wrap:wrap}

/* Badges on demo and work cards */
.badge{white-space:nowrap;display:inline-block;vertical-align:middle;margin-left:6px;font:600 11px/1.2 "Poppins",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--jet);background:var(--butter);border:2px solid var(--line);border-radius:999px;padding:4px 10px}

/* Quotes: cherry-red speech bubbles */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:28px 24px}
.quote{position:relative;margin:0 0 14px;padding:22px 26px;background:var(--cherry);color:#fff;border:4px solid var(--line);border-radius:22px;box-shadow:6px 6px 0 var(--pink)}
.quote::after{content:"";position:absolute;left:36px;bottom:-15px;width:24px;height:24px;background:inherit;border-right:4px solid var(--line);border-bottom:4px solid var(--line);transform:rotate(45deg)}
.quote:nth-child(4n+2),.quote:nth-child(4n+3){background:var(--pink);color:var(--jet);box-shadow:6px 6px 0 var(--turq)}
.quote p{color:inherit!important;margin:0;font-family:var(--head);font-size:23px;line-height:1.3}
.quote cite{display:block;margin-top:8px;font-style:normal;font-size:14px;opacity:.8}
.quote.wide{grid-column:1/-1}
/* Overheard: the toy robot on the left "says" one quote at a time; fades to the next every 15 seconds */
.overheard-wrap{display:grid;grid-template-columns:1fr 2fr;gap:10px 30px;align-items:center;padding:6px 0 26px}
.talker{margin:0;justify-self:end;width:min(100%,230px)}
.talker img{display:block;width:100%;height:auto}
.overheard{display:grid;align-items:center}
.overheard .quote{grid-area:1/1;margin:0 48px 18px 0;opacity:0;visibility:hidden;transition:opacity 1.2s ease,visibility 0s linear 1.2s}
.overheard .quote.on{opacity:1;visibility:visible;transition:opacity 1.2s ease}
.overheard .quote p{font-size:clamp(22px,3.2vw,32px)}
.overheard .quote::after{left:30px;bottom:-15px;transform:rotate(45deg) skew(12deg,12deg)}
@media (max-width:700px){.overheard-wrap{grid-template-columns:34% 1fr;gap:10px 18px}.overheard .quote{padding:16px 18px;margin-right:24px}}
@media (prefers-reduced-motion:reduce){.overheard .quote{transition:none}}

/* Demo page: password box and "not ready" cards */
.gate-input{flex:1 1 220px;min-width:0;max-width:100%;box-sizing:border-box;min-height:48px;font:inherit;font-size:16px;padding:10px 16px;border:3px solid var(--line);border-radius:999px;background:var(--cream);color:var(--jet);box-shadow:3px 3px 0 var(--pink)}
.gate-input:focus{outline:3px solid var(--turq);outline-offset:2px}
.gate-msg{margin-top:10px;color:var(--accent-ink);font-weight:600;min-height:1.2em}
.card.soon{background:repeating-linear-gradient(45deg,var(--surface) 0 14px,var(--tint) 14px 28px)}
.card.soon .ic{filter:grayscale(.35)}

/* Clip art */
.art{margin:0}
.art img{display:block;width:100%;height:auto}
.page .art{float:right;width:190px;margin:0 0 14px 24px;transform:rotate(4deg)}
.page .art.left{float:left;margin:0 24px 14px 0;transform:rotate(-4deg)}
.hero.withart{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:10px 28px;align-items:center}
.hero.withart .art{grid-column:2;grid-row:1;transform:rotate(-6deg)}

@media (max-width:900px){.track{grid-auto-columns:calc((100% - 24px)/2)}}
@media (max-width:700px){
  .track{grid-auto-columns:88%}
  header{flex-direction:column;align-items:flex-start}
  .hero{padding:32px 22px 28px;box-shadow:7px 7px 0 var(--turq)}
  .hero.withart{grid-template-columns:1fr}
  .hero.withart .art{grid-row:auto;grid-column:1;width:min(190px,60%);justify-self:center;margin:8px 0 0}
  .page{padding:26px 20px 20px}
  .page .art,.page .art.left{float:none;width:min(170px,55%);margin:0 auto 14px;display:block}
  .brand span{font-size:34px}
}

/* No runts: browsers that support it balance headings and keep the last line of a paragraph from being one word */
h1,h2,h3,h4{text-wrap:balance}
p,li,figcaption,dd,cite{text-wrap:pretty}

/* How it works: three gears in the empty space on the right */
.steps.has-art{display:grid;grid-template-columns:4fr 1fr;gap:10px 24px;align-items:center}
.steps-art{display:block;width:100%;max-width:100%;height:auto;justify-self:end;margin-right:-6px}
@media (max-width:700px){.steps.has-art{grid-template-columns:1fr}.steps-art{max-width:162px;margin:-6px 0 10px auto}}

/* Page not found */
.notfound .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.notfound .btn:not(.btn-primary){background:var(--butter);color:var(--jet)}
.notfound .art{width:230px}

/* About: Benjamin's photo in a diner frame */
.page .photo{float:right;width:230px;margin:0 0 16px 26px;transform:rotate(3deg)}
.page .photo img{display:block;width:100%;height:auto;border:4px solid var(--line);border-radius:18px;box-shadow:7px 7px 0 var(--pink)}
.page .photo figcaption{margin-top:10px;text-align:center;font:400 15px var(--head)}
@media (max-width:700px){.page .photo{float:none;width:min(220px,70%);margin:4px auto 18px}}

/* Contact form */
.cform{display:grid;gap:14px;max-width:560px;margin-top:6px}
.cform label{display:grid;gap:6px;font-weight:600}
.cform .opt{font-weight:400;opacity:.75}
.cform input,.cform textarea{font:inherit;font-size:16px;padding:12px 14px;border:3px solid var(--line);border-radius:14px;background:var(--cream);color:var(--jet);box-shadow:3px 3px 0 var(--pink);width:100%;box-sizing:border-box}
.cform textarea{resize:vertical;min-height:130px}
.cform input:focus,.cform textarea:focus{outline:3px solid var(--turq);outline-offset:2px}
.cform .trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform-note{font-size:14px;opacity:.8;margin:0}
.cform p{margin:0}
.cform-msg{font-weight:600;min-height:1.2em}
.cform-msg.ok{color:var(--turq-ink,#1E7F78)}
.cform-msg.err{color:var(--cherry)}