/*
 * ═══════════════════════════════════════════════════════════════════════
 *  J BUILD CO. — DESIGN SYSTEM LIBRARY  v1.0
 *  Luxury Builders & Craftsmen · Est. 2005
 * ═══════════════════════════════════════════════════════════════════════
 *
 *  HOW TO USE:
 *  1. Add this to any new page: <link rel="stylesheet" href="jbc-design.css"/>
 *  2. Add fonts:  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Instrument+Sans:wght@300;400;500&family=DM+Mono:wght@300;400&display=swap" rel="stylesheet"/>
 *  3. Copy the nav + drawer HTML from any existing page — it just works.
 *  4. Use the component classes below to build any section.
 *
 *  TABLE OF CONTENTS:
 *  01. Design Tokens (CSS Variables)
 *  02. Reset & Base
 *  03. Typography
 *  04. Navigation & Burger Menu
 *  05. Slide-In Drawer
 *  06. Hero Banner
 *  07. Section Utilities
 *  08. Buttons
 *  09. Cards & Testimonials
 *  10. Stats Bar
 *  11. FAQ Accordion
 *  12. Forms & Popup
 *  13. Portfolio / Image Grid
 *  14. Footer
 *  15. Scroll Reveal Animations
 *  16. Dark Sections
 *  17. Responsive Breakpoints
 * ═══════════════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════════════════
   01. DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand Colors ── */
  --jbc-primary:   #BA8A39;   /* Antique gold — primary accent, buttons, labels  */
  --jbc-primary2:  #D4A855;   /* Light gold — hover states                       */
  --jbc-primary3:  #9D7221;   /* Deep gold — active / pressed                    */
  --jbc-dark:      #4E472B;   /* Dark olive-bronze — headings, dark CTA sections */
  --jbc-dark2:     #635A35;   /* Medium olive — hover on dark                    */
  --jbc-dark3:     #3A3420;   /* Deepest olive — shadows, borders                */

  /* ── Backgrounds ── */
  --jbc-paper:     #F5F0E6;   /* Primary background — warm parchment             */
  --jbc-warm:      #EDE6D4;   /* Secondary background — slightly deeper parchment*/
  --jbc-cream:     #F8F4EE;   /* Card / panel background                         */
  --jbc-dark-bg:   #1C1A0F;   /* Dark section background — near-black olive      */
  --jbc-dark-bg2:  #252210;   /* Slightly lighter dark                           */

  /* ── Text ── */
  --jbc-ink:       #1E1C10;   /* Primary text — warm near-black                  */
  --jbc-dust:      #7A7268;   /* Secondary text — warm grey                      */
  --jbc-muted:     #A09890;   /* Muted / placeholder text                        */
  --jbc-white:     #FFFFFF;

  /* ── Borders & Rules ── */
  --jbc-stone:     #C8BFB0;   /* Dividers on light backgrounds                   */
  --jbc-rule:      rgba(78,71,43,.15);  /* Light rule                            */
  --jbc-rule-dark: rgba(255,255,255,.07); /* Rule on dark backgrounds             */
  --jbc-gold-rule: rgba(186,138,57,.25);  /* Gold-tinted rule                    */

  /* ── Shadows ── */
  --jbc-shadow-sm: 0 2px 12px rgba(30,28,16,.08);
  --jbc-shadow-md: 0 8px 32px rgba(30,28,16,.12);
  --jbc-shadow-lg: 0 20px 60px rgba(30,28,16,.18);
  --jbc-shadow-xl: 0 32px 80px rgba(30,28,16,.22);

  /* ── Spacing ── */
  --jbc-section:   100px;     /* Standard section vertical padding               */
  --jbc-section-sm: 64px;     /* Compact section padding                         */
  --jbc-gutter:    80px;      /* Horizontal content gutter                       */
  --jbc-gutter-sm: 40px;
  --jbc-gutter-xs: 20px;

  /* ── Typography ── */
  --font-serif:    'Cormorant Garamond', Georgia, serif;
  --font-sans:     'Instrument Sans', system-ui, sans-serif;
  --font-mono:     'DM Mono', 'Courier New', monospace;

  /* ── Transitions ── */
  --jbc-ease:      .25s ease;
  --jbc-ease-slow: .45s cubic-bezier(.77,0,.175,1);
  --jbc-ease-reveal: .85s ease;

  /* ── Nav ── */
  --jbc-nav-h:     64px;
  --jbc-drawer-w:  300px;
  --jbc-z-nav:     800;
  --jbc-z-drawer:  1500;
  --jbc-z-popup:   2000;
  --jbc-z-cursor:  9999;
}


/* ═══════════════════════════════════════════════════════════════════════
   02. RESET & BASE
   ═══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--jbc-paper);
  color: var(--jbc-ink);
  overflow-x: hidden;
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
ul, ol { list-style: none; }

/* ── Global paragraph style — single source of truth for all <p> font/size site-wide ── */
p { font-family: 'Open Sans', sans-serif; font-size: 14px; }


/* ═══════════════════════════════════════════════════════════════════════
   03. TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Display Headings (Cormorant Garamond) ── */
.jbc-h1 {
  font-family: var(--font-serif);
  font-size: clamp(52px, 8vw, 108px);
  font-weight: 300;
  line-height: .93;
  letter-spacing: -.02em;
  color: var(--jbc-white);
}
.jbc-h2 {
  font-family: var(--font-serif);
  font-size: clamp(34px, 4.5vw, 60px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--jbc-ink);
}
.jbc-h3 {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--jbc-ink);
}
.jbc-h4 {
  font-family: var(--font-serif);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 400;
  color: var(--jbc-ink);
}
/* Gold italic emphasis inside headings */
.jbc-h1 em, .jbc-h2 em, .jbc-h3 em { font-style: italic; color: var(--jbc-primary); }
/* White heading variant (for dark sections) */
.jbc-h2--white { color: var(--jbc-white); }
.jbc-h2--white em { color: var(--jbc-primary2); }

/* ── Body Text ── */
.jbc-body {
  font-size: 15px;
  line-height: 2;
  font-weight: 300;
  color: var(--jbc-dust);
}
.jbc-body--sm { font-size: 13px; line-height: 1.8; }
.jbc-body--lg { font-size: 17px; line-height: 2; }

