/* Shared marketing stylesheet for every fence-type page (ranch, King Ranch, cedar post, pipe rail, steel rail, chain
   link, ornamental iron, wood privacy, split rail) + the custom-gate page. ONE file so the treatment is edited once,
   not re-pasted into each page's <head>. Mirrors the landing redesign. Palette pulled from the logo file:
   navy #040c1a, brand blue #00569d, orange (the "Draft") #f36500. Mobile-first; the two-up / multi-column rules are in
   the min-width:760px block at the bottom. --steel is kept as an alias because the pages reference var(--steel) inline. */
:root {
  --navy:#040c1a; --blue:#00569d; --steel:#00569d; --orange:#f36500;
  --ink:#10161d;          /* body = near-black */
  --meta:#43515f;         /* darker secondary, used sparingly */
  --line:#dbe4ee; --tint:#eef3fa; --card:#fff;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font-family:'DM Sans',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--ink); background:#fff; line-height:1.6; font-size:17px; -webkit-font-smoothing:antialiased; }
img { max-width:100%; }
.wrap { max-width:1040px; margin:0 auto; padding:0 20px; }

/* Top bar — WHITE, so the dark-navy + orange logo stays legible (it can't sit on the dark hero). Bar sizes to the logo. */
/* Site header: logo left (links home), nav right (Pricing link + orange Request-demo button), vertically centred.
   ⚠ This block is MIRRORED verbatim in landing.html's inline <style> (the homepage is self-contained and does not load
   marketing.css) — keep the two in sync. */
.topbar { background:#fff; border-bottom:1px solid var(--line); }
.topbar .inner { max-width:1040px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.topbar .brand { display:flex; align-items:center; flex-shrink:0; }
.topbar img { height:clamp(60px,8vw,112px); width:auto; display:block; }
.topnav { margin-left:auto; display:flex; gap:20px; align-items:center; }
.topnav .navlink { color:var(--navy); font-weight:600; font-size:16px; text-decoration:none; }
.topnav .navlink:hover, .topnav .navlink:focus { color:var(--orange); }
.topnav .navlink:focus-visible { outline:2px solid var(--orange); outline-offset:3px; border-radius:3px; }
.topnav .navlink[aria-current="page"] { color:var(--orange); border-bottom:2px solid var(--orange); padding-bottom:2px; }
.topnav .navbtn { background:var(--orange); color:#fff; font-weight:700; font-size:15px; text-decoration:none; padding:9px 16px; border-radius:8px; box-shadow:0 4px 12px rgba(243,101,0,.3); white-space:nowrap; }
.topnav .navbtn:hover { filter:brightness(1.06); }
.topnav .navbtn:focus-visible { outline:2px solid var(--navy); outline-offset:2px; }
@media (max-width:680px) {
  .topbar .inner { padding:10px 16px; }
  .topbar img { height:52px; }
  .topnav { gap:14px; }
  .topnav .navbtn { font-size:14px; padding:8px 13px; }
}
/* ⚠ Pricing must stay visible at phone widths (it's what ad traffic looks for) — NEVER display:none the navlink.
   At <=520px the logo width is capped and the button compacts so logo + Pricing + button stay on ONE row down to ~360px. */
@media (max-width:520px) {
  .topbar .inner { padding:9px 13px; gap:8px; }
  .topbar img { height:auto; max-width:132px; }
  .topnav { gap:9px; }
  .topnav .navlink { font-size:14px; }
  .topnav .navbtn { font-size:13px; padding:7px 11px; }
  /* Three items don't fit at ~360px, so the Calculator link drops off the nav here (it stays in the footer on every
     page). Pricing NEVER drops. The hide hook is the navextra class, never the Pricing link, so its always-visible rule stands. */
  .topnav .navextra { display:none; }
}

/* HERO — dark blue, white headline + sub, the orange button the only bright element. */
.hero { background:linear-gradient(165deg,#040c1a 0%,#013a72 60%,#00508f 100%); color:#fff; }
.hero .wrap { padding:34px 20px 42px; }
.hero h1 { font-size:clamp(29px,6.4vw,44px); line-height:1.1; letter-spacing:-.02em; margin:0 0 16px; color:#fff; max-width:20ch; }
.hero .sub { font-size:clamp(17px,2.3vw,20px); line-height:1.5; color:#d7e6f4; margin:0 0 26px; max-width:62ch; }
.cta { display:inline-block; background:var(--orange); color:#fff; text-decoration:none; font-weight:700; font-size:17px; padding:15px 28px; border-radius:10px; box-shadow:0 8px 22px rgba(243,101,0,.42); }
.cta:hover { filter:brightness(1.06); }

/* Sections alternate white / pale-blue so each block reads as its own panel. */
section { padding:40px 0; }
.band-tint { background:var(--tint); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
h2 { font-size:clamp(22px,4vw,29px); line-height:1.2; letter-spacing:-.01em; margin:0 0 18px; color:var(--ink); }

/* Feature grid ("what it counts" / ornamental gates). */
.vals { display:grid; grid-template-columns:1fr; gap:16px; margin-top:4px; }
.val { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px 22px; box-shadow:0 2px 10px rgba(16,22,29,.05); }
.val b { display:block; font-size:18px; margin-bottom:6px; color:var(--ink); }
.val span { color:var(--ink); font-size:16px; line-height:1.55; }

/* Ruled single-column spec list — a DIFFERENT shape from the .vals card grid, so pages don't all read alike. */
.specs { list-style:none; margin:4px 0 0; padding:0; border-top:1px solid var(--line); }
.specs li { padding:15px 2px; border-bottom:1px solid var(--line); font-size:16.5px; line-height:1.55; }
.specs li b { color:var(--ink); }
.specs li .n { color:var(--blue); font-weight:700; font-variant-numeric:tabular-nums; }

/* Standout callout for a single rule/number worth stopping on. */
.callout { background:#fff; border:1px solid var(--line); border-left:4px solid var(--orange); border-radius:10px; padding:18px 22px; margin-top:6px; font-size:17px; line-height:1.55; color:var(--ink); }
.callout b { color:var(--ink); }
.callout .n { color:var(--orange); font-weight:700; }

/* Small grades/spec table (chain link). Scrolls on a phone rather than overflowing the page. */
.tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:6px; }
table.grades { border-collapse:collapse; width:100%; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; font-size:15.5px; }
table.grades th, table.grades td { text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
table.grades th { background:#fbfcfd; color:var(--meta); font-size:12px; text-transform:uppercase; letter-spacing:.03em; font-weight:700; }
table.grades td:first-child { font-weight:700; white-space:nowrap; }

/* Prose + the estimate-to-truck flow list. */
.lede { font-size:17px; line-height:1.6; color:var(--ink); max-width:70ch; margin:0; }
.flow { margin:14px 0 0; padding-left:22px; color:var(--ink); font-size:16.5px; }
.flow li { margin:9px 0; }
.related { margin:22px 0 0; font-size:16px; color:var(--meta); }
.related a { color:var(--blue); font-weight:600; text-decoration:none; }
.related a:hover { text-decoration:underline; }

/* Screenshot frame (when a per-type demo image is added). */
.shot { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 8px 28px rgba(16,22,29,.13); margin-top:8px; }
.shot-cap { color:var(--meta); font-size:14px; font-weight:600; margin-top:10px; }

/* Request form. */
.form-card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:26px 24px 28px; max-width:560px; box-shadow:0 4px 18px rgba(16,22,29,.07); }
.form-card h2 { margin:0 0 6px; font-size:24px; }
.form-card p { color:var(--meta); margin:0 0 18px; font-size:16px; }
label { display:block; font-size:14px; font-weight:600; margin:12px 0 5px; }
input, select { width:100%; padding:12px; font-size:16px; border:1px solid var(--line); border-radius:8px; font-family:inherit; background:#fff; color:var(--ink); }
input:focus, select:focus { outline:2px solid var(--blue); border-color:var(--blue); }
button { margin-top:20px; width:100%; background:var(--orange); color:#fff; font-weight:700; font-size:17px; padding:14px; border:none; border-radius:10px; cursor:pointer; box-shadow:0 6px 18px rgba(243,101,0,.32); }
button:disabled { opacity:.6; cursor:default; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.thanks { display:none; background:#eaf6ec; border:1px solid #bfe3c6; color:#1b5e20; border-radius:10px; padding:18px 20px; font-size:16px; }
.err { display:none; color:#c62828; font-size:14px; margin-top:10px; }
footer { padding:30px 0 44px; color:var(--meta); font-size:13px; border-top:1px solid var(--line); }
footer a { color:inherit; }

@media (min-width:760px) {
  .hero .wrap { padding:54px 20px 58px; }
  .vals { grid-template-columns:1fr 1fr; }
}