/* ============================================================
   BAHAMAS FOAM PRODUCTS & COATING SYSTEMS
   Touch-up of the existing site. Same structure and content,
   sharpened. Brand colors drawn from their logo: blue + lime.
   Type: Lora (serif headings, matching their existing feel) +
   Source Sans 3 (clean sans body).
   ============================================================ */

:root{
  --font-head:'Lora', Georgia, serif;
  --font-body:'Source Sans 3','Source Sans Pro', system-ui, sans-serif;

  /* Type scale */
  --t-xs:0.75rem; --t-sm:0.875rem; --t-base:1rem; --t-lg:1.125rem;
  --t-xl:1.35rem; --t-2xl:1.7rem; --t-3xl:2.2rem; --t-4xl:2.9rem; --t-5xl:3.6rem;

  --lh-tight:1.12; --lh-snug:1.3; --lh-body:1.7;

  /* Brand: blue (logo ring) */
  --navy-900:hsl(209 46% 15%);
  --navy-800:hsl(209 42% 20%);
  --blue-700:hsl(206 72% 31%);
  --blue-600:hsl(206 73% 38%);
  --blue-500:hsl(205 72% 45%);
  --blue-200:hsl(205 58% 82%);
  --blue-100:hsl(205 60% 93%);
  --blue-50:hsl(205 62% 97%);

  /* Brand: lime (logo center) accent */
  --lime-600:hsl(78 55% 38%);
  --lime-500:hsl(77 55% 46%);
  --lime-400:hsl(75 60% 55%);
  --lime-100:hsl(74 52% 92%);

  /* Neutrals (slightly cool) */
  --ink:hsl(209 24% 17%);
  --gray-700:hsl(209 14% 32%);
  --gray-500:hsl(209 11% 46%);
  --gray-400:hsl(209 12% 62%);
  --gray-200:hsl(209 16% 88%);
  --gray-100:hsl(209 20% 94%);
  --gray-50:hsl(209 30% 98%);
  --white:hsl(0 0% 100%);

  --tx-1:var(--ink);
  --tx-2:var(--gray-500);
  --tx-3:var(--gray-400);
  --txd-1:hsl(205 30% 97%);
  --txd-2:hsl(205 22% 80%);
  --txd-3:hsl(205 16% 66%);

  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.25rem;
  --s-6:1.5rem; --s-8:2rem; --s-10:2.5rem; --s-12:3rem; --s-16:4rem;
  --s-20:5rem; --s-24:6rem;

  --section-y:var(--s-24);
  --container:1180px;

  --r-sm:5px; --r-md:9px; --r-lg:14px; --r-full:999px;

  --sh-sm:0 1px 3px hsl(209 30% 12% / .07), 0 1px 2px hsl(209 30% 12% / .05);
  --sh-md:0 8px 22px hsl(209 30% 12% / .10), 0 3px 8px hsl(209 30% 12% / .06);
  --sh-lg:0 20px 50px hsl(209 30% 12% / .16), 0 6px 14px hsl(209 30% 12% / .08);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);font-size:var(--t-base);line-height:var(--lh-body);
  color:var(--tx-1);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--s-6)}

h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;line-height:var(--lh-tight);color:var(--navy-900)}
p{color:var(--tx-2);max-width:66ch}

.eyebrow{
  font-family:var(--font-body);font-weight:600;font-size:var(--t-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue-600);
  display:inline-flex;align-items:center;gap:var(--s-3);
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--lime-500);display:inline-block}
.eyebrow.on-dark{color:var(--blue-200)}

