/* =========================================================
   Jonesboro Hardscaping — Design System
   Concept: "Terraced" — the site's visual language echoes a
   terraced hillside retaining wall. Light stone-colored body
   sections are bookended by dark charcoal hero/footer bands,
   with thin contour-line rules marking section breaks the way
   elevation lines mark a slope. Panels sit offset rather than
   centered, the way retaining wall courses step down a hill.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@400;500;600;700&family=Work+Sans:wght@400;500;600;700&display=swap');

:root{
  /* Color */
  --ink:        #1F2A33;   /* deep slate */
  --ink-soft:   #33414D;
  --paper:      #F4EFE6;   /* loess body background */
  --paper-deep: #E9DFCF;   /* deeper loess, alternating sections */
  --white:      #FDFBF7;
  --moss:       #9A4A2B;   /* primary accent (brick rust) */
  --moss-dark:  #7C3A20;
  --moss-light: #D08A5E;
  --clay:       #2F5D6E;   /* secondary accent (slate teal), sparingly */
  --line:       #D3C6B1;   /* hairline rule / contour line */
  --line-dark:  #46525C;

  /* Type */
  --font-display: 'Bitter', Georgia, serif;
  --font-body: 'Work Sans', -apple-system, Helvetica, Arial, sans-serif;

  /* Layout */
  --max: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 8px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; }
h1, h2, h3{
  font-family: var(--font-display);
  overflow-wrap: break-word;
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 500; }
h2{ font-size: clamp(1.7rem, 3vw, 2.3rem); }
h3{ font-size: 1.25rem; font-weight: 600; }
p{ margin: 0 0 1em; max-width: 62ch; }
.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---- Contour-line section rule ---- */
.contour{
  height: 1px;
  background: var(--line);
  position: relative;
  margin: 0;
}
.contour::before{
  content: "";
  position: absolute;
  left: 8%;
  top: -3px;
  width: 46px;
  height: 7px;
  border-bottom: 1px solid var(--line);
  border-radius: 0 0 40% 40%;
}
.contour.dark{ background: var(--line-dark); }
.contour.dark::before{ border-bottom-color: var(--line-dark); }

