/* Load & Go Junk Removal: two pages, one form flow.
   Spruce and brass on chalk. One family (Archivo), wide headlines, normal-width text. */

:root{
  --deep:#0A2A19;
  --spruce:#123B22;
  --spruce-2:#1B5230;
  --chalk:#F3F5F2;
  --paper:#FFFFFF;
  --tint:#EAF3E6;
  --sage:#D8DFDA;
  --sage-strong:#B9C5BD;
  --ink:#13211C;
  --ink-soft:#4E5F58;
  --leaf:#2E7D32;
  --brass:#6DBE3B;
  --brass-hover:#82D04E;
  --danger:#A33A0A;
  --focus:#2E7D32;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; background:var(--deep); }
body{
  margin:0;
  min-height:100vh; display:flex; flex-direction:column;
  color:var(--ink);
  font-family:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-stretch:100%;
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 520px at 88% -4%, rgba(109,190,59,.16), transparent 62%),
    radial-gradient(760px 620px at -6% 34%, rgba(46,125,50,.40), transparent 62%),
    linear-gradient(180deg, var(--deep) 0, var(--spruce) 60%, var(--deep) 100%);
  background-color:var(--deep);
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}
h1,h2{ margin:0; font-stretch:118%; font-weight:750; letter-spacing:-0.02em; line-height:1.05; text-wrap:balance; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
svg{ display:block; max-width:100%; }
:focus-visible{ outline:3px solid var(--brass); outline-offset:2px; }
.card :focus-visible{ outline-color:var(--focus); }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.wrap{ width:100%; max-width:1120px; margin:0 auto; padding-left:clamp(20px,5vw,40px); padding-right:clamp(20px,5vw,40px); }
.ico{ width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 24px; border-radius:14px; border:1.5px solid transparent;
  font:inherit; font-weight:700; font-size:1rem; text-decoration:none; cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.btn{ position:relative; }
.btn-badge{
  position:absolute; top:-12px; right:18px;
  padding:3px 11px; border-radius:999px;
  background:#fff; color:var(--spruce); border:1.5px solid var(--brass);
  font-size:.74rem; font-weight:700; line-height:1.4; letter-spacing:.01em;
  box-shadow:0 6px 12px -6px rgba(10,43,33,.4);
}
.btn:active{ transform:translateY(1px); }
.btn-primary{
  background:var(--brass); color:var(--deep);
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 12px 24px -12px rgba(58,120,26,.8);
}
.btn-primary:hover{ background:var(--brass-hover); transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 16px 28px -12px rgba(58,120,26,.85); }
.btn-primary:active{ transform:translateY(0); }
.btn-line{ background:#fff; border-color:var(--sage-strong); color:var(--spruce); }
.btn-line:hover{ border-color:var(--spruce); background:var(--chalk); }
.btn-ghost{ background:rgba(243,245,242,.06); border-color:rgba(243,245,242,.28); color:var(--chalk); }
.btn-ghost:hover{ background:rgba(243,245,242,.12); border-color:rgba(243,245,242,.55); }
.btn-block{ width:100%; }
.btn-lg{ padding:19px 24px; font-size:1.12rem; }
.btn[disabled]{ opacity:.7; cursor:wait; transform:none; }

/* ---------- header ---------- */
.site-header{ position:relative; z-index:5; }
.bar{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:88px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--chalk); font-stretch:118%; font-weight:800; font-size:1.3rem; letter-spacing:-0.01em; white-space:nowrap; }
.bar > .btn:only-child{ margin-left:auto; }
.brand{ display:block; line-height:0; }
.brand-logo{
  display:block; height:60px; width:auto; padding:4px 10px;
  background:#fff; border-radius:16px;
  box-shadow:0 12px 24px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.1);
}
@media (max-width:520px){ .brand-logo{ height:52px; padding:3px 8px; border-radius:14px; } }
.site-header .btn{ padding:11px 18px; font-size:.95rem; }
@media (max-width:420px){ .site-header [data-phone-text]{ display:none; } .site-header .btn{ padding:11px 14px; } }

main{ flex:1; position:relative; z-index:1; }
.site-header, .site-footer{ position:relative; z-index:1; }

/* a faint grain over the green, so it isn't a flat gradient */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- landing hero ---------- */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  grid-template-areas:"copy card" "ticks card";
  column-gap:clamp(36px,6vw,96px); row-gap:28px;
  align-items:start;
  padding-top:clamp(16px,4vw,56px);
}
.hero-copy{ grid-area:copy; align-self:end; }
.hero-card{ grid-area:card; }
.ticks{ grid-area:ticks; align-self:start; }
.hero-logo{
  display:block; width:clamp(190px,21vw,250px); height:auto; margin:0 0 30px;
  background:#fff; border-radius:26px; padding:10px 16px;
  box-shadow:0 34px 56px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.12);
}
.hero h1{ font-size:clamp(2.7rem,6.2vw,4.7rem); color:#fff; max-width:11ch; line-height:1; }
.lede{ font-size:clamp(1.08rem,1.6vw,1.22rem); color:rgba(243,245,242,.82); max-width:40ch; margin-top:22px; }
.ticks{ display:grid; gap:12px; max-width:420px; }
.ticks li{ display:flex; align-items:center; gap:12px; color:rgba(243,245,242,.9); font-weight:500; }
.ticks .ico{ width:26px; height:26px; padding:5px; border-radius:50%; background:rgba(109,190,59,.16); color:var(--brass); stroke-width:2.6; }
@media (max-width:900px){
  .hero-logo{ width:176px; margin-bottom:22px; border-radius:22px; padding:8px 12px; }
  .hero{ grid-template-columns:1fr; grid-template-areas:"copy" "card" "ticks"; }
  .hero-copy{ align-self:start; }
  .hero h1{ max-width:12ch; }
}

/* ---------- cards ---------- */
.card{
  position:relative;
  width:100%; max-width:540px; margin:0 auto;
  background:var(--paper); color:var(--ink); border-radius:28px;
  padding:clamp(26px,5vw,40px);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 2px 0 rgba(0,0,0,.02), 0 50px 80px -34px rgba(0,0,0,.75), 0 18px 30px -18px rgba(0,0,0,.35);
}
.card::before{
  content:""; position:absolute; top:0; left:clamp(26px,5vw,40px); right:clamp(26px,5vw,40px); height:4px;
  border-radius:0 0 6px 6px; background:linear-gradient(90deg, var(--brass), #A7E07C);
}
.card-form{ max-width:640px; }
.card :focus-visible{ outline-color:var(--focus); }
.card h1{ font-size:clamp(1.9rem,4.6vw,2.5rem); }
.card-lead{ color:var(--ink-soft); font-size:1rem; margin-bottom:18px; }
.cta-note{ text-align:center; color:var(--ink-soft); font-size:.88rem; margin-top:12px; }

.back{ display:inline-flex; align-items:center; gap:6px; color:var(--ink-soft); font-size:.92rem; font-weight:600; text-decoration:none; margin-bottom:16px; }
.back:hover{ color:var(--ink); }
.back .ico{ width:16px; height:16px; }

.or{ display:flex; align-items:center; gap:14px; margin:26px 0 20px; color:var(--ink-soft); font-size:.92rem; }
.or::before, .or::after{ content:""; flex:1; height:1px; background:var(--sage); }
.callback-box{ background:var(--chalk); border-radius:20px; padding:18px; }
.callback{ display:grid; gap:14px; }
.callback-box .field input{ background-color:#fff; }

/* ---------- form ---------- */
.progress{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:22px 0 0; padding:0; list-style:none; }
.progress .bar{ display:block; height:6px; border-radius:4px; background:var(--sage); position:relative; overflow:hidden; }
.progress .bar::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--brass), #A7E07C); transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.3,.8,.3,1); }
.progress .lab{ display:block; margin-top:7px; font-size:.78rem; font-weight:600; color:var(--ink-soft); transition:color .2s ease; }
.progress li.is-done .bar::after{ transform:scaleX(1); }
.progress li.is-done .lab{ color:var(--ink); }
.form{ display:grid; gap:0; margin-top:26px; }
.fs{ display:grid; gap:16px; min-width:0; }
.fs + .fs{ border-top:1px solid var(--sage); margin-top:26px; padding-top:26px; }
.fs > h2{
  display:flex; align-items:center; gap:12px;
  font-stretch:100%; font-weight:750; font-size:1.08rem; letter-spacing:-0.005em; line-height:1.2;
}
.fs > h2 .n{
  width:26px; height:26px; border-radius:50%; background:var(--spruce); color:#fff;
  display:grid; place-items:center; font-size:.82rem; font-weight:700; flex:none;
}
.fs > h2 .hint{ font-size:.85rem; }
.form > .btn{ margin-top:28px; }

.field{ display:grid; gap:6px; position:relative; min-width:0; }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:460px){ .f2{ grid-template-columns:1fr; } }
.field > label, .field > .label{ font-size:.85rem; font-weight:600; color:var(--ink); }
.hint{ font-weight:400; color:var(--ink-soft); }
.field input[type=text], .field input[type=tel]{
  width:100%; height:52px; padding:0 15px; border-radius:12px;
  border:1.5px solid var(--sage-strong); background:#fff; color:var(--ink);
  font:inherit; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus{ outline:none; border-color:var(--spruce); box-shadow:0 0 0 4px rgba(18,59,34,.16); }
.field input::placeholder{ color:#75857D; }
.was-validated .field input:invalid{ border-color:var(--danger); }

/* small icons inside the text fields */
.field input.i-user, .field input.i-phone, .field input.i-pin{
  padding-left:46px; background-repeat:no-repeat; background-position:15px center; background-size:20px 20px;
}
.field input.i-user{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2375857D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E"); }
.field input.i-phone{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2375857D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
.field input.i-pin{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2375857D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11.5A7 7 0 0 0 5 9.5C5 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
.honey{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* choice tiles (radio buttons that look like buttons) */
.choice{ border:0; padding:0; margin:0; min-width:0; }
.choice legend{ font-size:.85rem; font-weight:600; padding:0; margin-bottom:9px; }
.tiles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.tiles > .tile:last-child:nth-child(odd){ grid-column:1 / -1; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.tile{ position:relative; display:block; min-width:0; }
.tile input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:1; }
.tile-body{
  display:flex; align-items:center; gap:12px; min-height:60px; padding:10px 14px;
  border:1.5px solid var(--sage-strong); border-radius:14px; background:#fff;
  font-weight:600; font-size:.95rem; line-height:1.2; color:var(--ink);
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.tile-body .ico{ width:26px; height:26px; color:var(--leaf); }
.tile:hover .tile-body{ border-color:var(--spruce); }
.tile input:checked + .tile-body{ border-color:var(--spruce); background:var(--tint); box-shadow:0 0 0 3px rgba(18,59,34,.14); }
.tile input:checked + .tile-body::after{
  content:""; margin-left:auto; flex:none; width:20px; height:20px; border-radius:50%;
  background:var(--spruce) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2 8.8-9.4'/%3E%3C/svg%3E") center/12px no-repeat;
}
.tile input:focus-visible + .tile-body{ outline:3px solid var(--focus); outline-offset:2px; }
.chips .tile{ flex:0 0 auto; }
.chips .tile-body{ min-height:46px; border-radius:999px; padding:8px 18px; }
.chips .tile input:checked + .tile-body::after{ width:18px; height:18px; }
@media (max-width:520px){
  .tiles{ grid-template-columns:1fr; gap:8px; }
  .tile-body{ min-height:54px; }
  .chips .tile-body{ min-height:46px; }
}
.was-validated .choice:has(input:invalid) legend{ color:var(--danger); }
.was-validated .choice:has(input:invalid) .tile-body{ border-color:var(--danger); }

/* size glyph: a little box that fills up */
.glyph{ --v:.25; position:relative; width:24px; height:24px; flex:none; border:2px solid var(--leaf); border-radius:7px; overflow:hidden; }
.glyph::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:calc(var(--v) * 100%); background:var(--leaf); }
.glyph.q{ border-style:dashed; }
.glyph.q::after{ display:none; }
.glyph.q::before{ content:"?"; position:absolute; inset:0; display:grid; place-items:center; font-size:.8rem; font-weight:800; color:var(--leaf); }

/* address suggestions */
.suggest{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:20;
  background:#fff; border:1px solid var(--sage); border-radius:14px; padding:6px;
  box-shadow:0 26px 44px -18px rgba(10,43,33,.45); max-height:250px; overflow:auto;
}
.suggest[hidden]{ display:none; }
.suggest li{ padding:11px 12px; border-radius:9px; font-size:.95rem; cursor:pointer; }
.suggest li:hover, .suggest li.is-active{ background:var(--chalk); }
.suggest li.suggest-status{ cursor:default; color:var(--ink-soft); font-size:.9rem; }
.suggest li.suggest-status:hover{ background:transparent; }

/* photos */
.photo-drop{
  display:flex; align-items:center; gap:16px; padding:18px; cursor:pointer;
  border:1.5px dashed var(--sage-strong); border-radius:16px; background:var(--chalk);
  transition:border-color .15s ease, background-color .15s ease;
}
.photo-drop:hover, .photos:focus-within .photo-drop{ border-color:var(--spruce); background:#fff; }
.photo-drop.is-invalid{ border-color:var(--danger); background:#FFF6F1; }
.photo-icon{ width:52px; height:52px; border-radius:16px; background:var(--tint); display:grid; place-items:center; flex:none; color:var(--leaf); }
.photo-icon .ico{ width:28px; height:28px; }
.photo-drop strong{ display:block; font-size:1.02rem; }
.photo-drop small{ display:block; color:var(--ink-soft); font-size:.84rem; line-height:1.35; margin-top:2px; }
.thumbs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:10px; }
.thumbs:empty{ display:none; }
.thumbs li{ position:relative; aspect-ratio:1; border-radius:14px; overflow:hidden; background:var(--sage); box-shadow:0 8px 16px -10px rgba(10,43,33,.5); }
.thumbs img{ width:100%; height:100%; object-fit:cover; }
.thumbs button{
  position:absolute; top:5px; right:5px; width:26px; height:26px; border-radius:50%;
  border:0; background:rgba(10,43,33,.85); color:#fff; font-size:16px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.thumbs button:hover{ background:#000; }
.photo-msg{ font-size:.85rem; font-weight:600; color:var(--danger); }
.photo-msg:empty{ display:none; }

.fine{ font-size:.75rem; color:var(--ink-soft); line-height:1.45; margin-top:20px; }

/* ---------- results ---------- */
.result{ margin-top:20px; padding:18px; border-radius:16px; background:var(--tint); color:var(--ink); font-size:.98rem; line-height:1.5; }
.result strong{ font-weight:750; }
.result a{ font-weight:700; }
.result-actions{ display:grid; gap:10px; margin-top:14px; }
.result-actions .btn{ width:100%; }
.done-wrap{ margin-top:8px; }
.done{ text-align:center; padding:10px 2px 6px; }
.done-mark{
  width:68px; height:68px; margin:0 auto 20px; border-radius:50%;
  display:grid; place-items:center; background:var(--brass); color:var(--deep);
  box-shadow:0 16px 30px -12px rgba(58,120,26,.8);
  animation:pop .45s cubic-bezier(.2,.9,.3,1.25) both;
}
.done-mark .ico{ width:32px; height:32px; stroke-width:2.8; }
.done h2{ font-size:clamp(1.7rem,4.4vw,2.2rem); }
.done p{ color:var(--ink-soft); margin:12px auto 0; max-width:34ch; }
.done a{ font-weight:700; color:var(--ink); white-space:nowrap; }
.done .preview{ font-size:.8rem; margin-top:18px; padding-top:14px; border-top:1px solid var(--sage); }
@keyframes pop{ from{ transform:scale(.5); opacity:0; } to{ transform:none; opacity:1; } }

/* ---------- room illustration (landing page) ---------- */
.room{
  margin-top:clamp(44px,7vw,88px);
  padding:clamp(18px,3vw,32px) clamp(16px,3vw,32px) clamp(14px,2vw,20px);
  border:1px solid rgba(243,245,242,.1); border-radius:28px;
  background:linear-gradient(180deg, rgba(243,245,242,.06), rgba(243,245,242,.02));
  box-shadow:0 40px 80px -50px rgba(0,0,0,.8);
}
.room-stage{ position:relative; }
.room-svg{ width:100%; height:auto; overflow:visible; }
.room-label{ position:absolute; left:0; top:0; font-weight:700; font-size:.88rem; }
.room-label span{ position:absolute; left:0; top:0; white-space:nowrap; padding:6px 14px; border-radius:999px; transition:opacity .4s ease; }
.room-label .before{ background:rgba(243,245,242,.12); color:rgba(243,245,242,.92); }
.room-label .after{ opacity:0; background:var(--brass); color:var(--deep); }
.room.is-clear .room-label .before{ opacity:0; }
.room.is-clear .room-label .after{ opacity:1; transition-delay:.9s; }
.junk{ transition:opacity .55s ease, transform .7s cubic-bezier(.5,0,.2,1); transition-delay:calc(var(--i) * 130ms); }
.room.is-clear .junk{ opacity:0; transform:translateX(-34px); }
.beam{ opacity:0; }
.room.is-clear .beam{ opacity:1; transition:opacity 1.3s ease 1.4s; }
.sweep{ stroke-dasharray:1000; stroke-dashoffset:1000; }
.room.is-clear .sweep{ stroke-dashoffset:0; transition:stroke-dashoffset 1.1s ease .9s; }
.cleared{ opacity:0; }
.room.is-clear .cleared{ opacity:1; transition:opacity .5s ease 1.7s; }
.room-note{ color:rgba(243,245,242,.5); font-size:.78rem; margin-top:10px; }

/* ---------- footer ---------- */
.site-footer{ color:rgba(243,245,242,.6); padding:26px 0 30px; font-size:.86rem; margin-top:clamp(40px,6vw,72px); border-top:1px solid rgba(243,245,242,.08); }
.foot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; }
.foot a{ text-decoration:none; color:rgba(243,245,242,.85); font-weight:600; }
.foot a:hover{ color:#fff; }
.page-pad{ padding-bottom:clamp(8px,2vw,24px); }