.btn{
  font-family:var(--font-body);font-weight:600;font-size:var(--t-sm);letter-spacing:.02em;
  display:inline-flex;align-items:center;gap:var(--s-2);padding:.8rem 1.5rem;
  border:2px solid transparent;border-radius:var(--r-md);cursor:pointer;
  transition:transform .14s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .14s ease;
}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--blue-600);color:var(--white)}
.btn-primary:hover{background:var(--blue-700);transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn-primary:active{transform:translateY(1px)}
.btn-lime{background:var(--lime-500);color:var(--navy-900)}
.btn-lime:hover{background:var(--lime-400);transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn-line{background:transparent;color:var(--blue-700);border-color:var(--blue-200)}
.btn-line:hover{background:var(--blue-50);border-color:var(--blue-500);transform:translateY(-2px)}
.btn-line.on-dark{color:var(--white);border-color:hsl(205 40% 80% / .4)}
.btn-line.on-dark:hover{background:hsl(205 60% 96% / .1);border-color:var(--white)}
.btn:focus-visible{outline:3px solid var(--lime-400);outline-offset:2px}

/* ---------------- NAV ---------------- */
.nav{position:sticky;top:0;z-index:100;background:hsl(0 0% 100% / .92);backdrop-filter:blur(8px);border-bottom:1px solid var(--gray-200)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:76px;gap:var(--s-6)}
.brand{display:flex;align-items:center;gap:var(--s-3)}
.brand img{width:46px;height:46px;border-radius:50%}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-name{font-family:var(--font-head);font-weight:700;font-size:1.02rem;color:var(--navy-900);letter-spacing:.01em}
.brand-sub{font-family:var(--font-body);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);margin-top:3px}
.nav-links{display:flex;align-items:center;gap:var(--s-6)}
.nav-link{font-size:var(--t-sm);font-weight:600;letter-spacing:.02em;color:var(--gray-700);position:relative;padding:6px 0;transition:color .2s ease}
.nav-link:hover{color:var(--navy-900)}
.nav-link::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:2px;background:var(--blue-500);transition:width .25s ease}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.nav-link.active{color:var(--navy-900)}
.nav-cta{font-size:var(--t-sm);font-weight:600;color:var(--white);background:var(--blue-600);padding:.55rem 1.1rem;border-radius:var(--r-md);transition:background .2s ease, transform .14s ease}
.nav-cta:hover{background:var(--blue-700);transform:translateY(-2px)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.nav-toggle span{width:26px;height:2px;background:var(--navy-900);display:block;transition:.25s}

/* ---------------- HERO (home) ---------------- */
.hero{position:relative;min-height:78vh;display:flex;align-items:center;color:var(--white);overflow:hidden}
.hero-img{position:absolute;inset:0;z-index:0}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 40%;filter:grayscale(15%)}
.hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, hsl(209 46% 12% / .5), hsl(209 50% 10% / .78))}
.hero .container{position:relative;z-index:1}
.hero-inner{max-width:720px;padding:var(--s-16) 0}
.hero h1{color:var(--white);font-size:var(--t-5xl);font-weight:700;line-height:1.04;margin:var(--s-5) 0 var(--s-5)}
.hero h1 .em{color:var(--lime-400)}
.hero p{color:hsl(205 25% 90%);font-size:var(--t-lg);max-width:52ch;margin-bottom:var(--s-8)}
.hero-actions{display:flex;gap:var(--s-4);flex-wrap:wrap}

/* ---------------- SECTION SHELL ---------------- */
.section{padding:var(--section-y) 0}
.section-head{max-width:660px;margin-bottom:var(--s-12)}
.section-head h2{font-size:var(--t-4xl);margin:var(--s-4) 0 var(--s-4)}
.section-head p{font-size:var(--t-lg)}
.center{text-align:center;margin-left:auto;margin-right:auto}
.center .eyebrow{justify-content:center}

/* Difference band */
.difference{background:var(--gray-50);border-top:1px solid var(--gray-200);border-bottom:1px solid var(--gray-200)}
.diff-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-6)}
.diff-inner img{width:120px;height:120px;border-radius:50%;box-shadow:var(--sh-sm)}
.diff-inner h2{font-size:var(--t-3xl)}
.diff-inner p{font-size:var(--t-lg);max-width:60ch}

/* Feature split (what we do / see what we created) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-16);align-items:center}
.split.rev .split-media{order:2}
.split-media{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md);aspect-ratio:4/3;position:relative}
.split-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.split-media:hover img{transform:scale(1.04)}
.split-body h2{font-size:var(--t-3xl);margin:var(--s-4) 0 var(--s-4)}
.split-body p{font-size:var(--t-lg);margin-bottom:var(--s-6)}

/* Curbside CTA band */
.cta-band{background:linear-gradient(135deg, var(--blue-700), var(--navy-900));color:var(--white);text-align:center}
.cta-band .inner{padding:var(--s-20) 0}
.cta-band h2{color:var(--white);font-size:var(--t-4xl);margin-bottom:var(--s-4)}
.cta-band p{color:hsl(205 25% 88%);font-size:var(--t-lg);margin:0 auto var(--s-8);max-width:50ch}
.cta-band .btns{display:flex;gap:var(--s-4);justify-content:center;flex-wrap:wrap}
.cta-band .btn-primary{background:var(--lime-500);color:var(--navy-900)}
.cta-band .btn-primary:hover{background:var(--lime-400)}

