/* ============================================================
   FarmEquipment Rentals — style.css  (Responsive audit build)
   Theme: White + Green | Display: Fraunces | Body: Outfit
   Tested widths: 320 / 375 / 390 / 414 / 480 / 768 / 1024 / 1280 / 1440 / 1920
   ============================================================ */

:root{
  --green-deep:#14532D;
  --green:#1F9D55;
  --green-bright:#22C55E;
  --green-soft:#E7F6EC;
  --green-mist:#F4FAF5;
  --ink:#182B1F;
  --ink-soft:#5B6E60;
  --white:#FFFFFF;
  --wheat:#D9A62E;
  --line:#DCEBE0;
  --radius:14px;
  --shadow:0 6px 24px rgba(20,83,45,.08);
  --shadow-lg:0 16px 44px rgba(20,83,45,.14);
  --font-display:"Fraunces",Georgia,serif;
  --font-body:"Outfit",system-ui,-apple-system,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

/* GLOBAL OVERFLOW GUARD — no horizontal scroll, ever */
html,body{overflow-x:clip;max-width:100%}

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* MEDIA ELEMENTS — always fit their container, no distortion */
img{max-width:100%;height:auto;display:block}
video,iframe,embed,object{max-width:100%;border:0}
.video-wrap{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden}
.video-wrap iframe,.video-wrap video{position:absolute;inset:0;width:100%;height:100%}

/* TEXT SAFETY — no text escapes its box */
h1,h2,h3,h4,p,a,span,b,li,label{overflow-wrap:break-word;word-wrap:break-word}

a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:1rem;max-width:100%}

h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.15;color:var(--ink)}

.container{width:min(1180px,92%);margin:0 auto}

/* ============================================================
   INTRO OVERLAY — "field in the breeze"
   ============================================================ */
#intro{
  position:fixed;inset:0;z-index:9999;
  background:linear-gradient(180deg,#FFFFFF 0%,#F2FAF4 45%,#E7F6EC 100%);
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;overflow:hidden;
  transition:transform 1s cubic-bezier(.7,0,.3,1),opacity .9s ease;
  padding:0 1rem;
}
#intro.lift{transform:translateY(-100%);opacity:.4;pointer-events:none}
#intro.gone{display:none}

.intro-sun{
  position:absolute;top:16%;left:50%;transform:translateX(-50%);
  width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,#FBE7A2 0%,#F6D461 55%,rgba(246,212,97,0) 72%);
  animation:sunRise 2.4s ease-out forwards;
  opacity:0;
}
@keyframes sunRise{
  from{transform:translate(-50%,80px) scale(.7);opacity:0}
  to{transform:translate(-50%,0) scale(1);opacity:1}
}

.intro-title{
  font-family:var(--font-display);
  font-size:clamp(1.6rem,6vw,3.2rem);
  color:var(--green-deep);
  z-index:2;text-align:center;
  opacity:0;animation:fadeUp 1.1s ease .5s forwards;
}
.intro-title span{color:var(--green)}
.intro-sub{
  z-index:2;color:var(--ink-soft);letter-spacing:.14em;
  text-transform:uppercase;font-size:clamp(.62rem,2.2vw,.8rem);
  margin-top:.6rem;text-align:center;
  opacity:0;animation:fadeUp 1.1s ease .9s forwards;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

.intro-field{
  position:absolute;bottom:-4px;left:0;width:100%;height:44vh;min-height:180px;
}
.intro-field svg{width:100%;height:100%}

.stalk{transform-origin:bottom center;animation:sway 3.2s ease-in-out infinite alternate}
.stalk.s2{animation-duration:2.6s;animation-delay:.3s}
.stalk.s3{animation-duration:3.8s;animation-delay:.15s}
.stalk.s4{animation-duration:2.9s;animation-delay:.5s}
.stalk.s5{animation-duration:3.4s;animation-delay:.8s}
@keyframes sway{
  from{transform:rotate(-4deg)}
  to{transform:rotate(4.5deg)}
}

.intro-skip{
  position:absolute;bottom:26px;right:20px;z-index:3;
  background:rgba(255,255,255,.85);border:1px solid var(--line);
  color:var(--green-deep);padding:.6rem 1.2rem;border-radius:999px;
  font-size:.85rem;font-weight:500;min-height:44px;
}
.intro-skip:hover{background:var(--white)}

/* ============================================================
   AMBIENT PARTICLES
   ============================================================ */
.particle-layer{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;
}
.pollen{
  position:absolute;bottom:-30px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.95),rgba(34,197,94,.28));
  box-shadow:0 0 10px rgba(34,197,94,.25);
  animation:floatUp linear infinite;
}
@keyframes floatUp{
  0%{transform:translateY(0) translateX(0);opacity:0}
  10%{opacity:.85}
  90%{opacity:.5}
  100%{transform:translateY(-110vh) translateX(var(--driftX,40px));opacity:0}
}
.leaf{
  position:absolute;top:-40px;font-size:20px;
  animation:leafFall linear infinite;opacity:.8;
}
@keyframes leafFall{
  0%{transform:translateY(-40px) rotate(0deg)}
  100%{transform:translateY(110vh) rotate(340deg)}
}

