/* ============================================================
   3OAK — SITE STYLES
   Shared design system + page styles for the public website.
   Palette shorthand:  blue #4682B4 · yellow #FFCD00 · white #FFFFFF
                       red #E23B3B · gray (text) #CDD0D6
   ============================================================ */

:root{
  --bg-black:#0a0a0b;
  --bg-gray:#4a4a52;
  --blue:#4682b4;
  --blue-hi:#5a95c7;
  --yellow:#ffcd00;
  --white:#ffffff;
  --red:#e23b3b;
  --panel:rgba(0,0,0,0.85);
  --ink:#ffffff;
  --gray:#cdd0d6;
  --ink-dim:rgba(255,255,255,0.66);
  --ink-faint:rgba(255,255,255,0.40);
  --line:rgba(70,130,180,0.30);
  --radius:10px;
  --radius-sm:7px;
  --font:"Poppins","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}

body{
  font-family:var(--font);
  color:var(--ink);
  background:linear-gradient(160deg,var(--bg-black) 0%,#1c1c22 45%,var(--bg-gray) 100%);
  background-attachment:fixed;
  overflow:hidden;                 /* the page itself never scrolls */
}

/* Global scrollbars: blue, yellow on hover (for inner-scroll pages) */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:#000;}
::-webkit-scrollbar-thumb{background:var(--blue);border-radius:5px;}
::-webkit-scrollbar-thumb:hover{background:var(--yellow);}
*{scrollbar-color:var(--blue) #000;scrollbar-width:thin;}

/* App shell */
.app{height:100vh;height:100dvh;display:flex;flex-direction:column;}

/* ---------------- HEADER ---------------- */
.header{
  flex-shrink:0;
  height:66px;
  background:var(--panel);
  border-bottom:2px solid var(--blue);
  display:flex;align-items:center;
  padding:0 1.5rem;
  gap:1.25rem;
  z-index:20;
}
.brand{flex-shrink:0;line-height:1.1;text-decoration:none;display:block;}
.brand .name{display:block;font-size:1.05rem;font-weight:700;letter-spacing:1px;white-space:nowrap;color:var(--white);}
.brand .name span{color:var(--yellow);}
.brand .sub{display:block;font-size:0.58rem;letter-spacing:3px;text-transform:uppercase;color:var(--gray);margin-top:2px;}

/* Announcements marquee */
.announce{
  flex:1;max-width:520px;margin:0 auto;
  overflow:hidden;position:relative;
  background:rgba(0,0,0,0.5);
  border:2px solid var(--blue);
  border-radius:40px;
  transition:border-color .25s ease;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);
}
.announce:hover{border-color:var(--yellow);}
.marquee{white-space:nowrap;overflow:hidden;}
.track{display:inline-flex;animation:scroll 28s linear infinite;}
.marquee:hover .track{animation-play-state:paused;}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.ann{display:inline-flex;align-items:center;gap:10px;padding:7px 20px;font-size:0.78rem;color:var(--ink);text-decoration:none;}
.ann:hover .ann-text{color:var(--yellow);}
.badge{font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 9px;border-radius:20px;}
.badge.sale{background:var(--yellow);color:#111;}
.badge.notice{background:var(--blue);color:#fff;}
.badge.closing{background:var(--red);color:#fff;}
.ann-text{color:var(--gray);transition:color .2s ease;}
.ann-arrow{color:var(--yellow);}

/* Nav — margin-left:auto eats all the leftover header space, which keeps the
   buttons pinned to the right regardless of how wide the brand block is. */
.nav{flex-shrink:0;display:flex;gap:.6rem;margin-left:auto;}
.nav a{
  display:inline-flex;align-items:center;
  font-size:0.7rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;
  color:#fff;background:#000;
  border:2px solid var(--blue);border-radius:var(--radius-sm);
  padding:7px 15px;text-decoration:none;
  transition:border-color .22s ease,background .22s ease;
}
.nav a:hover,.nav a:focus-visible{border-color:var(--yellow);outline:none;}
.nav a.active{border-color:var(--yellow);}

/* ---------------- HERO ---------------- */
.hero{flex:1;position:relative;overflow-x:hidden;overflow-y:auto;display:flex;align-items:center;justify-content:center;}

.slideshow{position:absolute;inset:0;overflow:hidden;z-index:1;}
.slides{display:flex;height:100%;width:max-content;animation:drift 120s linear infinite;align-items:center;gap:14px;padding:0 7px;}
.slide{
  height:66%;aspect-ratio:4/3;flex-shrink:0;border-radius:8px;
  border:4px solid #000;opacity:0.16;
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
@keyframes drift{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.hero-veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(circle at center,transparent 32%,rgba(10,10,11,0.55) 88%);}

.hero-center{position:relative;z-index:5;text-align:center;padding:1rem;}

/* Real logo image with a large, bright white glow that hugs its shape */
.hero-logo{
  max-width:min(70%,340px);
  max-height:42vh;
  object-fit:contain;
  filter:drop-shadow(0 0 34px rgba(255,255,255,.85));
  animation:glow 5s ease-in-out infinite;
  margin-bottom:1.1rem;
}
@keyframes glow{
  0%,100%{filter:drop-shadow(0 0 30px rgba(255,255,255,.55));}
  50%    {filter:drop-shadow(0 0 60px rgba(255,255,255,.95));}
}

.hero-title{font-size:clamp(1.9rem,5vw,3rem);font-weight:700;letter-spacing:1px;line-height:1.1;}
.hero-title span{color:var(--yellow);}
.hero-sub{margin-top:.7rem;font-size:clamp(.85rem,2.2vw,1.05rem);color:var(--gray);}
.hero-meta{margin-top:.5rem;font-size:.66rem;letter-spacing:2px;text-transform:uppercase;color:var(--gray);}

.cta{display:flex;gap:.85rem;justify-content:center;margin-top:1.6rem;flex-wrap:wrap;}

/* Buttons */
.btn{
  font-family:inherit;font-size:0.78rem;font-weight:600;letter-spacing:.6px;text-transform:uppercase;
  color:#fff;background:#000;border:2px solid var(--blue);border-radius:var(--radius-sm);
  padding:10px 22px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;
  transition:border-color .22s ease,background .22s ease;
}
.btn:hover,.btn:focus-visible{border-color:var(--yellow);background:#0a0a0a;outline:none;}
.btn.solid{border-color:var(--yellow);}

/* ---------------- FOOTER ---------------- */
.footer{
  flex-shrink:0;background:var(--panel);border-top:2px solid var(--blue);
  padding:.7rem 1.5rem;z-index:20;
}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;}
.fcol{flex:1;min-width:150px;text-align:center;}
.fcol h3{font-size:0.72rem;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:.35rem;color:var(--white);}
.fcol h3 span{color:var(--yellow);}
.fcol .motto{font-size:0.62rem;color:var(--gray);font-style:italic;}
.flinks{list-style:none;display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;}
.flinks a{color:var(--gray);text-decoration:none;font-size:0.66rem;transition:color .2s ease;}
.flinks a:hover{color:var(--yellow);}
.footer-bottom{
  display:flex;justify-content:center;align-items:center;gap:.6rem;flex-wrap:wrap;
  margin-top:.5rem;padding-top:.45rem;border-top:1px solid var(--line);
  font-size:0.58rem;color:var(--gray);
}
.footer-bottom a{color:var(--blue-hi);text-decoration:none;}
.footer-bottom a:hover{color:var(--yellow);}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:820px){
  .announce{display:none;}
  .header{gap:.75rem;padding:0 1rem;}
  .nav a{padding:6px 11px;font-size:0.64rem;}
}

@media (prefers-reduced-motion:reduce){
  .track,.slides,.hero-logo{animation:none !important;}
}

/* ============================================================
   OUR STORY page
   ============================================================ */
.scroll{flex:1;overflow-y:auto;}
.container{max-width:1150px;margin:0 auto;padding:2.4rem 1.5rem 3.5rem;}

.story-hero{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:430px;margin-bottom:1.5rem;}
.collage{display:flex;flex-direction:column;gap:1.1rem;flex:0 0 190px;}
.collage-item{width:170px;height:130px;border:2px solid var(--blue);border-radius:8px;overflow:hidden;
  animation:borderGlow 3s ease-in-out infinite;}
.collage-item img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .8s ease;}
.collage-left .collage-item:nth-child(1){transform:rotate(-4deg);}
.collage-left .collage-item:nth-child(2){transform:rotate(3deg);}
.collage-left .collage-item:nth-child(3){transform:rotate(-2deg);}
.collage-right .collage-item:nth-child(1){transform:rotate(4deg);}
.collage-right .collage-item:nth-child(2){transform:rotate(-3deg);}
.collage-right .collage-item:nth-child(3){transform:rotate(2deg);}
@keyframes borderGlow{
  0%,100%{border-color:var(--blue);box-shadow:0 0 15px rgba(70,130,180,.30);}
  50%    {border-color:var(--yellow);box-shadow:0 0 24px rgba(255,205,0,.38);}
}

.story-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;min-height:400px;}
.bg-logo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:320px;height:320px;opacity:0.30;pointer-events:none;}
.bg-logo img{width:100%;height:100%;object-fit:contain;animation:logoGlow 5s ease-in-out infinite;}
@keyframes logoGlow{0%,100%{filter:drop-shadow(0 0 12px rgba(255,255,255,.5));}50%{filter:drop-shadow(0 0 32px rgba(255,255,255,.95));}}
.story-title{position:relative;z-index:5;}
.story-title h1{font-size:2.6rem;font-weight:700;letter-spacing:1px;}
.story-title h1 span{color:var(--yellow);}
.story-title .subhead{color:var(--gray);font-style:italic;margin-top:.4rem;font-size:.95rem;}

.service-area .brk{display:none;}
.service-area{text-align:center;color:var(--yellow);font-size:0.82rem;font-weight:700;letter-spacing:2px;margin:1.2rem 0;text-transform:uppercase;}

.divider{display:flex;justify-content:center;margin:2rem 0;}
.divider-line{width:80%;height:2px;background:linear-gradient(90deg,transparent,var(--blue),var(--blue),transparent);position:relative;overflow:hidden;}
.divider-line::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--yellow),var(--yellow),transparent);opacity:.85;filter:blur(1px);animation:streak 2.6s infinite linear;}
@keyframes streak{0%{transform:translateX(-100%);}50%{transform:translateX(0);}100%{transform:translateX(100%);}}

