/* ==========================================================================
   EJ's Junk Removal - site styles
   Brand: orange primary, green accent (from logo), black/white base, yellow highlight
   ========================================================================== */

:root {
  --orange:        #F26A21;
  --orange-dark:   #D2540F;
  --orange-light:  #FFF1E8;
  --green:         #55B32B;
  --green-dark:    #3E8A1E;
  --yellow:        #FFC61E;
  --red:           #D93025;

  --ink:           #14161A;
  --ink-soft:      #3D434D;
  --muted:         #6B7280;
  --line:          #E4E7EC;
  --bg:            #FFFFFF;
  --bg-alt:        #F7F8FA;

  --radius:        14px;
  --radius-sm:     8px;
  --shadow:        0 1px 2px rgba(20,22,26,.06), 0 8px 24px rgba(20,22,26,.08);
  --shadow-lg:     0 12px 40px rgba(20,22,26,.14);
  --wrap:          1180px;
  --font:          "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--bg);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--orange-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 {
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -.02em;
  font-weight: 800;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1.1em; }
ul { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: .4em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.section { padding: 72px 0; }
.section--alt { background: var(--bg-alt); }
.section--tight { padding: 48px 0; }
.center { text-align: center; }
.lead { font-size: 1.14rem; color: var(--ink-soft); }
.section-head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.section-head p { margin-bottom: 0; }
.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange-dark);
  margin-bottom: .6em;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: 15px 26px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--orange); color: #fff; box-shadow: 0 6px 16px rgba(242,106,33,.32); }