/* ============================================================
   NAVBAR
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 0;gap:1rem;min-width:0;
}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);
  font-size:clamp(1rem,3.5vw,1.25rem);font-weight:700;color:var(--green-deep);min-width:0}
.brand .leaf-mark{
  width:38px;height:38px;border-radius:10px;background:var(--green-deep);
  display:grid;place-items:center;color:#fff;font-size:1.15rem;flex-shrink:0;
}
.brand small{display:block;font-family:var(--font-body);font-weight:500;
  font-size:.62rem;letter-spacing:.22em;color:var(--ink-soft);text-transform:uppercase}

.nav-links{display:flex;gap:1.6rem;font-weight:500;font-size:.95rem}
.nav-links .nav-auth-mobile{display:none} /* desktop: hidden, shown in mobile menu only */
.nav-links a{color:var(--ink-soft);transition:color .2s;padding:.3rem 0}
.nav-links a:hover,.nav-links a.active{color:var(--green-deep)}

.nav-cta{display:flex;gap:.7rem;align-items:center;flex-shrink:0}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.65rem 1.4rem;border-radius:999px;font-weight:600;font-size:.95rem;
  border:1px solid transparent;transition:all .2s;text-align:center;
}
.btn-green{background:var(--green-deep);color:#fff}
.btn-green:hover{background:var(--green)}
.btn-outline{border-color:var(--green-deep);color:var(--green-deep);background:transparent}
.btn-outline:hover{background:var(--green-soft)}
.btn-light{background:var(--white);color:var(--green-deep)}
.btn-lg{padding:.9rem 2rem;font-size:1.05rem}

.nav-toggle{
  display:none;background:none;border:none;font-size:1.5rem;color:var(--green-deep);
  width:44px;height:44px;line-height:1;border-radius:10px;
}
.nav-toggle:hover{background:var(--green-soft)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1000px 500px at 85% -10%,var(--green-soft) 0%,transparent 60%),
    linear-gradient(180deg,#FFFFFF 0%,var(--green-mist) 100%);
  padding:5.5rem 0 6.5rem;
}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center;position:relative;z-index:2}
.hero-grid>*{min-width:0}
.hero .eyebrow{
  display:inline-block;background:var(--green-soft);color:var(--green-deep);
  padding:.35rem 1rem;border-radius:999px;font-size:.8rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:1.2rem;
}
.hero h1{font-size:clamp(2rem,5vw,3.9rem);margin-bottom:1.2rem}
.hero h1 em{font-style:italic;color:var(--green)}
.hero p.lead{color:var(--ink-soft);font-size:clamp(1rem,2.5vw,1.15rem);max-width:34rem;margin-bottom:2rem}

.hero-search{
  display:flex;background:var(--white);border:1px solid var(--line);
  border-radius:999px;padding:.4rem;box-shadow:var(--shadow);max-width:34rem;
}
.hero-search input{
  flex:1;min-width:0;border:none;outline:none;padding:.6rem 1.2rem;background:transparent;
  font-size:1rem;color:var(--ink);
}
.hero-search .btn{flex-shrink:0}

.hero-stats{display:flex;flex-wrap:wrap;gap:1.4rem 2.4rem;margin-top:2.4rem}
.hero-stats b{font-family:var(--font-display);font-size:clamp(1.25rem,3vw,1.6rem);color:var(--green-deep);display:block}
.hero-stats span{font-size:.85rem;color:var(--ink-soft)}

