/* Little Web Co. — shared styles
   Layout: sticky bar, generous single-thesis hero per page, ruled service rows, navy bands for process + CTA */
:root{
  --bg:#f7f8f6;--ink:#172c3b;--mut:#496070;--line:#d6dddb;--card:#fff;
  --acc:#f47735;--acc-ink:#a3400b;--navy:#172c3b;--on-navy:#f3f5f4;--on-navy-mut:#b9c6ce;
  --wire:#e9eef0;--wire-line:#9fb0ba;--wire-ink:#5d7484;--logo:none;
  --display:'Bricolage Grotesque','DM Sans',system-ui,sans-serif;
  --body:'DM Sans',system-ui,Arial,sans-serif;
  --hand:'Caveat','Comic Sans MS',cursive;
}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0e1a23;--ink:#eef2f3;--mut:#a9b8c1;--line:#26384a;--card:#14252f;--acc-ink:#ff9d66;--navy:#0a131a;--wire:#162a36;--wire-line:#4c6474;--wire-ink:#9db0bc;--logo:invert(1) hue-rotate(180deg) brightness(1.15);color-scheme:dark}}
:root[data-theme=dark]{--bg:#0e1a23;--ink:#eef2f3;--mut:#a9b8c1;--line:#26384a;--card:#14252f;--acc-ink:#ff9d66;--navy:#0a131a;--wire:#162a36;--wire-line:#4c6474;--wire-ink:#9db0bc;--logo:invert(1) hue-rotate(180deg) brightness(1.15);color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 96px);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body)}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.04;margin:0;text-wrap:balance}
p{margin:0 0 1em;max-width:64ch}a{color:inherit}img{max-width:100%;height:auto;display:block}
.wrap{width:min(1180px,calc(100% - 40px));margin-inline:auto}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--acc);color:#172c3b;padding:10px 14px;z-index:99}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:10px 28px;flex-wrap:wrap;padding:10px 0}
.logo{width:124px;height:auto;filter:var(--logo)}
nav{display:flex;gap:4px 22px;align-items:center;font-weight:700;font-size:15px;overflow-x:auto;max-width:100%;scrollbar-width:none}
nav a{text-decoration:none;white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent}
nav a:hover{color:var(--acc-ink)}nav a[aria-current=page]{border-bottom-color:var(--acc)}
.btn{display:inline-block;font:700 16px/1 var(--body);padding:16px 26px;border:2px solid var(--ink);background:none;color:var(--ink);text-decoration:none;cursor:pointer;border-radius:999px;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}.btn.p{background:var(--acc);border-color:var(--acc);color:#172c3b}
nav .btn{padding:10px 18px;font-size:15px;border-bottom-width:2px}
.acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}

/* home hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center;padding:64px 0 72px}
.hero h1{font-size:clamp(2.6rem,5.2vw,4.4rem)}
.lead{font-size:1.25rem;margin:24px 0 12px}
.build{margin:0}
.build-frame{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);box-shadow:0 26px 60px -30px rgba(23,44,59,.55);touch-action:pan-y;cursor:ew-resize;user-select:none}
.build svg{display:block;width:100%;height:auto}
.build .w-bg{fill:var(--wire)}.build .w-grid{stroke:var(--wire-line);stroke-opacity:.28}
.build .w-box{fill:none;stroke:var(--wire-line);stroke-width:1.6;stroke-dasharray:6 5}
.build .w-fill{fill:var(--wire-line);fill-opacity:.35}
.build .w-ink{fill:var(--wire-ink);font:400 17px var(--hand)}
.build .w-line{stroke:var(--wire-ink);stroke-width:1.4;fill:none}
.build .chrome-bar{fill:var(--line)}.build .dot{fill:var(--mut);fill-opacity:.45}
.build .url{fill:var(--mut);font:500 11px var(--body)}
.build .divider{stroke:var(--acc);stroke-width:3}
.build .knob{fill:var(--acc)}.build .knob-ink{fill:#172c3b}
.build figcaption{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px;color:var(--mut);font-size:14px}
.build figcaption b{color:var(--ink)}
.build input[type=range]{flex:1 1 180px;accent-color:var(--acc);min-width:0}
.tag{font:700 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--acc-ink)}

/* inner page hero */
.phero{padding:56px 0 48px;border-bottom:1px solid var(--line)}
.phero h1{font-size:clamp(2.4rem,5.4vw,4.4rem);max-width:17ch;margin-top:14px}
.phero .lead{max-width:56ch}
.crumbs{font-size:14px;color:var(--mut);display:flex;gap:8px;flex-wrap:wrap;list-style:none;padding:0;margin:0}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--line)}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--acc-ink)}