.btn--primary:hover { background: var(--orange-dark); color: #fff; }
.btn--green { background: var(--green); color: #fff; box-shadow: 0 6px 16px rgba(85,179,43,.3); }
.btn--green:hover { background: var(--green-dark); color: #fff; }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn--outline-light { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.55); }
.btn--outline-light:hover { background: #fff; color: var(--ink); }
.btn--lg { padding: 18px 34px; font-size: 1.06rem; }
.btn--block { width: 100%; }

/* ---------- top call bar ---------- */
.topbar {
  background: var(--ink);
  color: #fff;
  font-size: .88rem;
  padding: 9px 0;
}
.topbar .wrap { display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center; justify-content: center; }
.topbar a { color: #fff; font-weight: 700; }
.topbar span { display: inline-flex; align-items: center; gap: .45em; white-space: nowrap; }
.topbar .dot { color: var(--yellow); }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 90px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand:hover { text-decoration: none; }
/* The logo is a square badge with the business name inside it, so it needs
   real size to stay legible. Don't drop this below ~60px. */
.brand img { height: 70px; width: auto; }
.brand-fallback { display: flex; flex-direction: column; line-height: 1.05; }
.brand-fallback strong { font-size: 1.35rem; font-weight: 900; color: var(--ink); letter-spacing: -.02em; }
.brand-fallback span { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }

.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-weight: 600;
  font-size: .97rem;
}
.nav a:hover { background: var(--bg-alt); text-decoration: none; }
.nav a.is-active { color: var(--orange-dark); }
.nav .btn { margin-left: 10px; }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; position: relative;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after  { position: absolute; top: 6px; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  color: #fff;
  background: linear-gradient(115deg, #14161A 0%, #23262C 46%, #3A2415 100%);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  right: -14%;
  top: -32%;
  width: 62%;
  height: 175%;
  background: radial-gradient(circle at center, rgba(242,106,33,.42) 0%, rgba(242,106,33,0) 62%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; padding-top: 84px; padding-bottom: 84px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero h1 { color: #fff; margin-bottom: .35em; }
.hero h1 em { font-style: normal; color: var(--yellow); }
.hero p { color: rgba(255,255,255,.86); font-size: 1.14rem; max-width: 34em; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .5em;
  background: rgba(85,179,43,.16);
  border: 1px solid rgba(85,179,43,.5);
  color: #C9F2B2;
  font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px; margin-bottom: 20px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 22px; }
.hero-note { font-size: .92rem; color: rgba(255,255,255,.62); margin: 0; }

.hero-card {
  background: #fff;
  color: var(--ink-soft);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-lg);
}
.hero-card h2 { font-size: 1.35rem; margin-bottom: .2em; }
.hero-card .muted { font-size: .95rem; color: var(--muted); margin-bottom: 20px; }

/* ---------- trust strip ---------- */
.trust {
  background: var(--orange);
  color: #fff;
}
.trust .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px 24px;
  padding-top: 22px;
  padding-bottom: 22px;
  text-align: center;
}
.trust strong { display: block; font-size: 1.06rem; font-weight: 800; }
.trust small { font-size: .85rem; opacity: .9; }

/* ---------- cards ---------- */
.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card--link { color: var(--ink-soft); display: block; }
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #D5D9E0; text-decoration: none; }
.card--link:hover h3 { color: var(--orange-dark); }
.card h3 { margin-bottom: .35em; }
.card p { color: var(--ink-soft); }
.card p:last-child { margin-bottom: 0; }
.card-icon {
  width: 50px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--orange-light);
  color: var(--orange-dark);
  margin-bottom: 16px;
}
.card-icon svg { width: 26px; height: 26px; }
.card--green .card-icon { background: #EEF9E8; color: var(--green-dark); }

/* numbered steps */
.step { text-align: center; }
.step-num {
  width: 54px; height: 54px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--ink); color: var(--yellow);
  font-weight: 900; font-size: 1.2rem;
}

/* ---------- service area ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; list-style: none; padding: 0; }
.chips li {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink);
  margin: 0;
}

/* ---------- gallery ---------- */
.ba-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 0; }

/* A job can carry more than two photos (several angles before, one after, and
   so on). Those cards take the full width of the grid so the shots stay big
   enough to read. */
.ba-card--wide { grid-column: 1 / -1; }

.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--line); }
.ba-pair[data-cols="1"] { grid-template-columns: 1fr; }
.ba-pair[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.ba-pair[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.ba-pair[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.ba-shot { position: relative; background: var(--bg-alt); }
/* Job photos are shot on a phone, so they're portrait. A landscape crop threw
   away the top and bottom of every one. Change to 4 / 3 if that ever flips. */
.ba-shot img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.ba-shot::after {
  content: attr(data-label);
  position: absolute; left: 10px; top: 10px;
  background: rgba(20,22,26,.82); color: #fff;
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 5px;
}
.ba-shot--after::after { background: var(--green); }
/* Must come after .ba-shot::after or the empty attr() badge wins. */
.ba-shot--plain::after { content: none; }

/* A single photo with a caption and no Before/After badge. */
.ba-solo { background: var(--bg-alt); }
.ba-solo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.ba-card figcaption { padding: 16px 20px; font-size: .95rem; color: var(--ink); font-weight: 600; }

/* Pair cards and single-photo cards are different heights, so don't stretch
   them to match — let each card end where its own content ends. */
#gallery-grid { align-items: start; }

/* placeholder art until real photos are dropped in */
.ph {
  width: 100%; aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #EDEFF3, #EDEFF3 12px, #F5F6F9 12px, #F5F6F9 24px);
  color: var(--muted); font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

/* ---------- reviews ---------- */
.review { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.stars { color: var(--yellow); font-size: 1.05rem; letter-spacing: 2px; margin-bottom: 12px; }
.review p { font-size: 1rem; color: var(--ink); }
.review cite { font-style: normal; font-weight: 700; color: var(--ink); font-size: .95rem; }
.review small { display: block; color: var(--muted); font-size: .85rem; }

/* ---------- forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 700; font-size: .93rem; color: var(--ink); }
.field .hint { font-size: .84rem; color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  padding: 13px 14px;
  border: 1px solid #CDD2DA;
  border-radius: var(--radius-sm);
  background: #fff;
  width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(242,106,33,.16);
}
.field input[type="file"] { padding: 11px; background: var(--bg-alt); cursor: pointer; }
.req { color: var(--red); }
.hp { position: absolute; left: -9999px; }

.checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 18px; }
.check { display: flex; align-items: flex-start; gap: 9px; font-size: .96rem; color: var(--ink); font-weight: 500; }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--orange); flex: none; }

.form-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
}

/* ---------- contact / split layouts ---------- */
.split { display: grid; grid-template-columns: 1.25fr .75fr; gap: 44px; align-items: start; }
.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); margin: 0; }
.info-list li:last-child { border-bottom: 0; }
.info-list .ico {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  background: var(--orange-light); color: var(--orange-dark);
  display: flex; align-items: center; justify-content: center;
}
.info-list .ico svg { width: 20px; height: 20px; }
.info-list strong { display: block; color: var(--ink); font-size: .95rem; }
.info-list span, .info-list a { font-size: 1rem; }

/* ---------- page banner ---------- */
.page-head {
  background: var(--ink);
  color: #fff;
  padding: 62px 0;
  position: relative;
  overflow: hidden;
}
.page-head::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 42%, rgba(242,106,33,.28) 100%);
}
.page-head .wrap { position: relative; z-index: 1; }
.page-head h1 { color: #fff; margin-bottom: .25em; }
.page-head p { color: rgba(255,255,255,.82); max-width: 46em; margin: 0; font-size: 1.08rem; }
.crumb { font-size: .86rem; color: rgba(255,255,255,.6); margin-bottom: 14px; }
.crumb a { color: rgba(255,255,255,.82); }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(100deg, var(--orange) 0%, var(--orange-dark) 100%);
  color: #fff;
  text-align: center;
  padding: 62px 0;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.92); font-size: 1.1rem; max-width: 44em; margin: 0 auto 26px; }
.cta-band .btn--ghost { background: #fff; color: var(--orange-dark); border-color: #fff; }

/* ---------- FAQ ---------- */
.faq { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  cursor: pointer;
  padding: 20px 24px;
  font-weight: 700;
  color: var(--ink);
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--orange); font-size: 1.5rem; font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq .faq-body { padding: 0 24px 22px; }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.72); padding: 56px 0 0; font-size: .95rem; }
.site-footer h4 { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; }
.site-footer a { color: rgba(255,255,255,.78); }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 36px; padding-bottom: 40px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 9px; }
.footer-logo img { height: 76px; margin-bottom: 14px; }
.socials { display: flex; gap: 10px; margin-top: 14px; }
.socials a {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255,255,255,.09);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.socials a:hover { background: var(--orange); }
.socials svg { width: 19px; height: 19px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 20px 0;
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: .88rem; color: rgba(255,255,255,.55);
}