/* ---------------- PAGE HEADER (interior) ---------------- */
.page-head{background:linear-gradient(135deg, var(--navy-900), var(--blue-700));color:var(--white);padding:var(--s-20) 0 var(--s-16)}
.page-head h1{color:var(--white);font-size:var(--t-5xl);margin:var(--s-4) 0 var(--s-4)}
.page-head p{color:hsl(205 25% 88%);font-size:var(--t-lg);max-width:60ch}
.crumbs{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--txd-3);margin-top:var(--s-6)}
.crumbs a{color:var(--blue-200)}

/* ---------------- ABOUT ---------------- */
.media-wide{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md);margin-bottom:var(--s-12)}
.media-wide img{width:100%;max-height:440px;object-fit:cover}
.prose p{font-size:var(--t-lg);margin-bottom:var(--s-5);max-width:74ch}
.prose p strong{color:var(--tx-1);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-8)}
.chip{font-size:var(--t-sm);font-weight:600;color:var(--blue-700);background:var(--blue-100);padding:.5rem 1rem;border-radius:var(--r-full)}
.chip.star{background:var(--lime-100);color:var(--lime-600)}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6);margin-top:var(--s-16)}
.stat{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--r-md);padding:var(--s-8);text-align:center}
.stat .big{font-family:var(--font-head);font-weight:700;font-size:var(--t-4xl);color:var(--blue-600);line-height:1}
.stat .cap{font-size:var(--t-sm);color:var(--tx-2);margin-top:var(--s-3)}

/* ---------------- PRODUCTS ---------------- */
.pill-list{list-style:none;display:grid;gap:var(--s-4);margin:var(--s-6) 0}
.pill-list li{display:flex;gap:var(--s-4);align-items:flex-start;font-size:var(--t-lg);color:var(--tx-2)}
.pill-list .ck{flex:none;width:26px;height:26px;border-radius:50%;background:var(--lime-100);color:var(--lime-600);display:flex;align-items:center;justify-content:center;margin-top:4px}
.pill-list .ck svg{width:14px;height:14px}
.note-card{background:var(--blue-50);border-left:3px solid var(--blue-500);border-radius:0 var(--r-md) var(--r-md) 0;padding:var(--s-6);margin-top:var(--s-8)}
.note-card p{font-size:var(--t-base);color:var(--gray-700);margin:0}
.sell-wrap{margin-top:var(--s-8)}
.sell-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3) var(--s-8);margin-top:var(--s-6)}
.sell-grid li{list-style:none;display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid var(--gray-200);font-size:var(--t-base);color:var(--tx-1);font-weight:600}
.sell-grid li::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--lime-500);flex:none}
.prod-media-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6);margin-top:var(--s-12)}
.prod-media-grid img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-md);box-shadow:var(--sh-sm);aspect-ratio:16/10}

/* ---------------- GALLERY ---------------- */
.gal{columns:4;column-gap:var(--s-4)}
.gal figure{break-inside:avoid;margin:0 0 var(--s-4);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-sm);cursor:pointer;position:relative;background:var(--gray-100)}
.gal img{width:100%;display:block;transition:transform .5s ease}
.gal figure::after{content:"";position:absolute;inset:0;background:hsl(209 46% 12% / 0);transition:background .3s ease}
.gal figure:hover img{transform:scale(1.05)}
.gal figure:hover::after{background:hsl(206 72% 31% / .12)}
/* Lightbox */
.lb{position:fixed;inset:0;z-index:200;background:hsl(209 46% 8% / .92);display:none;align-items:center;justify-content:center;padding:var(--s-6)}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:88vh;border-radius:var(--r-md);box-shadow:var(--sh-lg)}
.lb-close{position:absolute;top:var(--s-6);right:var(--s-8);color:var(--white);font-size:2rem;cursor:pointer;line-height:1;background:none;border:none}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);color:var(--white);font-size:2.4rem;cursor:pointer;background:none;border:none;padding:var(--s-4);opacity:.8;transition:opacity .2s ease}
.lb-nav:hover{opacity:1}
.lb-prev{left:var(--s-4)} .lb-next{right:var(--s-4)}

