/* ============================================================
   PLUMBLINE LLC — Brand Stylesheet
   Palette extracted from the Plumbline logo, aesthetic based on
   premium editorial construction reference.
   ------------------------------------------------------------
   BRAND BLUE   #34418F  (logo skyline blue)
   DEEP NAVY    #131B3F  (dark sections)
   BRAND RED    #E23237  (logo plumb bob — CTA only)
   RED DARK     #C4272C  (CTA hover)
   CREAM        #F6F2EA  (page background)
   SAND         #ECE6D9  (alternate background)
   INK          #15181F  (headings / body)
   GRAY         #5D6270  (secondary text)
   Fonts: Archivo (headings) / Inter (body) — Google Fonts
   ============================================================ */

:root {
  --pl-blue: #34418F;
  --pl-navy: #131B3F;
  --pl-navy-2: #1B2452;
  --pl-red: #E23237;
  --pl-red-dark: #C4272C;
  --pl-cream: #F6F2EA;
  --pl-sand: #ECE6D9;
  --pl-ink: #15181F;
  --pl-gray: #5D6270;
  --pl-line: rgba(21, 24, 31, .12);
}

/* ---------- Base ---------- */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--pl-ink);
  background-color: var(--pl-cream);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4, .display-5 {
  font-family: 'Archivo', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.08;
}

.lead { color: var(--pl-gray); }

a { color: var(--pl-blue); }

img { max-width: 100%; }

/* ---------- Utilities ---------- */
.bg-cream { background-color: var(--pl-cream); }
.bg-sand { background-color: var(--pl-sand); }
.bg-navy { background-color: var(--pl-navy); }
.text-navy { color: var(--pl-navy); }
.text-blue { color: var(--pl-blue); }
.text-red { color: var(--pl-red); }
.text-soft { color: var(--pl-gray); }

.section { padding: 5.5rem 0; }
@media (max-width: 767.98px) { .section { padding: 3.5rem 0; } }

/* Editorial section label:  - - ABOUT US - -  */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: 'Archivo', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pl-gray);
}
.section-label::before, .section-label::after {
  content: "- -";
  letter-spacing: .1em;
  color: var(--pl-red);
}
.bg-navy .section-label { color: rgba(255,255,255,.65); }

/* ---------- Buttons ---------- */
.btn { font-weight: 600; letter-spacing: .01em; }

.btn-call {
  background-color: var(--pl-red);
  border: 2px solid var(--pl-red);
  color: #fff;
  border-radius: 50rem;
  padding: .7rem 1.6rem;
}
.btn-call:hover, .btn-call:focus {
  background-color: var(--pl-red-dark);
  border-color: var(--pl-red-dark);
  color: #fff;
}

.btn-outline-ink {
  border: 2px solid var(--pl-ink);
  color: var(--pl-ink);
  border-radius: 50rem;
  padding: .7rem 1.6rem;
}
.btn-outline-ink:hover { background: var(--pl-ink); color: #fff; }

.btn-outline-light-pill {
  border: 2px solid rgba(255,255,255,.7);
  color: #fff;
  border-radius: 50rem;
  padding: .7rem 1.6rem;
}
.btn-outline-light-pill:hover { background: #fff; color: var(--pl-navy); }

.btn-blue {
  background: var(--pl-blue);
  border: 2px solid var(--pl-blue);
  color: #fff;
  border-radius: 50rem;
  padding: .7rem 1.6rem;
}
.btn-blue:hover { background: var(--pl-navy-2); border-color: var(--pl-navy-2); color: #fff; }

/* ---------- Navbar ---------- */
.navbar-pl {
  background-color: rgba(246, 242, 234, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--pl-line);
}
.navbar-pl .navbar-brand img { height: 46px; width: auto; }
.navbar-pl .brand-text { display: flex; flex-direction: column; line-height: 1.08; }
.navbar-pl .brand-name {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 1.22rem;
  letter-spacing: .01em;
  color: var(--pl-blue);
}
.navbar-pl .brand-sub {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pl-gray);
}
.navbar-pl .nav-link {
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: .92rem;
  color: var(--pl-ink);
  margin-inline: .25rem;
}
.navbar-pl .nav-link:hover, .navbar-pl .nav-link.active { color: var(--pl-red); }
.navbar-pl .dropdown-menu {
  border: 1px solid var(--pl-line);
  border-radius: .75rem;
  background: var(--pl-cream);
}
.navbar-pl .dropdown-item { font-weight: 500; }
.navbar-pl .dropdown-item:hover { background: var(--pl-sand); color: var(--pl-red); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--pl-navy);
  color: #fff;
  overflow: hidden;
}
.hero-media {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .45;
}
.hero-inner { position: relative; padding: 8rem 0 7rem; }
@media (max-width: 767.98px) { .hero-inner { padding: 5rem 0 4.5rem; } }
.hero h1 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); font-weight: 800; color: #fff; }
.hero .kicker {
  font-family: 'Archivo', sans-serif;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-size: .8rem;
  color: #fff;
  opacity: .85;
}
.hero .kicker::before, .hero .kicker::after { content: "- -"; color: var(--pl-red); margin-inline: .5rem; }