/* ── Section Eyebrow Label (DM Mono) ── */
.jbc-eyebrow {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--jbc-primary);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.jbc-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--jbc-primary); flex-shrink: 0; }
.jbc-eyebrow::after  { content: ''; flex: 0 0 24px; height: 1px; background: var(--jbc-primary); }
/* One-sided (left line only) */
.jbc-eyebrow--left::after { display: none; }
/* Dark section variant */
.jbc-eyebrow--dark { color: rgba(186,138,57,.75); }
.jbc-eyebrow--dark::before, .jbc-eyebrow--dark::after { background: rgba(186,138,57,.75); }

/* ── Mono Labels ── */
.jbc-label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--jbc-dust);
}
.jbc-label--gold { color: var(--jbc-primary); }

/* Lazy-loaded background-image tiles (Performance > Lazy Load) — placeholder
   fill before js/jbc-lazy-bg.js swaps in the real image on scroll-into-view. */
.jbc-lazy-bg { background-color: var(--jbc-stone); }

.jbc-empty-state {
  padding: 60px 24px;
  text-align: center;
  color: var(--jbc-dust);
  font-family: var(--font-sans);
  font-size: 14px;
  grid-column: 1 / -1;
}

/* ── Blog: Sidebar (shared by archive + single post — see inc/blog-functions.php jbc_blog_sidebar()) ── */
.jbc-blog-layout {
  display: grid;
  grid-template-columns: 1fr var(--jbc-sidebar-width, 300px);
  gap: 56px;
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--jbc-gutter);
}
.jbc-blog-layout--left { grid-template-columns: var(--jbc-sidebar-width, 300px) 1fr; }
.jbc-blog-layout--left .jbc-blog-sidebar { order: -1; }
.jbc-blog-layout .posts-sec,
.jbc-blog-layout .article-col { padding-left: 0; padding-right: 0; max-width: none !important; }

.jbc-blog-sidebar { padding-top: 8px; }
.jbc-sidebar-widget { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--jbc-rule); }
.jbc-sidebar-widget:last-child { border-bottom: none; margin-bottom: 0; }
.jbc-sidebar-widget-title { font-family: var(--font-serif); font-size: 18px; font-weight: 400; color: var(--jbc-ink); margin-bottom: 16px; }
.jbc-sidebar-widget ul { list-style: none; }
.jbc-sidebar-widget li { margin-bottom: 10px; }
.jbc-sidebar-widget a { color: var(--jbc-ink); text-decoration: none; font-size: 14px; }
.jbc-sidebar-widget a:hover { color: var(--jbc-primary); }
.jbc-sidebar-widget input[type="search"],
.jbc-sidebar-widget input[type="text"] { width: 100%; padding: 10px 12px; border: 1px solid var(--jbc-stone); background: transparent; font-family: var(--font-sans); font-size: 14px; }

@media (max-width: 1024px) {
  .jbc-blog-layout,
  .jbc-blog-layout--left { grid-template-columns: 1fr; }
  .jbc-blog-layout--left .jbc-blog-sidebar { order: 0; }
}

/* ── Blog: Pagination ── */
.jbc-blog-pagination { display: flex; justify-content: center; padding: 48px var(--jbc-gutter) 0; }
.jbc-blog-pagination ul { list-style: none; display: flex; gap: 8px; }
.jbc-blog-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 8px;
  font-family: var(--font-sans); font-size: 13px; color: var(--jbc-ink);
  text-decoration: none; border: 1px solid var(--jbc-stone); transition: all .2s;
}
.jbc-blog-pagination .page-numbers.current { background: var(--jbc-primary); border-color: var(--jbc-primary); color: #fff; }
.jbc-blog-pagination .page-numbers:hover:not(.current) { border-color: var(--jbc-primary); color: var(--jbc-primary); }
.jbc-blog-pagination__prevnext { display: flex; justify-content: space-between; width: 100%; }
.jbc-blog-pagination__prevnext a { font-family: var(--font-sans); font-size: 13px; color: var(--jbc-ink); text-decoration: none; }
.jbc-blog-pagination__prevnext a:hover { color: var(--jbc-primary); }


/* ═══════════════════════════════════════════════════════════════════════
   03B. TOP BAR / ANNOUNCEMENT BAR  (Header Builder)
   ═══════════════════════════════════════════════════════════════════════ */
#jbc-announcement {
  position: relative;
  z-index: calc(var(--jbc-z-nav) + 1);
  background: var(--jbc-dark);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: .04em;
  text-align: center;
  padding: 10px 44px 10px 16px;
}
#jbc-announcement a, #jbc-announcement span { color: #fff; text-decoration: none; }
#jbc-announcement a:hover { text-decoration: underline; }
.jbc-announcement-close {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none; color: rgba(255,255,255,.6);
  cursor: pointer; font-size: 11px; padding: 4px;
}
.jbc-announcement-close:hover { color: #fff; }

#jbc-topbar {
  position: relative;
  z-index: calc(var(--jbc-z-nav) + 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--jbc-ink);
  color: rgba(255,255,255,.7);
  font-family: var(--font-sans);
  font-size: 12px;
  padding: 8px 48px;
}
.jbc-topbar-contact { display: flex; gap: 20px; }
.jbc-topbar-contact a, .jbc-topbar-social a {
  color: rgba(255,255,255,.7);
  text-decoration: none;
  transition: color .2s;
}
.jbc-topbar-contact a:hover, .jbc-topbar-social a:hover { color: var(--jbc-primary); }
.jbc-topbar-social { display: flex; gap: 16px; }
@media (max-width: 768px) {
  #jbc-topbar { padding: 8px 20px; flex-wrap: wrap; gap: 6px; justify-content: center; }
  #jbc-announcement { padding: 10px 40px 10px 12px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   04. NAVIGATION
   ═══════════════════════════════════════════════════════════════════════ */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--jbc-z-nav);
  height: var(--jbc-nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  transition: background var(--jbc-ease), border-color var(--jbc-ease);
}
nav.solid {
  background: rgba(245,240,230,.97);
  border-bottom: 1px solid var(--jbc-rule);
  backdrop-filter: blur(14px);
  box-shadow: var(--jbc-shadow-sm);
}

/* Logo in nav */
.jbc-nav-logo { display: flex; align-items: center; height: 100%; text-decoration: none; }
.jbc-nav-logo img { height: 44px; width: auto; object-fit: contain; display: block; }

/* All nav link lists HIDDEN — burger only */
.jbc-nav-links,
.nl, .nlinks, .nav-links, nav ul,
.nav-cta, .ncta { display: none !important; }

