/* River City Contracting — archetype F, service index.
   Six trades under one roof, each its own block, gallery subordinate and
   marked as placeholder throughout. Differs from the other service-index
   build (brooks-construction) in palette, nav (sticky horizontal tabs
   instead of a static jump grid), type pairing (bold sans display over
   serif body, reversed from Brooks' slab-serif headings) and form
   placement (footer, not a dedicated mid-page section). */

:root{
  --ink:#152233; --ink-2:#4c5a6b; --line:#d7dde3;
  --paper:#f5f7f9; --alt:#e9eef2; --white:#fff;
  --navy:#152233; --amber:#c9862f; --amber-lit:#e0a34f;
  --display:"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.7 var(--serif)}
h1,h2{font-family:var(--display);font-weight:800;line-height:1.08;margin:0 0 .5em;letter-spacing:-.01em}
a{color:inherit}
.btn{display:inline-block;background:var(--navy);color:#fff;text-decoration:none;
     padding:14px 26px;border:0;border-radius:3px;font:700 15px var(--display);cursor:pointer;
     letter-spacing:.01em}
.btn:hover{background:var(--amber)}
.btn.sm{padding:9px 18px;font-size:13px}

.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:22px;flex-wrap:wrap;
     padding:14px 32px;background:var(--navy);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.brand{font-family:var(--display);font-weight:800;font-size:20px;text-decoration:none;line-height:1;color:#fff}
.brand span{display:block;font-family:var(--serif);font-weight:400;font-style:italic;font-size:12px;
            color:var(--amber-lit);margin-top:3px}
.tabs{display:flex;gap:2px;margin-right:auto;overflow-x:auto;flex:1 1 auto;min-width:0}
.tabs a{flex:0 0 auto;display:flex;align-items:baseline;gap:6px;padding:10px 13px;
        text-decoration:none;color:#c8d2dc;font-family:var(--display);font-size:13px;
        white-space:nowrap;border-bottom:2px solid transparent}
.tabs a b{font-size:11px;color:var(--amber-lit)}
.tabs a:hover{color:#fff;border-bottom-color:var(--amber)}
.reach{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.reach a:first-child{font-family:var(--display);font-weight:700;font-size:15px;text-decoration:none;color:#fff}

.lead{max-width:900px;margin:0 auto;padding:64px 32px 48px}
.kicker{font-family:var(--display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
        color:var(--amber);margin:0 0 14px}
h1{font-size:clamp(2rem,4.4vw,3rem);max-width:18ch}
.lead p{font-size:19px;color:var(--ink-2);max-width:58ch}

.div{padding:60px 32px;border-top:1px solid var(--line)}
.div.alt{background:var(--alt)}
.div>*{max-width:900px;margin-left:auto;margin-right:auto}
.head{display:grid;grid-template-columns:auto 1fr;gap:0 20px;align-items:start}
.no{font-family:var(--display);font-weight:800;font-size:14px;color:#fff;background:var(--amber);
    width:36px;height:36px;display:grid;place-items:center;border-radius:50%;margin-top:4px}
.head h2{font-size:clamp(1.5rem,2.8vw,2rem);margin:0}
.head p{grid-column:2;color:var(--ink-2);max-width:56ch;margin:.4em 0 0;font-size:16px}
.body{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start;
      margin-top:30px;margin-bottom:28px}
.lines{list-style:none;padding:0;margin:0}
.lines li{padding:13px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink-2)}
.lines b{display:block;font-family:var(--display);font-weight:700;font-size:15.5px;color:var(--ink);margin-bottom:2px}

.ev{margin:0}
.ph{background:repeating-linear-gradient(135deg,#dfe5ea 0 14px,#d3dae1 14px 28px);
    border:1px solid var(--line);aspect-ratio:4/3;display:grid;place-items:center;
    padding:16px;text-align:center;font-size:12.5px;color:#7d8996;letter-spacing:.03em;
    font-family:var(--display)}
.ev.wide .ph{aspect-ratio:16/7}
.ph::after{content:attr(data-ph)}
.ev figcaption{font-size:13.5px;color:var(--ink-2);padding-top:10px;font-family:var(--display)}
.ev figcaption b{color:var(--amber)}

.story{background:var(--navy);color:#dfe6ec;padding:64px 32px}
.story>*{max-width:700px;margin-left:auto;margin-right:auto}
.story h2{color:#fff;font-size:clamp(1.5rem,2.8vw,2.1rem)}
.story p{color:#b9c6d2;font-size:18px;font-family:var(--serif)}

footer{padding:64px 32px 28px;background:var(--white);border-top:1px solid var(--line)}
footer .wrap{max-width:900px;margin:0 auto;display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:start}
footer h2{font-size:clamp(1.5rem,2.8vw,2rem)}
footer .info p{color:var(--ink-2);font-size:16px}
.direct{font-size:15.5px;line-height:2;margin-top:18px;font-family:var(--display)}
.direct a{color:var(--navy);font-weight:700}
form{background:var(--alt);border:1px solid var(--line);padding:26px;border-radius:4px}
label{display:block;font-family:var(--display);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
      color:var(--ink-2);margin-bottom:14px}
input,textarea,select{display:block;width:100%;margin-top:6px;padding:11px;
      border:1px solid var(--line);border-radius:3px;font:16px var(--serif);background:var(--white)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--amber);border-color:transparent}
.sent{grid-column:1/-1;background:#eaf3ea;border:1px solid #b9d6b9;padding:16px;border-radius:3px;
      max-width:900px;margin:20px auto 0;font-family:var(--display);font-size:14px}
footer .demo{max-width:900px;margin:32px auto 0;font-size:12px;color:#8f9aa5;font-family:var(--display)}

@media (max-width:860px){
  .top{padding:12px 18px;gap:12px}
  .reach{width:100%;justify-content:space-between;order:3}
  .lead,.div,footer{padding-left:18px;padding-right:18px}
  .body{grid-template-columns:1fr}
  .head{grid-template-columns:1fr}.head p,.no{grid-column:auto}
  footer .wrap{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}