/* ── Shoreline Fencing Co. identity — from brand spec board 07 ──
     Deep Navy #13293D · Harbor Slate #2E4A63 · Sand #E8DDC8 · Rope #C9B79C
     Warm Sand #F4EEE4 (page ground / knockout) · Bone #F8F8F3 (paper) · Ink #3C5348 (body)
     Type: Marcellus (wordmark & headings, caps, tracked) · Jost (descriptors & body) */
  :root{
    --navy:#13293D; --slate:#2E4A63; --sand:#E8DDC8; --rope:#C9B79C;
    --warm-sand:#F4EEE4; --bone:#F8F8F3; --ink:#3C5348;
    --display:"Marcellus",Palatino,Georgia,serif;
    --body:"Jost","Century Gothic","Avenir Next",Futura,sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important}}
  body{margin:0;background:var(--warm-sand);color:var(--ink);font-family:var(--body);font-weight:400;font-size:16.5px;line-height:1.65}
  a{color:var(--slate)}
  :focus-visible{outline:3px solid var(--slate);outline-offset:2px}
  h1,h2,h3{font-family:var(--display);font-weight:400;color:var(--navy);margin:0;line-height:1.12;text-wrap:balance;text-transform:uppercase;letter-spacing:.13em}
  h1{font-size:clamp(1.9rem,4.6vw,3.3rem)}
  h2{font-size:clamp(1.35rem,2.8vw,2rem)}
  h3{font-size:1.02rem;letter-spacing:.14em}
  p{margin:.65rem 0;max-width:64ch}
  .eyebrow{font-family:var(--body);font-weight:500;font-size:.72rem;letter-spacing:.44em;text-transform:uppercase;color:var(--rope)}
  .wrap{max-width:1140px;margin:0 auto;padding:0 1.4rem}
  .btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--body);font-weight:500;text-transform:uppercase;letter-spacing:.22em;font-size:.78rem;padding:1rem 1.6rem;background:var(--navy);color:var(--warm-sand);border:1px solid var(--navy);text-decoration:none;cursor:pointer;transition:background .15s ease}
  .btn:hover{background:var(--slate);border-color:var(--slate)}
  .btn.ghost{background:transparent;color:var(--navy)}
  .btn.ghost:hover{background:var(--navy);color:var(--warm-sand)}
  .btn.on-navy{background:var(--warm-sand);color:var(--navy);border-color:var(--warm-sand)}
  .btn.on-navy:hover{background:var(--sand);border-color:var(--sand)}
  .btn.on-navy.ghost{background:transparent;color:var(--warm-sand)}
  .btn.on-navy.ghost:hover{background:var(--warm-sand);color:var(--navy)}
  .hair{border:0;border-top:1px solid var(--rope);margin:0}
  .mark{display:inline-block;flex:none}
  /* MOCK banner */
  .mockbar{background:var(--slate);color:var(--warm-sand);text-align:center;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;padding:.45rem 1rem}
  /* Header */
  header.site{background:var(--warm-sand);border-bottom:1px solid var(--rope);position:sticky;top:0;z-index:50}
  .nav{display:flex;align-items:center;gap:1.6rem;padding:.9rem 0}
  .lockup{display:flex;align-items:center;gap:.85rem;text-decoration:none}
  .lockup .word{font-family:var(--display);font-size:1.28rem;letter-spacing:.13em;color:var(--navy);text-transform:uppercase}
  .lockup .desc{display:block;font-family:var(--body);font-weight:500;font-size:.56rem;letter-spacing:.44em;color:var(--ink);text-transform:uppercase;margin-top:.18rem}
  nav.main{margin-left:auto;display:flex;gap:1.5rem;align-items:center}
  nav.main a{font-weight:500;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
  nav.main a:hover{color:var(--navy)}
  .phone{font-weight:500;color:var(--navy);text-decoration:none;letter-spacing:.06em}
  @media(max-width:860px){nav.main a.hideable{display:none}}
  /* Hero */
  .hero{background:linear-gradient(rgba(19,41,61,.86),rgba(19,41,61,.78)),url("images/hero-horizontal-wood-fence.webp") center 65%/cover no-repeat;color:var(--warm-sand);padding:5.6rem 0 5rem}
  .hero .eyebrow{color:var(--rope)}
  .hero h1{color:var(--warm-sand);max-width:21ch}
  .hero p.lead{color:var(--sand);font-size:1.08rem;font-weight:300;max-width:58ch}
  .hero .ctas{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.8rem}
  .hero .wrap{display:grid;grid-template-columns:1fr auto;gap:2.5rem;align-items:start}
  .hero .heromark{opacity:.9}
  .gbadge{display:inline-flex;align-items:baseline;gap:.55rem;margin-top:1.5rem;color:var(--sand);font-size:.88rem;letter-spacing:.04em;text-decoration:none}
  .gbadge .stars{color:var(--rope);letter-spacing:.2em}
  .gbadge .mocktag{font-size:.7rem;color:var(--rope)}
  .callbar{display:none}
  @media(max-width:640px){
    .callbar{position:fixed;bottom:0;left:0;right:0;z-index:60;display:grid;grid-template-columns:1fr 1fr 1.4fr;background:var(--navy);border-top:1px solid var(--slate)}
    .callbar a{padding:.95rem .5rem;text-align:center;color:var(--warm-sand);text-decoration:none;font-family:var(--body);font-weight:500;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase}
    .callbar a+a{border-left:1px solid var(--slate)}
    .callbar a.q{background:var(--slate)}
    body{padding-bottom:3.2rem}
  }
  @media(max-width:760px){.hero .wrap{grid-template-columns:1fr}.hero .heromark{display:none}}
  /* Trust bar */
  .trust{background:var(--bone);border-bottom:1px solid var(--rope)}
  .trust .wrap{display:flex;flex-wrap:wrap;gap:.4rem 2.6rem;justify-content:center;padding:1rem 1.4rem}
  .trust span{font-size:.74rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ink)}
  /* Sections */
  section{padding:4.2rem 0}
  .sec-head{display:flex;flex-direction:column;gap:.5rem;margin-bottom:2.2rem}
  /* Fence types */
  .types{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--rope);border:1px solid var(--rope)}
  .type{background:var(--bone);padding:1.6rem 1.5rem;text-decoration:none;display:block;transition:background .15s ease}
  .type:hover{background:var(--sand)}
  .type h3{margin-bottom:.4rem}
  .type img.ph{width:calc(100% + 3rem);margin:-1.6rem -1.5rem .9rem;height:160px;object-fit:cover;display:block}
  .gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.6rem}
  .gallery img{width:100%;height:215px;object-fit:cover;display:block}
  .ba{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:2rem;max-width:820px}
  .ba figure{margin:0}
  .ba img{width:100%;height:235px;object-fit:cover;display:block}
  .ba figcaption{font-family:var(--body);font-weight:500;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);padding:.5rem 0}
  @media(max-width:620px){.ba{grid-template-columns:1fr}}
  .type p{font-size:.92rem;margin:0;color:var(--ink)}
  .type .go{display:inline-block;margin-top:.9rem;font-size:.7rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--slate)}
  /* Audience strip */
  .aud{background:var(--navy);color:var(--warm-sand);padding:2.6rem 0}
  .aud .wrap{display:flex;flex-wrap:wrap;gap:1rem 3rem;align-items:baseline}
  .aud h2{color:var(--warm-sand);font-size:1.1rem;letter-spacing:.2em}
  .aud span{font-weight:300;color:var(--sand);font-size:.95rem;letter-spacing:.12em;text-transform:uppercase}
  /* Everything list */
  .every{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1.2rem;margin-top:1.4rem}
  .every div{border-top:2px solid var(--navy);padding-top:.8rem}
  .every b{font-family:var(--display);font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);font-size:.92rem}
  .every p{font-size:.92rem;margin:.35rem 0 0}
  /* About */
  .about{background:var(--bone);border-top:1px solid var(--rope);border-bottom:1px solid var(--rope)}
  .about .wrap{display:grid;grid-template-columns:auto 1fr;gap:3rem;align-items:start}
  @media(max-width:760px){.about .wrap{grid-template-columns:1fr}}
  /* Process */
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.6rem;counter-reset:step}
  .step{background:var(--bone);border:1px solid var(--rope);padding:1.5rem 1.4rem}
  .step::before{counter-increment:step;content:"0" counter(step);font-family:var(--display);font-size:1.7rem;color:var(--rope);display:block;margin-bottom:.5rem}
  .step h3{margin-bottom:.4rem}
  .step p{font-size:.93rem;margin:0}
  /* Reviews */
  .reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem}
  .review{background:var(--bone);border:1px solid var(--rope);padding:1.5rem 1.4rem;font-size:.95rem}
  .review .stars{color:var(--slate);letter-spacing:.25em;margin-bottom:.5rem}
  .review footer{margin-top:.8rem;font-weight:500;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
  /* Areas */
  .areas .list{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
  .areas a{font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--navy);border:1px solid var(--rope);background:var(--bone);padding:.5rem .9rem}
  .areas a:hover{background:var(--sand)}
  /* FAQ */
  details{border-bottom:1px solid var(--rope);padding:1rem 0}
  details:first-of-type{border-top:1px solid var(--rope)}
  summary{cursor:pointer;font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;color:var(--navy);font-size:.98rem}
  details p{font-size:.95rem}
  /* Estimator band */
  .band{background:var(--navy);color:var(--warm-sand)}
  .band .wrap{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;padding:3.4rem 1.4rem}
  .band h2{color:var(--warm-sand)}
  .band p{color:var(--sand);font-weight:300}
  @media(max-width:760px){.band .wrap{grid-template-columns:1fr}}
  /* Contact */
  form{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:720px}
  form .full{grid-column:1/-1}
  label{display:flex;flex-direction:column;gap:.35rem;font-size:.72rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ink)}
  input,select,textarea{font-family:var(--body);font-size:1rem;padding:.75rem .8rem;border:1px solid var(--rope);background:var(--bone);color:var(--ink)}
  textarea{min-height:110px;resize:vertical}
  @media(max-width:620px){form{grid-template-columns:1fr}}
  /* Footer */
  footer.site{background:var(--navy);color:var(--sand);padding:3rem 0 2.4rem;font-weight:300}
  footer.site .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:2.5rem;align-items:start}
  footer.site .word{font-family:var(--display);letter-spacing:.13em;text-transform:uppercase;color:var(--warm-sand)}
  footer.site a{color:var(--sand)}
  footer.site small{display:block;margin-top:1.4rem;font-size:.72rem;letter-spacing:.14em;color:var(--rope)}
  @media(max-width:760px){footer.site .wrap{grid-template-columns:1fr}}

  /* ── Multi-page additions ── */
  .hero.sub{padding:3.6rem 0 3.4rem}
  .hero.sub .wrap{grid-template-columns:1fr}
  .crumbs{background:var(--bone);border-bottom:1px solid var(--rope);font-size:.78rem;letter-spacing:.08em}
  .crumbs .wrap{padding-top:.55rem;padding-bottom:.55rem}
  .crumbs a{color:var(--slate);text-decoration:none}
  .crumbs a:hover{text-decoration:underline}
  .two{display:grid;grid-template-columns:1.2fr 1fr;gap:2.6rem;align-items:start}
  @media(max-width:760px){.two{grid-template-columns:1fr}}
  .feat{width:100%;height:auto;display:block;border:1px solid var(--rope)}
  .prose p{font-size:1.02rem}
  .h2s{margin-bottom:.6rem}
  .areas p{margin-top:.9rem}
  .alist{list-style:none;padding:0;margin:.6rem 0 0}
  .alist li{margin:.3rem 0}
  .every h3{font-size:.92rem;margin-bottom:.2rem}
  footer.site .wrap.fgrid{grid-template-columns:1.3fr 1fr 1.2fr}
  footer.site p{font-size:.92rem}
  .fh{color:var(--warm-sand);font-size:.86rem;margin-bottom:.8rem}
  .fh a{color:var(--warm-sand);text-decoration:none}
  .flinks{list-style:none;padding:0;margin:0;font-size:.9rem}
  .flinks li{margin:.32rem 0}
  .flinks a{text-decoration:none}
  .flinks a:hover{text-decoration:underline}
  .flinks.cols{columns:2;column-gap:1.5rem}
  @media(max-width:760px){footer.site .wrap.fgrid{grid-template-columns:1fr}}
  @media(max-width:640px){nav.main a:not(.btn){display:none}nav.main .btn{padding:.75rem 1rem;letter-spacing:.14em}.nav{gap:.8rem}.lockup .word{font-size:1.1rem}}
  .types{background:none;border:0;gap:0;padding:1px 0 0 1px}
  .type{border:1px solid var(--rope);margin:-1px 0 0 -1px}
  nav.main a.btn{color:var(--warm-sand)}nav.main a.btn:hover{color:var(--warm-sand)}
  .hero .wrap>div{min-width:0}.btn{flex-wrap:wrap;justify-content:center;text-align:center}
  .wrap.nav{padding:.9rem 1.4rem}@media(max-width:640px){.wrap.nav{padding:.7rem 16px}}
  .type img.ph,.gallery img,.ba img{object-position:center 62%}.feat{max-height:560px;object-fit:cover}