/* ---- Header ---- */
.site-header{
  background: var(--ink);
  color: var(--white);
  position: sticky;
  top: 0;
  z-index: 40;
}
.header-tel{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: #D9DEE2;
  font-size: 0.92rem;
  white-space: nowrap;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.header-tel:hover{ color: var(--white, #fff); border-color: rgba(216,213,198,.35); }
.tel-icon{ width: 15px; height: 15px; flex: none; }
.tel-short{ display: none; }

/* Small tablets: the full number plus the quote button and Menu squeezes the
   brand onto two lines, so shorten the number to "Call" before that happens. */
@media (max-width: 780px){
  .tel-full{ display: none; }
  .tel-short{ display: inline; }
}
.cta-short{ display: none; }

/* Below 900px the row only has room for three things: brand, phone, Menu.
   The quote button is the one whose destination (the hero form) is already
   on screen, so it appears only once there is room for it without wrapping. */
@media (max-width: 900px){
  .header-right .btn-sm{ display: none; }
  .header-tel{
    border-color: rgba(216,213,198,.45);
    padding: 9px 14px;
    font-weight: 600;
    color: var(--white, #fff);
  }
}

.site-header .container{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding-top: 16px;
  padding-bottom: 16px;
  gap: 24px;
}
.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--white);
  flex-shrink: 0;
}
.brand-mark{ width: 34px; height: 34px; flex-shrink: 0; }
.brand-word{
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.brand-word span{
  display: block;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--moss-light);
  margin-top: 2px;
}
nav.primary-nav{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
nav.primary-nav a{
  text-decoration: none;
  font-size: 0.92rem;
  color: #D9DEE2;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color .15s, border-color .15s;
}
nav.primary-nav a:hover, nav.primary-nav a.active{
  color: var(--white);
  border-color: var(--moss-light);
}
.header-right{
  display: flex;
  align-items: center;
  gap: 14px;
  justify-self: end;
}
.nav-toggle{
  display: none;
  background: none;
  border: 1.5px solid rgba(255,255,255,.35);
  color: var(--white);
  padding: 8px 10px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.85rem;
  cursor: pointer;
}

/* ---- Buttons ---- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 13px 24px;
  border-radius: 6px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, background .15s, color .15s, border-color .15s;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{
  background: var(--moss);
  color: var(--white);
}
.btn-primary:hover{ background: var(--moss-dark); }
.btn-outline{
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.45);
  color: var(--white);
}
.btn-outline:hover{ border-color: var(--moss-light); color: var(--moss-light); }
.btn-dark{
  background: var(--ink);
  color: var(--white);
}
.btn-dark:hover{ background: var(--ink-soft); }
.btn-sm{ padding: 10px 18px; font-size: 0.85rem; }

/* ---- Hero ---- */
.hero{
  background: var(--ink);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.hero .container{
  padding-top: clamp(48px, 8vw, 96px);
  padding-bottom: clamp(56px, 9vw, 110px);
  position: relative;
}
.hero-eyebrow{
  font-size: 0.82rem;
  color: var(--moss-light);
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}
.hero h1{ color: var(--white); max-width: 15ch; }
.hero .lede{
  color: #D9DEE2;
  font-size: 1.08rem;
  max-width: 52ch;
  margin-top: 18px;
}
.hero-cta-row{
  display: flex;
  gap: 14px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.trust-row{
  display: flex;
  gap: 28px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.trust-item{
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #D9DEE2;
}
.trust-item .check{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--moss-light);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.trust-item .check svg{ width: 12px; height: 12px; }

.hero-form{
  display: flex;
  gap: 10px;
  margin-top: 30px;
  flex-wrap: wrap;
  align-items: center;
}
.hero-form input{
  font-family: var(--font-body);
  font-size: 0.92rem;
  padding: 12px 16px;
  border-radius: 6px;
  border: 1px solid #44505A;
  background: rgba(255,255,255,.06);
  color: var(--white);
  min-width: 180px;
}
.hero-form input::placeholder{ color: #97A0A6; }
.hero-form input:focus{ outline: none; border-color: var(--moss-light); background: rgba(255,255,255,.1); }
.hero-secondary-link{
  margin-top: 14px;
  font-size: 0.88rem;
}
.hero-secondary-link a{
  color: #AEB6BC;
  text-decoration: underline;
}
.hero-secondary-link a:hover{ color: var(--white); }

.hero-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.hero-card{
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 30px;
  border: 1px solid rgba(0,0,0,.06);
}
.hero-card h3{
  font-size: 1.3rem;
  margin-bottom: 6px;
}
.hero-card > p{
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin-bottom: 22px;
}
.hero-card .field{ margin-bottom: 16px; }
.hero-card .field label{ font-size: 0.8rem; }
.hero-card button[type="submit"]{
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
.hero-photo-note{
  margin-top: 46px;
  border: 1px solid #44505A;
  border-radius: var(--radius);
  background: repeating-linear-gradient(135deg, #232E37, #232E37 12px, #26323B 12px, #26323B 24px);
  height: clamp(220px, 30vw, 380px);
  display: flex;
  align-items: flex-end;
  padding: 20px;
  overflow: hidden;
  position: relative;
}
.hero-photo-note img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-photo-note .photo-tag{ display: none; }
.photo-tag{
  font-size: 0.75rem;
  color: #AEB6BC;
  background: rgba(38,43,36,.7);
  border: 1px solid #44505A;
  padding: 6px 12px;
  border-radius: 6px;
}

/* ---- Photo placeholder blocks (site-wide) ---- */
.photo-block{
  border-radius: var(--radius);
  background: repeating-linear-gradient(135deg, var(--paper-deep), var(--paper-deep) 12px, #DCD2C0 12px, #DCD2C0 24px);
  border: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  min-height: 260px;
  padding: 18px;
  overflow: hidden;
  position: relative;
}
.photo-block img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-block .photo-tag{ display: none; }
.photo-block .photo-tag{
  color: var(--ink-soft);
  background: rgba(241,238,227,.85);
  border-color: var(--line);
}
.photo-block.tall{ min-height: 420px; }
.photo-block.short{ min-height: 180px; }

/* ---- Section spacing ---- */
section{ padding: clamp(52px, 8vw, 92px) 0; }
section.tight{ padding: clamp(36px, 5vw, 56px) 0; }
section.hero{ padding: 0; } /* .hero .container carries the hero spacing; without this the generic section padding doubled it */
.section-deep{ background: var(--paper-deep); }
.section-dark{ background: var(--ink); color: var(--white); }
.section-dark h2, .section-dark h3{ color: var(--white); }
.section-dark p{ color: #D9DEE2; }
.eyebrow{
  font-size: 0.8rem;
  color: var(--moss);
  margin-bottom: 10px;
}
.section-dark .eyebrow{ color: var(--moss-light); }

/* ---- Two-column offset row (image + text) ---- */
.split-row{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
}
.split-row.reverse{ grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
.split-row.reverse .split-media{ order: 2; }
.split-row.reverse .split-text{ order: 1; }
.split-media{ min-height: 320px; }
.split-media .photo-block{ height: 100%; border: none; border-radius: 0; min-height: 320px; }
.split-text{
  padding: clamp(28px, 4vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.split-text h3{ font-size: 1.5rem; margin-bottom: 14px; }
.split-text p{ color: var(--ink-soft); }
.split-stack{ display: flex; flex-direction: column; gap: 28px; }

/* ---- Card grid (3-column benefits) ---- */
.grid-3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.benefit-card{
  border-top: 2px solid var(--moss);
  padding-top: 20px;
}
.card-icon{
  width: 30px;
  height: 30px;
  color: var(--moss);
  margin-bottom: 14px;
  display: block;
}
.benefit-card h3{ font-size: 1.08rem; margin-bottom: 10px; }
.benefit-card p{ color: var(--ink-soft); font-size: 0.96rem; }

/* ---- Service tiles (What We Build) ---- */
.tile-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.tile{
  background: var(--white);
  padding: 26px 22px;
  text-decoration: none;
  color: var(--ink);
  transition: background .15s;
}
.tile:hover{ background: var(--paper-deep); }
.tile-index{
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--moss);
  margin-bottom: 12px;
}
.tile h3{ font-size: 1.05rem; margin-bottom: 8px; }
.tile p{ font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 0; }

/* ---- Reasons list ---- */
.reasons{ list-style: none; margin: 0; padding: 0; }
.reasons li{
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  padding-left: 26px;
  position: relative;
  color: var(--ink-soft);
}
.reasons li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  width: 10px;
  height: 1px;
  background: var(--moss);
}
.reasons li:first-child{ padding-top: 0; }

/* ---- FAQ ---- */
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-item:first-child{ border-top: 1px solid var(--line); }
.faq-q{
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  padding: 20px 34px 20px 0;
  cursor: pointer;
  position: relative;
}
.faq-q::after{
  content: "+";
  position: absolute;
  right: 4px;
  top: 18px;
  font-size: 1.3rem;
  color: var(--moss);
  font-family: var(--font-body);
  transition: transform .15s;
}
.faq-item.open .faq-q::after{ content: "\2212"; }
.faq-a{
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
.faq-a p{ padding-bottom: 22px; color: var(--ink-soft); margin: 0; max-width: 68ch; }
.faq-item.open .faq-a{ max-height: 300px; }

/* ---- CTA band ---- */
.cta-band{
  background: var(--moss-dark);
  color: var(--white);
  text-align: left;
}
.cta-band h2{ color: var(--white); max-width: 20ch; }
.cta-band p{ color: #F1DED3; }
.cta-band-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

/* ---- Footer ---- */
.site-footer{
  background: var(--ink);
  color: #C9CED2;
  padding: 56px 0 28px;
}
.footer-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  padding-bottom: 40px;
}
.site-footer h4{
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  margin: 0 0 16px;
}
.site-footer ul{ list-style: none; margin: 0; padding: 0; }
.site-footer li{ margin-bottom: 10px; }
.site-footer a{ text-decoration: none; color: #C9CED2; font-size: 0.92rem; }
.site-footer a:hover{ color: var(--white); }
.footer-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid #33414D;
  font-size: 0.82rem;
  color: #8E979D;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom a{ font-size: inherit; color: inherit; text-decoration: none; }
.footer-bottom a:hover{ color: var(--white); }
.footer-brand{ display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-brand .brand-word{ color: var(--white); }

/* ---- Backlink styling (per standing preference) ---- */
.outbound-link{
  color: inherit;
  text-decoration: underline;
}

/* ---- Contact page ---- */
.contact-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
}
.field{ margin-bottom: 18px; }
.field label{
  display: block;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.field input, .field select, .field textarea{
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
}
.field textarea{ min-height: 120px; resize: vertical; }
.steps{ counter-reset: step; list-style: none; margin: 0; padding: 0; }
.steps li{
  counter-increment: step;
  padding: 18px 0 18px 46px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.steps li:last-child{ border-bottom: none; }
.steps li::before{
  content: counter(step);
  position: absolute;
  left: 0;
  top: 16px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--moss);
  color: var(--moss);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.85rem;
}
.steps strong{ display: block; margin-bottom: 4px; font-family: var(--font-display); font-weight: 600; }

/* ---- Utility ---- */
.center{ text-align: center; }
.mb-0{ margin-bottom: 0; }
.tag-row{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.tag{
  font-size: 0.78rem;
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 6px;
  color: var(--ink-soft);
}

/* ---- Responsive ---- */
@media (max-width: 900px){
  .grid-3{ grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .split-row, .split-row.reverse{ grid-template-columns: minmax(0, 1fr); }
  .split-row.reverse .split-media{ order: 1; }
  .split-row.reverse .split-text{ order: 2; }
  .footer-grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .contact-grid{ grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
/* Nav collapses at 1100px: the desktop link row is ~766px wide and cannot
   sit beside the logo and the header button until the viewport clears ~1090px. */
/* The horizontal nav needs 766px, the brand 339px and the header right side
   241px: 1346px of content in a container that caps at 1180px (~1052px inner).
   Showing the desktop nav only fits by crushing the brand to ~143px, which
   wraps the name onto two lines and the tagline onto four. So the nav lives
   behind the Menu button at every width. To bring the desktop nav back, give
   this query a max-width again -- but widen .site-header .container first, or
   the brand gets squeezed exactly as before. */
@media (max-width: 999px) {
  nav.primary-nav{
    /* Drops down from the bottom of the sticky header (its containing block),
       so it never covers the header or the Menu button, whatever the header's
       height. Scrolls on its own if the viewport is short. */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    border-top: 1px solid var(--line-dark);
    box-shadow: 0 18px 30px rgba(0,0,0,.25);
    background: var(--ink);
    flex-direction: column;
    align-items: flex-start;
    padding-block: 24px;
    /* Line the links up with the header's logo at every width. */
    padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
    gap: 18px;
    display: none;
  }
  nav.primary-nav.open{ display: flex; }
  .nav-toggle{ display: inline-block; }
}

/* Desktop (1000px+): the links get their own row under the logo and phone,
   so nothing in the top row has to shrink. Below 1000px they fold back into
   the Menu button's drop-down (above). */
@media (min-width: 1000px) {
  .site-header .container{
    grid-template-columns: auto 1fr;
    grid-template-areas: "brand right" "nav nav";
    row-gap: 0;
    padding-bottom: 0;
  }
  .site-header .brand{ grid-area: brand; }
  .site-header .header-right{ grid-area: right; }
  nav.primary-nav{
    grid-area: nav;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px clamp(18px, 2.3vw, 30px);
    margin-top: 14px;
    padding: 12px 0 14px;
    border-top: 1px solid var(--line-dark);
  }
  .nav-toggle{ display: none; }
}

@media (max-width: 720px){
  .tile-grid{ grid-template-columns: minmax(0, 1fr); }
  .cta-band-inner{ flex-direction: column; align-items: flex-start; }
  .footer-grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
}
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior: auto !important; }
}

@media (max-width: 400px){
  .header-tel{ padding: 9px 10px; }
  .header-right{ gap: 6px; }
  .btn-sm{ padding: 10px 12px; }
  .header-right{ gap: 8px; }
  .nav-toggle{ padding: 8px 8px; }
  .brand-word span{ font-size: 0.55rem; letter-spacing: 0.08em; }
}

/* Fineprint under every form's submit button (standing standard). */
.form-fineprint{
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--muted, #66717A);
  line-height: 1.5;
}