/* ---------- mobile sticky call bar ---------- */
.mobile-bar { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 12px 22px 20px;
    box-shadow: var(--shadow);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 13px 8px; }
  .nav .btn { margin: 8px 0 0; }
  .site-header .wrap { position: relative; }
}
@media (max-width: 720px) {
  body { font-size: 16px; padding-bottom: 56px; }
  .section { padding: 52px 0; }
  .grid--3, .grid--2, .grid--4 { grid-template-columns: 1fr; }
  /* Three or four shots across is unreadable on a phone — wrap to two. */
  .ba-pair[data-cols="3"], .ba-pair[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .checks { grid-template-columns: 1fr; }
  .trust .wrap { grid-template-columns: 1fr 1fr; gap: 18px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .form-panel { padding: 22px; }
  .hero .wrap { padding-top: 56px; padding-bottom: 56px; }
  .site-header .wrap { min-height: 76px; }
  .brand img { height: 60px; }
  .topbar { font-size: .82rem; }
  .topbar .wrap { gap: 2px 14px; }
  .topbar .dot, .topbar .hide-sm { display: none; }
  .hero-cta .btn { width: 100%; }

  /* sticky call/text bar on phones */
  .mobile-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 60;
    border-top: 1px solid rgba(0,0,0,.1);
  }
  .mobile-bar a {
    padding: 15px 8px;
    text-align: center;
    font-weight: 800;
    color: #fff;
    font-size: 1rem;
  }
  .mobile-bar a:hover { text-decoration: none; }
  .mobile-bar .call { background: var(--orange); }
  .mobile-bar .quote { background: var(--green); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}