/* Loaded after site.css: tighter spacing across the public site, plus the
   darkened autumn photo behind the home page hero (bottom of this file). */

/* Desktop and tablet. Phones keep the compact layout in site.css, with the
   extra tightening at the bottom of this file. */
@media (min-width:701px){
  /* Sections and headings */
  .ts-section{padding:64px 0}
  .ts-section-head{margin-bottom:34px}
  .ts-section-head p{margin-top:10px}
  .ts-eyebrow{margin-bottom:10px}

  /* Hero */
  .ts-hero{padding:64px 0 72px}
  .ts-hero-grid{gap:40px}
  .ts-home .ts-hero-lead{margin:16px 0 24px}
  .ts-hero-meta{margin-top:24px;gap:10px 20px}
  .ts-hero-card{padding:28px 26px}
  .ts-hero-card p{margin-bottom:16px}
  .ts-contact-row{padding:12px 0}
  .ts-contact-row:last-of-type{margin-bottom:18px}

  /* Cards and grids */
  .ts-services{gap:16px}
  .ts-service{padding:24px 22px}
  .ts-service .ts-icon-circle{width:48px;height:48px;margin-bottom:14px}
  .ts-service h3{margin-bottom:6px}
  .ts-why-grid{gap:44px}
  .ts-why h2{margin-bottom:14px}
  .ts-home .ts-why-intro{margin-bottom:20px}
  .ts-features{gap:14px}
  .ts-feature{padding:20px 20px}
  .ts-steps{gap:24px}
  .ts-about-grid{gap:44px}
  .ts-about-copy h2{margin-bottom:14px}
  .ts-about-values{margin:16px 0 20px}
  .ts-counties{margin-bottom:20px}
  .ts-home .ts-areas-note{margin-top:20px}

  /* Photo gallery and business band */
  .ts-gallery-grid{gap:12px;grid-template-rows:210px 210px}
  .ts-biz-band{padding:48px 0 56px}
  .ts-biz-grid{gap:36px;padding:18px 36px 18px 18px}
  .ts-biz-grid img{height:280px}
  .ts-home .ts-biz-grid p{margin-bottom:18px}

  /* Final call to action */
  .ts-cta{padding-bottom:64px}
  .ts-cta-box{padding:52px 36px}
  .ts-home .ts-cta-box p{margin:12px auto 24px}

  /* Footer */
  .ts-footer{padding-top:48px}
  .ts-footer-grid{gap:28px;padding-bottom:32px}
  .ts-footer-bottom{padding:16px 24px}

  /* Inner pages, quote and contact */
  .ts-page-hero{padding:52px 0 36px}
  .ts-home .ts-page-hero p{margin-top:12px}
  .ts-section-tight{padding:40px 0 64px}
  .ts-quote-grid{gap:32px}
  .ts-form fieldset{padding:22px 22px 4px;margin-bottom:16px}
  .ts-field{margin-bottom:14px}
  .ts-check{margin-bottom:14px}
  .ts-estimate-card{padding:24px 22px}
  .ts-contact-grid{gap:16px}
  .ts-contact-card{padding:24px 20px}
  .ts-prose h2{margin:32px 0 10px}
  .ts-prose h3{margin:20px 0 8px}
  .ts-toc{margin:18px 0 4px;padding:14px 18px}

  /* Commercial page */
  .cm-hero{padding:60px 0 64px}
  .cm-hero-grid{gap:40px}
  .cm-intro{padding-bottom:8px}
  .cm-intro-grid{gap:40px;padding-top:44px}
  .cm-who{padding-top:56px}
  .cm-scope-grid{gap:40px}
  .ts-home .cm-lead{margin-bottom:14px}
  .cm-list{margin-bottom:16px}
  .cm-list li{padding:10px 0}
}