.hero-card{
  background:var(--white);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow-lg);padding:1.4rem;position:relative;max-width:100%;
}
.hero-card .img-ph{border-radius:14px;height:230px}
.hero-card h3{margin:.9rem 0 .2rem;font-size:1.25rem}
.hero-card .tag{
  position:absolute;top:26px;left:26px;background:var(--green-deep);color:#fff;
  padding:.3rem .9rem;border-radius:999px;font-size:.78rem;font-weight:600;z-index:2;
}
.hero-card .row{display:flex;justify-content:space-between;align-items:center;margin-top:.8rem;gap:.6rem;flex-wrap:wrap}
.price{font-family:var(--font-display);font-size:1.3rem;color:var(--green-deep)}
.price small{font-family:var(--font-body);font-size:.8rem;color:var(--ink-soft)}

/* image placeholder blocks */
.img-real{height:180px;overflow:hidden;background:#EAF7EE}
.img-real img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.equip-card:hover .img-real img{transform:scale(1.04)}
.img-ph{
  background:
    repeating-linear-gradient(45deg,rgba(31,157,85,.06) 0 14px,rgba(31,157,85,.12) 14px 28px),
    linear-gradient(160deg,#EAF7EE,#D8EFDF);
  display:grid;place-items:center;color:var(--green-deep);
  font-size:2.4rem;position:relative;
}
.img-ph::after{
  content:attr(data-label);
  display:none; /* dev label — hidden in production */
  position:absolute;bottom:8px;right:12px;font-size:.65rem;font-family:var(--font-body);
  color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{padding:4.5rem 0}
.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:2.2rem;gap:1rem;flex-wrap:wrap}
.section-head h2{font-size:clamp(1.5rem,3.5vw,2.4rem)}
.section-head p{color:var(--ink-soft);max-width:32rem}
.section.tint{background:var(--green-mist)}

.cat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem}
.cat{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.3rem 1rem;text-align:center;transition:all .25s;cursor:pointer;
}
.cat:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--green)}
.cat .ico{font-size:1.8rem;margin-bottom:.5rem}
.cat b{display:block;font-size:.95rem}
.cat span{font-size:.78rem;color:var(--ink-soft)}

.equip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(270px,100%),1fr));gap:1.5rem}
.equip-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:all .25s;display:flex;flex-direction:column;min-width:0;
}
.equip-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.equip-card .img-ph{height:180px}
.equip-body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.45rem;flex:1;min-width:0}
.equip-body h3{font-size:1.1rem}
.equip-body .meta{font-size:.82rem;color:var(--ink-soft)}
.badge{
  display:inline-block;padding:.2rem .7rem;border-radius:999px;font-size:.72rem;font-weight:600;
  background:var(--green-soft);color:var(--green-deep);width:fit-content;flex-shrink:0;
}
.badge.warn{background:#FDF3D7;color:#8A6A12}
.equip-body .row{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:.6rem;gap:.6rem;flex-wrap:wrap}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:1.5rem}
.step{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.8rem 1.5rem;position:relative;
}
.step .num{
  width:44px;height:44px;border-radius:50%;background:var(--green-deep);color:#fff;
  display:grid;place-items:center;font-family:var(--font-display);font-size:1.15rem;margin-bottom:1rem;
}
.step h3{font-size:1.1rem;margin-bottom:.4rem}
.step p{font-size:.92rem;color:var(--ink-soft)}

.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:1.2rem}
.trust-item{display:flex;gap:.9rem;align-items:flex-start;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.3rem;min-width:0}
.trust-item .ico{
  width:46px;height:46px;border-radius:12px;background:var(--green-soft);
  display:grid;place-items:center;font-size:1.3rem;flex-shrink:0;
}
.trust-item b{display:block;font-size:.98rem}
.trust-item span{font-size:.85rem;color:var(--ink-soft)}

