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

:root{
  --navy:#1B2540;
  --navy-dk:#10192C;
  --red:#BF4A1F;
  --red-dk:#953A18;
  --concrete:#8C8A80;
  --concrete-lt:#E1E3E0;
  --bg-alt:#F1ECDE;
}

body{
  font-family:'Poppins', sans-serif;
  color:#23221F;
  background:#FAF8F2;
}
h1,h2,h3,h4,.navbar-brand,.card-title{
  font-family:'Poppins', sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.01em;
}
.mono{ font-family:'JetBrains Mono', monospace; }

/* ---------- brand color utilities (kept separate from Bootstrap's theme so the palette stays exact) ---------- */
.bg-brand-navy{ background-color:var(--navy) !important; }
.bg-brand-navy-dk{ background-color:var(--navy-dk) !important; }
.bg-brand-red{ background-color:var(--red) !important; }
.bg-brand-sand{ background-color:var(--concrete-lt) !important; }
.text-brand-navy{ color:var(--navy) !important; }
.text-brand-red{ color:var(--red) !important; }
.border-brand{ border-color:rgba(34,36,42,0.12) !important; }

.btn-brand{ background-color:var(--red); border-color:var(--red); color:#fff; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; font-size:0.8rem; }
.btn-brand:hover{ background-color:var(--red-dk); border-color:var(--red-dk); color:#fff; }
.btn-outline-brand{ border:1.5px solid #22242A; color:#22242A; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; font-size:0.8rem; }
.btn-outline-brand:hover{ background:#22242A; color:#fff; }
.btn-outline-brand-light{ border:1.5px solid #fff; color:#fff; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; font-size:0.8rem; }
.btn-outline-brand-light:hover{ background:#fff; color:#22242A; }

.eyebrow{ font-family:'JetBrains Mono',monospace; font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--red); font-weight:600; }
.eyebrow::before{ content:''; display:inline-block; width:26px; height:1px; background:var(--red); margin-right:8px; vertical-align:middle; }

/* ---------- mini topbar (sits above main navbar) ---------- */
.topbar{
  background:var(--navy-dk);
  color:rgba(247,246,242,0.8);
  font-family:'JetBrains Mono',monospace;
  font-size:13.5px;
  letter-spacing:0.03em;
  padding-top:12px;
  padding-bottom:12px;
}
.topbar a{ color:rgba(247,246,242,0.8); text-decoration:none; transition:color .15s ease; }
.topbar a:hover{ color:#fff; }
.topbar .topbar-cta{ color:var(--red); font-weight:600; text-transform:uppercase; }
.topbar .topbar-cta:hover{ color:#fff; }
.topbar .divider{ width:1px; height:14px; background:rgba(247,246,242,0.22); display:inline-block; }
@media(max-width:576px){ .topbar{ font-size:11.5px; padding-top:10px; padding-bottom:10px; } }

/* ---------- scroll reveal (fires once, on first intersection) ---------- */
.reveal,
.reveal-scale{
  opacity:0;
  transition:opacity 1.6s cubic-bezier(.22,1,.36,1), transform 1.6s cubic-bezier(.22,1,.36,1);
  will-change:opacity, transform;
}
.reveal{ transform:translateY(28px); }
.reveal-scale{ transform:scale(0.94); }
.reveal.is-visible,
.reveal-scale.is-visible{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-scale{ opacity:1; transform:none; transition:none; }
}

/* ---------- navbar ---------- */
.navbar-brand img{ height:52px; width:auto; }
.navbar .brand-sub{ font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--red); letter-spacing:0.1em; text-transform:uppercase; display:block; }
.navbar-nav .nav-link{ font-size:0.8rem; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:#5B5D63 !important; }
.navbar-nav .nav-link.active, .navbar-nav .nav-link:hover{ color:var(--red) !important; }

/* ---------- hero carousel ---------- */
#heroCarousel{ height:82vh; min-height:600px; max-height:820px; overflow:hidden; }
#heroCarousel .carousel-inner, #heroCarousel .carousel-item{ height:100%; }
#heroCarousel .carousel-item img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1);
}
#heroCarousel .carousel-item.active img{ animation:kenburns 7s ease-out forwards; }
@keyframes kenburns{ from{ transform:scale(1); } to{ transform:scale(1.12); } }

.hero-scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(16,25,44,0.84) 0%, rgba(16,25,44,0.5) 55%, rgba(16,25,44,0.15) 100%); }

.hero-caption{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center;
  text-align:left;
  padding-top:56px; /* clears the sticky navbar's visual weight */
  padding-bottom:70px; /* clears the thumbnail strip at the bottom */
  overflow-y:auto; /* if content is ever taller than the slide, it scrolls instead of clipping */
}
.hero-caption .inner{
  max-width:860px;
  width:100%;
  opacity:0;
  transform:translateY(20px);
  background:rgba(255,255,255,0.95);
  padding:36px 40px;
  border-radius:10px;
  box-shadow:0 24px 60px rgba(16,25,44,0.3);
}
.carousel-item.active .hero-caption .inner{ animation:heroIn .7s cubic-bezier(.22,1,.36,1) forwards; animation-delay:.2s; }
@keyframes heroIn{ to{ opacity:1; transform:translateY(0); } }
.hero-caption .eyebrow{ line-height:1.4; color:var(--red); }
.hero-caption h1{ font-size:clamp(28px,5vw,52px); color:var(--navy); max-width:28ch; line-height:1.12; margin-bottom:0.6em; }
.hero-caption p{ color:#4A4D55; max-width:58ch; font-size:clamp(0.9rem,1.6vw,1rem); line-height:1.5; }
.hero-caption .btn-outline-brand-light{ border:1.5px solid #22242A; color:#22242A; }
.hero-caption .btn-outline-brand-light:hover{ background:#22242A; color:#fff; }

/* ---------- hero headline: word-by-word reveal ---------- */
.hero-word{
  display:inline-block;
  opacity:0;
  transform:translateY(22px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
  will-change:opacity, transform;
}
.hero-word.is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .hero-word{ opacity:1; transform:none; transition:none; }
}

@media(max-width:576px){
  #heroCarousel{ height:auto; min-height:520px; }
  .hero-caption{ padding-top:32px; padding-bottom:64px; }
  .hero-caption .inner{ padding:24px 24px; }
  .hero-caption p{ display:none; } /* keep the mobile hero tight: eyebrow + headline + CTAs only */
}

.hero-thumbs{ position:absolute; bottom:14px; right:20px; z-index:5; display:flex; gap:8px; }
.hero-thumb{ width:64px; height:44px; border-radius:2px; overflow:hidden; cursor:pointer; border:2px solid rgba(255,255,255,0.35); opacity:0.65; padding:0; }
.hero-thumb img{ width:100%; height:100%; object-fit:cover; }
.hero-thumb.active{ opacity:1; border-color:var(--red); }
@media(max-width:576px){ .hero-thumbs{ left:0; right:0; justify-content:center; } .hero-thumb{ width:44px; height:32px; } }

/* ---------- product cards ---------- */
.product-card{ cursor:pointer; transition:box-shadow .15s ease, transform .15s ease; border:1px solid rgba(34,36,42,0.1); }
.product-card:hover{ box-shadow:0 10px 24px rgba(16,25,44,0.12); transform:translateY(-2px); }
.gallery-hint{ font-size:11.5px; color:var(--red); font-weight:600; text-transform:uppercase; letter-spacing:0.05em; }
.spec-pill{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:#5B5D63; border:1px solid rgba(34,36,42,0.15); padding:2px 8px; border-radius:100px; display:inline-block; }

/* ---------- filter buttons ---------- */
.filter-btn.active{ background:var(--navy); border-color:var(--navy); color:#fff; }

/* ---------- stat / grade strip ---------- */
.grade-strip .item{ border-left:1px solid rgba(247,246,242,0.18); }
.grade-strip .item:first-child{ border-left:none; }
.grade-strip .code{ font-family:'JetBrains Mono',monospace; font-weight:600; font-size:13.5px; color:var(--red); }

.stat-num{ font-family:'Poppins',sans-serif; font-weight:700; font-size:2.1rem; color:var(--red); }

/* ---------- process ---------- */
.process-step{ border-right:1px solid rgba(247,246,242,0.18); }
@media(max-width:767px){ .process-step{ border-right:none; border-bottom:1px solid rgba(247,246,242,0.18); } }
.process-step .idx{ font-family:'JetBrains Mono',monospace; color:var(--red); font-size:0.78rem; }

/* ---------- gallery modal ---------- */
#galleryModal .modal-content{ background:#141C4D; }
#galleryCarousel .carousel-item img{ height:56vh; object-fit:cover; border-radius:4px; }
.gallery-thumb{ width:76px; height:54px; border:2px solid transparent; opacity:0.6; padding:0; border-radius:2px; overflow:hidden; cursor:pointer; }
.gallery-thumb img{ width:100%; height:100%; object-fit:cover; }
.gallery-thumb.active{ opacity:1; border-color:var(--red); }

/* ---------- misc ---------- */
.split-art{ border-radius:4px; overflow:hidden; }
.split-art img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.page-hero{ background:var(--bg-alt); padding:64px 0 48px; }
footer a{ color:rgba(247,246,242,0.75); text-decoration:none; }
footer a:hover{ color:#fff; }
footer h6{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--red); }
.project-row{ border-bottom:1px solid rgba(34,36,42,0.1); padding:18px 0; }

/* ---------- FAQ accordion ---------- */
.accordion-item{
  border:1px solid rgba(34,36,42,0.1);
  border-radius:4px !important;
  margin-bottom:10px;
  overflow:hidden;
}
.accordion-item:last-child{ margin-bottom:0; }
.accordion-button{
  font-family:'Poppins',sans-serif;
  font-weight:600;
  font-size:0.95rem;
  color:var(--navy);
  background:#fff;
  box-shadow:none !important;
}
.accordion-button:not(.collapsed){
  color:var(--red);
  background:var(--concrete-lt);
}
.accordion-button:focus{ box-shadow:none; border-color:rgba(34,36,42,0.1); }
.accordion-button::after{ filter:none; }
.accordion-body{ font-size:0.92rem; line-height:1.55; }