/* Service ticker chips under hero heading */
.chip {
  display: inline-block;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50rem;
  padding: .35rem 1rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  margin: .25rem .15rem;
}

/* --- Hero variant B: photo at full strength behind a navy scrim gradient --- */
.hero-scrim .hero-media { opacity: 1; }
.hero-scrim .hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(19,27,63,.97) 0%,
    rgba(19,27,63,.92) 38%,
    rgba(19,27,63,.55) 68%,
    rgba(19,27,63,.20) 100%);
}
@media (max-width: 991.98px) {
  .hero-scrim .hero-media::after { background: rgba(19,27,63,.88); }
}

/* --- Hero variant A: split panel — text on solid navy, photo in its own block --- */
.hero-split { background: var(--pl-navy); color: #fff; }
.hero-split .hero-photo {
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 1.5rem 3rem rgba(0,0,0,.35);
  aspect-ratio: 4 / 5;
}
@media (max-width: 991.98px) { .hero-split .hero-photo { aspect-ratio: 16 / 10; margin-top: 2.5rem; } }
.hero-split .hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-split .accent-bar {
  width: 72px; height: 6px; border-radius: 3px;
  background: var(--pl-red); margin-bottom: 1.5rem;
}

/* --- Hero variant C: light editorial — cream background, ink typography --- */
.hero-light { background: var(--pl-cream); color: var(--pl-ink); }
.hero-light h1 { color: var(--pl-ink); font-size: clamp(2.4rem, 5.4vw, 4.2rem); font-weight: 800; }
.hero-light .kicker {
  font-family: 'Archivo', sans-serif;
  letter-spacing: .24em; text-transform: uppercase;
  font-size: .8rem; color: var(--pl-gray);
}
.hero-light .kicker::before, .hero-light .kicker::after { content: "- -"; color: var(--pl-red); margin-inline: .5rem; }
.hero-light .chip { border-color: rgba(21,24,31,.25); color: var(--pl-ink); }
.hero-light .hero-photo {
  border-radius: 1.5rem; overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 1.5rem 3rem rgba(19,27,63,.18);
}
@media (max-width: 991.98px) { .hero-light .hero-photo { aspect-ratio: 16 / 10; margin-top: 2.5rem; } }
.hero-light .hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-light .photo-frame { position: relative; }
.hero-light .photo-frame::before {
  content: "";
  position: absolute; inset: 1.5rem -1.5rem -1.5rem 1.5rem;
  background: var(--pl-blue); border-radius: 1.5rem; z-index: 0;
}
.hero-light .photo-frame .hero-photo { position: relative; z-index: 1; }

/* Page hero (interior pages) */
.page-hero {
  background: var(--pl-navy);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.page-hero .hero-media { opacity: .35; }
.page-hero-inner { position: relative; padding: 6rem 0 4.5rem; }
.page-hero h1 { color: #fff; font-weight: 800; font-size: clamp(2.2rem, 4.5vw, 3.4rem); }

/* ---------- Cards ---------- */
.card-pl {
  background: #fff;
  border: 1px solid var(--pl-line);
  border-radius: 1.25rem;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  height: 100%;
}
.card-pl:hover { transform: translateY(-6px); box-shadow: 0 1.25rem 2.5rem rgba(19,27,63,.12); }
.card-pl .card-img-wrap { aspect-ratio: 4 / 3; overflow: hidden; }
.card-pl .card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card-pl:hover .card-img-wrap img { transform: scale(1.05); }

.card-dark {
  background: var(--pl-navy-2);
  color: #fff;
  border: 0;
  border-radius: 1.25rem;
}
.card-dark h3, .card-dark h4 { color: #fff; }

/* Stat blocks */
.stat-number {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 800;
  color: var(--pl-ink);
}
.stat-label {
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pl-gray);
}

/* Process steps */
.step-number {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--pl-red);
  letter-spacing: .08em;
}

/* Area badges */
.area-badge {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--pl-line);
  border-radius: 50rem;
  padding: .45rem 1.1rem;
  font-weight: 600;
  font-size: .88rem;
  margin: .25rem .15rem;
  color: var(--pl-ink);
}
.bg-navy .area-badge { background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }

/* Portfolio */
.portfolio-card .meta {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pl-gray);
}