/* ---------------- CONTACT ---------------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-16);align-items:start}
.contact-actions{display:flex;gap:var(--s-4);flex-wrap:wrap;margin:var(--s-6) 0 var(--s-10)}
.info-list{display:grid;gap:var(--s-6)}
.info-row{display:flex;gap:var(--s-4);align-items:flex-start;padding-bottom:var(--s-6);border-bottom:1px solid var(--gray-200)}
.info-row:last-child{border-bottom:none;padding-bottom:0}
.info-ic{flex:none;width:44px;height:44px;border-radius:var(--r-md);background:var(--blue-100);color:var(--blue-700);display:flex;align-items:center;justify-content:center}
.info-ic svg{width:19px;height:19px}
.info-row .lab{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3);margin-bottom:3px}
.info-row .val{font-size:var(--t-lg);color:var(--tx-1);font-weight:600;line-height:var(--lh-snug)}
.info-row a.val:hover{color:var(--blue-600)}
.map-frame{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md);border:1px solid var(--gray-200)}
.map-frame iframe{width:100%;height:460px;border:0;display:block}

/* ---------------- PAY ---------------- */
.pay-card{max-width:640px;margin:0 auto;text-align:center;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--r-lg);padding:var(--s-16) var(--s-10)}
.pay-card .ic{width:64px;height:64px;border-radius:50%;background:var(--blue-100);color:var(--blue-700);display:flex;align-items:center;justify-content:center;margin:0 auto var(--s-6)}
.pay-card .ic svg{width:30px;height:30px}
.pay-card h2{font-size:var(--t-3xl);margin-bottom:var(--s-4)}
.pay-card p{margin:0 auto var(--s-8);font-size:var(--t-lg)}
.pay-card .btns{display:flex;gap:var(--s-4);justify-content:center;flex-wrap:wrap}

/* ---------------- FOOTER ---------------- */
.footer{background:var(--navy-900);color:var(--txd-2);padding:var(--s-16) 0 var(--s-8)}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1.3fr;gap:var(--s-12);padding-bottom:var(--s-12);border-bottom:1px solid hsl(205 30% 80% / .12)}
.footer .brand img{width:52px;height:52px;border-radius:50%}
.footer .brand-name{color:var(--white)}
.footer .brand-sub{color:var(--txd-3)}
.footer-blurb{font-size:var(--t-sm);margin-top:var(--s-4);max-width:36ch;line-height:var(--lh-snug)}
.footer-col h4{font-family:var(--font-body);font-weight:600;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--txd-3);margin-bottom:var(--s-4)}
.footer-col a{display:block;font-size:var(--t-sm);padding:var(--s-2) 0;color:var(--txd-2);transition:color .2s ease}
.footer-col a:hover{color:var(--blue-200)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);flex-wrap:wrap;padding-top:var(--s-8)}
.footer-bottom p{font-size:var(--t-xs);color:var(--txd-3)}
.footer-credit a{color:var(--blue-200)}

/* ---------------- MOTION ---------------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-group .reveal:nth-child(2){transition-delay:.08s}
.reveal-group .reveal:nth-child(3){transition-delay:.16s}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}html{scroll-behavior:auto}}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:1024px){
  .gal{columns:3}
  :root{--t-5xl:3rem;--t-4xl:2.4rem}
}
@media (max-width:860px){
  .nav-links{position:fixed;top:0;right:0;height:100vh;width:min(80vw,320px);background:var(--navy-900);flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--s-6);padding:var(--s-16) var(--s-8);transform:translateX(100%);transition:transform .3s ease;box-shadow:var(--sh-lg)}
  .nav-links.open{transform:translateX(0)}
  .nav-link{color:var(--txd-2)}
  .nav-link:hover,.nav-link.active{color:var(--white)}
  .nav-toggle{display:flex;z-index:110}
  .split,.contact-grid{grid-template-columns:1fr;gap:var(--s-10)}
  .split.rev .split-media{order:0}
  .sell-grid{grid-template-columns:repeat(2,1fr)}
  .gal{columns:2}
  .stat-row{grid-template-columns:1fr;gap:var(--s-4)}
  .footer-top{grid-template-columns:1fr;gap:var(--s-8)}
  .prod-media-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  :root{--section-y:var(--s-16);--t-5xl:2.5rem;--t-4xl:2rem;--t-3xl:1.7rem}
  .sell-grid{grid-template-columns:1fr}
  .gal{columns:1}
  .hero{min-height:70vh}
}