.local{background:var(--navy);color:var(--on-navy);padding:20px 0;font-weight:500}.local p{margin:0;max-width:none}.local b{color:#ff9d66}.local a{color:var(--on-navy)}
section{padding:88px 0}
h2{font-size:clamp(2rem,4.2vw,3.2rem);max-width:18ch;margin-bottom:22px}
h3{font-size:clamp(1.35rem,2.4vw,1.75rem)}
.svc{display:grid;grid-template-columns:5fr 7fr;gap:12px 40px;padding:34px 0;border-top:1px solid var(--line)}
.svc:last-child{border-bottom:1px solid var(--line)}.svc h3{font-size:clamp(1.6rem,3vw,2.3rem)}
.svc h3 a{text-decoration:none}.svc h3 a:hover{color:var(--acc-ink)}
.svc>div{min-width:0}
.svc ul,.ticks{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:6px 22px;color:var(--mut);font-size:15px}
a.t{color:var(--acc-ink);font-weight:700}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:36px 40px;margin-top:40px}
.cols>div{min-width:0;border-top:3px solid var(--acc);padding-top:18px}
.cols h3{margin-bottom:10px}.cols p{color:var(--mut)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.list{list-style:none;padding:0;margin:0}
.list li{padding:14px 0;border-top:1px solid var(--line)}.list li:last-child{border-bottom:1px solid var(--line)}
.list b{display:block;font-size:1.05rem}

.work{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px;align-items:start}
.work figure{margin:0}.work figure:nth-child(2){margin-top:56px}
.work.big{grid-template-columns:1fr;gap:64px}.work.big figure:nth-child(2){margin-top:0}
.work.big figure{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:center}
.work button{display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);cursor:zoom-in}
.work img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .4s}.work button:hover img{transform:scale(1.04)}
figcaption{padding-top:12px}.work figcaption b{display:block;font:800 1.25rem/1.2 var(--display)}.work figcaption span{color:var(--mut);font-size:15px}
.work.big figcaption b{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:10px}.work.big figcaption p{color:var(--mut)}
.note{color:var(--mut);font-size:14px;margin-top:28px}
dialog{border:0;border-radius:14px;padding:16px;width:min(1000px,94vw);background:var(--card);color:var(--ink)}dialog::backdrop{background:rgba(8,16,22,.75)}
dialog .x{float:right;margin-bottom:10px;padding:10px 18px;font-size:14px}

.how{background:var(--navy);color:var(--on-navy)}.how h2{color:var(--on-navy)}.how p{color:var(--on-navy-mut)}
.steps{list-style:none;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;counter-reset:s}
.steps li{counter-increment:s;border-top:3px solid var(--acc);padding-top:18px}
.steps li::before{content:counter(s);font:800 3.4rem/1 var(--display);color:var(--acc);display:block;margin-bottom:10px}
.steps b{font:800 1.4rem/1.2 var(--display);display:block;margin-bottom:8px}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.plan{border:1px solid var(--line);border-radius:14px;padding:30px;background:var(--card);display:flex;flex-direction:column}
.plan.hot{border:2px solid var(--acc)}
.plan h3{font-size:1.5rem}.price{font:800 3.4rem/1 var(--display);margin:16px 0 4px;letter-spacing:-.04em}.price small{font:500 1rem var(--body);color:var(--mut);letter-spacing:0}
.plan p.d{color:var(--mut);font-size:15px}
.plan ul{list-style:none;padding:0;margin:8px 0 24px;flex:1}.plan li{padding:9px 0;border-top:1px solid var(--line);font-size:15px}
.fine{color:var(--mut);font-size:14px;margin-top:26px;max-width:80ch}
.table-wrap{overflow-x:auto;margin-top:32px}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-family:var(--display);font-size:1.05rem}td:not(:first-child),th:not(:first-child){text-align:center}