/* Cabinet swatch cards */
.swatch-card .card-img-wrap { aspect-ratio: 1 / 1; background: #fff; }
.swatch-card .card-img-wrap img { object-fit: contain; padding: .75rem; }
.swatch-card .card-body { padding: 1rem 1.25rem; }
.swatch-card h3 { font-size: 1.02rem; margin: 0; }

/* Collection banner */
.collection-banner {
  border-radius: 1.5rem;
  background: var(--pl-navy);
  color: #fff;
  padding: 3rem;
  position: relative;
  overflow: hidden;
}
@media (max-width: 767.98px) { .collection-banner { padding: 2rem 1.5rem; } }

/* ---------- CTA band ---------- */
.cta-band { background: var(--pl-navy); color: #fff; }
.cta-band h2 { color: #fff; font-weight: 800; }

/* ---------- Footer ---------- */
.footer {
  background: var(--pl-navy);
  color: rgba(255,255,255,.75);
  padding: 4rem 0 6.5rem;
}
.footer h5 {
  color: #fff; font-size: .85rem;
  letter-spacing: .18em; text-transform: uppercase;
}
.footer a { color: rgba(255,255,255,.75); text-decoration: none; }
.footer a:hover { color: #fff; }
.footer .brand-line { border-top: 1px solid rgba(255,255,255,.15); margin-top: 2.5rem; padding-top: 1.5rem; font-size: .85rem; }

/* ---------- Floating call button (mobile) ---------- */
.call-fab {
  position: fixed;
  right: 1.1rem;
  bottom: calc(1.1rem + env(safe-area-inset-bottom));
  z-index: 1050;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--pl-red);
  color: #fff;
  font-size: 1.7rem;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.3);
  animation: fab-pulse 2.6s infinite;
}
.call-fab:hover, .call-fab:focus { background: var(--pl-red-dark); color: #fff; }
@keyframes fab-pulse {
  0%   { box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.3), 0 0 0 0 rgba(226,50,55,.45); }
  70%  { box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.3), 0 0 0 16px rgba(226,50,55,0); }
  100% { box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.3), 0 0 0 0 rgba(226,50,55,0); }
}
@media (min-width: 992px) { .call-fab { display: none; } .footer { padding-bottom: 4rem; } }

/* ---------- Misc ---------- */
.rounded-2xl { border-radius: 1.5rem; }
.object-cover { object-fit: cover; width: 100%; height: 100%; }
.ratio-photo { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 1.5rem; }
.ratio-wide { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 1.5rem; }
.quote {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.25;
}
.map-embed { border: 0; width: 100%; height: 380px; border-radius: 1.5rem; }

/* ---------- Anchor offset (sticky navbar) ---------- */
[id] { scroll-margin-top: 96px; }

