/* Hammerhead Property Services — shared stylesheet
   Used by index.html and for-tree-services.html.
   Edit here once and both pages change.

   LIGHT THEME. White and off-white surfaces, dark text.
   Contrast still comes from three places, deliberately:
     1. flat blue slabs (.slab)      — the orlandostumpgrinding.com move
     2. dark photo bands (.hero,.kit) — photos need a dark scrim for white text
     3. a dark footer                 — gives the page a base to sit on
   Without those the page goes flat and reads like a brochure template. */

*{box-sizing:border-box}

:root{
  --ink:#12171c;        /* headings and primary text */
  --muted:#5a6670;      /* body copy, secondary text */
  --faint:#71777c;      /* labels, captions */
  --bg:#ffffff;
  --soft:#f2f6f8;       /* alternating section background */
  --line:#dde4ea;       /* borders */
  --dark:#0f1215;       /* footer and photo scrims */
  --blue:#3c78c2;       /* dominant panel blue, from Orlando, darkened slightly */
  --blue-mut:#527b9b;   /* their muted header blue, darkened to pass contrast */
  --blue-deep:#2f5c92;  /* text on white, hovers */
}

html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,.cond{font-family:"Barlow Condensed",Inter,sans-serif;margin:0;color:var(--ink)}
p{margin:0}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
img{max-width:100%;display:block}
::selection{background:var(--blue);color:#fff}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.rule{height:1px;background:var(--line)}

/* ── header ─────────────────────────────────────────── */
header.hd{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdin{display:flex;align-items:center;justify-content:space-between;height:78px;gap:16px}
.logo{width:194px}
nav.nv{display:none;gap:30px}
nav.nv a{font-family:"Barlow Condensed",sans-serif;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
nav.nv a:hover{color:var(--ink)}
nav.nv a.on{color:var(--blue-deep);border-bottom:2px solid var(--blue);padding-bottom:3px}
@media(min-width:980px){nav.nv{display:flex}}

/* ── buttons ────────────────────────────────────────── */
/* solid blue so it works on the white header AND on the hero photo */
.call{display:inline-flex;align-items:center;gap:10px;background:var(--blue);color:#fff;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:13px;padding:14px 22px;white-space:nowrap;clip-path:polygon(0 0,100% 0,100% 68%,calc(100% - 14px) 100%,0 100%);transition:background .18s}
.call:hover{background:var(--blue-deep)}
/* outline button — only ever sits on the hero photo, so it stays light */
.quote{display:inline-flex;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.6);color:#fff;font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:12px;padding:14px 22px;transition:border-color .2s,letter-spacing .2s,background .2s}
.quote:hover{border-color:#fff;background:rgba(255,255,255,.12);letter-spacing:.16em}
.quote span{transition:transform .2s}
.quote:hover span{transform:translateX(5px)}

/* ── hero ───────────────────────────────────────────── */
.hero{position:relative;min-height:84vh}
/* Knocked back less than it used to be, so the machine actually reads.
   The scrim below is what keeps the headline legible, not the darkening. */
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;filter:grayscale(.16) contrast(1.05) brightness(.74)}
/* Heavier on the left, where the headline and buttons sit; the right side
   stays open so the grinder and the chips are visible. */
.scrim{position:absolute;inset:0;background:linear-gradient(90deg,var(--dark) 0%,rgba(15,18,21,.92) 26%,rgba(15,18,21,.62) 58%,rgba(15,18,21,.28) 100%)}
.heroin{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:84vh;padding:96px 24px}
.hero h1,.hero h2,.hero h3{color:#fff}
.eyebrow{font-family:"Barlow Condensed",sans-serif;color:var(--blue);letter-spacing:.34em;font-size:12.5px;text-transform:uppercase}
.hero .eyebrow{color:#8fc0f0}
h1{font-size:clamp(46px,8.2vw,96px);line-height:.95;font-weight:700;margin-top:20px}
.lede{color:#d5dce2;font-size:18px;line-height:1.65;max-width:560px;margin-top:28px}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:40px}

/* shorter hero, used on the trade page. Different photo, so it keeps the
   original centred crop and the heavier knock-back. */
.hero.sub,.hero.sub .heroin{min-height:58vh}
.hero.sub .heroin{padding:80px 24px}
.hero.sub>img{object-position:50% 50%;filter:grayscale(.3) contrast(1.06) brightness(.6)}
.hero.sub .scrim{background:linear-gradient(90deg,var(--dark) 8%,rgba(15,18,21,.66) 52%,rgba(15,18,21,.3) 100%)}

/* ── scrolling band ─────────────────────────────────── */
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--soft);padding:16px 0;overflow:hidden}
.bandin{display:flex;gap:56px;white-space:nowrap;animation:slide 34s linear infinite;width:max-content}
.bandin span{font-family:"Barlow Condensed",sans-serif;letter-spacing:.26em;font-size:13px;text-transform:uppercase;color:var(--muted)}
.bandin span:nth-child(even){color:var(--faint)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── sections ───────────────────────────────────────── */
section{padding:96px 0}
h2{font-size:clamp(32px,5vw,58px);line-height:1;font-weight:700}
.svc{display:grid;gap:48px;padding:64px 0;border-bottom:1px solid var(--line)}
@media(min-width:1000px){.svc{grid-template-columns:1fr 1fr;align-items:center}.svc.rev .tile{order:2}}
.tile{position:relative;overflow:hidden;border:1px solid var(--line)}
.tile img{transition:transform .6s cubic-bezier(.2,.7,.2,1);width:100%;object-fit:cover;filter:grayscale(.12)}
.tile:hover img{transform:scale(1.045)}
.num{font-family:"Barlow Condensed",sans-serif;color:var(--faint);font-size:44px;line-height:1}
h3{font-size:38px;line-height:1.05;font-weight:700;margin-top:12px}
.body{color:var(--muted);font-size:17px;line-height:1.7;margin-top:16px}
.pts{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.pts li{display:flex;gap:12px;color:#39434c;font-size:15.5px}
.pts b{color:var(--blue)}
.deck{color:var(--muted);font-size:17.5px;line-height:1.7;max-width:640px;margin-top:22px}

/* ── process steps ──────────────────────────────────── */
.steps{margin-top:56px;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--bg);padding:38px 30px 44px}
.step .n{font-family:"Barlow Condensed",sans-serif;font-weight:700;color:var(--blue);font-size:56px;line-height:1}
.step h3{font-size:25px;margin-top:16px}
.step p{color:var(--muted);font-size:15.5px;line-height:1.7;margin-top:12px}

/* ── photo band with three points (stays dark on purpose) ── */
.kit{position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:0}
.kit>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.5) brightness(.42)}
.kit .scrim2{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,18,21,.7),rgba(15,18,21,.9))}
.kitin{position:relative;display:grid;gap:40px;padding:84px 24px}
@media(min-width:820px){.kitin{grid-template-columns:repeat(3,1fr)}}
.kitin h3{font-size:27px;margin:0;color:#fff}
.kitin p{color:#c6ced4;font-size:15.5px;line-height:1.7;margin-top:12px}
.mid{text-align:center}
.mid p{color:var(--muted);font-size:17.5px;line-height:1.7;max-width:640px;margin:24px auto 0}

/* ── service area town grid ─────────────────────────── */
.towns{margin:44px auto 0;max-width:900px;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.towns{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.towns{grid-template-columns:repeat(4,1fr)}}
.towns li{background:var(--bg);padding:18px 14px;font-family:"Barlow Condensed",sans-serif;letter-spacing:.1em;text-transform:uppercase;font-size:15px;color:#3d4750}

/* ── trade cross-link strip ─────────────────────────── */
.tradein{display:grid;gap:28px;padding:66px 24px;align-items:center}
@media(min-width:900px){.tradein{grid-template-columns:1fr auto}}
.tradein h2{font-size:clamp(28px,4vw,42px)}
.tradein p{font-size:17px;line-height:1.7;max-width:620px;margin-top:18px}

/* ── FLAT BLUE SLAB ─────────────────────────────────── */
.slab{background:var(--blue);border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16)}
.slab h2,.slab h3{color:#fff}
.slab p{color:rgba(255,255,255,.94)}
.slab .eyebrow{color:rgba(255,255,255,.8)}
.slab.mut{background:var(--blue-mut)}
.slabin{padding:88px 24px;text-align:center}
.slabin p{font-size:18.5px;line-height:1.75;max-width:760px;margin:26px auto 0}
.slabin .lede2{font-size:17px;max-width:700px}

/* buttons that sit on blue */
.onblue{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--blue-deep);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:13px;padding:15px 26px;margin-top:34px;clip-path:polygon(0 0,100% 0,100% 68%,calc(100% - 14px) 100%,0 100%);transition:background .18s}
.onblue:hover{background:#e8f0f8}
.ghost{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.55);color:#fff;font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:12px;padding:14px 22px;transition:background .2s,border-color .2s}
.ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* ── promise callout (trade page) ───────────────────── */
.promise{border:1px solid var(--blue);background:#eef4fa;padding:44px 34px;margin-top:8px}
.promise h2{font-size:clamp(27px,3.6vw,40px)}
.promise p{color:#33404b;font-size:17.5px;line-height:1.75;margin-top:20px;max-width:760px}

/* ── two-column check list (trade page) ─────────────── */
.checks{margin-top:52px;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:760px){.checks{grid-template-columns:repeat(2,1fr)}}
.check{background:var(--bg);padding:32px 30px}
.check h3{font-size:23px;margin:0}
.check p{color:var(--muted);font-size:15.5px;line-height:1.7;margin-top:10px}
.check .tick{color:var(--blue-deep);font-family:"Barlow Condensed",sans-serif;font-size:13px;letter-spacing:.24em;text-transform:uppercase}

/* ── stat strip (trade page) ────────────────────────── */
.stats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:52px}
@media(min-width:700px){.stats{grid-template-columns:repeat(3,1fr)}}
.stat{background:var(--bg);padding:34px 28px;text-align:center}
.stat b{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:700;color:var(--blue);font-size:52px;line-height:1}
.stat span{display:block;color:var(--muted);font-size:14px;line-height:1.6;margin-top:10px}

/* ── quote block + form ─────────────────────────────── */
.qz{background:var(--soft);border-top:1px solid var(--line)}
.qzin{display:grid;gap:64px;padding:96px 24px}
@media(min-width:1000px){.qzin{grid-template-columns:1fr 1fr}}
.lbl{font-family:"Barlow Condensed",sans-serif;color:var(--faint);letter-spacing:.24em;font-size:11.5px;text-transform:uppercase}
form{background:var(--bg);border:1px solid var(--line);padding:30px}
form label{display:block;margin-top:16px}
form .row{display:grid;gap:16px}
@media(min-width:560px){form .row{grid-template-columns:1fr 1fr}}
form label span{display:block;font-family:"Barlow Condensed",sans-serif;color:var(--muted);letter-spacing:.2em;font-size:11px;text-transform:uppercase}
.in{background:#fbfcfd;border:1px solid var(--line);color:var(--ink);padding:13px 14px;width:100%;font-size:15px;outline:none;margin-top:8px;font-family:inherit;transition:border-color .18s,box-shadow .18s}
.in:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(60,120,194,.18)}
.send{width:100%;background:var(--blue);color:#fff;border:0;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:13px;padding:17px 20px;cursor:pointer;margin-top:24px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.22);font-family:inherit;transition:background .18s}
.send:hover{background:var(--blue-deep)}
.note{color:var(--faint);font-size:13px;line-height:1.6;margin-top:16px}

/* ── footer (dark, gives the page a base) ───────────── */
footer{background:var(--dark);border-top:1px solid var(--line);color:#c6ced4}
.ftin{display:flex;flex-direction:column;gap:32px;padding:44px 24px}
@media(min-width:820px){.ftin{flex-direction:row;align-items:center;justify-content:space-between}}
.ftin .logo{width:250px}
.ft-call{font-weight:600;border-bottom:2px solid var(--blue);padding-bottom:2px;color:#fff}
.ft-call:hover{border-color:#fff}
.ftnav{display:flex;flex-wrap:wrap;gap:24px;font-family:"Barlow Condensed",sans-serif;letter-spacing:.14em;text-transform:uppercase;font-size:13px;color:#98a1a9}
.ftnav a:hover{color:#fff}

@media(prefers-reduced-motion:reduce){.bandin{animation:none}.quote:hover span{transform:none}.tile:hover img{transform:none}}