/* ==========================================================================
   Schultz Enterprises - site styles
   --------------------------------------------------------------------------
   One stylesheet for the whole site. No build step, no framework.

   PALETTE IS PROVISIONAL. It is built around concrete grays with a single
   safety-amber accent, which is a safe read for a concrete contractor. Every
   color used anywhere on the site is declared once in :root below, so if Al
   wants a different accent it is a one line change, not a hunt.
   ========================================================================== */

:root {
  /* Neutrals - these are the concrete */
  --ink:      #1b1e21;   /* headings, near black graphite */
  --steel:    #333a40;   /* dark surfaces, footer, hero overlay */
  --body:     #35393d;   /* body copy */
  --muted:    #6c737a;   /* secondary text, captions */
  --page:     #f4f4f1;   /* page background, warm concrete off-white */
  --surface:  #ffffff;   /* cards, form */
  --line:     #dedeD8;   /* hairlines and borders */

  /* Accent - used sparingly, mostly on calls to action */
  --accent:      #c2641d;  /* safety amber */
  --accent-dark: #9d4f13;  /* hover state */

  --max: 72rem;          /* page max width */
  --radius: 6px;         /* deliberately tight, not bubbly */
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page);
  color: var(--body);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* Typography ---------------------------------------------------------------
   Headings are heavy and tight. A concrete contractor should not look like a
   boutique. No serif anywhere - it reads soft for this trade.               */

h1, h2, h3, h4 {
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0 0 .6rem;
}
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin-top: 0; }
h3 { font-size: 1.15rem; font-weight: 700; }
p  { margin: 0 0 1rem; }
a  { color: var(--accent-dark); }

/* Small uppercase label that sits above a heading */
.eyebrow {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .5rem;
}

.lead { font-size: 1.15rem; color: var(--body); max-width: 42rem; }
.muted { color: var(--muted); }

/* Layout -------------------------------------------------------------------
   .wrap is the standard centered container used on every page.             */

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }
.narrow { max-width: 46rem; }

section { padding: 3.5rem 0; }
section.tight { padding: 2.25rem 0; }

/* A full width band with a different background, used to break up the page */
.band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band-dark { background: var(--steel); color: #d9dde0; }
.band-dark h2, .band-dark h3 { color: #fff; }

/* Header and navigation ----------------------------------------------------
   The phone number is the primary action on every page. Contractors get hired
   by phone, not by contact form, so it is always visible and tap-to-call.   */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.site-header .wrap {
  display: flex; align-items: center; gap: 1rem;
  padding-top: .7rem; padding-bottom: .7rem;
}

.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; margin-right: auto; }
.brand img { height: 46px; width: auto; }
.brand .name { font-weight: 800; font-size: 1.05rem; color: var(--ink); line-height: 1.1; letter-spacing: -0.01em; }
.brand .sub  { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .14em;
               text-transform: uppercase; color: var(--muted); }

.site-nav { display: flex; align-items: center; gap: 1.4rem; }
.site-nav a {
  text-decoration: none; color: var(--body); font-size: .95rem; font-weight: 600;
  padding: .3rem 0; border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

/* The header phone button */
.header-call {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--accent); color: #fff; text-decoration: none;
  font-weight: 700; font-size: .95rem;
  padding: .6rem 1.05rem; border-radius: var(--radius); white-space: nowrap;
}
.header-call:hover { background: var(--accent-dark); }

/* Mobile: hide the inline nav, show a compact menu instead. Handled by the
   <details> disclosure in the markup so there is no JavaScript needed.      */
.nav-toggle { display: none; }

/* Hero ---------------------------------------------------------------------
   Dark overlay over a photo. The overlay is what makes white text legible on
   any photo, so do not remove it when swapping the image.                   */

.hero {
  position: relative;
  background: var(--steel) center/cover no-repeat;
  color: #fff;
  padding: 5.5rem 0 5rem;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,23,26,.86) 0%, rgba(20,23,26,.62) 55%, rgba(20,23,26,.42) 100%);
}
.hero .wrap { position: relative; }
.hero h1 { color: #fff; max-width: 20ch; }
.hero .lead { color: #dfe3e6; }
.hero .eyebrow { color: #f0a35e; }

/* Smaller hero used on interior pages */
.hero.compact { padding: 3.25rem 0 2.75rem; }
.hero.compact h1 { max-width: none; }

/* Buttons ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--accent); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 1.02rem; font-family: inherit;
  padding: .85rem 1.6rem; border: 2px solid var(--accent);
  border-radius: var(--radius); cursor: pointer;
}
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }

.btn-dark { background: var(--ink); border-color: var(--ink); }
.btn-dark:hover { background: #000; border-color: #000; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* Cards and grids ----------------------------------------------------------
   NOTE ON IMAGE SIZES: most source photos are only 388x194 or 400x712. The
   card widths below are deliberately capped so those images are never scaled
   UP past their native size, which is what makes an old site look blurry.
   If Al supplies full resolution photos later, these caps can be raised.    */

.grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 46rem) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.card img { width: 100%; height: 190px; object-fit: cover; background: var(--line); }
.card .card-body { padding: 1.15rem 1.25rem 1.35rem; flex: 1; display: flex; flex-direction: column; }
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--muted); font-size: .96rem; margin-bottom: 1rem; }
.card .card-link {
  margin-top: auto; font-weight: 700; font-size: .93rem;
  text-decoration: none; color: var(--accent-dark);
}
.card .card-link:hover { text-decoration: underline; }