/* ---------- Lightbox (click para ampliar + zoom) ---------- */
.zoomable { cursor: zoom-in; }
.pl-lightbox {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(10, 14, 32, .96);
  display: none;
  align-items: center; justify-content: center;
  touch-action: none;
}
.pl-lightbox.open { display: flex; }
.pl-lightbox img {
  max-width: 92vw; max-height: 88vh;
  transform-origin: center center;
  transition: transform .15s ease-out;
  user-select: none; -webkit-user-drag: none;
  cursor: grab;
}
.pl-lightbox img.dragging { cursor: grabbing; transition: none; }
.pl-lightbox .lb-close {
  position: absolute; top: 1rem; right: 1.25rem;
  background: none; border: 0; color: #fff;
  font-size: 2.2rem; line-height: 1; cursor: pointer; z-index: 2;
}
.pl-lightbox .lb-zoom {
  position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: .5rem; z-index: 2;
}
.pl-lightbox .lb-zoom button {
  background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.35);
  border-radius: 50rem; width: 44px; height: 44px; font-size: 1.3rem; cursor: pointer;
}
.pl-lightbox .lb-zoom button:hover { background: rgba(255,255,255,.3); }
.pl-lightbox .lb-caption {
  position: absolute; top: 1.25rem; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.8); font-size: .9rem; letter-spacing: .06em; text-transform: uppercase;
  max-width: 70vw; text-align: center;
}
.pl-lightbox .lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,255,255,.35); border-radius: 50%;
  width: 52px; height: 52px; font-size: 1.4rem; cursor: pointer; z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
.pl-lightbox .lb-nav:hover { background: var(--pl-red); border-color: var(--pl-red); }
.pl-lightbox .lb-prev { left: 1rem; }
.pl-lightbox .lb-next { right: 1rem; }
@media (max-width: 767.98px) {
  .pl-lightbox .lb-nav { width: 42px; height: 42px; font-size: 1.1rem; }
  .pl-lightbox .lb-prev { left: .4rem; }
  .pl-lightbox .lb-next { right: .4rem; }
}
.pl-lightbox .lb-counter {
  position: absolute; bottom: 1.5rem; right: 1.5rem;
  color: rgba(255,255,255,.7); font-size: .85rem; letter-spacing: .08em; z-index: 2;
}

/* ---------- Before / After slider ---------- */
.ba-slider {
  position: relative; overflow: hidden;
  border-radius: 1.25rem;
  aspect-ratio: 4 / 3;
  background: var(--pl-navy);
  user-select: none;
}
.ba-slider img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none; -webkit-user-drag: none;
}
.ba-slider .ba-after { clip-path: inset(0 0 0 50%); }
.ba-slider .ba-handle {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 3px; background: #fff; z-index: 2; transform: translateX(-50%);
  box-shadow: 0 0 12px rgba(0,0,0,.5);
}
.ba-slider .ba-handle::after {
  content: "\2194";
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--pl-red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 700;
}
.ba-slider input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: ew-resize; z-index: 3; margin: 0;
}
.ba-badge {
  position: absolute; top: .9rem; z-index: 2;
  background: rgba(19,27,63,.85); color: #fff;
  font-family: 'Archivo', sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .35rem .8rem; border-radius: 50rem;
}
.ba-badge.before { left: .9rem; }
.ba-badge.after { right: .9rem; background: var(--pl-red); }

/* ---------- Hood / photo carousels ---------- */
.hood-carousel .carousel-inner { border-radius: 1.25rem; background: #fff; border: 1px solid var(--pl-line); }
.hood-carousel .carousel-item img {
  width: 100%; height: 480px; object-fit: contain; padding: 1.5rem;
}
@media (max-width: 767.98px) { .hood-carousel .carousel-item img { height: 340px; } }
.hood-carousel .carousel-caption {
  position: static; padding: 0 0 1.25rem; color: var(--pl-ink);
}
.hood-carousel .carousel-caption h5 {
  font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; margin: 0;
}
.hood-carousel .carousel-control-prev-icon,
.hood-carousel .carousel-control-next-icon { filter: invert(1) grayscale(100); }
.photo-carousel .carousel-inner { border-radius: 1.25rem; }
.photo-carousel .carousel-item img { width: 100%; height: 520px; object-fit: cover; }
@media (max-width: 767.98px) { .photo-carousel .carousel-item img { height: 320px; } }

/* Back-to-menu pill */
.btn-back {
  border: 2px solid var(--pl-line); color: var(--pl-gray);
  border-radius: 50rem; padding: .45rem 1.2rem; font-weight: 600; font-size: .9rem;
  background: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem;
}
.btn-back:hover { border-color: var(--pl-ink); color: var(--pl-ink); }