/* ── Burger Button ── */
.jbc-burger,
.burger, .hbtn {
  display: flex !important;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 6px;
  z-index: 900;
}
.jbc-burger span,
.burger span,
.hbtn span {
  width: 24px;
  height: 1.5px;
  background: var(--jbc-ink);
  display: block;
  transition: background var(--jbc-ease), transform var(--jbc-ease);
}
/* On dark hero (before scroll) — white lines */
.jbc-burger--light span { background: rgba(255,255,255,.9); }

/* ── Logo in nav (legacy selectors) ── */
.logo-img { height: 44px !important; width: auto !important; object-fit: contain !important; display: block !important; }
.logo { display: flex !important; align-items: center !important; height: 100% !important; }

/* ── Logo variants (Header Builder: Mobile Logo / Sticky Logo) ── */
.logo .jbc-mobile-logo, .logo .jbc-sticky-logo { display: none !important; }
@media (max-width: 768px) {
  .logo .jbc-default-logo { display: none !important; }
  .logo .jbc-mobile-logo { display: block !important; }
}
#nav.solid .logo .jbc-default-logo,
#nav.solid .logo .jbc-mobile-logo { display: none !important; }
#nav.solid .logo .jbc-sticky-logo { display: block !important; }


/* ═══════════════════════════════════════════════════════════════════════
   05. SLIDE-IN DRAWER
   ═══════════════════════════════════════════════════════════════════════ */
.jbc-drawer,
.draw, .drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: var(--jbc-drawer-w) !important;
  max-width: 85vw !important;
  z-index: var(--jbc-z-drawer) !important;
  background: var(--jbc-paper) !important;
  transform: translateX(100%) !important;
  transition: transform var(--jbc-ease-slow) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 80px 44px !important;
  box-shadow: -8px 0 48px rgba(30,28,16,.2) !important;
  pointer-events: none !important;
}
.jbc-drawer.open,
.draw.open, .drawer.open {
  transform: translateX(0) !important;
  pointer-events: all !important;
}

/* Drawer nav links */
.jbc-drawer ul,
.draw ul, .drawer ul {
  display: flex !important;
  flex-direction: column !important;
  list-style: none !important;
}
.jbc-drawer li,
.draw li, .drawer li {
  border-bottom: 1px solid var(--jbc-rule) !important;
  display: block !important;
}
.jbc-drawer a,
.draw a, .drawer a {
  display: block !important;
  padding: 18px 0 !important;
  font-family: var(--font-serif) !important;
  font-size: 26px !important;
  font-weight: 400 !important;
  color: var(--jbc-ink) !important;
  text-decoration: none !important;
  transition: color var(--jbc-ease), padding-left var(--jbc-ease) !important;
}
.jbc-drawer a:hover,
.draw a:hover, .drawer a:hover {
  color: var(--jbc-primary) !important;
  padding-left: 8px !important;
}

/* Close button */
.jbc-drawer-close,
.dc, .d-close {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  background: none !important;
  border: 1px solid var(--jbc-rule) !important;
  width: 36px !important;
  height: 36px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  color: var(--jbc-dust) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all var(--jbc-ease) !important;
}
.jbc-drawer-close:hover,
.dc:hover, .d-close:hover {
  background: var(--jbc-ink) !important;
  color: #fff !important;
  border-color: var(--jbc-ink) !important;
}

/* Social links in drawer */
.jbc-drawer-social,
.dsoc, .d-soc {
  display: flex !important;
  gap: 14px !important;
  margin-top: 28px !important;
  flex-wrap: wrap !important;
}
.jbc-drawer-social a,
.dsoc a, .d-soc a {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--jbc-dust) !important;
  text-decoration: none !important;
  transition: color var(--jbc-ease) !important;
}
.jbc-drawer-social a:hover,
.dsoc a:hover, .d-soc a:hover { color: var(--jbc-primary) !important; }


/* ═══════════════════════════════════════════════════════════════════════
   06. HERO BANNER
   ═══════════════════════════════════════════════════════════════════════ */
.jbc-hero {
  min-height: 72vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  margin-top: var(--jbc-nav-h);
}
.jbc-hero--full { min-height: 88vh; }
.jbc-hero--short { min-height: 52vh; }

/* Background image with Ken Burns */
.jbc-hero__bg {
  position: absolute;
  inset: -4%;
  background-size: cover;
  background-position: center;
  animation: jbc-kb 18s ease-in-out infinite alternate;
}
@keyframes jbc-kb { from { background-size: 108%; } to { background-size: 116%; } }

/* Gradient overlay */
.jbc-hero__dim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(30,28,16,.42) 0%,
    rgba(30,28,16,.08) 45%,
    rgba(30,28,16,.75) 100%
  );
}

/* Content */
.jbc-hero__content {
  position: relative;
  z-index: 2;
  padding: 0 var(--jbc-gutter) 60px;
  width: 100%;
}
.jbc-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--jbc-primary);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.jbc-hero__eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--jbc-primary); }
.jbc-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(52px, 8vw, 108px);
  font-weight: 300;
  color: #fff;
  line-height: .93;
  letter-spacing: -.02em;
}
.jbc-hero__title em { font-style: italic; color: rgba(255,255,255,.45); }

/* Breadcrumb */
.jbc-hero__bc {
  position: absolute;
  top: 24px; right: 48px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
}
.jbc-hero__bc a, .jbc-hero__bc span {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  text-decoration: none;
  transition: color var(--jbc-ease);
}
.jbc-hero__bc a:hover { color: rgba(255,255,255,.7); }
.jbc-hero__bc .sep { color: rgba(255,255,255,.18); }

/* Scroll line */
.jbc-hero__scroll {
  position: absolute;
  bottom: 32px; right: 48px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.jbc-hero__scroll span {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .45em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  writing-mode: vertical-lr;
}
.jbc-hero__scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,.3), transparent);
  position: relative; overflow: hidden;
}
.jbc-hero__scroll-line::after {
  content: '';
  position: absolute;
  top: -100%; left: 0; right: 0; height: 100%;
  background: var(--jbc-primary);
  animation: jbc-drip 2s ease-in-out infinite;
}
@keyframes jbc-drip { 0% { top: -100%; } 100% { top: 100%; } }


