/* ============================================================
   Sandlot Stitch Co. — Concept A site mockup · shared styles
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=Zilla+Slab:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Libre+Franklin:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap');

:root{
  --navy:#0A2348; --navy-deep:#06182F; --red:#B01217; --red-deep:#8C0E12;
  --gold:#BB8F5A; --gold-soft:#D8B985; --cream:#F3ECDC; --cream-2:#EFE6D2;
  --chalk:#FBFAF7; --ink:#1C1B19; --muted:#6A6A66; --line:rgba(10,35,72,.14);
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--chalk);color:var(--ink);
  font-family:"Libre Franklin",system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
h1,h2,h3,h4{font-family:"Oswald",sans-serif;text-transform:uppercase;font-weight:600;line-height:1.04;letter-spacing:.01em;margin:0;color:var(--navy)}
h1{font-size:clamp(34px,5vw,58px)} h2{font-size:clamp(26px,3.6vw,40px)} h3{font-size:20px} h4{font-size:15px}
p{margin:0 0 14px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}
.zilla{font-family:"Zilla Slab",serif;font-weight:600;text-transform:none;letter-spacing:0}
.serif{font-family:"Source Serif 4",Georgia,serif}
.eyebrow{font-family:"Oswald";text-transform:uppercase;letter-spacing:.22em;font-weight:600;font-size:12px;color:var(--red)}
.stitch{height:0;border:0;border-top:2px dashed var(--red);opacity:.6}
.stitch-gold{border-top-color:var(--gold)}
section{padding:66px 0}
.sec-h{margin-bottom:32px}
.sec-h.center{text-align:center}
.lead{font-size:19px;color:#33312d;max-width:760px}

/* buttons */
.btn{display:inline-block;font-family:"Oswald";text-transform:uppercase;letter-spacing:.1em;font-weight:600;
  font-size:13px;padding:14px 26px;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:.15s}
.btn-red{background:var(--red);color:#fff} .btn-red:hover{background:var(--red-deep)}
.btn-navy{background:var(--navy);color:#fff} .btn-navy:hover{background:var(--navy-deep)}
.btn-gold{background:var(--gold);color:var(--navy)} .btn-gold:hover{background:var(--gold-soft)}
.btn-ghost{background:transparent;border-color:currentColor}
.btn-ghost-light{background:transparent;border:2px solid rgba(255,255,255,.5);color:#fff}
.btn-ghost-light:hover{background:rgba(255,255,255,.1)}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:12px 40px;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.12)}
.nav .brand{display:flex;align-items:center;gap:12px}
.nav .brand img{height:44px;width:auto}
.nav .brand .wm{font-family:"Zilla Slab",serif;font-weight:600;font-size:19px;color:var(--gold-soft)}
.nav .links{display:flex;gap:24px;font-family:"Oswald";text-transform:uppercase;letter-spacing:.1em;
  font-size:13px;font-weight:500;color:rgba(255,255,255,.85)}
.nav .links a{padding:4px 0;border-bottom:2px solid transparent}
.nav .links a:hover{color:#fff;border-bottom-color:var(--gold)}
.nav .links a.active{color:#fff;border-bottom-color:var(--red)}
.nav .right{display:flex;align-items:center;gap:16px}
.nav .right .phone{font-family:"Oswald";letter-spacing:.06em;font-size:13px;color:rgba(255,255,255,.85);text-transform:uppercase}
@media(max-width:960px){.nav .links{display:none}}
/* reserve header height so the injected nav doesn't shift layout */
#site-header{min-height:68px;display:block}

/* ---------- PAGE HERO (subpages) ---------- */
.page-hero{background:radial-gradient(120% 130% at 50% -30%,rgba(187,143,90,.18),transparent 55%),var(--navy);
  color:var(--chalk);text-align:center;padding:64px 0 58px;border-bottom:6px solid var(--gold);position:relative}
.page-hero::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--red)}
.page-hero .eyebrow{color:var(--gold-soft)}
.page-hero h1{color:#fff;margin:8px 0 10px}
.page-hero .zilla{color:var(--gold-soft);font-size:clamp(18px,2.4vw,24px)}
.page-hero p{color:rgba(255,255,255,.82);max-width:600px;margin:12px auto 0;font-size:17px}

/* ---------- CARDS / TILES ---------- */
.card{background:var(--chalk);border:1px solid var(--line);border-radius:14px;padding:24px}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* value props */
.vp .ic{width:42px;height:42px;color:var(--gold);margin-bottom:10px}
.vp h4{letter-spacing:.04em;margin-bottom:6px} .vp p{font-size:13.5px;color:var(--muted);margin:0}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:"Oswald";text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:600;
  color:var(--navy);background:var(--cream-2);border:1px solid var(--line);padding:6px 12px;border-radius:20px}

/* stitch/trust strip */
.trust{background:var(--navy-deep);padding:15px 0}
.trust .row{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;font-family:"Oswald";
  text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--gold-soft)}

