/* ==========================================================================
   Gold Coast Epoxy Coatings — Locked Component Library
   Brand direction: premium coastal authority. Deep navy (industrial trust)
   + liquid-metal teal (epoxy shimmer / coastal water) + amber CTA (resin glow).
   Headings: Poppins (geometric, confident trade voice)
   Body: Inter (clean, highly legible at small sizes)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* ---- Brand tokens ---- */
  --bc-primary: #0F2A3D;        /* deep navy — header/footer, dark sections */
  --bc-primary-dark: #081722;   /* darker navy for hover/gradients */
  --bc-primary-tint: #E7EEF2;   /* pale navy tint for subtle bg */
  --bc-accent: #17B8A6;         /* liquid-metal teal — links, highlights, icons */
  --bc-accent-dark: #0C6B62;    /* AA-safe teal for small text/links on white (6.4:1) */
  --bc-accent-tint: #E3F7F4;
  --bc-cta: #F0A22E;            /* amber — primary buttons, resin glow */
  --bc-cta-dark: #C87F16;
  --bc-cta-ink: #241300;        /* text on amber */

  --bc-paper: #FFFFFF;
  --bc-paper-alt: #F3F8F8;      /* teal-tinted off-white section bg */
  --bc-ink: #12222D;            /* body copy on paper */
  --bc-ink-soft: #46626C;       /* secondary copy */
  --bc-border: #DCE7E7;
  --bc-border-dark: rgba(255,255,255,.16);

  /* ---- Type scale ---- */
  --bc-font-head: 'Poppins', 'Segoe UI', sans-serif;
  --bc-font-body: 'Inter', 'Segoe UI', sans-serif;
  --bc-fs-h1: clamp(2.1rem, 1.6rem + 2.2vw, 3.4rem);
  --bc-fs-h2: clamp(1.7rem, 1.4rem + 1.4vw, 2.5rem);
  --bc-fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --bc-fs-lede: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  --bc-fs-body: 1rem;
  --bc-fs-small: 0.875rem;
  --bc-lh-head: 1.15;
  --bc-lh-body: 1.65;

  /* ---- Space scale ---- */
  --bc-space-1: 0.5rem;
  --bc-space-2: 0.75rem;
  --bc-space-3: 1rem;
  --bc-space-4: 1.5rem;
  --bc-space-5: 2rem;
  --bc-space-6: 3rem;
  --bc-space-7: 4.5rem;
  --bc-space-8: 6rem;

  --bc-radius-s: 6px;
  --bc-radius-m: 12px;
  --bc-radius-l: 20px;
  --bc-shadow-s: 0 2px 8px rgba(10,25,35,.08);
  --bc-shadow-m: 0 10px 30px rgba(10,25,35,.14);
  --bc-shadow-l: 0 20px 50px rgba(10,25,35,.22);
  --bc-container-w: 1180px;
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  font-family: var(--bc-font-body);
  font-size: var(--bc-fs-body);
  line-height: var(--bc-lh-body);
  color: var(--bc-ink);
  background: var(--bc-paper);
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
h1,h2,h3,h4{
  font-family: var(--bc-font-head);
  line-height: var(--bc-lh-head);
  color: var(--bc-primary);
  margin: 0 0 var(--bc-space-3);
  font-weight: 700;
}
h1{ font-size: var(--bc-fs-h1); font-weight: 800; }
h2{ font-size: var(--bc-fs-h2); }
h3{ font-size: var(--bc-fs-h3); }
p{ margin: 0 0 var(--bc-space-3); }
a{ color: var(--bc-accent-dark); }
ul,ol{ padding-left: 1.2em; }

/* ==========================================================================
   Container / layout helpers
   ========================================================================== */
.bc-container{
  width: 100%;
  max-width: var(--bc-container-w);
  margin-inline: auto;
  padding-inline: var(--bc-space-4);
}
.bc-section{ padding-block: var(--bc-space-7); }
.bc-section--alt{ background: var(--bc-paper-alt); }
.bc-section--dark{
  background: linear-gradient(160deg, var(--bc-primary) 0%, var(--bc-primary-dark) 100%);
  color: #EAF2F2;
}
.bc-section--dark h1, .bc-section--dark h2, .bc-section--dark h3{ color: #fff; }

.bc-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--bc-font-head);
  font-size: var(--bc-fs-small);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bc-accent-dark);
  margin-bottom: var(--bc-space-2);
}
.bc-eyebrow::before{
  content: "";
  width: 1.6em;
  height: 2px;
  background: var(--bc-cta);
  display: inline-block;
}
.bc-section--dark .bc-eyebrow{ color: #6FE5D4; }
.bc-section--dark .bc-eyebrow::before{ background: var(--bc-cta); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.bc-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--bc-font-head);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .01em;
  padding: 0.9em 1.7em;
  border-radius: var(--bc-radius-s);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
  line-height: 1.2;
}
.bc-btn:hover{ transform: translateY(-2px); }
.bc-btn:focus-visible{ outline: 3px solid var(--bc-accent); outline-offset: 2px; }