/* ═══════════════════════════════════════════════════════════════════════
   07. SECTION UTILITIES
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Section Wrappers ── */
.jbc-section {
  padding: var(--jbc-section) var(--jbc-gutter);
  background: var(--jbc-paper);
}
.jbc-section--warm  { background: var(--jbc-warm); }
.jbc-section--cream { background: var(--jbc-cream); }
.jbc-section--dark  { background: var(--jbc-dark-bg); }
.jbc-section--forest { background: var(--jbc-dark); }
.jbc-section--sm    { padding: var(--jbc-section-sm) var(--jbc-gutter); }

/* ── Max Width Container ── */
.jbc-container {
  max-width: 1280px;
  margin: 0 auto;
}

/* ── Grid Layouts ── */
.jbc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.jbc-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; }
.jbc-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; }
.jbc-grid-6 { display: grid; grid-template-columns: repeat(6,1fr); gap: 2px; }
.jbc-grid--gap { gap: 24px; }
.jbc-grid--gap-lg { gap: 56px; }

/* ── CTA Band (full-width colored strip) ── */
.jbc-cta-band {
  background: var(--jbc-dark);
  padding: 80px var(--jbc-gutter);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 48px;
}
.jbc-cta-band h2 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 300;
  color: #fff;
  line-height: 1.1;
}
.jbc-cta-band h2 em { font-style: italic; color: var(--jbc-primary); }
.jbc-cta-band__btns { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }

/* ── Gold separator diamond ── */
.jbc-diamond {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--jbc-primary);
  margin: 12px 0;
}
.jbc-diamond::before, .jbc-diamond::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--jbc-primary);
  opacity: .35;
}


/* ═══════════════════════════════════════════════════════════════════════
   08. BUTTONS
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Primary: Dark olive fill ── */
.jbc-btn {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 14px 32px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background var(--jbc-ease), transform var(--jbc-ease);
  line-height: 1;
}
.jbc-btn--primary {
  background: var(--jbc-dark);
  color: #fff;
}
.jbc-btn--primary:hover { background: var(--jbc-dark2); transform: translateY(-1px); }

/* ── Gold fill ── */
.jbc-btn--gold {
  background: var(--jbc-primary);
  color: var(--jbc-ink);
  font-weight: 600;
}
.jbc-btn--gold:hover { background: var(--jbc-primary2); transform: translateY(-1px); }

/* ── Outline (dark border) ── */
.jbc-btn--outline {
  background: transparent;
  color: var(--jbc-ink);
  border: 1px solid var(--jbc-stone);
  padding: 12px 28px;
}
.jbc-btn--outline:hover { border-color: var(--jbc-dark); color: var(--jbc-dark); }

/* ── Outline white (for dark backgrounds) ── */
.jbc-btn--outline-white {
  background: transparent;
  color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.25);
  padding: 12px 28px;
}
.jbc-btn--outline-white:hover { border-color: rgba(255,255,255,.65); color: #fff; }

/* ── Full width ── */
.jbc-btn--full { width: 100%; text-align: center; padding: 16px 32px; }

/* ── Arrow link ── */
.jbc-link {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--jbc-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap var(--jbc-ease);
}
.jbc-link:hover { gap: 14px; }
.jbc-link::after { content: '→'; }
.jbc-link--dark { color: var(--jbc-ink); }
.jbc-link--dark:hover { color: var(--jbc-primary); }


/* ═══════════════════════════════════════════════════════════════════════
   09. CARDS & TESTIMONIALS
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Service Card ── */
.jbc-card {
  background: var(--jbc-paper);
  padding: 44px 36px;
  position: relative;
  overflow: hidden;
  transition: background var(--jbc-ease);
  cursor: default;
}
.jbc-card:hover { background: var(--jbc-warm); }
.jbc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--jbc-primary), var(--jbc-dark));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--jbc-ease);
}
.jbc-card:hover::before { transform: scaleX(1); }
.jbc-card__num {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .3em;
  color: var(--jbc-stone);
  display: block;
  margin-bottom: 24px;
  transition: color var(--jbc-ease);
}
.jbc-card:hover .jbc-card__num { color: var(--jbc-primary); }
.jbc-card h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--jbc-ink);
  margin-bottom: 12px;
  line-height: 1.2;
}
.jbc-card p { line-height: 1.8; color: var(--jbc-dust); font-weight: 300; }

/* ── Dark card (for dark sections) ── */
.jbc-card--dark {
  background: var(--jbc-dark-bg);
}
.jbc-card--dark:hover { background: var(--jbc-dark-bg2); }
.jbc-card--dark h3 { color: #fff; }
.jbc-card--dark p { color: rgba(255,255,255,.4); }
.jbc-card--dark .jbc-card__num { color: rgba(186,138,57,.4); }
.jbc-card--dark:hover .jbc-card__num { color: var(--jbc-primary); }

/* ── Testimonial Card ── */
.jbc-testi {
  background: var(--jbc-warm);
  padding: 44px 36px;
  position: relative;
  overflow: hidden;
  transition: background var(--jbc-ease);
}
.jbc-testi:hover { background: #fff; }
.jbc-testi::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--jbc-primary), var(--jbc-dark));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s ease;
}
.jbc-testi:hover::after { transform: scaleX(1); }
.jbc-testi__quote-mark {
  font-family: var(--font-serif);
  font-size: 64px;
  font-weight: 300;
  color: var(--jbc-primary);
  opacity: .14;
  position: absolute;
  top: 18px; left: 24px;
  line-height: 1;
}
.jbc-testi__stars {
  color: var(--jbc-primary);
  font-size: 11px;
  letter-spacing: 3px;
  display: block;
  margin-bottom: 16px;
}
.jbc-testi blockquote {
  font-size: 14px;
  line-height: 1.85;
  color: var(--jbc-dust);
  font-weight: 300;
  font-style: italic;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}
.jbc-testi__meta { display: flex; align-items: center; gap: 10px; }
.jbc-testi__line { width: 20px; height: 1px; background: var(--jbc-primary); }
.jbc-testi__name {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--jbc-dark);
  font-weight: 500;
}

/* ── Feature / Trait Item ── */
.jbc-trait {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--jbc-rule);
  cursor: default;
  transition: padding-left var(--jbc-ease);
}
.jbc-trait:first-child { border-top: 1px solid var(--jbc-rule); }
.jbc-trait:hover { padding-left: 6px; }
.jbc-trait__num {
  font-family: var(--font-serif);
  font-size: 11px;
  font-style: italic;
  color: var(--jbc-primary);
  flex-shrink: 0;
  min-width: 22px;
  padding-top: 2px;
}
.jbc-trait h4 {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--jbc-ink);
  margin-bottom: 3px;
}
.jbc-trait p { color: var(--jbc-dust); font-weight: 300; line-height: 1.65; }