.story-copy{text-align:center;max-width:880px;margin:0 auto 1rem;}
.story-copy h2{font-size:1.9rem;color:#fff;margin-bottom:1.3rem;}
.story-copy h2 span{color:var(--yellow);}
.story-copy p{color:var(--gray);font-size:1.02rem;line-height:1.8;margin-bottom:1.1rem;}
.story-copy p .hl{color:var(--yellow);font-weight:600;}

.trio-title{text-align:center;font-size:1.9rem;color:#fff;margin-bottom:2rem;}
.trio-title span{color:var(--yellow);}
.profiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;}
.profile{background:rgba(0,0,0,0.55);border:2px solid var(--blue);border-radius:var(--radius);padding:2rem 1.4rem;text-align:center;
  transition:border-color .25s ease,transform .25s ease;display:flex;flex-direction:column;}
.profile:hover{border-color:var(--yellow);transform:translateY(-8px);}
.profile .pic{width:100px;height:100px;margin:0 auto 1rem;border-radius:50%;overflow:hidden;border:3px solid var(--blue);}
.profile .pic img{width:100%;height:100%;object-fit:cover;}
.profile .name{font-size:1.35rem;font-weight:700;color:#fff;}
.profile .role{color:var(--blue-hi);font-size:0.8rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:1rem;}
.profile .bio{color:var(--gray);line-height:1.6;font-size:0.88rem;margin-bottom:1.2rem;flex:1;}
.profile .attr{font-style:italic;color:var(--yellow);border-top:1px solid var(--line);padding-top:.9rem;font-size:.85rem;}

@media (max-width:900px){
  .story-hero{flex-direction:column;}
  .collage{flex-direction:row;flex:none;}
  .profiles{grid-template-columns:1fr;max-width:380px;margin:0 auto;}
}
@media (prefers-reduced-motion:reduce){.collage-item,.divider-line::before,.bg-logo img{animation:none !important;}}

/* ============================================================
   OUR RENTALS page
   ============================================================ */
.page-title{text-align:center;margin-bottom:1rem;}
.page-title h1{font-size:2.4rem;font-weight:700;letter-spacing:1px;}
.page-title h1 span{color:var(--yellow);}
.page-title .subhead{color:var(--gray);font-style:italic;margin-top:.3rem;font-size:.92rem;}

.featured-title{text-align:center;font-size:1.3rem;font-weight:600;}
.featured-title span{color:var(--yellow);}
.featured-instruction{text-align:center;color:var(--gray);font-size:0.64rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:1rem;}
.carousel-container{position:relative;width:100%;overflow:hidden;padding:.5rem 0;}
.carousel-track{display:flex;gap:1rem;transition:transform .7s ease;width:fit-content;}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.8);border:2px solid var(--blue);
  color:#fff;width:40px;height:40px;border-radius:50%;cursor:pointer;z-index:10;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:border-color .2s ease,color .2s ease;}
.carousel-btn.prev{left:5px;}.carousel-btn.next{right:5px;}
.carousel-btn:hover{border-color:var(--yellow);color:var(--yellow);}

.card{flex:0 0 258px;width:258px;background:rgba(0,0,0,0.55);border:2px solid var(--blue);border-radius:var(--radius);
  padding:1rem;text-align:center;cursor:pointer;transition:border-color .2s ease,transform .2s ease;
  display:flex;flex-direction:column;min-height:290px;}
.card:hover{border-color:var(--yellow);transform:translateY(-3px);}
.card:focus-visible{border-color:var(--yellow);outline:3px solid var(--yellow);outline-offset:2px;}
.card img{width:100%;height:160px;object-fit:cover;border:2px solid var(--blue);border-radius:6px;margin-bottom:.55rem;flex-shrink:0;}
.card-name{color:#fff;font-size:0.9rem;font-weight:600;line-height:1.4;margin:.2rem 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em;}
.card-cat{color:var(--gray);font-size:0.72rem;text-transform:uppercase;letter-spacing:.5px;margin:.15rem 0;}
.card-price{color:var(--yellow);font-size:1.05rem;font-weight:700;margin-top:auto;padding-top:.35rem;}
.card-hint{font-size:0.58rem;color:var(--gray);letter-spacing:.5px;text-transform:uppercase;margin-top:5px;}
.btn-inquire{display:inline-block;padding:6px 16px;background:#000;border:2px solid var(--blue);color:#fff;font-size:0.66rem;
  font-weight:600;letter-spacing:.5px;text-transform:uppercase;text-decoration:none;border-radius:var(--radius-sm);
  margin-top:.7rem;align-self:center;transition:border-color .2s ease;}
.btn-inquire:hover{border-color:var(--yellow);}

.sort-bar{display:flex;justify-content:center;margin:1.6rem 0 1.4rem;}
.sort-container{display:flex;align-items:center;gap:1rem;background:rgba(0,0,0,0.55);border:2px solid var(--blue);
  border-radius:40px;padding:.5rem 1.4rem;flex-wrap:wrap;justify-content:center;transition:border-color .25s ease;}
.sort-container:hover{border-color:var(--yellow);}
.sort-label{color:var(--yellow);font-size:0.74rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;}
.sort-select{background:#000;color:#fff;border:2px solid var(--blue);border-radius:20px;padding:6px 12px;font-size:0.78rem;
  font-family:inherit;cursor:pointer;outline:none;transition:border-color .2s ease;}
.sort-select:hover,.sort-select:focus{border-color:var(--yellow);}
.sort-select option{background:#000;color:#fff;}
.total-count{color:var(--gray);font-size:0.74rem;padding:.4rem .9rem;background:rgba(0,0,0,0.5);border-radius:20px;border:2px solid var(--blue);}
.total-count span{color:var(--yellow);font-weight:700;}

.rentals-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
.rentals-grid .card{flex:none;width:100%;}

.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.95);z-index:1000;justify-content:center;align-items:center;padding:1rem;}
.modal.active{display:flex;}
.modal-content{position:relative;max-width:920px;width:100%;max-height:90vh;display:flex;gap:1.5rem;
  background:rgba(0,0,0,0.9);border:2px solid var(--blue);border-radius:12px;padding:1.5rem;}
.modal-image-container{flex:1;min-width:0;text-align:center;}
.modal-image{width:100%;max-height:58vh;object-fit:contain;border:2px solid var(--blue);border-radius:8px;}
.image-nav-controls{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:1rem;}
.nav-arrow{background:rgba(0,0,0,0.8);border:2px solid var(--blue);color:#fff;width:40px;height:40px;border-radius:50%;
  cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:border-color .2s ease,color .2s ease;}
.nav-arrow:hover:not(:disabled){border-color:var(--yellow);color:var(--yellow);}
.nav-arrow:disabled{opacity:.3;cursor:not-allowed;}
.image-counter{color:var(--yellow);font-size:0.82rem;font-weight:700;background:rgba(0,0,0,0.5);padding:.25rem .75rem;border-radius:20px;border:2px solid var(--blue);}
.modal-info{flex:0 0 260px;display:flex;flex-direction:column;gap:.8rem;padding:1rem;background:rgba(0,0,0,0.5);
  border-radius:8px;border-left:3px solid var(--yellow);max-height:70vh;overflow-y:auto;}
.modal-info h3{color:#fff;font-size:1.4rem;}
.modal-info-price{font-size:1.3rem;font-weight:700;color:var(--yellow);}
.modal-info-notes{margin-top:.6rem;padding-top:.8rem;border-top:1px solid var(--line);}
.modal-info-notes h4{color:var(--yellow);font-size:0.8rem;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:.5rem;}
.modal-info-notes p{color:var(--gray);font-size:0.88rem;line-height:1.5;white-space:pre-wrap;word-wrap:break-word;}
.modal-close{position:absolute;top:-16px;right:-16px;width:38px;height:38px;background:#000;border:2px solid var(--blue);
  border-radius:50%;color:#fff;font-size:1.2rem;font-family:inherit;padding:0;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s ease,color .2s ease;}
.modal-close:hover,.modal-close:focus-visible{border-color:var(--yellow);color:var(--yellow);outline:none;}
.nav-arrow:focus-visible,.carousel-btn:focus-visible{border-color:var(--yellow);color:var(--yellow);outline:none;}

@media (max-width:1100px){.rentals-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:820px){
  .rentals-grid{grid-template-columns:repeat(2,1fr);}
  .modal-content{flex-direction:column;overflow-y:auto;}.modal-info{flex:none;}.modal-close{top:8px;right:8px;}
}
@media (max-width:600px){.rentals-grid{grid-template-columns:1fr;max-width:300px;margin:0 auto;}}
@media (prefers-reduced-motion:reduce){.carousel-track{animation:none !important;}}

/* ============================================================
   CONTACT page
   ============================================================ */
.alert{padding:.9rem 1rem;border-radius:var(--radius-sm);margin-bottom:1.4rem;text-align:center;font-size:.9rem;}
.alert-success{background:rgba(70,130,180,.14);border:2px solid var(--blue);color:#fff;}
.alert-success b{color:var(--yellow);}
.alert-error{background:rgba(226,59,59,.14);border:2px solid var(--red);color:#fff;}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;}
.contact-info,.contact-form{background:rgba(0,0,0,0.55);border:2px solid var(--blue);border-radius:var(--radius);padding:1.8rem;display:flex;flex-direction:column;transition:border-color .25s ease;}
.contact-info:hover,.contact-form:hover{border-color:var(--yellow);}
.info-title,.form-title{color:#fff;font-size:1.5rem;margin-bottom:1.4rem;position:relative;display:inline-block;}
.info-title::after,.form-title::after{content:"";position:absolute;bottom:-8px;left:0;width:54px;height:3px;background:var(--yellow);}
.info-item,.hours-item{display:flex;gap:1rem;margin-bottom:1.4rem;}
.info-icon{width:40px;height:40px;background:rgba(70,130,180,.12);border:2px solid var(--blue);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;}
.info-content h3{color:#fff;font-size:0.95rem;margin-bottom:.5rem;letter-spacing:.5px;}
.info-content p{color:var(--gray);font-size:0.88rem;margin-bottom:.2rem;}
.email-link{color:var(--yellow);text-decoration:none;font-weight:500;}
.email-link:hover{text-decoration:underline;}
.hours-row{display:flex;justify-content:space-between;margin-bottom:.4rem;gap:1rem;}
.hours-day{color:var(--blue-hi);font-weight:600;}
.hours-time{color:var(--gray);text-align:right;}
.hours-time.sunday{color:var(--yellow);font-style:italic;}
.logo-divider{display:flex;justify-content:center;margin:.6rem 0 .3rem;}
.logo-divider-line{width:60%;height:2px;background:linear-gradient(90deg,transparent,var(--blue),transparent);}
.company-logo{text-align:center;margin-top:auto;padding-top:.6rem;}
.company-logo img{max-width:150px;height:auto;}
.license-text{margin-top:.75rem;font-size:0.7rem;color:var(--yellow);font-weight:500;letter-spacing:.5px;border-top:1px solid var(--line);padding-top:.75rem;}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.form-group{margin-bottom:1rem;}
.form-label{display:block;color:#fff;margin-bottom:.35rem;font-size:0.82rem;letter-spacing:.5px;}
.form-label span{color:var(--yellow);}
.form-input,.form-select,.form-textarea{width:100%;padding:9px 12px;background:rgba(0,0,0,0.6);border:2px solid var(--blue);border-radius:var(--radius-sm);color:#fff;font-size:0.9rem;font-family:inherit;transition:border-color .2s ease;}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--yellow);}
/* Safari on iPhone sizes a date box to its contents and ignores the width,
   so it comes out shorter than every other field. This forces it to match. */
.form-input[type="date"]{
  -webkit-appearance:none;appearance:none;
  display:block;width:100%;min-width:100%;max-width:100%;
  box-sizing:border-box;height:auto;min-height:41px;
  text-align:left;
}
.form-input[type="date"]::-webkit-date-and-time-value{text-align:left;width:100%;}
.form-input[type="date"]::-webkit-calendar-picker-indicator{margin-left:auto;}
.form-select option{background:#000;color:#fff;}
.form-textarea{min-height:100px;resize:vertical;}
.message-hint{color:var(--gray);font-size:0.76rem;font-style:italic;margin-top:4px;}

.inline-captcha{background:rgba(0,0,0,0.6);border:2px solid var(--blue);border-radius:var(--radius);padding:1rem;margin:1rem 0 1.2rem;}
.captcha-puzzle{display:flex;flex-direction:column;align-items:center;gap:12px;}
.captcha-equation{font-size:1.5rem;font-weight:700;color:var(--yellow);background:rgba(0,0,0,0.5);padding:.4rem 1rem;border-radius:40px;letter-spacing:4px;border:1px dashed var(--blue);}
.captcha-input-group{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.captcha-input{background:rgba(0,0,0,0.7);border:2px solid var(--blue);border-radius:30px;padding:9px 16px;color:#fff;font-size:1rem;width:130px;text-align:center;font-family:inherit;}
.captcha-input:focus{outline:none;border-color:var(--yellow);}
.captcha-verify-btn{background:#000;color:#fff;border:2px solid var(--blue);border-radius:30px;padding:8px 22px;font-weight:600;cursor:pointer;transition:border-color .2s ease;font-size:0.78rem;text-transform:uppercase;letter-spacing:.5px;font-family:inherit;}
.captcha-verify-btn:hover:not(:disabled){border-color:var(--yellow);}
.captcha-verify-btn:disabled{opacity:.5;cursor:not-allowed;}
.captcha-status{font-size:0.8rem;margin-top:4px;text-align:center;min-height:1.1em;}
.captcha-status.verified{color:var(--blue-hi);}
.captcha-status.error{color:var(--red);}
.captcha-refresh{background:none;border:none;color:var(--blue-hi);cursor:pointer;font-size:0.74rem;text-decoration:underline;font-family:inherit;}
.captcha-refresh:hover{color:var(--yellow);}
.btn-submit{width:100%;background:#000;color:#fff;border:2px solid var(--blue);border-radius:var(--radius-sm);padding:11px 30px;font-size:0.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.6px;cursor:pointer;transition:border-color .2s ease;font-family:inherit;margin-top:auto;}
.btn-submit:hover:not(:disabled){border-color:var(--yellow);}
.btn-submit:disabled{opacity:.5;cursor:not-allowed;}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}
@media (max-width:600px){.form-row{grid-template-columns:1fr;}}

/* ============================================================
   PHONE LAYOUT
   Kept at the very end of the file on purpose: these rules have to
   come after the ones they adjust, or the desktop values win.
   ============================================================ */
/* ---- PHONES ----
   The header and footer were taking well over half the screen, leaving the
   actual page squeezed into a small band in the middle. Both are trimmed
   right down here so the content gets the room. */
@media (max-width:600px){
  .header{
    height:auto;flex-direction:column;
    padding:.45rem .7rem .5rem;gap:.4rem;
  }
  .brand{text-align:center;}
  .brand .name{font-size:.9rem;letter-spacing:.5px;}
  .brand .sub{font-size:.5rem;letter-spacing:2px;margin-top:1px;}

  /* one tidy row instead of two rows of large buttons */
  .nav{display:flex;flex-wrap:nowrap;justify-content:center;gap:.3rem;width:100%;margin-left:0;}
  .nav a{
    flex:1 1 0;min-width:0;
    justify-content:center;text-align:center;
    padding:6px 2px;font-size:.55rem;letter-spacing:.3px;border-width:2px;
  }

  /* headings scaled for a narrow screen */
  .page-title{margin-bottom:.6rem;}
  .page-title h1{font-size:1.55rem;}
  .page-title .subhead{font-size:.78rem;margin-top:.2rem;}
  .divider{margin:.7rem 0;}

  /* footer down to two compact lines */
  .footer{padding:.6rem .8rem .45rem;}
  .footer-top{
    flex-direction:column;align-items:center;
    gap:.2rem;text-align:center;
  }
  /* the brand block is already at the top of every page — drop it here */
  .footer-top .fcol:first-child{display:none;}

  /* heading sits to the LEFT of its own links, one row each */
  .fcol{
    flex:0 0 auto;min-width:0;width:100%;
    display:flex;align-items:baseline;justify-content:center;
    gap:.5rem;flex-wrap:nowrap;
  }
  .fcol h3{
    font-size:.6rem;letter-spacing:1px;margin-bottom:0;white-space:nowrap;
  }
  .fcol h3::after{content:":";}
  .fcol .motto{display:none;}

  .flinks{display:flex;flex-wrap:wrap;justify-content:center;gap:.1rem .6rem;margin:0;padding:0;}
  .flinks li{margin:0;}
  .flinks a{font-size:.66rem;}
  .footer-bottom{
    flex-direction:column;gap:.15rem;text-align:center;
    padding-top:.45rem;margin-top:.45rem;font-size:.6rem;
  }
}

/* ---- HOME on a phone: the hero has to fit between header and footer ---- */
@media (max-width:600px){
  .hero-logo{max-height:24vh;max-width:min(64%,240px);margin-bottom:.6rem;}
  .hero-title{font-size:1.75rem;}
  .hero-sub{font-size:.82rem;margin-top:.35rem;}
  .hero-meta{font-size:.66rem;margin-top:.35rem;}
  .hero-center{padding:.7rem;}
  .cta{margin-top:.9rem;gap:.5rem;}
  .cta .btn{padding:9px 16px;font-size:.7rem;}
  .slide{height:52%;}
}

/* ---- OUR STORY on a phone: the collage was wider than the screen ---- */
@media (max-width:600px){
  .story-hero{min-height:0;gap:.8rem;margin-bottom:.9rem;}
  .collage{gap:.5rem;justify-content:center;width:100%;}
  .collage-item{width:29vw;max-width:120px;height:22vw;max-height:92px;}
  .story-center{min-height:0;padding:.4rem 0;}
  .story-title h1{font-size:1.7rem;}
  .story-title .subhead{font-size:.78rem;}
  .service-area{font-size:.66rem;letter-spacing:1px;margin:.8rem 0;line-height:1.7;}
  .service-area .brk{display:inline;}
  .story-copy h2{font-size:1.15rem;}
  .story-copy p{font-size:.85rem;}
  .trio-title{font-size:1.3rem;}
}

/* ---- RENTALS + CONTACT on a phone ---- */
@media (max-width:600px){
  .featured-title{font-size:1.25rem;}
  .featured-instruction{font-size:.66rem;}
  .sort-bar{margin:.7rem 0;}
  /* Total items on the top row, Sort by underneath it */
  .sort-container{flex-wrap:wrap;justify-content:center;gap:.55rem;padding:.6rem .8rem;}
  .total-count{order:-1;width:100%;text-align:center;}
  .sort-label{order:1;}
  .sort-select{order:2;}
  .info-title,.form-title{font-size:1.05rem;}
  .contact-grid{gap:.9rem;}

  /* Featured items become a swipeable strip. Only one card fits a phone
     screen, so sliding by transform meant the arrows jumped to the far end.
     Native scrolling with snap points feels right on a touch screen and the
     arrows nudge it one card at a time. */
  .carousel-container{overflow:visible;padding:.4rem 0;}
  .carousel-track{
    width:auto;transform:none !important;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:.7rem;padding:2px 10px;
  }
  .carousel-track::-webkit-scrollbar{display:none;}
  /* keep the card close to its desktop width so the photo keeps its shape */
  .carousel-track .card{
    scroll-snap-align:center;
    flex:0 0 min(82vw, 258px);
    width:min(82vw, 258px);
  }
  .carousel-btn{width:34px;height:34px;font-size:.8rem;}
}

@media (max-width:380px){
  .nav a{font-size:.5rem;padding:5px 1px;}
  .page-title h1{font-size:1.35rem;}
  .hero-logo{max-height:20vh;}
  .hero-title{font-size:1.5rem;}
}