.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.about img{border-radius:16px;aspect-ratio:1;object-fit:cover;width:100%}
details.q{border-top:1px solid var(--line);padding:18px 0}details.q:last-of-type{border-bottom:1px solid var(--line)}
summary{font-weight:700;cursor:pointer;font-size:1.1rem}details.q p{margin:12px 0 0;color:var(--mut)}
.faq{max-width:820px}

.areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px;margin-top:40px}
.area{border:1px solid var(--line);border-radius:14px;padding:28px;background:var(--card);min-width:0}
.area h2{font-size:1.7rem;margin-bottom:6px}.area .tag{display:block;margin-bottom:12px}.area p{color:var(--mut);font-size:15.5px}

.cta{background:var(--navy);color:var(--on-navy);padding:72px 0}
.cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.cta h2{color:var(--on-navy);margin:0;max-width:20ch}.cta p{color:var(--on-navy-mut);margin:10px 0 0}
.cta .btn:not(.p){border-color:var(--on-navy);color:var(--on-navy)}

.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px}
form{display:grid;grid-template-columns:1fr 1fr;gap:16px}label{display:grid;gap:6px;font-weight:700;font-size:14px}label.f{grid-column:1/-1}
input,select,textarea{font:400 16px/1.4 var(--body);padding:13px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);width:100%}
textarea{min-height:120px;resize:vertical}form .btn{justify-self:start}
#err{grid-column:1/-1;color:var(--acc-ink);font-weight:700;margin:0}
#out{grid-column:1/-1;border:2px dashed var(--acc);border-radius:12px;padding:16px}#out textarea{min-height:170px}#out .acts{align-items:center;margin-top:12px}

footer{background:var(--navy);color:var(--on-navy);padding:56px 0 32px;font-size:15px}
footer .row{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:28px}
footer .w{font:800 1.8rem/1 var(--display)}footer .w i{color:var(--acc);font-style:normal}
footer p{margin:6px 0;max-width:46ch;color:var(--on-navy-mut)}footer a{color:var(--on-navy)}
footer h3{font:700 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--on-navy-mut);margin-bottom:12px}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}footer ul a{text-decoration:none}footer ul a:hover{color:#ff9d66}

@media(max-width:900px){
  .hero,.about,.contact,.svc,.split,.work.big figure{grid-template-columns:1fr}
  .hero{padding-top:32px;gap:32px}.work,.plans,.steps{grid-template-columns:1fr}.work figure:nth-child(2){margin-top:0}
  section{padding:60px 0}form{grid-template-columns:1fr}.about,.split,.contact{gap:30px}
  footer .row{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){footer .row{grid-template-columns:1fr}.logo{width:108px}nav{flex-wrap:wrap;gap:2px 16px;font-size:14px}nav .btn{padding:9px 14px;font-size:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}

/* illustrations + icons */
.phero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.phero-grid h1{margin-top:14px}
.phero-art{min-width:0}
.art{display:block;width:100%;height:auto;max-width:100%}
.phero-art .art{max-width:540px;margin-inline:auto}
.shot{border-radius:14px;border:1px solid var(--line);box-shadow:0 26px 60px -30px rgba(23,44,59,.55)}
.svc-head{display:flex;flex-direction:column;gap:22px;min-width:0}
.svc-head .art{max-width:400px}
.ico{width:32px;height:32px;stroke:var(--acc-ink);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block;margin-bottom:14px}
.map .m-bg{fill:var(--card);stroke:var(--line)}
.map .m-ring{fill:none;stroke:var(--acc);stroke-opacity:.35;stroke-dasharray:4 6}
.map .m-road{fill:none;stroke:var(--mut);stroke-opacity:.45;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.map .m-roadlabel{fill:var(--mut);font:700 11px var(--body)}
.map .m-dot{fill:var(--ink)}.map .m-dot.home{fill:var(--acc);stroke:var(--card);stroke-width:3}
.map .m-label{fill:var(--ink);font:700 15px var(--body)}.map .m-label.home{font:800 18px var(--display)}
.map a:hover .m-label{fill:var(--acc-ink)}
.map .m-note{fill:var(--mut);font:400 11px var(--body)}
@media(max-width:900px){.phero-grid{grid-template-columns:1fr;gap:32px}}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
#ok{grid-column:1/-1;border:2px solid var(--acc);border-radius:12px;padding:16px}