.bc-btn--primary{
  background: var(--bc-cta);
  color: var(--bc-cta-ink);
  box-shadow: var(--bc-shadow-s);
}
.bc-btn--primary:hover{ background: var(--bc-cta-dark); box-shadow: var(--bc-shadow-m); }

.bc-btn--accent{
  background: var(--bc-accent);
  color: #04201C;
}
.bc-btn--accent:hover{ background: var(--bc-accent-dark); color: #fff; }

.bc-btn--ghost{
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.55);
}
.bc-btn--ghost:hover{ background: rgba(255,255,255,.12); border-color: #fff; }

.bc-btn--outline{
  background: transparent;
  color: var(--bc-primary);
  border-color: var(--bc-primary);
}
.bc-btn--outline:hover{ background: var(--bc-primary); color: #fff; }

/* ==========================================================================
   Site shell — header / nav / footer
   ========================================================================== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bc-paper);
  border-bottom: 1px solid var(--bc-border);
}
.site-header__bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bc-space-4);
  padding-block: var(--bc-space-2);
}
.site-header__logo{
  display: flex;
  align-items: center;
  gap: .6em;
  font-family: var(--bc-font-head);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--bc-primary);
  text-decoration: none;
}
.site-header__logo strong{ color: var(--bc-accent-dark); }

.site-nav{ display: flex; align-items: center; gap: var(--bc-space-5); }
.site-nav__list{
  list-style: none;
  display: flex;
  gap: var(--bc-space-4);
  margin: 0;
  padding: 0;
}
.site-nav__list a{
  color: var(--bc-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
}
.site-nav__list a:hover{ color: var(--bc-accent-dark); }

.site-footer{
  background: var(--bc-primary-dark);
  color: #C7D6DA;
  padding-block: var(--bc-space-6);
}
.site-footer a{ color: #9FE3D8; }
.site-footer__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--bc-space-5);
}
.site-footer__grid h4{ color: #fff; font-size: 1rem; margin-bottom: var(--bc-space-2); }
.site-footer__bottom{
  margin-top: var(--bc-space-5);
  padding-top: var(--bc-space-4);
  border-top: 1px solid var(--bc-border-dark);
  font-size: var(--bc-fs-small);
  color: #8FA5AB;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.bc-hero{
  position: relative;
  background: linear-gradient(160deg, var(--bc-primary) 0%, var(--bc-primary-dark) 100%);
  color: #fff;
  overflow: hidden;
}
.bc-hero h1, .bc-hero h2, .bc-hero h3{ color: #fff; }
.bc-hero .bc-eyebrow{ color: #6FE5D4; }
.bc-hero .bc-eyebrow::before{ background: var(--bc-cta); }
.bc-hero a:not(.bc-btn){ color: #fff; }
.bc-hero__grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: var(--bc-space-6);
  padding-block: var(--bc-space-8);
}
.bc-hero__copy p{ color: #C9DCDF; font-size: var(--bc-fs-lede); }
.bc-hero__actions{ display: flex; gap: var(--bc-space-3); flex-wrap: wrap; margin-top: var(--bc-space-4); }
.bc-hero__media{
  border-radius: var(--bc-radius-l);
  overflow: hidden;
  box-shadow: var(--bc-shadow-l);
  border: 1px solid rgba(255,255,255,.15);
}
.bc-hero__media img{ width: 100%; height: 100%; object-fit: cover; }
.bc-hero__stats{
  display: flex;
  gap: var(--bc-space-5);
  margin-top: var(--bc-space-5);
  flex-wrap: wrap;
}
.bc-hero__stat b{ display: block; font-family: var(--bc-font-head); font-size: 1.6rem; color: var(--bc-cta); }
.bc-hero__stat span{ font-size: var(--bc-fs-small); color: #AEC7CC; }

@media (max-width: 860px){
  .bc-hero__grid{ grid-template-columns: 1fr; padding-block: var(--bc-space-6); }
}

/* ==========================================================================
   Prose
   ========================================================================== */
.bc-prose{ max-width: 72ch; }
.bc-prose--color{ color: var(--bc-ink); }
.bc-prose--color h2, .bc-prose--color h3{ color: var(--bc-accent-dark); }
.bc-prose--dark{ color: #DCEAEC; }
.bc-prose--dark h2, .bc-prose--dark h3{ color: #fff; }
.bc-prose--with-image{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bc-space-6);
  align-items: center;
  max-width: none;
}
.bc-prose--with-image img{ border-radius: var(--bc-radius-m); box-shadow: var(--bc-shadow-m); }
@media (max-width: 760px){
  .bc-prose--with-image{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Grid (services / features)
   ========================================================================== */
.bc-grid{
  display: grid;
  gap: var(--bc-space-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.bc-grid--2col{ grid-template-columns: repeat(2, 1fr); }
.bc-grid--3col{ grid-template-columns: repeat(3, 1fr); }
.bc-grid--4col{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px){
  .bc-grid--2col, .bc-grid--3col, .bc-grid--4col{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .bc-grid--2col, .bc-grid--3col, .bc-grid--4col{ grid-template-columns: 1fr; }
}

.bc-grid__card{
  background: var(--bc-paper);
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius-m);
  padding: var(--bc-space-4);
  box-shadow: var(--bc-shadow-s);
  transition: box-shadow .15s ease, transform .15s ease;
}
.bc-grid__card:hover{ box-shadow: var(--bc-shadow-m); transform: translateY(-3px); }
.bc-grid__card h3{ font-size: 1.15rem; margin-bottom: var(--bc-space-1); }
.bc-grid__card p{ color: var(--bc-ink-soft); margin-bottom: 0; font-size: .95rem; }
.bc-grid__card-img{
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--bc-radius-s);
  margin-bottom: var(--bc-space-3);
}
.bc-grid--imaged .bc-grid__card{ padding: var(--bc-space-3); }
.bc-grid--text-only .bc-grid__card{ text-align: left; }
.bc-grid__icon{
  width: 46px; height: 46px;
  border-radius: 10px;
  background: var(--bc-accent-tint);
  color: var(--bc-accent-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin-bottom: var(--bc-space-2);
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.bc-faq__list{ display: flex; flex-direction: column; gap: var(--bc-space-2); }
.bc-faq__item{
  background: var(--bc-paper);
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius-m);
  padding: var(--bc-space-3) var(--bc-space-4);
}
.bc-faq__q{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bc-space-3);
  font-family: var(--bc-font-head);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--bc-primary);
  margin: 0;
  cursor: pointer;
}
.bc-faq__q::after{
  content: "+";
  font-size: 1.4rem;
  color: var(--bc-accent-dark);
  flex-shrink: 0;
}
.bc-faq__item[open] .bc-faq__q::after{ content: "\2212"; }
.bc-faq__a{ color: var(--bc-ink-soft); margin-top: var(--bc-space-2); margin-bottom: 0; }

/* ==========================================================================
   Gallery
   ========================================================================== */
.bc-gallery__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bc-space-3);
}
@media (max-width: 760px){ .bc-gallery__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .bc-gallery__grid{ grid-template-columns: 1fr; } }
.bc-gallery__cell{
  position: relative;
  border-radius: var(--bc-radius-m);
  overflow: hidden;
  box-shadow: var(--bc-shadow-s);
}
.bc-gallery__cell img{ width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.bc-gallery__caption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background-color: rgba(8,23,34,.85);
  background-image: linear-gradient(0deg, rgba(8,23,34,.85), rgba(8,23,34,0));
  color: #fff;
  font-size: var(--bc-fs-small);
  padding: var(--bc-space-3) var(--bc-space-2) var(--bc-space-2);
  margin: 0;
}

/* ==========================================================================
   Video
   ========================================================================== */
.bc-video__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bc-space-6);
  align-items: center;
}
@media (max-width: 760px){ .bc-video__grid{ grid-template-columns: 1fr; } }
.bc-video__copy p{ color: var(--bc-ink-soft); }
.bc-video__player{
  border-radius: var(--bc-radius-m);
  overflow: hidden;
  box-shadow: var(--bc-shadow-m);
  background: #000;
}
.bc-video__frame{
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
  display: block;
}

/* ==========================================================================
   Map
   ========================================================================== */
.bc-map__grid{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--bc-space-5);
  align-items: stretch;
}
@media (max-width: 760px){ .bc-map__grid{ grid-template-columns: 1fr; } }
.bc-map__info{
  background: var(--bc-primary);
  color: #fff;
  border-radius: var(--bc-radius-m);
  padding: var(--bc-space-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bc-map__info h3{ color: #fff; }
.bc-map__addr{ list-style: none; padding: 0; margin: var(--bc-space-3) 0 0; display: flex; flex-direction: column; gap: var(--bc-space-2); color: #C9DCDF; }
.bc-map__frame{
  width: 100%;
  min-height: 320px;
  border: 0;
  border-radius: var(--bc-radius-m);
  box-shadow: var(--bc-shadow-s);
}

/* ==========================================================================
   Testimonial
   ========================================================================== */
.bc-testimonial{
  display: grid;
  gap: var(--bc-space-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.bc-testimonial__card{
  background: var(--bc-paper);
  border-radius: var(--bc-radius-m);
  border: 1px solid var(--bc-border);
  padding: var(--bc-space-4);
  box-shadow: var(--bc-shadow-s);
}
.bc-testimonial__stars{ color: var(--bc-cta); letter-spacing: .1em; margin-bottom: var(--bc-space-2); font-size: 1.05rem; }
.bc-testimonial__quote{ color: var(--bc-ink); font-style: italic; margin-bottom: var(--bc-space-3); }
.bc-testimonial__author{ display: flex; align-items: center; gap: var(--bc-space-2); }
.bc-testimonial__avatar{
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--bc-accent-tint);
  color: var(--bc-accent-dark);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--bc-font-head); font-weight: 700;
}
.bc-testimonial__author b{ display: block; font-size: .92rem; color: var(--bc-primary); }
.bc-testimonial__author span{ font-size: .82rem; color: var(--bc-ink-soft); }

/* ==========================================================================
   Form band + form fields
   ========================================================================== */
.bc-formband{
  background: linear-gradient(160deg, var(--bc-primary) 0%, var(--bc-primary-dark) 100%);
  color: #fff;
}
.bc-formband__copy{ display: flex; flex-direction: column; gap: var(--bc-space-3); }
.bc-formband__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bc-space-6);
  align-items: center;
}
@media (max-width: 760px){ .bc-formband__grid{ grid-template-columns: 1fr; } }
.bc-formband__title{ color: #fff; }
.bc-formband__lede{ color: #C9DCDF; font-size: var(--bc-fs-lede); }
.bc-formband a:not(.bc-btn){ color: #fff; }
.bc-formband li{ color: #EAF2F2; }
.bc-formband__form{
  background: var(--bc-paper);
  color: var(--bc-ink);
  border-radius: var(--bc-radius-l);
  padding: var(--bc-space-5);
  box-shadow: var(--bc-shadow-l);
  display: grid;
  gap: var(--bc-space-3);
}
.bc-formband--intro .bc-formband__form{ border-top: 6px solid var(--bc-cta); }
.bc-formband--final{
  background: linear-gradient(160deg, var(--bc-accent-dark) 0%, var(--bc-primary-dark) 100%);
}
.bc-formband--final .bc-formband__form{ border-top: 6px solid var(--bc-accent); }

.bc-form-field{ display: flex; flex-direction: column; gap: .35em; text-align: left; }
.bc-form-field label{
  font-size: var(--bc-fs-small);
  font-weight: 600;
  color: var(--bc-primary);
}
.bc-form-field--required label::after{
  content: " *";
  color: var(--bc-cta-dark);
}
.bc-form-field input,
.bc-form-field select,
.bc-form-field textarea{
  font: inherit;
  padding: .75em .9em;
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius-s);
  background: #fff;
  color: var(--bc-ink);
}
.bc-form-field input:focus,
.bc-form-field select:focus,
.bc-form-field textarea:focus{
  outline: none;
  border-color: var(--bc-accent);
  box-shadow: 0 0 0 3px var(--bc-accent-tint);
}
.bc-formband__form .bc-btn{ width: 100%; margin-top: var(--bc-space-1); }

/* ==========================================================================
   Utility
   ========================================================================== */
.bc-center{ text-align: center; }
.bc-center .bc-prose{ margin-inline: auto; }
.bc-max-w{ max-width: 640px; margin-inline: auto; }
.bc-mt-0{ margin-top: 0; }
.bc-visually-hidden{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}