/* Olmstead Hauling, Inc. — site styles. Palette matches Gary's A-6b logo. */
:root{
  --yellow:#FFC400;      /* brand yellow (logo) */
  --yellow-soft:#FFF6D6; /* tinted section background */
  --yellow-hl:#FFE89A;   /* hover/selection highlight */
  --gold:#7A5A00;        /* text-safe gold for prices on white (AA) */
  --black:#111111;
  --ink:#111111;
  --muted:#4a4a4a;
  --line:#e4e0d6;
  --white:#fff;
  --error:#a12b1f;
  --ok:#1e6b34;
  --r:10px;
  --head:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:only light;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);line-height:1.6;background:var(--white)}
h1,h2,h3,h4,.logo,summary,.pl-day{font-family:var(--head)}
h1,h2,h3,h4{color:var(--black);line-height:1.25}
a{color:var(--black)}img{max-width:100%;height:auto}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem;z-index:99}
.wrap{max-width:1120px;margin:0 auto;padding:0 1.25rem}
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-25{margin-top:2.5rem}

/* Header & nav */
header{background:var(--black);color:#fff;position:sticky;top:0;z-index:10}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.7rem;padding-bottom:.7rem;flex-wrap:wrap}
.logo{display:inline-flex;align-items:center;white-space:pre;color:#fff;text-decoration:none;font-weight:800;font-size:1.25rem}
.logo span{color:inherit}
.logo-icon{height:38px;width:38px;margin-right:.55rem}
nav ul{list-style:none;display:flex;gap:1.1rem;margin:0;padding:0;flex-wrap:wrap}
nav a{color:#fff;text-decoration:none;font-weight:500}nav a:hover,nav a:focus{color:var(--yellow);text-decoration:underline}
.menu-btn{display:none;background:none;border:1px solid #fff;color:#fff;padding:.4rem .7rem;border-radius:6px;font-size:1rem}

/* Buttons */
.btn{display:inline-block;background:var(--yellow);color:var(--black);padding:.8rem 1.4rem;border-radius:var(--r);text-decoration:none;font-weight:700;border:2px solid var(--yellow);cursor:pointer;font-size:1rem}
.btn:hover,.btn:focus{background:var(--yellow-hl);border-color:var(--yellow-hl)}
.btn.alt{background:transparent;border-color:#fff;color:#fff}.btn.alt:hover,.btn.alt:focus{background:#fff;color:var(--black)}
.btn.green{background:var(--black);border-color:var(--black);color:#fff}.btn.green:hover,.btn.green:focus{background:#333;border-color:#333}

/* Hero */
.hero{background:linear-gradient(135deg,#111 0%,#2a2a2a 100%);color:#fff;padding:5rem 0}
.hero h1{color:#fff;font-size:clamp(2rem,5vw,3.2rem);margin:0 0 1rem;line-height:1.15}
.hero p{font-size:1.2rem;max-width:640px}
.hero .ctas{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.5rem}
.hero.page-hero{padding:3rem 0}
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:2.5rem;align-items:center}
.hero-logo{display:block;width:100%;max-width:380px;justify-self:end;background:#fff;border-radius:18px;padding:1.2rem}
.hero-logo img{display:block;width:100%;height:auto}

/* Sections, grids, cards */
section{padding:4rem 0}section.alt{background:var(--yellow-soft)}section.flush{padding-bottom:0}
h2{font-size:2rem;margin:0 0 .5rem}
.lead{color:var(--muted);margin-bottom:2rem}
.grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid.three{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;box-shadow:0 2px 6px rgba(0,0,0,.04)}
.card h3,.card h4{margin-top:0}
.card.callout{border-left:6px solid var(--black);background:var(--yellow-soft)}
.icon{font-size:2rem}
.price{color:var(--gold);font-weight:700}.price a{color:var(--gold)}
.steps{counter-reset:s}
.step::before{counter-increment:s;content:counter(s);display:inline-grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--yellow);color:var(--black);font-weight:800;margin-bottom:.5rem;font-family:var(--head)}
.rules{margin:0;padding-left:1.2rem}.rules li{margin:.5rem 0}
.notice{background:var(--yellow-soft);border-left:4px solid var(--yellow);padding:.75rem 1rem;border-radius:6px;margin:1rem 0}
.ok{background:#e6f3e6;border-left:4px solid var(--ok);padding:.75rem 1rem;border-radius:6px}
.reminder{margin-top:2rem;max-width:640px;border-left:6px solid var(--yellow)}
.ph{background:var(--yellow-hl);padding:0 .2em;border-radius:3px}

/* FAQ */
details{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.25rem;margin-bottom:.75rem}
summary{font-weight:600;cursor:pointer}

/* Forms */
form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
label{display:block;font-weight:600;margin-bottom:.25rem}
input,select,textarea{width:100%;padding:.7rem;border:1px solid #b9b2a4;border-radius:8px;font:inherit}
input:focus,select:focus,textarea:focus{outline:3px solid var(--yellow);outline-offset:1px;border-color:var(--black)}
.field{margin-bottom:1rem}.err{color:var(--error);font-size:.9rem;min-height:1.1em}.invalid{border-color:var(--error)}
.status{margin-top:1rem}

/* Tables (holiday schedule, retailers) */
.tbl{overflow-x:auto}
.hol{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.hol th{background:var(--black);color:#fff;text-align:left;padding:.85rem 1rem;font-family:var(--head)}
.hol td{padding:.85rem 1rem;border-top:1px solid var(--line)}
.hol tbody tr:nth-child(even){background:var(--yellow-soft)}
.hol td:first-child{font-weight:700}

/* Pickup day lookup */
.two-pl{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start}
.pl h2{font-size:1.6rem}.pl label{margin-bottom:.4rem}
.pl-wrap{position:relative}
#pl-in{padding:.85rem 1rem;font-size:1.1rem;border:2px solid var(--black);border-radius:var(--r)}
#pl-in:focus{outline:3px solid var(--yellow);outline-offset:2px}
.pl-sug{list-style:none;margin:0;padding:0;border:2px solid var(--black);border-top:0;border-radius:0 0 var(--r) var(--r);background:#fff;max-height:18rem;overflow:auto;position:absolute;left:0;right:0;z-index:5}
.pl-sug li{padding:.6rem 1rem;border-top:1px solid #ddd;cursor:pointer}
.pl-sug li[aria-selected="true"],.pl-sug li:hover{background:var(--yellow-hl)}
.pl-res{margin-top:1.2rem;border-radius:var(--r);padding:1.1rem 1.25rem;background:var(--yellow);color:var(--black)}
.pl-res.none{background:#fff;border:2px dashed var(--black)}
.pl-res a{color:var(--black);font-weight:700}
.pl-street{font-weight:600}.pl-day{font-size:1.5rem;font-weight:800;line-height:1.3}.pl-res p{margin:.4rem 0 0}
#pickup-day,#holidays,#area{scroll-margin-top:70px}

/* Footer */
footer{background:var(--black);color:#d6d6d6;padding:2.5rem 0}
footer a{color:var(--yellow)}
footer .grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.since{color:var(--yellow);font-weight:600;margin:.25rem 0 0}

/* Responsive */
@media(max-width:900px){.grid.three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr}.hero-logo{max-width:280px;justify-self:center;order:-1}}
@media(max-width:760px){.menu-btn{display:block}nav{width:100%;display:none}nav.open{display:block}nav ul{flex-direction:column;gap:.6rem;padding:.5rem 0}form .row{grid-template-columns:1fr}.hero{padding:3rem 0}}
@media(max-width:560px){.grid.three{grid-template-columns:1fr}}
section.flush+section{padding-top:1.5rem}.flush+section .reminder{margin-top:0}

details.warn{border:2px solid #c62828;background:#fff5f5}details.warn summary{color:#b71c1c}
.icon.svg{width:64px;height:64px;border-radius:50%;background:#FFC400;display:flex;align-items:center;justify-content:center;margin-bottom:.6rem}
.hico{vertical-align:-4px;margin-right:4px}
footer .hico{color:#FFC400}
.site-alert{background:#C62828;color:#fff;font-weight:700}.site-alert[hidden]{display:none}.site-alert .wrap{display:flex;align-items:center;gap:.6rem;padding:.8rem 1.25rem}.site-alert p{margin:0;white-space:pre-line}
.site-alert .hico{flex-shrink:0}
footer{position:relative;overflow:hidden}footer::after{content:"";position:absolute;right:1%;bottom:-50px;width:380px;height:332px;background:url(../img/morel-m3.svg) no-repeat center/contain;opacity:.04;pointer-events:none}footer .wrap{position:relative;z-index:1}@media(max-width:700px){footer::after{width:240px;height:210px;right:-30px;bottom:-30px}}

/* Morel watermark strength on phones: raise or lower this number (0.04 = computer setting) */
@media(max-width:700px){footer::after{opacity:.08}}

.ft-note{background:#fff;border-left:4px solid var(--black);border-radius:6px;padding:.6rem .85rem;margin:.9rem 0 0;font-size:.95rem}

@media(min-width:900px){footer .wrap.grid{grid-template-columns:1fr 1fr 22%}}