/* photo bands */
.photoband{position:relative;color:#fff;text-align:center;padding:92px 0;background:#06182F}
.photoband img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32}
.photoband .ov{position:relative;z-index:2;max-width:860px;margin:0 auto;padding:0 30px}
.photoband .big{font-family:"Source Serif 4",serif;font-size:clamp(22px,3vw,32px);line-height:1.45}
.photoband .big b{color:var(--gold-soft)}

/* CTA band */
.ctaband{background:var(--red);color:#fff;text-align:center;padding:58px 0}
.ctaband.gold{background:var(--gold);color:var(--navy)}
.ctaband h2{color:inherit}

/* ---------- FOOTER ---------- */
footer.foot{background:var(--navy-deep);color:rgba(255,255,255,.72);padding:50px 0 30px;border-top:6px solid var(--red)}
footer.foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
@media(max-width:760px){footer.foot .cols{grid-template-columns:1fr 1fr}}
footer.foot h4{color:var(--gold-soft);font-size:13px;letter-spacing:.14em;margin-bottom:14px}
footer.foot a{display:block;color:rgba(255,255,255,.72);font-size:14px;margin-bottom:9px}
footer.foot a:hover{color:#fff}
footer.foot .mark{font-family:"Zilla Slab",serif;font-weight:600;color:var(--gold-soft);font-size:22px;margin-bottom:10px}
footer.foot .legal{margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);
  font-size:12px;letter-spacing:.04em;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ---------- SVG product silhouettes reuse currentColor ---------- */
.tile{border-radius:12px;overflow:hidden;position:relative;border:1px solid var(--line);background:var(--cream)}
.tile .ph{height:200px;display:flex;align-items:center;justify-content:center}
.tile .label{padding:14px 16px;display:flex;justify-content:space-between;align-items:center;background:var(--chalk)}
.tile .label .n{font-family:"Oswald";text-transform:uppercase;letter-spacing:.06em;font-weight:600;font-size:14px;color:var(--navy)}
.tile .label .p{font-family:"Oswald";font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.photo-note{position:absolute;left:10px;top:10px;font-family:"Oswald";text-transform:uppercase;letter-spacing:.1em;
  font-size:9px;color:rgba(255,255,255,.75);background:rgba(0,0,0,.28);padding:3px 7px;border-radius:4px}

/* ---------- COMPARISON (method vs market) ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
@media(max-width:760px){.compare{grid-template-columns:1fr}}
.compare .col{padding:32px 30px}
.compare .ours{background:var(--navy);color:#fff}
.compare .theirs{background:var(--cream-2)}
.compare h3{margin-bottom:16px}
.compare .ours h3{color:var(--gold-soft)} .compare .theirs h3{color:var(--red)}
.compare ul{list-style:none;margin:0;padding:0}
.compare li{padding:9px 0 9px 28px;position:relative;font-size:15px;border-bottom:1px dashed rgba(0,0,0,.08)}
.compare .ours li{border-bottom-color:rgba(255,255,255,.12);color:rgba(255,255,255,.9)}
.compare li::before{position:absolute;left:0;top:8px;font-family:"Oswald";font-weight:700;font-size:13px}
.compare .ours li::before{content:"▲";color:var(--gold-soft)}
.compare .theirs li::before{content:"▼";color:var(--red)}

/* ---------- PROCESS ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{background:var(--chalk);border:1px solid var(--line);border-radius:14px;padding:26px}
.step .no{font-family:"Zilla Slab";font-weight:700;color:var(--red);font-size:26px}
.step h3{margin:8px 0 8px}
.step p{margin:0;color:var(--muted);font-size:14.5px}

/* ---------- FORM ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.form{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1 / -1}
.field label{font-family:"Oswald";text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:600;color:var(--navy)}
.field input,.field select,.field textarea{
  font-family:"Libre Franklin";font-size:15px;padding:12px 14px;border:1px solid var(--line);
  border-radius:8px;background:#fff;color:var(--ink);width:100%}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold);border-color:var(--gold)}

/* ---------- GALLERY (lookbook) ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.gallery{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.gallery{grid-template-columns:1fr}}
.filterbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.filterbar .f{font-family:"Oswald";text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:600;
  padding:8px 16px;border-radius:20px;border:1px solid var(--line);color:var(--navy);background:var(--chalk);cursor:pointer}
.filterbar .f.active{background:var(--navy);color:#fff;border-color:var(--navy)}