/* ==========================================================================
   Pallets on Demand — brand navy + pallet orange (matches logo)
   ========================================================================== */
:root{
  --ink:#1b2433;          /* body text: deep charcoal-navy */
  --navy:#1b3e70;         /* brand blue (logo "Pallets") */
  --navy-d:#14305a;       /* darker blue — footer */
  --orange:#E07C24;       /* brand orange (logo pallet + "On Demand") */
  --orange-d:#C4661A;
  --wood:#B07A3C;
  --paper:#f6f6f4;
  --wash:#eef1f6;         /* cool wash to sit with the navy */
  --white:#ffffff;
  --muted:#57616f;
  --line:#e2e6ec;
  --line-d:#33507e;
  --maxw:1180px;
  --r:14px;
  --shadow:0 10px 30px rgba(20,32,58,.12);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Barlow",-apple-system,system-ui,Segoe UI,Roboto,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:"Oswald",Impact,sans-serif; font-weight:600; line-height:1.05; margin:0; text-transform:uppercase; letter-spacing:.01em; }
a{ color:inherit; text-decoration:none; }
img,svg{ max-width:100%; display:block; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:"Oswald",sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; font-size:15px; padding:14px 26px; border-radius:10px;
  border:2px solid transparent; cursor:pointer; transition:transform .12s ease, background .15s, color .15s, border-color .15s;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn--orange{ background:var(--orange); color:#fff; }
.btn--orange:hover{ background:var(--orange-d); }
.btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn--dark{ background:var(--navy); color:#fff; }
.btn--dark:hover{ background:var(--navy-d); }

/* ---- top utility bar ---- */
.topbar{ background:var(--navy); color:#cdd7e6; font-size:13.5px; }
.topbar__in{ display:flex; justify-content:space-between; align-items:center; height:38px; gap:16px; }
.topbar__cov{ letter-spacing:.02em; }
.topbar__contact{ display:flex; align-items:center; gap:18px; letter-spacing:.02em; }
.topbar__contact a{ color:#fff; font-weight:600; }
.topbar__contact a:hover{ color:var(--orange); }
@media (max-width:640px){ .topbar__cov{ display:none; } .topbar__in{ justify-content:center; } }

/* ---- nav ---- */
.nav{ position:sticky; top:0; z-index:50; background:rgba(246,246,244,.92); backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line); }
.nav__in{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand{ display:flex; align-items:center; }
.brand__logo{ height:46px; width:auto; }
.menu{ display:flex; align-items:center; gap:30px; }
.menu a{ font-family:"Oswald",sans-serif; font-weight:500; text-transform:uppercase; letter-spacing:.05em; font-size:15px; color:var(--navy); }
.menu a:not(.menu__cta):hover{ color:var(--orange); }
.menu__cta{ background:var(--orange); color:#fff; padding:11px 20px; border-radius:9px; }
.menu__cta:hover{ background:var(--orange-d); }
.burger{ display:none; background:none; border:0; width:44px; height:44px; cursor:pointer; padding:10px; }
.burger span{ display:block; height:2.5px; background:var(--navy); border-radius:2px; margin:5px 0; transition:.25s; }
.burger[aria-expanded=true] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.burger[aria-expanded=true] span:nth-child(2){ opacity:0; }
.burger[aria-expanded=true] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

@media (max-width:860px){
  .burger{ display:block; }
  .menu{
    position:absolute; top:74px; left:0; right:0; flex-direction:column; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .menu.open{ max-height:360px; }
  .menu a{ width:100%; padding:16px 22px; border-top:1px solid var(--line); }
  .menu__cta{ border-radius:0; }
}

/* ---- hero ---- */
.hero{ position:relative; overflow:hidden; color:#fff; }
.hero__bg{
  position:absolute; inset:0; background:url("/images/hero-yard.webp") center/cover no-repeat;
  transform:scale(1.05); animation:heroZoom 22s ease-in-out infinite alternate;
}
@keyframes heroZoom{ from{ transform:scale(1.05); } to{ transform:scale(1.18); } }
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(15,28,52,.94) 0%, rgba(16,32,58,.84) 42%, rgba(16,32,58,.5) 100%),
             linear-gradient(0deg, rgba(13,24,44,.7), rgba(13,24,44,0) 55%);
}
.hero__in{ position:relative; padding:92px 22px 82px; }
.hero__eyebrow{
  font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.22em;
  font-size:13px; font-weight:500; color:var(--orange); margin:0 0 18px;
}
.hero__title{ font-size:clamp(46px,8vw,86px); font-weight:700; }
.hero__title span{ color:var(--orange); }
.hero__sub{ max-width:600px; font-size:clamp(17px,2.2vw,20px); color:#dbe2ee; margin:22px 0 30px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; }
.hero__trust{
  list-style:none; display:flex; flex-wrap:wrap; gap:10px 26px; padding:0; margin:34px 0 0;
  font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.05em; font-size:13.5px; color:#eaeef4;
}
.hero__trust li{ position:relative; padding-left:22px; }
.hero__trust li::before{ content:""; position:absolute; left:0; top:50%; width:11px; height:11px; margin-top:-5.5px; background:var(--orange); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }

/* ---- stats strip ---- */
.stats{ background:var(--orange); }
.stats__in{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:26px 18px; text-align:center; border-right:1px solid rgba(255,255,255,.28); }
.stat:last-child{ border-right:0; }
.stat__n{ display:block; font-family:"Oswald",sans-serif; font-weight:700; font-size:30px; color:#fff; line-height:1; }
.stat__k{ display:block; font-size:14px; text-transform:uppercase; letter-spacing:.05em; color:#fff2e4; margin-top:6px; }
@media (max-width:640px){ .stats__in{ grid-template-columns:1fr 1fr; } .stat:nth-child(2){ border-right:0; } .stat:nth-child(1),.stat:nth-child(2){ border-bottom:1px solid rgba(255,255,255,.28); } }

/* ---- sections ---- */
.section{ padding:84px 0; }
.section--dark{ background:var(--navy); color:#e7edf5; }
.section--wash{ background:var(--wash); }
.shead{ max-width:720px; margin:0 0 46px; }
.shead__eyebrow{ font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.2em; font-size:13px; font-weight:500; color:var(--orange); margin:0 0 12px; }
.section--dark .shead__eyebrow{ color:var(--orange); }
.shead__title{ font-size:clamp(30px,4.6vw,46px); color:var(--navy); }
.section--dark .shead__title{ color:#fff; }
.shead__lead{ font-size:19px; color:var(--muted); margin:16px 0 0; }
.shead--light .shead__title{ color:#fff; }

/* ---- service cards (photo-led) ---- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease;
  display:flex; flex-direction:column;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(20,32,58,.16); }
.card__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--wash); }
.card__media img{ width:100%; height:100%; object-fit:cover; }
.card__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,32,58,.28), rgba(20,32,58,0) 45%); }
.card__body{ padding:26px 28px 30px; display:flex; flex-direction:column; flex:1; }
.card__h{ font-size:24px; margin-bottom:10px; color:var(--navy); }
.card p{ color:var(--muted); margin:0 0 16px; }
.card__list{ list-style:none; padding:0; margin:auto 0 0; border-top:1px solid var(--line); padding-top:14px; }
.card__list li{ position:relative; padding:6px 0 6px 24px; font-size:15.5px; }
.card__list li::before{ content:""; position:absolute; left:0; top:12px; width:12px; height:3px; background:var(--orange); }

/* ---- why grid ---- */
.why{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px 40px; }
.why__item{ border-top:2px solid var(--line-d); padding-top:18px; }
.why__n{ font-family:"Oswald",sans-serif; font-weight:700; color:var(--orange); font-size:15px; letter-spacing:.1em; }
.why__item h3{ font-size:21px; color:#fff; margin:8px 0 8px; }
.why__item p{ color:#bcc6d6; font-size:16px; margin:0; }

/* ---- steps ---- */
.steps{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:s; }
.step{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:30px 26px; position:relative; box-shadow:var(--shadow); }
.step__n{ display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; background:var(--navy); color:#fff; font-family:"Oswald",sans-serif; font-weight:700; font-size:24px; margin-bottom:16px; }
.step h3{ font-size:22px; margin-bottom:8px; color:var(--navy); }
.step p{ color:var(--muted); margin:0; }

/* ---- coverage ---- */
.coverage{ display:grid; grid-template-columns:1.15fr 1fr; gap:40px; align-items:stretch; }
.coverage__map{
  border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow); min-height:430px; background:#fff;
}
.coverage__map iframe{ display:block; width:100%; height:100%; min-height:430px; filter:saturate(.92); }
.coverage__info{ display:flex; flex-direction:column; justify-content:center; }
.coverage__info h3{ font-size:24px; margin-bottom:18px; color:var(--navy); }
.coverage__info .btn{ margin-top:24px; align-self:flex-start; }
.coverage__lead{ font-size:18px; color:var(--muted); margin:16px 0 26px; }
.coverage__list{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.coverage__list li{
  background:var(--white); border:1px solid var(--line); border-radius:10px; padding:16px 18px;
  font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.04em; font-size:16px; font-weight:500;
  position:relative; padding-left:44px;
}
.coverage__list li::before{ content:""; position:absolute; left:16px; top:50%; width:14px; height:14px; margin-top:-7px; background:var(--orange); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }

/* ---- quote ---- */
.quote{ display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:start; }
.quote__intro p{ color:#c6cfdd; }
.quote__intro a{ color:var(--orange); }
.quote__points{ list-style:none; padding:0; margin:22px 0 0; }
.quote__points li{ position:relative; padding:8px 0 8px 28px; color:#dde3ec; }
.quote__points li::before{ content:""; position:absolute; left:0; top:14px; width:13px; height:13px; background:var(--orange); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.qform{ background:var(--white); border-radius:var(--r); padding:28px; box-shadow:var(--shadow); }
.qform__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.qform label{ display:block; font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.04em; font-size:13px; font-weight:500; color:var(--navy); margin-bottom:14px; }
.qform input,.qform select,.qform textarea{
  width:100%; margin-top:6px; padding:12px 14px; border:1.5px solid var(--line); border-radius:9px;
  font-family:"Barlow",sans-serif; font-size:16px; color:var(--ink); background:#fff; text-transform:none; letter-spacing:0;
}
.qform input:focus,.qform select:focus,.qform textarea:focus{ outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(224,124,36,.28); }
.qform textarea{ resize:vertical; }
.qform__submit{ width:100%; margin-top:4px; font-size:16px; padding:16px; }
.qform__status{ font-family:"Barlow",sans-serif; text-transform:none; letter-spacing:0; font-size:15px; margin:14px 0 0; text-align:center; min-height:1px; }
.qform__status.ok{ color:#1a7f37; } .qform__status.err{ color:#ffd0a3; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* ---- footer ---- */
.foot{ background:var(--navy-d); color:#aeb9ca; padding:56px 0 24px; }
.foot__in{ display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:36px; }
.foot__wordmark{ font-family:"Oswald",sans-serif; line-height:1; display:inline-block; }
.foot__wordmark b{ display:block; font-weight:700; font-size:26px; letter-spacing:.02em; color:#fff; }
.foot__wordmark i{ display:block; font-style:normal; font-weight:600; font-size:12px; letter-spacing:.30em; color:var(--orange); margin-top:5px; }
.foot__brand p{ margin:14px 0 0; font-size:15px; max-width:320px; }
.foot__col h4{ font-size:15px; color:#fff; letter-spacing:.08em; margin-bottom:14px; }
.foot__col a,.foot__col span{ display:block; color:#aeb9ca; font-size:15px; padding:5px 0; }
.foot__col a:hover{ color:var(--orange); }
.foot__social{ margin-top:14px; }
.foot__ig{ display:inline-flex !important; align-items:center; gap:10px; padding:9px 15px 9px 11px !important;
  border:1px solid rgba(255,255,255,.16); border-radius:10px; font-family:"Oswald",sans-serif; text-transform:uppercase;
  letter-spacing:.05em; font-size:13px; }
.foot__ig svg{ width:20px; height:20px; flex:0 0 auto; }
.foot__ig:hover{ color:#fff !important; background:var(--orange); border-color:var(--orange); }
.foot__base{ display:flex; justify-content:space-between; gap:14px; border-top:1px solid rgba(255,255,255,.14); margin-top:40px; padding-top:20px; font-size:13.5px; color:#8592a6; }
.foot__base a{ color:#aeb9ca; } .foot__base a:hover{ color:var(--orange); }

/* ---- reveal on scroll ---- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

@media (max-width:860px){
  .cards,.why,.steps{ grid-template-columns:1fr; }
  .coverage,.quote{ grid-template-columns:1fr; }
  .foot__in{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .section{ padding:60px 0; }
  .qform__row{ grid-template-columns:1fr; }
  .coverage__list{ grid-template-columns:1fr; }
  .foot__in{ grid-template-columns:1fr; }
  .foot__base{ flex-direction:column; }
}
@media (prefers-reduced-motion:reduce){
  .hero__bg{ animation:none; }
  .reveal{ transition:none; opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}