/* ═══════════════════════════════════════════════════════════════════════
   10. STATS BAR
   ═══════════════════════════════════════════════════════════════════════ */
.jbc-stats {
  background: var(--jbc-dark);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.jbc-stats__item {
  padding: 32px 40px;
  border-right: 1px solid var(--jbc-rule-dark);
  display: flex;
  align-items: center;
  gap: 16px;
}
.jbc-stats__item:last-child { border-right: none; }
.jbc-stats__num {
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 300;
  color: var(--jbc-primary);
  letter-spacing: -.02em;
  line-height: 1;
  flex-shrink: 0;
}
.jbc-stats__num sup { font-size: .5em; vertical-align: super; }
.jbc-stats__label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  line-height: 1.7;
}


/* ═══════════════════════════════════════════════════════════════════════
   11. FAQ ACCORDION
   ═══════════════════════════════════════════════════════════════════════ */
.jbc-faq { }
.jbc-faq__item {
  border-bottom: 1px solid var(--jbc-rule);
}
.jbc-faq__item:first-child { border-top: 1px solid var(--jbc-rule); }
.jbc-faq__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 0;
  cursor: pointer;
  gap: 20px;
}
.jbc-faq__question:hover h4 { color: var(--jbc-primary); }
.jbc-faq__question h4 {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 400;
  color: var(--jbc-ink);
  line-height: 1.3;
  transition: color var(--jbc-ease);
}
.jbc-faq__toggle {
  width: 26px;
  height: 26px;
  border: 1px solid var(--jbc-stone);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--jbc-dust);
  margin-top: 3px;
  transition: transform .35s, background var(--jbc-ease), border-color var(--jbc-ease), color var(--jbc-ease);
  background: transparent;
  border-radius: 0;
  cursor: pointer;
}
.jbc-faq__item.open .jbc-faq__toggle {
  transform: rotate(45deg);
  background: var(--jbc-dark);
  border-color: var(--jbc-dark);
  color: #fff;
}
/* Legacy .fi support */
.fi { border-bottom: 1px solid var(--jbc-rule); }
.fi:first-child { border-top: 1px solid var(--jbc-rule); }
.fq { display:flex; align-items:flex-start; justify-content:space-between; padding:22px 0; cursor:pointer; gap:20px; }
.fq:hover h4 { color: var(--jbc-primary); }
.fq h4 { font-family:var(--font-serif); font-size:21px; font-weight:400; color:var(--jbc-ink); line-height:1.3; transition:color var(--jbc-ease); }
.fi-tog,.ftog { width:26px; height:26px; border:1px solid var(--jbc-stone); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--jbc-dust); margin-top:3px; transition:transform .35s,background var(--jbc-ease),border-color var(--jbc-ease),color var(--jbc-ease); }
.fi.open .fi-tog,.fi.open .ftog { transform:rotate(45deg); background:var(--jbc-dark); border-color:var(--jbc-dark); color:#fff; }
.jbc-faq__answer, .fa { max-height:0; overflow:hidden; transition:max-height .4s ease,padding .3s; }
.jbc-faq__item.open .jbc-faq__answer, .fi.open .fa { max-height:220px; padding-bottom:20px; }
.jbc-faq__answer p, .fa p { line-height:1.85; color:var(--jbc-dust); font-weight:300; }


/* ═══════════════════════════════════════════════════════════════════════
   12. FORMS & POPUP
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Contact Form Field ── */
.jbc-field { margin-bottom: 22px; }
.jbc-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--jbc-dust);
  margin-bottom: 9px;
}
.jbc-field input,
.jbc-field textarea,
.jbc-field select {
  width: 100%;
  padding: 13px 0;
  border: none;
  border-bottom: 1px solid var(--jbc-stone);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--jbc-ink);
  outline: none;
  transition: border-color var(--jbc-ease);
  -webkit-appearance: none;
}
.jbc-field input::placeholder,
.jbc-field textarea::placeholder { color: var(--jbc-stone); }
.jbc-field input:focus,
.jbc-field textarea:focus,
.jbc-field select:focus { border-bottom-color: var(--jbc-primary); }
.jbc-field textarea { height: 88px; resize: none; }
.jbc-field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }

/* ── Popup / Modal ── */
.jbc-popup-bg {
  position: fixed;
  inset: 0;
  background: rgba(30,28,16,.72);
  z-index: var(--jbc-z-popup);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s;
  backdrop-filter: blur(8px);
}
.jbc-popup-bg.open { opacity: 1; pointer-events: all; }
.jbc-popup {
  background: var(--jbc-paper);
  width: 92%;
  max-width: 520px;
  position: relative;
  max-height: 92vh;
  overflow-y: auto;
}
.jbc-popup__head {
  background: var(--jbc-dark);
  padding: 36px 44px 28px;
  position: relative;
}
.jbc-popup__head h3 {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 6px;
}
.jbc-popup__head p {
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.jbc-popup__close {
  position: absolute;
  top: 20px; right: 22px;
  background: none;
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.5);
  cursor: pointer;
  font-size: 14px;
  width: 28px; height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--jbc-ease);
}
.jbc-popup__close:hover { background: rgba(255,255,255,.1); color: #fff; }
.jbc-popup__body { padding: 36px 44px 40px; }

/* ── Newsletter input ── */
.jbc-nl {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.jbc-nl input {
  flex: 1;
  padding: 10px 0;
  background: transparent;
  border: none;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 300;
  outline: none;
}
.jbc-nl input::placeholder { color: rgba(255,255,255,.25); }
.jbc-nl button {
  padding: 10px 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--jbc-primary);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: color var(--jbc-ease);
}
.jbc-nl button:hover { color: var(--jbc-primary2); }


/* ═══════════════════════════════════════════════════════════════════════
   13. PORTFOLIO / IMAGE GRID
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Portfolio Item ── */
.jbc-port-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.jbc-port-item__bg {
  position: absolute;
  inset: -5%;
  background-size: cover;
  background-position: center;
  transition: transform .9s cubic-bezier(.25,.46,.45,.94), filter .6s;
  filter: brightness(.82) saturate(.9);
}
.jbc-port-item:hover .jbc-port-item__bg {
  transform: scale(1.06);
  filter: brightness(.62) saturate(1.1);
}
.jbc-port-item__info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 28px 32px;
  background: linear-gradient(to top, rgba(30,28,16,.9) 0%, transparent 100%);
  transform: translateY(8px);
  opacity: 0;
  transition: transform .4s ease, opacity .4s ease;
}
.jbc-port-item:hover .jbc-port-item__info {
  transform: translateY(0);
  opacity: 1;
}
.jbc-port-item__cat {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--jbc-primary);
  display: block;
  margin-bottom: 7px;
}
.jbc-port-item__info h4 {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 3px;
}
.jbc-port-item__info p { color: rgba(255,255,255,.5); font-weight: 300; }
.jbc-port-item__badge {
  position: absolute;
  top: 20px; left: 20px;
  background: var(--jbc-primary);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--jbc-ink);
  padding: 5px 14px;
  font-weight: 600;
}