/* Service list rows, used on the residential and commercial pages */
.svc { display: grid; gap: 1.5rem; align-items: center; margin-bottom: 2.5rem; }
@media (min-width: 52rem) {
  .svc { grid-template-columns: 400px 1fr; gap: 2.25rem; }
  .svc:nth-child(even) .svc-media { order: 2; }
}
.svc-media img { border-radius: var(--radius); border: 1px solid var(--line); width: 100%; }
.svc h3 { font-size: 1.35rem; }
.svc ul { padding-left: 1.15rem; margin: .5rem 0 0; }
.svc li { margin-bottom: .35rem; }

/* Trust strip - the four facts that answer "should I call this guy" -------- */
.facts { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, 1fr); text-align: center; }
@media (min-width: 52rem) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact .num { display: block; font-size: 2.1rem; font-weight: 800; color: #fff; line-height: 1.1; }
.fact .lbl { font-size: .88rem; color: #aeb6bc; }

/* Gallery ------------------------------------------------------------------
   Square tiles. Source project photos are 365x365, so 365px is the cap.     */
.gallery { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 52rem) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery figure { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.gallery img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.gallery figcaption { padding: .7rem .85rem; font-size: .9rem; color: var(--muted); }

/* Callout box */
.callout {
  border-left: 4px solid var(--accent);
  background: var(--surface);
  padding: 1.1rem 1.35rem;
  margin: 2rem 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.callout p:last-child { margin-bottom: 0; }

/* Big centered call to action, repeated at the bottom of every page -------- */
.cta { background: var(--steel); color: #fff; text-align: center; padding: 3.5rem 0; }
.cta h2 { color: #fff; }
.cta p { color: #c3cad0; max-width: 40rem; margin-left: auto; margin-right: auto; }
.cta .btn-row { justify-content: center; }
.cta .phone {
  display: inline-block; font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800;
  color: #fff; text-decoration: none; letter-spacing: -0.02em; margin: .35rem 0 .25rem;
}
.cta .phone:hover { color: #f0a35e; }

/* Form ---------------------------------------------------------------------
   Posts to /api/contact. The .hp field is a honeypot and must stay hidden.  */

.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: .9rem; font-weight: 600; color: var(--ink); margin-bottom: .35rem; }
.field .req { color: var(--accent); }
.field input, .field select, .field textarea {
  width: 100%; padding: .75rem .85rem; font: inherit; font-size: 1rem;
  border: 1px solid #c9c9c2; border-radius: var(--radius);
  background: #fff; color: var(--body);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field-row { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .field-row { grid-template-columns: 1fr 1fr; } }

/* Honeypot. Bots fill this in, humans never see it. Do not use display:none,
   some bots skip those. Push it off screen instead.                         */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Status messages returned by the form script */
.form-status { margin-top: 1rem; padding: .85rem 1rem; border-radius: var(--radius); font-size: .95rem; display: none; }
.form-status.show { display: block; }
.form-status.ok  { background: #e8f3ea; border: 1px solid #b9d9c1; color: #1e5b2c; }
.form-status.err { background: #fbeaea; border: 1px solid #e3bcbc; color: #8a2020; }

/* Contact details block beside the form */
.contact-detail { margin-bottom: 1.5rem; }
.contact-detail .lbl { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.contact-detail .val { font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.contact-detail .val a { color: var(--ink); text-decoration: none; }
.contact-detail .val a:hover { color: var(--accent-dark); }

/* Footer ------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: #9aa2a9; font-size: .93rem; padding: 3rem 0 1.5rem; }
.site-footer h4 { color: #fff; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .8rem; }
.site-footer a { color: #c3cad0; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .45rem; }
.footer-bottom {
  border-top: 1px solid #2e3338; margin-top: 2.25rem; padding-top: 1.25rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: .85rem; color: #767e85;
}

/* Mobile navigation --------------------------------------------------------
   Below 60rem the inline nav is replaced by a <details> disclosure. No JS.  */
@media (max-width: 60rem) {
  .site-nav { display: none; }
  .nav-toggle { display: block; }
  .nav-toggle summary {
    list-style: none; cursor: pointer; padding: .55rem .8rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    font-weight: 700; font-size: .9rem; color: var(--ink);
  }
  .nav-toggle summary::-webkit-details-marker { display: none; }
  .nav-toggle[open] .nav-panel { display: block; }
  .nav-panel {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: .5rem 1.25rem 1rem; box-shadow: 0 8px 20px rgba(0,0,0,.08);
  }
  .nav-panel a {
    display: block; padding: .7rem 0; text-decoration: none;
    font-weight: 600; color: var(--body); border-bottom: 1px solid var(--line);
  }
  .nav-panel a:last-child { border-bottom: 0; }
  .site-header .wrap { position: relative; }
  .brand .sub { display: none; }
}

/* Respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }