.elementor-kit-25{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-25 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ==========================================================================
   JBC LANDSCAPE SERVICES — ELEMENTOR STYLE KIT
   Project-based black design

   WHERE THIS GOES:
   Appearance → Customize → Additional CSS  →  paste everything below → Publish

   HOW IT WORKS:
   Elementor handles layout (containers, order, spacing).
   This file handles the look (fonts, colors, hairlines, grids, buttons).
   You connect the two by typing a class name into an element's
   Advanced tab → CSS Classes field.

   Nothing here fires unless a class is applied, so pasting this in will
   not change any of your existing pages.
   ========================================================================== */

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


/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   Change a value here and it updates everywhere on the page.
   -------------------------------------------------------------------------- */
:root{
  --jbc-black:#050505;
  --jbc-carbon:#0C0C0C;
  --jbc-bone:#EDEAE3;
  --jbc-ash:#98988F;
  --jbc-line:rgba(237,234,227,.14);
  --jbc-line-soft:rgba(237,234,227,.08);

  --jbc-display:"Marcellus", Georgia, serif;
  --jbc-sans:"Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}


/* --------------------------------------------------------------------------
   2. SECTION BASE            class: jbc
   Put this on every top-level section container.
   -------------------------------------------------------------------------- */
.jbc{
  background:var(--jbc-black);
  color:var(--jbc-bone);
  font-family:var(--jbc-sans);
}
.jbc p,
.jbc li,
.jbc .elementor-widget-text-editor{
  font-family:var(--jbc-sans);
  color:var(--jbc-bone);
  font-size:1.0625rem;
  line-height:1.7;
}
.jbc a{color:inherit}

/* Slightly lifted band, for alternating sections   class: jbc-carbon */
.jbc-carbon{background:var(--jbc-carbon)}

/* Standard vertical rhythm                         class: jbc-section */
.jbc-section{padding-top:clamp(4.5rem,9vw,8.5rem);padding-bottom:clamp(4.5rem,9vw,8.5rem)}

/* A hairline across the top of a container         class: jbc-rule-top */
.jbc-rule-top{border-top:1px solid var(--jbc-line)}


/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   Apply jbc-display plus a size class to Heading widgets.
   e.g.  CSS Classes:  jbc-display jbc-h2
   -------------------------------------------------------------------------- */
.jbc-display,
.jbc-display .elementor-heading-title{
  font-family:var(--jbc-display);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.008em;
  color:var(--jbc-bone);
}

.jbc-h1 .elementor-heading-title{font-size:clamp(2.7rem,8vw,7.2rem);line-height:1.0;max-width:17ch}
.jbc-h2 .elementor-heading-title{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.jbc-h3 .elementor-heading-title{font-size:clamp(1.55rem,3vw,2.5rem)}
.jbc-h4 .elementor-heading-title{font-size:clamp(1.2rem,1.9vw,1.55rem)}

/* Small grey label — captions, locations, eyebrows   class: jbc-cap */
.jbc-cap,
.jbc-cap p,
.jbc-cap .elementor-heading-title{
  font-family:var(--jbc-sans);
  font-size:.75rem;
  font-weight:400;
  letter-spacing:.14em;
  line-height:1.5;
  color:var(--jbc-ash);
}

/* Grey supporting body copy                          class: jbc-ash */
.jbc-ash,
.jbc-ash p,
.jbc-ash .elementor-heading-title{color:var(--jbc-ash)}

/* Large serif pull quote                             class: jbc-quote */
.jbc-quote{margin-top:clamp(2rem,3.5vw,2.8rem)}
.jbc-quote,
.jbc-quote p{
  font-family:var(--jbc-display);
  font-size:clamp(1.15rem,1.9vw,1.55rem);
  line-height:1.42;
  color:var(--jbc-bone);
  max-width:64ch;
}

/* Underlined text link                               class: jbc-link */
.jbc-link a,
a.jbc-link{
  font-size:.8125rem;
  letter-spacing:.09em;
  text-decoration:none;
  color:var(--jbc-bone);
  border-bottom:1px solid var(--jbc-line);
  padding-bottom:3px;
  transition:border-color .25s;
}
.jbc-link a:hover,
a.jbc-link:hover{border-bottom-color:var(--jbc-bone)}

/* Constrain a text column to a readable width        class: jbc-measure */
.jbc-measure p{max-width:56ch}


/* --------------------------------------------------------------------------
   4. PHOTO PLATES
   Apply to an Image widget: jbc-frame plus an aspect class.
   e.g.  CSS Classes:  jbc-frame jbc-wide
   -------------------------------------------------------------------------- */
.jbc-frame img{
  display:block;
  width:100%;
  border:1px solid var(--jbc-line);
  background:var(--jbc-carbon);
  object-fit:cover;
}
.jbc-wide img{aspect-ratio:16/7}
.jbc-mid  img{aspect-ratio:3/2}
.jbc-tall img{aspect-ratio:4/5}


/* --------------------------------------------------------------------------
   5. HAIRLINE GRIDS
   These turn a container's children into divided columns.

   IMPORTANT: set these containers to Content Width = Full Width.
   (The display:contents rule below covers you if you forget.)
   -------------------------------------------------------------------------- */
.jbc-specs > .e-con-inner,
.jbc-steps > .e-con-inner,
.jbc-index > .e-con-inner{display:contents}


/* ---- 5a. Project spec grid — 3 columns    class: jbc-specs ---- */
.jbc-specs{
  display:grid !important;
  grid-template-columns:repeat(3,1fr);
  gap:0 !important;
  border-top:1px solid var(--jbc-line);
}
.jbc-specs > *,
.jbc-specs > .e-con-inner > *{
  padding:1.5rem clamp(1.25rem,2.5vw,2.5rem) 0 0;
}
.jbc-specs > *:not(:first-child),
.jbc-specs > .e-con-inner > *:not(:first-child){
  border-left:1px solid var(--jbc-line);
  padding-left:clamp(1.25rem,2.5vw,2.5rem);
}

/* The tiny label above each spec              class: jbc-spec-label */
.jbc-spec-label,
.jbc-spec-label .elementor-heading-title{
  font-family:var(--jbc-sans);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.16em;
  color:var(--jbc-ash);
}
.jbc-specs p{font-size:.9375rem;line-height:1.6}


/* ---- 5b. Process grid — 4 columns          class: jbc-steps ---- */
.jbc-steps{
  display:grid !important;
  grid-template-columns:repeat(4,1fr);
  gap:0 !important;
  border-top:1px solid var(--jbc-line);
}
.jbc-steps > *,
.jbc-steps > .e-con-inner > *{
  padding:1.7rem clamp(1.25rem,2.2vw,2.2rem) 0 0;
}
.jbc-steps > *:not(:first-child),
.jbc-steps > .e-con-inner > *:not(:first-child){
  border-left:1px solid var(--jbc-line);
  padding-left:clamp(1.25rem,2.2vw,2.2rem);
}
.jbc-steps p{font-size:.9375rem;line-height:1.6;color:var(--jbc-ash)}

/* The One / Two / Three / Four marker         class: jbc-step-num */
.jbc-step-num,
.jbc-step-num .elementor-heading-title{
  font-family:var(--jbc-display);
  font-size:.9375rem;
  letter-spacing:.16em;
  color:var(--jbc-ash);
}


/* ---- 5c. Service index — 2 columns         class: jbc-index ---- */
.jbc-index{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:0 !important;
  border-top:1px solid var(--jbc-line);
}
.jbc-index > *,
.jbc-index > .e-con-inner > *{
  padding:clamp(1.7rem,3vw,2.5rem) clamp(1.5rem,3vw,3rem) clamp(1.7rem,3vw,2.5rem) 0;
  border-bottom:1px solid var(--jbc-line);
}
.jbc-index > *:nth-child(even),
.jbc-index > .e-con-inner > *:nth-child(even){
  border-left:1px solid var(--jbc-line);
  padding-left:clamp(1.5rem,3vw,3rem);
  padding-right:0;
}
.jbc-index p{font-size:.9875rem;color:var(--jbc-ash);max-width:44ch}


/* --------------------------------------------------------------------------
   6. BUTTONS
   Apply to a Button widget. Set the widget's own style to plain/none first.
   -------------------------------------------------------------------------- */
.jbc-btn-fill .elementor-button,
.jbc-btn-line .elementor-button{
  font-family:var(--jbc-sans);
  font-size:.875rem;
  font-weight:400;
  letter-spacing:.08em;
  padding:1.05rem 2.1rem;
  border-radius:0;
  text-decoration:none;
  transition:background .3s,color .3s,border-color .3s;
}
.jbc-btn-fill .elementor-button{
  background-color:var(--jbc-bone);
  color:var(--jbc-black);
  border:1px solid var(--jbc-bone);
}
.jbc-btn-fill .elementor-button:hover{
  background-color:transparent;
  color:var(--jbc-bone);
}
.jbc-btn-line .elementor-button{
  background-color:transparent;
  color:var(--jbc-bone);
  border:1px solid var(--jbc-line);
}
.jbc-btn-line .elementor-button:hover{
  background-color:transparent;
  color:var(--jbc-bone);
  border-color:var(--jbc-bone);
}


/* --------------------------------------------------------------------------
   7. ONE-OFF COMPONENTS
   -------------------------------------------------------------------------- */

/* Availability strip under the hero            class: jbc-avail */
.jbc-avail{border-top:1px solid var(--jbc-line);padding-top:1.3rem}

/* Weekly-maintenance note                      class: jbc-note */
.jbc-note{border-top:1px solid var(--jbc-line);padding-top:1.4rem}
.jbc-note p{color:var(--jbc-ash);font-size:.9375rem;max-width:56ch}

/* Coverage town list                           class: jbc-towns */
.jbc-towns,
.jbc-towns p{
  font-family:var(--jbc-display);
  font-size:clamp(1.5rem,3.6vw,2.9rem);
  line-height:1.5;
  color:var(--jbc-bone);
  max-width:24ch;
  margin-left:auto;
  margin-right:auto;
}
.jbc-towns em{font-style:normal;color:var(--jbc-ash);padding-left:.5rem;padding-right:.5rem}

/* Bryan's sign-off                             class: jbc-sign */
.jbc-sign{
  border-top:1px solid var(--jbc-line);
  padding-top:1.4rem;
  font-family:var(--jbc-display);
  font-size:1.4rem;
  color:var(--jbc-bone);
}

/* Dark overlay on the closing section          class: jbc-overlay
   Put this on the container that has the background image.
   Set the image in Elementor: Style → Background → Image. */
.jbc-overlay{position:relative}
.jbc-overlay::before{
  content:"";
  position:absolute;
  top:0;right:0;bottom:0;left:0;
  background:linear-gradient(180deg,rgba(5,5,5,.72),rgba(5,5,5,.9));
  pointer-events:none;
  z-index:0;
}
.jbc-overlay > *{position:relative;z-index:1}


/* --------------------------------------------------------------------------
   8. OPTIONAL — STICKY DARK HEADER
   Only needed if you build the header in Elementor (requires Pro Theme
   Builder). If you keep your theme's header, ignore this block.
   class: jbc-header
   -------------------------------------------------------------------------- */
.jbc-header{
  background-color:rgba(5,5,5,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--jbc-line-soft);
}
.jbc-header a{color:var(--jbc-ash);text-decoration:none;font-size:.875rem;letter-spacing:.03em}
.jbc-header a:hover{color:var(--jbc-bone)}

/* Wordmark                                     class: jbc-mark */
.jbc-mark .elementor-heading-title{
  font-family:var(--jbc-display);
  font-size:1.5rem;
  letter-spacing:.12em;
  color:var(--jbc-bone);
}


/* --------------------------------------------------------------------------
   9. RESPONSIVE
   Grids collapse. Nothing else needs changing.
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  .jbc-steps{grid-template-columns:1fr 1fr}
  .jbc-steps > *:nth-child(odd),
  .jbc-steps > .e-con-inner > *:nth-child(odd){border-left:0;padding-left:0}
  .jbc-steps > *:nth-child(n+3),
  .jbc-steps > .e-con-inner > *:nth-child(n+3){border-top:1px solid var(--jbc-line)}
}

@media (max-width:880px){
  .jbc-specs{grid-template-columns:1fr}
  .jbc-specs > *:not(:first-child),
  .jbc-specs > .e-con-inner > *:not(:first-child){
    border-left:0;
    padding-left:0;
    border-top:1px solid var(--jbc-line-soft);
    margin-top:1.5rem;
  }
}

@media (max-width:767px){
  .jbc-wide img{aspect-ratio:4/3}

  .jbc-steps{grid-template-columns:1fr}
  .jbc-steps > *,
  .jbc-steps > .e-con-inner > *{padding-right:0}
  .jbc-steps > *:not(:first-child),
  .jbc-steps > .e-con-inner > *:not(:first-child){
    border-left:0;
    padding-left:0;
    border-top:1px solid var(--jbc-line-soft);
    margin-top:1.6rem;
  }

  .jbc-index{grid-template-columns:1fr}
  .jbc-index > *,
  .jbc-index > .e-con-inner > *,
  .jbc-index > *:nth-child(even),
  .jbc-index > .e-con-inner > *:nth-child(even){
    border-left:0;
    padding-left:0;
    padding-right:0;
  }

  .jbc-towns{max-width:100%}
}


/* --------------------------------------------------------------------------
   10. ACCESSIBILITY
   -------------------------------------------------------------------------- */
.jbc a:focus-visible,
.jbc button:focus-visible,
.jbc .elementor-button:focus-visible{
  outline:1px solid var(--jbc-bone);
  outline-offset:4px;
}

@media (prefers-reduced-motion:reduce){
  .jbc *{animation:none !important;transition:none !important}
}


/* ==========================================================================
   11. OVERRIDE HARDENING
   Elementor's Global Colors and Global Fonts are applied with the same CSS
   weight as the rules above, so on some setups they win on load order and
   your headings come out blue and your buttons green.

   This block repeats only the critical declarations at a weight Elementor
   cannot beat. Nothing new is styled here — it's insurance.
   ========================================================================== */

.jbc-display,
.jbc-display .elementor-heading-title{
  font-family:var(--jbc-display) !important;
  color:var(--jbc-bone) !important;
  font-weight:400 !important;
}
.jbc-h1 .elementor-heading-title{font-size:clamp(2.7rem,8vw,7.2rem) !important;line-height:1.0 !important}
.jbc-h2 .elementor-heading-title{font-size:clamp(1.9rem,3.6vw,2.9rem) !important}
.jbc-h3 .elementor-heading-title{font-size:clamp(1.55rem,3vw,2.5rem) !important}
.jbc-h4 .elementor-heading-title{font-size:clamp(1.2rem,1.9vw,1.55rem) !important}

.jbc-cap,
.jbc-cap p,
.jbc-cap .elementor-heading-title{
  font-family:var(--jbc-sans) !important;
  color:var(--jbc-ash) !important;
  font-size:.75rem !important;
  letter-spacing:.14em !important;
  font-weight:400 !important;
}

.jbc-ash,
.jbc-ash p{color:var(--jbc-ash) !important}

.jbc-spec-label,
.jbc-spec-label .elementor-heading-title{
  font-family:var(--jbc-sans) !important;
  color:var(--jbc-ash) !important;
  font-size:.7rem !important;
  letter-spacing:.16em !important;
  font-weight:500 !important;
}

.jbc-step-num,
.jbc-step-num .elementor-heading-title{
  font-family:var(--jbc-display) !important;
  color:var(--jbc-ash) !important;
  font-size:.9375rem !important;
  letter-spacing:.16em !important;
}

.jbc-quote,
.jbc-quote p{
  font-family:var(--jbc-display) !important;
  color:var(--jbc-bone) !important;
}

.jbc-towns,
.jbc-towns p{font-family:var(--jbc-display) !important;color:var(--jbc-bone) !important}
.jbc-towns em{color:var(--jbc-ash) !important}

.jbc-btn-fill .elementor-button{
  background-color:var(--jbc-bone) !important;
  color:var(--jbc-black) !important;
  border:1px solid var(--jbc-bone) !important;
  border-radius:0 !important;
  font-family:var(--jbc-sans) !important;
  font-weight:400 !important;
  letter-spacing:.08em !important;
}
.jbc-btn-fill .elementor-button:hover{
  background-color:transparent !important;
  color:var(--jbc-bone) !important;
}
.jbc-btn-line .elementor-button{
  background-color:transparent !important;
  color:var(--jbc-bone) !important;
  border:1px solid var(--jbc-line) !important;
  border-radius:0 !important;
  font-family:var(--jbc-sans) !important;
  font-weight:400 !important;
  letter-spacing:.08em !important;
}
.jbc-btn-line .elementor-button:hover{border-color:var(--jbc-bone) !important}

.jbc,
.jbc p,
.jbc li{font-family:var(--jbc-sans) !important}
.jbc p,
.jbc li{color:var(--jbc-bone)}/* End custom CSS */