/* ── Filter Bar ── */
.jbc-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 20px var(--jbc-gutter);
  background: var(--jbc-warm);
  border-bottom: 1px solid var(--jbc-rule);
}
.jbc-filter__btn {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--jbc-dust);
  padding: 7px 16px;
  border: 1px solid var(--jbc-stone);
  background: transparent;
  cursor: pointer;
  transition: all var(--jbc-ease);
}
.jbc-filter__btn.active,
.jbc-filter__btn:hover {
  background: var(--jbc-dark);
  color: #fff;
  border-color: var(--jbc-dark);
}

/* ── Instagram / Social Grid ── */
.jbc-ig-item {
  aspect-ratio: 1;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.jbc-ig-item__ph {
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform .7s ease, filter .6s;
  filter: grayscale(.4) brightness(.85);
}
.jbc-ig-item:hover .jbc-ig-item__ph {
  transform: scale(1.06);
  filter: grayscale(0) brightness(1);
}
.jbc-ig-item__ov {
  position: absolute;
  inset: 0;
  background: rgba(30,28,16,.6);
  opacity: 0;
  transition: opacity .35s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jbc-ig-item:hover .jbc-ig-item__ov { opacity: 1; }
.jbc-ig-item__ov svg { width: 24px; height: 24px; stroke: #fff; fill: none; stroke-width: 1.3; }


/* ═══════════════════════════════════════════════════════════════════════
   14. FOOTER
   ═══════════════════════════════════════════════════════════════════════ */
.jbc-footer {
  background: var(--jbc-ink);
  padding: 80px var(--jbc-gutter) 28px;
}
.jbc-footer__top {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--jbc-rule-dark);
}
.jbc-footer__brand p {
  line-height: 1.9;
  color: rgba(255,255,255,.32);
  font-weight: 300;
  margin-top: 16px;
  max-width: 240px;
}
.jbc-footer__col h5 {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--jbc-primary);
  margin-bottom: 20px;
}
.jbc-footer__col ul { list-style: none; }
.jbc-footer__col li { margin-bottom: 10px; }
.jbc-footer__col a {
  font-size: 12px;
  color: rgba(255,255,255,.32);
  text-decoration: none;
  font-weight: 300;
  transition: color var(--jbc-ease);
}
.jbc-footer__col a:hover { color: rgba(255,255,255,.72); }
.jbc-footer__bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.jbc-footer__bot p {
  letter-spacing: .1em;
  color: rgba(255,255,255,.2);
}
.jbc-footer__bot span { color: var(--jbc-primary); }
.jbc-footer__bot a {
  color: rgba(255,255,255,.18);
  text-decoration: none;
  transition: color var(--jbc-ease);
}
.jbc-footer__bot a:hover { color: rgba(255,255,255,.5); }

/* Footer logo */
.jbc-footer__logo { height: 40px; width: auto; display: block; margin-bottom: 16px; }


/* ═══════════════════════════════════════════════════════════════════════
   15. SCROLL REVEAL ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════ */
.jbc-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--jbc-ease-reveal),
    transform var(--jbc-ease-reveal);
}
.jbc-reveal--left  { transform: translateX(-28px); }
.jbc-reveal--right { transform: translateX(28px); }
.jbc-reveal--scale { transform: scale(.96); }
.jbc-reveal.visible { opacity: 1; transform: none; }
.jbc-reveal.d1 { transition-delay: .1s; }
.jbc-reveal.d2 { transition-delay: .2s; }
.jbc-reveal.d3 { transition-delay: .3s; }
.jbc-reveal.d4 { transition-delay: .4s; }
.jbc-reveal.d5 { transition-delay: .5s; }
/* Legacy .rv support */
.rv,.rvl,.rvr{opacity:0;transition:opacity var(--jbc-ease-reveal),transform var(--jbc-ease-reveal)}
.rv{transform:translateY(24px)}.rvl{transform:translateX(-24px)}.rvr{transform:translateX(24px)}
.rv.in,.rvl.in,.rvr.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}


/* ═══════════════════════════════════════════════════════════════════════
   16. DARK SECTIONS
   ═══════════════════════════════════════════════════════════════════════ */

/* ── What We Do / Dark Feature Grid ── */
.jbc-dark-grid {
  background: var(--jbc-dark-bg);
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  background-color: rgba(255,255,255,.04);
}
.jbc-dark-grid__item {
  background: var(--jbc-dark-bg);
  padding: 44px 36px;
  transition: background var(--jbc-ease);
}
.jbc-dark-grid__item:hover { background: #252210; }
.jbc-dark-grid__num {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .3em;
  color: rgba(186,138,57,.4);
  display: block;
  margin-bottom: 20px;
  transition: color var(--jbc-ease);
}
.jbc-dark-grid__item:hover .jbc-dark-grid__num { color: var(--jbc-primary); }
.jbc-dark-grid__item h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.2;
}
.jbc-dark-grid__item p { line-height: 1.8; color: rgba(255,255,255,.38); font-weight: 300; }