.cta-band{
  background:linear-gradient(120deg,var(--green-deep),#1E7A44);
  border-radius:22px;color:#fff;padding:3.2rem 2.6rem;position:relative;overflow:hidden;
  display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;
}
.cta-band h2{color:#fff;font-size:clamp(1.4rem,3.5vw,2.3rem)}
.cta-band p{opacity:.85;max-width:30rem}
.cta-band::after{
  content:"🌾";position:absolute;right:-20px;bottom:-30px;font-size:11rem;opacity:.12;
  transform:rotate(-12deg);pointer-events:none;
}
.cta-band>*{position:relative;z-index:1}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--green-deep);color:#D9EEDF;margin-top:4rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.5rem;padding:3.5rem 0 2.5rem}
.foot-grid>*{min-width:0}
.foot-grid h4{color:#fff;font-family:var(--font-body);font-size:.95rem;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:1rem}
.foot-grid a{display:block;padding:.34rem 0;font-size:.92rem;opacity:.85;overflow-wrap:anywhere}
.foot-grid a:hover{opacity:1;color:#fff}
.foot-brand{font-family:var(--font-display);font-size:1.4rem;color:#fff;margin-bottom:.6rem}
.foot-note{font-size:.88rem;opacity:.8;max-width:26rem}
.foot-bottom{border-top:1px solid rgba(255,255,255,.15);padding:1.2rem 0;font-size:.85rem;
  display:flex;justify-content:space-between;gap:.6rem 1rem;flex-wrap:wrap;opacity:.8}

/* ============================================================
   BROWSE PAGE
   ============================================================ */
.page-head{
  background:linear-gradient(180deg,var(--green-mist),#fff);
  padding:3rem 0 2rem;border-bottom:1px solid var(--line);
}
.page-head h1{font-size:clamp(1.7rem,4.5vw,2.7rem)}
.page-head p{color:var(--ink-soft)}

.browse-layout{display:grid;grid-template-columns:250px 1fr;gap:2rem;padding:2.5rem 0}
.browse-layout>*{min-width:0}
.filters{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem;height:fit-content;position:sticky;top:90px;
}
.filters h3{font-size:1rem;font-family:var(--font-body);font-weight:700;margin-bottom:1rem}
.filter-group{margin-bottom:1.4rem}
.filter-group label{display:flex;align-items:center;gap:.55rem;font-size:.9rem;padding:.34rem 0;color:var(--ink-soft);cursor:pointer;min-height:32px}
.filter-group input[type="checkbox"]{width:18px;height:18px;accent-color:var(--green);flex-shrink:0}
.filter-group b{display:block;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink);margin-bottom:.5rem}
.filters select,.filters input[type="text"]{
  width:100%;padding:.65rem .8rem;border:1px solid var(--line);border-radius:8px;outline:none;
}

/* ============================================================
   AUTH PAGES
   ============================================================ */
.auth-wrap{
  min-height:calc(100vh - 70px);display:grid;place-items:center;
  background:
    radial-gradient(800px 400px at 15% 10%,var(--green-soft),transparent 60%),
    var(--green-mist);
  padding:3rem 1rem;position:relative;overflow:hidden;
}
.auth-card{
  background:var(--white);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow-lg);padding:2.6rem 2.4rem;width:min(430px,100%);position:relative;z-index:2;
}
.auth-card h1{font-size:clamp(1.4rem,4.5vw,1.7rem);margin-bottom:.3rem}
.auth-card>p{color:var(--ink-soft);font-size:.95rem;margin-bottom:1.6rem}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.35rem}
.field input,.field select{
  width:100%;padding:.75rem 1rem;border:1px solid var(--line);border-radius:10px;
  outline:none;transition:border .2s;background:var(--green-mist);min-height:48px;
}
.field input:focus{border-color:var(--green);background:#fff}
.auth-card .btn{width:100%;margin-top:.4rem;min-height:48px}
.auth-alt{text-align:center;font-size:.9rem;color:var(--ink-soft);margin-top:1.4rem}
.auth-alt a{color:var(--green-deep);font-weight:600}
.form-msg{font-size:.88rem;margin-top:.9rem;text-align:center;min-height:1.2em}
.form-msg.ok{color:var(--green)}
.form-msg.err{color:#C0392B}

/* password reveal eye — auto-attached by main.js to every password field */
.pw-field{position:relative}
.pw-field input{padding-right:3rem !important}
.pw-eye{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  background:none;border:none;font-size:1.05rem;line-height:1;
  width:36px;height:36px;border-radius:8px;color:var(--ink-soft);
  display:grid;place-items:center;
}
.pw-eye:hover{background:var(--green-soft)}

/* ============================================================
   DASHBOARD
   ============================================================ */
.dash-layout{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.dash-layout>*{min-width:0}
.sidebar{
  background:var(--green-deep);color:#D9EEDF;padding:1.6rem 1rem;
  display:flex;flex-direction:column;gap:.2rem;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.sidebar .brand{color:#fff;padding:0 .8rem 1.4rem}
.sidebar .brand small{color:#A9D4B6}
.sidebar a{
  display:flex;align-items:center;gap:.7rem;padding:.7rem .9rem;border-radius:10px;
  font-size:.93rem;opacity:.85;transition:all .2s;min-height:44px;
}
.sidebar a:hover{background:rgba(255,255,255,.08);opacity:1}
.sidebar a.active{background:var(--green);color:#fff;opacity:1;font-weight:600}
.sidebar .spacer{flex:1}
.side-help{
  background:rgba(255,255,255,.07);border-radius:12px;padding:1rem;font-size:.82rem;margin-top:1rem;
  overflow-wrap:anywhere;
}
.side-help b{color:#fff;display:block;margin-bottom:.3rem}

.dash-main{background:var(--green-mist);padding:2rem 2.2rem;min-width:0}
.dash-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.8rem;flex-wrap:wrap}
.dash-top h1{font-size:clamp(1.3rem,3.5vw,1.7rem)}
.dash-top p{color:var(--ink-soft);font-size:.92rem}

.dash-grid{display:grid;grid-template-columns:2fr 1fr;gap:1.4rem;margin-bottom:1.4rem}
.dash-grid>*{min-width:0}
.panel{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem;box-shadow:var(--shadow);min-width:0;
}
.panel h3{font-size:1.05rem;font-family:var(--font-body);font-weight:700;margin-bottom:1rem;
  display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.panel h3 a{font-size:.82rem;color:var(--green);font-weight:600;flex-shrink:0}

.res-item{display:flex;gap:.9rem;align-items:center;padding:.75rem 0;border-bottom:1px solid var(--line);min-width:0}
.res-item:last-child{border-bottom:none}
.res-item .img-ph{width:62px;height:62px;border-radius:10px;font-size:1.4rem;flex-shrink:0}
.res-item .img-ph::after{content:none}
.res-item>div:not(.img-ph){min-width:0;flex:1}
.res-item b{display:block;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res-item span{font-size:.8rem;color:var(--ink-soft)}
.res-item .badge{margin-left:auto}

.summary-row{display:flex;justify-content:space-between;gap:.6rem;padding:.8rem 0;border-bottom:1px solid var(--line);font-size:.93rem;flex-wrap:wrap}
.summary-row:last-of-type{border-bottom:none}
.summary-row b{color:var(--green-deep)}

.pay-note{
  background:var(--green-soft);border-radius:10px;padding:1rem;font-size:.85rem;margin-top:1rem;
}
.pay-note b{display:block;margin-bottom:.3rem}
.pay-note .email{color:var(--green-deep);font-weight:700;overflow-wrap:anywhere}

.quick-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:1rem;margin-bottom:1.6rem}
.qa{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.1rem .8rem;text-align:center;font-size:.9rem;font-weight:600;transition:all .2s;
  display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80px;
}
.qa:hover{border-color:var(--green);transform:translateY(-3px);box-shadow:var(--shadow)}
.qa .ico{font-size:1.5rem;display:block;margin-bottom:.4rem}

/* ============================================================
   RESPONSIVE — TABLET  (≤1024px)
   ============================================================ */
@media (max-width:1024px){
  .section{padding:3.8rem 0}
  .hero{padding:4.2rem 0 5rem}
  .hero-grid{gap:2.2rem}
  .foot-grid{gap:1.8rem}
  .dash-main{padding:1.8rem 1.5rem}
}

/* ============================================================
   RESPONSIVE — SMALL TABLET / LARGE PHONE  (≤960px)
   ============================================================ */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .hero-card{max-width:440px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .browse-layout{grid-template-columns:1fr}
  .filters{position:static}

  /* Dashboard: sidebar becomes a top bar */
  .dash-layout{grid-template-columns:1fr}
  .sidebar{
    position:static;height:auto;overflow:visible;
    flex-direction:row;flex-wrap:wrap;align-items:center;gap:.35rem;
    padding:1rem;
  }
  .sidebar .brand{width:100%;padding:0 0 .8rem}
  .sidebar a{padding:.55rem .8rem;font-size:.86rem;min-height:44px}
  .sidebar .spacer,.side-help{display:none}
  .dash-grid{grid-template-columns:1fr}
}

/* ============================================================
   RESPONSIVE — MOBILE  (≤760px)
   ============================================================ */
@media (max-width:760px){
  .section{padding:3rem 0}
  .hero{padding:3.2rem 0 4rem}
  .hero p.lead{margin-bottom:1.6rem}

  /* Hamburger menu */
  .nav-toggle{display:grid;place-items:center}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
    flex-direction:column;padding:.6rem 1rem 1rem;border-bottom:1px solid var(--line);gap:0;
    box-shadow:0 14px 30px rgba(20,83,45,.12);
  }
  .nav-links.open{display:flex;animation:menuDown .22s ease}
  .nav-links a{
    padding:.9rem .6rem;min-height:48px;display:flex;align-items:center;
    border-bottom:1px solid var(--green-mist);font-size:1rem;
  }
  .nav-links a:last-child{border-bottom:none}
  @keyframes menuDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

  /* Log in / Sign up inside the mobile menu */
  .nav-links .nav-auth-mobile{display:flex;font-weight:600;color:var(--green-deep)}
  .nav-links .nav-auth-mobile.signup{
    background:var(--green-deep);color:#fff;border-radius:12px;
    justify-content:center;margin-top:.7rem;border-bottom:none;
  }

  .nav-cta{gap:.5rem}
  .nav-cta .btn-outline{display:none}
  .nav-cta .btn-green{display:none} /* signup lives in the dropdown menu on mobile */
  .nav-cta .btn{padding:.55rem 1.05rem;font-size:.88rem}

  .cta-band{padding:2.2rem 1.4rem}
  .cta-band .btn{width:100%}
  .cta-band::after{font-size:7rem}

  .foot-grid{grid-template-columns:1fr;gap:1.6rem;padding:2.6rem 0 1.8rem}
  .foot-bottom{flex-direction:column;text-align:center}

  .auth-wrap{padding:2rem .8rem}
  .auth-card{padding:1.8rem 1.3rem}

  .dash-main{padding:1.3rem .9rem}
  .panel{padding:1.1rem}
  .res-item .img-ph{width:52px;height:52px}
}

/* ============================================================
   RESPONSIVE — SMALL PHONES  (≤480px)
   ============================================================ */
@media (max-width:480px){
  .container{width:calc(100% - 2rem)}

  /* Search bar stacks: full-width input over full-width button */
  .hero-search{flex-direction:column;border-radius:18px;gap:.4rem;padding:.5rem}
  .hero-search input{width:100%;padding:.7rem 1rem}
  .hero-search .btn{width:100%;min-height:48px}

  .hero-stats{gap:1rem 1.6rem}
  .hero-card .img-ph{height:180px}
  .hero-card .tag{top:22px;left:22px}

  .cat-row{grid-template-columns:repeat(2,1fr)}
  .equip-grid{grid-template-columns:1fr}
  .quick-actions{grid-template-columns:repeat(2,1fr)}

  .brand small{display:none}
  .intro-skip{bottom:16px;right:12px;padding:.55rem 1rem;font-size:.8rem}
}

/* ============================================================
   RESPONSIVE — TINY PHONES  (≤360px)
   ============================================================ */
@media (max-width:360px){
  .container{width:calc(100% - 1.4rem)}
  .cat-row{grid-template-columns:1fr 1fr;gap:.7rem}
  .cat{padding:1rem .6rem}
  .quick-actions{grid-template-columns:1fr 1fr;gap:.7rem}
  .nav-cta .btn{padding:.5rem .85rem;font-size:.82rem}
  .res-item .badge{margin-left:0}
  .res-item{flex-wrap:wrap}
  .step{padding:1.4rem 1.1rem}
}

/* ============================================================
   TOUCH DEVICES — comfortable tap targets everywhere
   ============================================================ */
@media (pointer:coarse){
  .btn,.qa,.cat,.nav-links a,.sidebar a,.foot-grid a{min-height:44px}
  .foot-grid a{display:flex;align-items:center}
  .filter-group label{min-height:40px}
}

/* ============================================================
   LIVE RENTALS FEED (hero card)
   ============================================================ */
.live-feed{margin-top:.8rem;min-height:58px}
.live-feed-item{
  display:flex;align-items:center;gap:.8rem;
  background:var(--green-mist);border:1px solid var(--line);
  border-radius:12px;padding:.75rem .95rem;
  animation:lfIn .45s ease;
}
@keyframes lfIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.lf-ico{
  width:38px;height:38px;border-radius:10px;background:var(--green-soft);
  display:grid;place-items:center;font-size:1.15rem;flex-shrink:0;
}
.lf-text{font-size:.86rem;color:var(--ink);line-height:1.45;min-width:0}
.lf-text b{color:var(--green-deep)}
.lf-text .lf-sub{display:block;font-size:.74rem;color:var(--ink-soft)}
.lf-hot{color:#B3541E;font-weight:600}
@media(prefers-reduced-motion:reduce){.live-feed-item{animation:none}}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-list{max-width:760px}
.faq-item{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  margin-bottom:.8rem;overflow:hidden;
}
.faq-item summary{
  padding:1.05rem 1.3rem;font-weight:600;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.3rem;color:var(--green);flex-shrink:0;transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item[open] summary{border-bottom:1px solid var(--line);color:var(--green-deep)}
.faq-item p{padding:1rem 1.3rem;color:var(--ink-soft);font-size:.95rem}
.faq-item summary:hover{background:var(--green-mist)}

/* ============================================================
   RESERVE MODAL
   ============================================================ */
.rv-overlay{
  position:fixed;inset:0;z-index:5000;background:rgba(20,40,28,.55);
  display:none;align-items:center;justify-content:center;padding:1rem;
  backdrop-filter:blur(3px);
}
.rv-overlay.open{display:flex}
.rv-card{
  background:var(--white);border-radius:18px;box-shadow:var(--shadow-lg);
  width:min(430px,100%);max-height:92vh;overflow-y:auto;padding:1.6rem 1.5rem;
  position:relative;animation:rvIn .22s ease;
}
@keyframes rvIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.rv-close{
  position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:var(--white);font-size:1rem;color:var(--ink-soft);
}
.rv-close:hover{background:var(--green-mist)}
.rv-media{height:150px;border-radius:12px;overflow:hidden;margin-bottom:1rem;
  background:linear-gradient(160deg,#EAF7EE,#D8EFDF);display:grid;place-items:center;font-size:2.6rem}
.rv-media img{width:100%;height:100%;object-fit:cover}
.rv-card h3{font-size:1.25rem;margin-bottom:.15rem}
.rv-card .rv-meta{font-size:.85rem;color:var(--ink-soft);margin-bottom:1.1rem}
.rv-dates{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media(max-width:380px){.rv-dates{grid-template-columns:1fr}}
.rv-total{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--green-soft);border-radius:10px;padding:.85rem 1rem;margin:1rem 0;
  font-size:.92rem;
}
.rv-total b{font-family:var(--font-display);font-size:1.25rem;color:var(--green-deep)}
.rv-success{text-align:center;padding:1rem 0}
.rv-success .big{font-size:2.6rem;margin-bottom:.5rem}

/* dashboard: cancel button on pending reservations */
.res-cancel{
  padding:.35rem .8rem;border-radius:8px;font-size:.75rem;font-weight:600;
  background:#fff;border:1px solid #E5B3AE;color:#B03A2E;
}
.res-cancel:hover{background:#FBEAE8}

@media(prefers-reduced-motion:reduce){.rv-card{animation:none}}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion:reduce){
  *,.stalk,.pollen,.leaf,.intro-sun,.intro-title,.intro-sub{animation:none!important;transition:none!important}
  #intro{display:none!important}
}

/* ============================================================
   MULTI-LANGUAGE TRANSLATOR UI
   ============================================================ */
/* hide Google's default banner/frame */
.goog-te-banner-frame,.skiptranslate{display:none !important}
body{top:0 !important}
#goog-gt-tt,.goog-te-balloon-frame{display:none !important}
.goog-text-highlight{background:none !important;box-shadow:none !important}

/* floating switcher */
.fe-lang{position:fixed;left:20px;bottom:20px;z-index:9000;font-family:var(--font-body)}
.fe-lang-btn{
  display:flex;align-items:center;gap:.4rem;background:var(--white);
  border:1px solid var(--line);border-radius:999px;padding:.6rem 1rem;
  font-size:.88rem;font-weight:600;color:var(--ink);cursor:pointer;
  box-shadow:0 6px 20px rgba(30,60,40,.15);transition:transform .15s,box-shadow .15s;
}
.fe-lang-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(30,60,40,.22)}
.fe-lang-menu{
  position:absolute;bottom:calc(100% + 10px);left:0;background:var(--white);
  border:1px solid var(--line);border-radius:14px;padding:.4rem;min-width:170px;
  box-shadow:0 12px 34px rgba(30,60,40,.2);opacity:0;visibility:hidden;
  transform:translateY(8px);transition:.2s;
}
.fe-lang.open .fe-lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
.fe-lang-menu button{
  display:block;width:100%;text-align:left;background:none;border:none;
  padding:.6rem .8rem;border-radius:9px;font-size:.9rem;color:var(--ink);
  cursor:pointer;font-family:var(--font-body);
}
.fe-lang-menu button:hover{background:var(--green-mist)}
.fe-lang-menu button.active{background:var(--green-soft);color:var(--green-deep);font-weight:700}

/* welcome popup */
.fe-lang-pop{
  position:fixed;inset:0;z-index:9600;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(12,24,16,0);pointer-events:none;transition:background .3s;padding:1.2rem;
}
.fe-lang-pop.show{background:rgba(12,24,16,.45);pointer-events:auto}
.fe-lang-pop-inner{
  background:var(--white);border-radius:20px;padding:1.8rem 1.6rem 1.5rem;max-width:400px;width:100%;
  text-align:center;position:relative;transform:translateY(40px);opacity:0;transition:.35s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 24px 60px rgba(0,0,0,.3);
}
.fe-lang-pop.show .fe-lang-pop-inner{transform:translateY(0);opacity:1}
.fe-lang-pop.closing .fe-lang-pop-inner{transform:translateY(40px);opacity:0}
.fe-lang-pop-ico{font-size:2.4rem;margin-bottom:.5rem}
.fe-lang-pop-inner b{font-family:var(--font-display);font-size:1.3rem;color:var(--ink)}
.fe-lang-pop-inner p{color:var(--ink-soft);font-size:.9rem;line-height:1.6;margin:.5rem 0 1.2rem}
.fe-lang-pop-row{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:1rem}
.fe-lang-pop-row button{
  background:var(--green-soft);border:1px solid var(--line);color:var(--green-deep);
  padding:.55rem 1rem;border-radius:999px;font-weight:600;font-size:.85rem;cursor:pointer;
  font-family:var(--font-body);transition:.15s;
}
.fe-lang-pop-row button:hover{background:var(--green);color:#fff;transform:translateY(-2px)}
.fe-lang-pop-dismiss{
  background:none;border:none;color:var(--ink-soft);font-size:.85rem;cursor:pointer;
  text-decoration:underline;font-family:var(--font-body);
}
.fe-lang-pop-x{
  position:absolute;top:12px;right:14px;background:none;border:none;font-size:1.1rem;
  color:var(--ink-soft);cursor:pointer;
}
@media(max-width:480px){
  .fe-lang{left:14px;bottom:14px}
  .fe-lang-btn{padding:.55rem .85rem;font-size:.82rem}
}

/* dashboard dark mode: adapt switcher */
body.dash-dark .fe-lang-btn{background:#17231B;border-color:#243528;color:#E8F2EA}
body.dash-dark .fe-lang-menu{background:#17231B;border-color:#243528}
body.dash-dark .fe-lang-menu button{color:#E8F2EA}

/* ============================================================
   FOOTER SOCIAL LINKS
   ============================================================ */
.foot-social{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap}
.foot-social a{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  border-radius:999px;padding:.5rem 1rem;font-size:.85rem;font-weight:600;
  transition:background .2s,transform .2s;
}
.foot-social a:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
.foot-social svg{flex-shrink:0}