@media (max-width:1000px){
  .ts-hero-grid,.ts-why-grid,.cm-hero-grid,.cm-intro-grid,.cm-scope-grid{gap:28px}
  .ts-about-grid{gap:32px}
}
@media (max-width:860px){
  .ts-gallery-grid{grid-template-rows:none;grid-auto-rows:170px;gap:10px}
  .ts-biz-grid{gap:18px;padding:12px 12px 22px}
  .ts-biz-grid img{height:200px}
}
@media (max-width:700px){
  .ts-section{padding:40px 0}
  .ts-section-head{margin-bottom:22px}
  .ts-hero{padding:32px 0 36px}
  .ts-page-hero{padding:36px 0 24px}
  .ts-section-tight{padding:28px 0 44px}
  .ts-cta{padding-bottom:40px}
  .ts-cta-box{padding:34px 18px}
  .ts-biz-band{padding:32px 0 36px}
  .ts-gallery-grid{grid-auto-rows:130px;gap:8px}
  .ts-footer{padding-top:36px}
  .ts-footer-grid{gap:22px;padding-bottom:24px}
  .cm-hero{padding:32px 0 40px}
  .cm-intro-grid{padding-top:32px;gap:14px}
  .cm-who{padding-top:40px}
  .ts-form fieldset{padding:18px 16px 2px}
}

/* ---------- Home hero: darkened autumn photo ----------
   A warm dark overlay keeps the photo subtle and the text easy to read;
   it's darkest behind the headline. Same look in light and dark mode. */
.ts-hero,html[data-theme="dark"] .ts-hero{
  background:
    linear-gradient(100deg,rgba(22,16,10,.86) 0%,rgba(22,16,10,.74) 48%,rgba(22,16,10,.55) 100%),
    url(/assets/photos/hero-autumn.webp) center 55%/cover no-repeat #2a2018;
}
.ts-home .ts-hero h1,html[data-theme="dark"] .ts-home .ts-hero h1{color:#fff}
.ts-home .ts-hero h1 em{color:#ecd3a0}
.ts-home .ts-hero .ts-eyebrow{color:#ecd3a0}
.ts-home .ts-hero .ts-hero-lead{color:rgba(255,255,255,.9)}
.ts-home .ts-hero .ts-hero-meta{color:rgba(255,255,255,.85)}
.ts-home .ts-hero .ts-hero-meta svg{color:#ecd3a0}
.ts-home .ts-hero .ts-hero-meta span:hover{color:#fff}
.ts-home .ts-hero .ts-hero-ctas .ts-btn-ghost{background:rgba(255,255,255,.1);color:#fff !important;border-color:rgba(255,255,255,.45)}
.ts-home .ts-hero .ts-hero-ctas .ts-btn-ghost:hover{background:rgba(255,255,255,.2);border-color:#fff}
.ts-home .ts-hero h1,.ts-home .ts-hero .ts-hero-lead{text-shadow:0 2px 18px rgba(0,0,0,.35)}
@media (max-width:860px){
  .ts-hero,html[data-theme="dark"] .ts-hero{
    background:linear-gradient(180deg,rgba(22,16,10,.8),rgba(22,16,10,.72)),url(/assets/photos/hero-autumn.webp) 30% 50%/cover no-repeat #2a2018;
  }
}

/* Second tightening pass (user: "too much spacing"): shorter sections, wider
   headings so titles fit on one line, and compact step circles. */
@media (min-width:701px){
  .ts-section{padding:44px 0}
  .ts-section-tight{padding:28px 0 44px}
  .ts-section-head{max-width:920px;margin-bottom:24px}
  .ts-section-head h2{font-size:clamp(1.9rem,3.2vw,2.6rem)}
  .ts-section-head p{margin-top:8px}
  .ts-eyebrow{margin-bottom:6px}
  .ts-steps{gap:20px}
  .ts-step-dot{width:52px;height:52px;margin-bottom:12px;font-size:1.45rem}
  .ts-step h3{font-size:1.35rem;margin-bottom:4px}
  .ts-step p{max-width:340px}
}
@media (max-width:700px){
  .ts-section{padding:30px 0}
  .ts-section-head{margin-bottom:16px}
}