/* ── Quote Section ── */
.jbc-quote {
  background: var(--jbc-dark);
  padding: 88px var(--jbc-gutter);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.jbc-quote::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  filter: brightness(.12) saturate(.3);
}
.jbc-quote__inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.jbc-quote__mark {
  font-family: var(--font-serif);
  font-size: 160px;
  font-weight: 300;
  color: var(--jbc-primary);
  opacity: .18;
  line-height: .6;
  display: block;
  margin-bottom: -20px;
  letter-spacing: -.04em;
}
.jbc-quote__text {
  font-family: var(--font-serif);
  font-size: clamp(22px,3vw,36px);
  font-weight: 300;
  font-style: italic;
  color: #fff;
  line-height: 1.45;
  margin-bottom: 20px;
  transition: opacity .4s;
}
.jbc-quote__author {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
}
.jbc-quote__dots { display: flex; justify-content: center; gap: 10px; margin-top: 32px; }
.jbc-quote__dot {
  width: 24px; height: 1.5px;
  background: rgba(255,255,255,.2);
  border: none; cursor: pointer;
  transition: all .35s; display: block;
}
.jbc-quote__dot.on { background: var(--jbc-primary); width: 36px; }

/* ── Process Track ── */
.jbc-process__track { position: relative; }
.jbc-process__line-bg {
  position: absolute;
  top: 20px; left: 0; right: 0;
  height: 1px;
  background: var(--jbc-stone);
}
.jbc-process__line-fg {
  position: absolute;
  top: 20px; left: 0;
  height: 1px;
  background: linear-gradient(to right, var(--jbc-primary), var(--jbc-dark));
  width: 0;
  transition: width 1.6s cubic-bezier(.25,.46,.45,.94);
}
.jbc-process__line-fg.in { width: 100%; }
.jbc-process__steps {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  position: relative; z-index: 2;
}
.jbc-process__step { padding: 52px 14px 0; cursor: default; }
.jbc-process__dot {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--jbc-stone);
  background: var(--jbc-warm);
  display: flex; align-items: center; justify-content: center;
  margin: 0 0 20px;
  transition: border-color .4s, background .4s;
}
.jbc-process__step:hover .jbc-process__dot {
  border-color: var(--jbc-primary);
  background: rgba(186,138,57,.06);
}
.jbc-process__dot span {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--jbc-dust);
  transition: color .4s;
}
.jbc-process__step:hover .jbc-process__dot span { color: var(--jbc-primary); }
.jbc-process__step h4 {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 500; color: var(--jbc-ink); margin-bottom: 8px;
}
.jbc-process__step p { line-height: 1.7; color: var(--jbc-dust); font-weight: 300; }


/* ═══════════════════════════════════════════════════════════════════════
   17. RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  :root { --jbc-gutter: 56px; }
  .jbc-footer__top { grid-template-columns: 1fr 1fr; }
  .jbc-grid-2 { gap: 56px; }
  .jbc-dark-grid { grid-template-columns: 1fr 1fr; }
  .jbc-process__steps { grid-template-columns: repeat(3,1fr); }
  .jbc-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  :root { --jbc-gutter: 40px; --jbc-section: 72px; }
  .jbc-grid-2 { grid-template-columns: 1fr; gap: 44px; }
  .jbc-grid-3 { grid-template-columns: 1fr 1fr; }
  .jbc-grid-4 { grid-template-columns: 1fr 1fr; }
  .jbc-grid-6 { grid-template-columns: repeat(3,1fr); }
  .jbc-cta-band { grid-template-columns: 1fr; gap: 28px; }
  .jbc-footer__top { grid-template-columns: 1fr; gap: 28px; }
  .jbc-footer__bot { flex-direction: column; gap: 8px; }
  .jbc-dark-grid { grid-template-columns: 1fr; }
  .jbc-process__steps { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  :root { --jbc-gutter: 20px; --jbc-section: 56px; }
  nav { padding: 0 20px; }
  .jbc-hero__content { padding: 0 var(--jbc-gutter) 44px; }
  .jbc-hero__bc { display: none; }
  .jbc-hero__scroll { display: none; }
  .jbc-grid-3 { grid-template-columns: 1fr; }
  .jbc-grid-6 { grid-template-columns: repeat(3,1fr); }
  .jbc-stats { grid-template-columns: 1fr 1fr; }
  .jbc-process__steps { grid-template-columns: 1fr 1fr; }
  .jbc-field--row { grid-template-columns: 1fr; }
  .jbc-filter { padding: 16px var(--jbc-gutter); }
}
@media (max-width: 480px) {
  .jbc-grid-6 { grid-template-columns: repeat(2,1fr); }
  .jbc-stats { grid-template-columns: 1fr; }
  .jbc-process__steps { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════
   18. UTILITY CLASSES (replaces all inline styles)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Button extras ── */
.jbc-btn--mt  { margin-top: 12px; }
.jbc-btn--sm  { padding: 10px 22px; font-size: 9px; }

/* ── Flex helpers ── */
.jbc-flex-row { display: flex; align-items: center; gap: 16px; }
.jbc-btn-row  { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

/* ── Text helpers ── */
.jbc-text-center  { text-align: center; }
.jbc-text-dark    { color: var(--jbc-ink); }
.jbc-text-muted   { color: var(--jbc-dust); }
.jbc-text-gold    { color: var(--jbc-primary); }
.jbc-text-white   { color: #fff; }

/* ── Section header (centered) ── */
.jbc-section-header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

/* ── Eyebrow center variant ── */
.jbc-eyebrow--center {
  justify-content: center;
}
.jbc-eyebrow--gold {
  color: var(--jbc-primary);
}
.jbc-eyebrow--gold::before,
.jbc-eyebrow--gold::after {
  background: var(--jbc-primary);
}

/* ── Em italic gold (inside headings) ── */
.jbc-em-gold { color: var(--jbc-primary); font-style: italic; }

/* ── Background helpers ── */
.jbc-bg-paper  { background: var(--jbc-paper); }
.jbc-bg-warm   { background: var(--jbc-warm); }
.jbc-bg-cream  { background: var(--jbc-cream); }
.jbc-bg-dark   { background: var(--jbc-dark-bg); }
.jbc-bg-forest { background: var(--jbc-dark); }

/* ── Footer legal links ── */
.jbc-footer__legal-link {
  color: rgba(255,255,255,.18);
  text-decoration: none;
  transition: color var(--jbc-ease);
}
.jbc-footer__legal-link:hover { color: rgba(255,255,255,.5); }

/* ── Breadcrumb current page ── */
.jbc-hero__bc-current {
  color: rgba(255,255,255,.75);
}

/* ── Instagram/social strip label ── */
.jbc-ig-handle {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding-bottom: 2px;
  transition: color var(--jbc-ease);
}
.jbc-ig-handle:hover { color: var(--jbc-primary); }

/* ── Image helpers ── */
.jbc-img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.jbc-img-aspect-4-3 { aspect-ratio: 4/3; }
.jbc-img-aspect-4-5 { aspect-ratio: 4/5; }
.jbc-img-aspect-1-1 { aspect-ratio: 1; }

/* ── Margin / Padding utilities ── */
.jbc-mt-sm { margin-top: 14px; }
.jbc-mt-md { margin-top: 24px; }
.jbc-mt-lg { margin-top: 40px; }
.jbc-mb-sm { margin-bottom: 14px; }
.jbc-mb-md { margin-bottom: 28px; }
.jbc-mb-lg { margin-bottom: 48px; }

/* ── Max width containers ── */
.jbc-max-sm  { max-width: 480px; }
.jbc-max-md  { max-width: 680px; }
.jbc-max-lg  { max-width: 860px; }
.jbc-max-xl  { max-width: 1280px; }
.jbc-mx-auto { margin-left: auto; margin-right: auto; }

/* ── Dividers ── */
.jbc-divider {
  width: 100%;
  height: 1px;
  background: var(--jbc-rule);
  margin: 40px 0;
}
.jbc-divider--gold {
  background: var(--jbc-gold-rule);
}

/* ── Popup disclaimer text ── */
.jbc-disclaimer {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .1em;
  color: var(--jbc-stone);
  line-height: 1.7;
  margin-top: 14px;
}

/* ── Portfolio bg images (replaces inline background-image styles) ── */
.jbc-bg-house-1  { background-image: url('https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=1000&q=90'); }
.jbc-bg-house-2  { background-image: url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=1000&q=90'); }
.jbc-bg-house-3  { background-image: url('https://images.unsplash.com/photo-1613977257363-707ba9348227?w=1000&q=90'); }
.jbc-bg-house-4  { background-image: url('https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=1000&q=90'); }
.jbc-bg-house-5  { background-image: url('https://images.unsplash.com/photo-1583608205776-bfd35f0d9f83?w=1000&q=90'); }
.jbc-bg-house-6  { background-image: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1000&q=90'); }
.jbc-bg-house-7  { background-image: url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1000&q=90'); }
.jbc-bg-house-8  { background-image: url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=1000&q=90'); }
.jbc-bg-house-9  { background-image: url('https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?w=1000&q=90'); }
.jbc-bg-house-10 { background-image: url('https://images.unsplash.com/photo-1497366216548-37526070297c?w=1000&q=90'); }
.jbc-bg-house-11 { background-image: url('https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1000&q=90'); }
.jbc-bg-house-12 { background-image: url('https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=1000&q=90'); }

/* ── Social grid image backgrounds ── */
.jbc-ig-1 { background-image: url('https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=350&q=80'); }
.jbc-ig-2 { background-image: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=350&q=80'); }
.jbc-ig-3 { background-image: url('https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=350&q=80'); }
.jbc-ig-4 { background-image: url('https://images.unsplash.com/photo-1613977257363-707ba9348227?w=350&q=80'); }
.jbc-ig-5 { background-image: url('https://images.unsplash.com/photo-1583608205776-bfd35f0d9f83?w=350&q=80'); }
.jbc-ig-6 { background-image: url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=350&q=80'); }

/* ── Dynamic heading sizes (used inline in about/blog) ── */
.jbc-h2-about {
  font-family: var(--font-serif);
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 300;
  letter-spacing: -.02em;
  color: var(--jbc-ink);
  line-height: 1.05;
}
.jbc-h2-faq {
  font-family: var(--font-serif);
  font-size: clamp(30px, 3.5vw, 50px);
  font-weight: 300;
  letter-spacing: -.02em;
  color: var(--jbc-ink);
}
.jbc-h2-blog-lg {
  font-family: var(--font-serif);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 300;
  letter-spacing: -.02em;
  color: var(--jbc-ink);
}
.jbc-h2-blog-sm {
  font-family: var(--font-serif);
  font-size: clamp(30px, 4vw, 50px);
  font-weight: 300;
  letter-spacing: -.02em;
  color: var(--jbc-ink);
}
.jbc-h2-italic-forest { font-style: italic; color: var(--jbc-dark); }
.jbc-h2-italic-gold   { font-style: italic; color: var(--jbc-primary); }

/* ── Index landing page logo ── */
.jbc-landing-logo {
  height: 220px;
  width: auto;
  display: block;
}
.jbc-landing-tagline {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-top: 8px;
  font-style: normal;
  font-weight: 300;
}

/* ── Services alt-row images (full bleed) ── */
.jbc-svc-img-1 { background-image: url('../images/portfolio/exteriors/148 Nothlake_27.jpg'); background-size:cover; background-position:center; position:absolute; inset:0; }
.jbc-svc-img-2 { background-image: url('../images/portfolio/kitchens/205 Chateau_20.jpg'); background-size:cover; background-position:center; position:absolute; inset:0; }
.jbc-svc-img-3 { background-image: url('../images/portfolio/interior/205 Chateau_21.jpg'); background-size:cover; background-position:center; position:absolute; inset:0; }

/* ── Blog post images ── */
.jbc-blog-img-1 { background-image: url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=600&q=85'); }
.jbc-blog-img-2 { background-image: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=600&q=85'); }
.jbc-blog-img-3 { background-image: url('https://images.unsplash.com/photo-1613977257363-707ba9348227?w=600&q=85'); }
.jbc-blog-img-4 { background-image: url('https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=600&q=85'); }
.jbc-blog-img-5 { background-image: url('https://images.unsplash.com/photo-1583608205776-bfd35f0d9f83?w=600&q=85'); }
.jbc-blog-img-6 { background-image: url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&q=85'); }

/* ── Btn outline white override ── */
.jbc-btn-outline-wh {
  border-color: rgba(255,255,255,.3) !important;
  color: #fff !important;
}

/* ── Contact disclaimer (legacy) ── */
.jbc-contact-disc {
  font-size: 11px;
  color: var(--jbc-stone);
  margin-top: 16px;
  font-family: var(--font-mono);
  letter-spacing: .08em;
  line-height: 1.7;
}

.jbc-field-error{display:none;color:#B3261E;font-size:12px;margin-top:6px;line-height:1.4}
.jbc-field-error.show{display:block}
.fg textarea.invalid,.pf textarea.invalid{border-color:#B3261E !important}