.elementor-kit-8{--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-8 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);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@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 *//* ============================================================
   STW HOME REMODELING — SHARED STYLESHEET
   Bare Web Design & Marketing
   ------------------------------------------------------------
   WHERE THIS GOES
   Elementor > Site Settings > Custom CSS.
   Paste the whole thing. Save. Done.

   WHY
   Every page shares these tokens and components. Defining them
   once here means new pages only carry their own HTML plus a
   few page-specific rules — not 300 lines of duplicated CSS.

   NOTE ON THE HOMEPAGE
   stw-homepage-v3.html still has its own copy of these rules
   inline. The values are identical so nothing conflicts. You
   can strip its <style> block down to just its page-specific
   rules whenever you feel like it — not urgent.

   HEADER HEIGHT CONTRACT
   The header publishes its live height to --stw-hd-live.
   Any page that needs to clear it uses:
       padding-top: var(--stw-hd-live, 126px);
   Never hardcode a header height.
   ============================================================ */

.stw {
  --stw-slate: #21252B;
  --stw-slate-deep: #15181C;
  --stw-chalk: #EDEBE7;
  --stw-chalk-warm: #F6F5F2;
  --stw-mortar: #8D9098;
  --stw-mortar-dark: #6B6E74;
  --stw-brass: #A8813F;
  --stw-brass-lift: #C9A15C;
  --stw-line: rgba(237, 235, 231, 0.14);
  --stw-line-dark: rgba(33, 37, 43, 0.14);

  --stw-display: 'Fraunces', Georgia, serif;
  --stw-body: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --stw-pad: clamp(60px, 8vw, 120px);

  background: var(--stw-slate);
  color: var(--stw-chalk);
  font-family: var(--stw-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.stw *, .stw *::before, .stw *::after { box-sizing: border-box; }
.stw h1, .stw h2, .stw h3, .stw h4, .stw p, .stw ul, .stw ol, .stw figure, .stw blockquote { margin: 0; padding: 0; }
.stw ul { list-style: none; }
.stw img, .stw svg { display: block; max-width: 100%; }
.stw img { height: auto; }
.stw a { color: inherit; text-decoration: none; }
.stw :focus-visible { outline: 2px solid var(--stw-brass-lift); outline-offset: 3px; }

/* ---------- layout ---------- */
.stw-wrap { width: min(1240px, 90vw); margin-left: auto; margin-right: auto; }
.stw-sec { padding-top: var(--stw-pad); padding-bottom: var(--stw-pad); }
.stw-sec-deep { background: var(--stw-slate-deep); }
.stw-sec-light { background: var(--stw-chalk); color: var(--stw-slate); }

/* the grout joint — the page's structural rule */
.stw-joint { border-top: 1px solid var(--stw-line); }
.stw-joint-dark { border-top: 1px solid var(--stw-line-dark); }

/* ---------- type ---------- */
.stw-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--stw-brass-lift); }
.stw-eyebrow-dark { color: var(--stw-brass); }

.stw h1.stw-h1 {
  font-family: var(--stw-display); font-weight: 300;
  font-size: clamp(34px, 5vw, 62px); line-height: 1.05;
  letter-spacing: -.02em; color: #fff;
}
.stw h2.stw-h2 {
  font-family: var(--stw-display); font-weight: 400;
  font-size: clamp(30px, 4.2vw, 52px); line-height: 1.1; letter-spacing: -.01em;
}
.stw h3.stw-h3 {
  font-family: var(--stw-display); font-weight: 400;
  font-size: clamp(21px, 2.1vw, 27px); line-height: 1.2;
}
.stw .stw-lede { color: var(--stw-mortar); font-size: clamp(16px, 1.3vw, 19px); max-width: 62ch; }
.stw .stw-lede-dark { color: var(--stw-mortar-dark); }
.stw .stw-body p + p { margin-top: 18px; }
.stw .stw-body { color: var(--stw-mortar); }
.stw-sec-light .stw-body { color: #4A4E55; }

/* ---------- buttons ---------- */
.stw .stw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 30px; font-family: var(--stw-body); font-size: 14px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--stw-brass); border-radius: 2px; cursor: pointer;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.stw .stw-btn-solid { background: var(--stw-brass); color: #14171A; }
.stw .stw-btn-solid:hover { background: var(--stw-brass-lift); border-color: var(--stw-brass-lift); }
.stw .stw-btn-ghost { background: transparent; color: var(--stw-chalk); border-color: rgba(237,235,231,.35); }
.stw .stw-btn-ghost:hover { border-color: var(--stw-chalk); background: rgba(237,235,231,.06); }
.stw-sec-light .stw-btn-ghost { color: var(--stw-slate); border-color: rgba(33,37,43,.28); }
.stw-sec-light .stw-btn-ghost:hover { border-color: var(--stw-slate); background: rgba(33,37,43,.05); }

/* ============================================================
   INTERIOR PAGE HERO
   Shorter than the homepage hero. Same rule: text NEVER sits
   on a bare photo — it sits on a plate.
   ============================================================ */
.stw-page-hero {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: min(66vh, 620px);
  padding-top: calc(var(--stw-hd-live, 126px) + 60px);
  padding-bottom: clamp(44px, 5vw, 76px);
  overflow: hidden;
}
.stw-page-hero-img { position: absolute; inset: 0; }
.stw-page-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.stw-page-hero-img::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(96deg, rgba(21,24,28,.86) 0%, rgba(21,24,28,.55) 40%, rgba(21,24,28,.12) 75%, rgba(21,24,28,.35) 100%),
    linear-gradient(180deg, rgba(21,24,28,.62) 0%, rgba(21,24,28,.06) 34%, rgba(21,24,28,.74) 100%);
}
.stw-page-hero-inner { position: relative; z-index: 2; }
.stw-plate {
  max-width: 760px;
  background: rgba(21,24,28,.80);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  border-top: 2px solid var(--stw-brass);
  border-radius: 2px;
  padding: clamp(26px, 3vw, 42px);
  box-shadow: 0 30px 70px rgba(0,0,0,.4);
}
.stw-plate h1 { margin-top: 14px; margin-bottom: 16px; }
.stw-plate .stw-lede { color: rgba(237,235,231,.88); max-width: 52ch; }
.stw-plate-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ---------- breadcrumb ---------- */
.stw-crumb { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--stw-mortar); }
.stw-crumb a:hover { color: var(--stw-brass-lift); }
.stw-crumb span { margin: 0 8px; opacity: .5; }

/* ============================================================
   COMPONENTS
   ============================================================ */

/* two-column: text + image */
.stw-2col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 76px); align-items: center; }
.stw-2col-flip .stw-2col-fig { order: -1; }
.stw-2col-fig img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 2px; }
.stw-2col-fig-wide img { aspect-ratio: 3/2; }

/* section head: title left, lede right */
.stw-head2 { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin-bottom: 52px; }

/* brass-dash list */
.stw-list { margin-top: 26px; }
.stw-list li { padding: 9px 0 9px 22px; position: relative; color: rgba(237,235,231,.82); font-size: 16px; }
.stw-list li::before { content: ''; position: absolute; left: 0; top: 19px; width: 9px; height: 1px; background: var(--stw-brass); }
.stw-sec-light .stw-list li { color: #4A4E55; }
.stw-list-ruled { padding-top: 26px; border-top: 1px solid var(--stw-line); }
.stw-sec-light .stw-list-ruled { border-top-color: var(--stw-line-dark); }

/* feature cards (no image) */
.stw-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.stw-feat {
  border: 1px solid var(--stw-line); border-top: 2px solid var(--stw-brass);
  border-radius: 2px; padding: 30px 26px; background: rgba(237,235,231,.03);
}
.stw-feat h3 { margin-bottom: 10px; }
.stw-feat p { color: var(--stw-mortar); font-size: 15px; }
.stw-sec-light .stw-feat { background: var(--stw-chalk-warm); border-color: var(--stw-line-dark); }
.stw-sec-light .stw-feat p { color: #4A4E55; }

/* pull quote */
.stw-quote {
  font-family: var(--stw-display); font-weight: 300;
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1.3; letter-spacing: -.01em;
  margin-top: 20px; margin-bottom: 20px;
}
.stw-cite { font-style: normal; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--stw-mortar); }

/* image strip */
.stw-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stw-strip a, .stw-strip figure { position: relative; overflow: hidden; border-radius: 2px; display: block; }
.stw-strip img { width: 100%; aspect-ratio: 1/1; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.stw-strip a:hover img { transform: scale(1.06); }

/* numbered steps */
.stw-steps { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 46px; }
.stw-steps li { padding: 0 30px; border-left: 1px solid var(--stw-line); }
.stw-steps li:first-child { border-left: 0; padding-left: 0; }
.stw-step-n { font-family: var(--stw-display); font-size: 15px; color: var(--stw-brass); letter-spacing: .05em; }
.stw-steps h3 { margin-top: 12px; margin-bottom: 8px; }
.stw-steps p { color: var(--stw-mortar); font-size: 15px; }

/* FAQ accordion */
.stw-faq-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(32px, 5vw, 72px); }
.stw details.stw-q { border-bottom: 1px solid var(--stw-line-dark); }
.stw details.stw-q:first-of-type { border-top: 1px solid var(--stw-line-dark); }
.stw details.stw-q summary {
  list-style: none; cursor: pointer; padding: 22px 40px 22px 0;
  position: relative; font-weight: 600; font-size: 17px;
}
.stw details.stw-q summary::-webkit-details-marker { display: none; }
.stw details.stw-q summary::after {
  content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 22px; color: var(--stw-brass); font-weight: 400;
}
.stw details.stw-q[open] summary::after { content: '\2013'; }
.stw details.stw-q p { padding: 0 40px 24px 0; font-size: 16px; }

/* CTA band — put this at the bottom of every page */
.stw-cta { background: var(--stw-slate-deep); text-align: center; }
.stw-cta h2 { margin-bottom: 18px; }
.stw-cta .stw-lede { margin-left: auto; margin-right: auto; }
.stw-cta-btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.stw-cta-meta { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--stw-line); color: var(--stw-mortar); font-size: 14px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .stw-2col, .stw-faq-grid { grid-template-columns: 1fr; }
  .stw-2col-fig { order: -1; }
  .stw-2col-fig img { aspect-ratio: 3/2; }
  .stw-feats { grid-template-columns: 1fr 1fr; }
  .stw-steps { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .stw-steps li:nth-child(3) { border-left: 0; padding-left: 0; }
  .stw-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .stw { font-size: 16px; }
  .stw-feats { grid-template-columns: 1fr; }
  .stw-steps { grid-template-columns: 1fr; }
  .stw-steps li { border-left: 0; padding-left: 0; }
  .stw-page-hero { min-height: 58vh; }
  .stw-plate { max-width: 100%; background: rgba(21,24,28,.88); }
  /* leave room for the sticky mobile call bar */
  .stw-cta { padding-bottom: calc(var(--stw-pad) + 70px); }
}
@media (prefers-reduced-motion: reduce) {
  .stw *, .stw *::before, .stw *::after { transition: none !important; animation: none !important; }
}

.stw .stw-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;                       /* the grout joint */
  background: var(--stw-chalk);   /* shows through the gap */
  border: 1px solid var(--stw-line);
  border-radius: 2px;
  overflow: hidden;
}
.stw .stw-pair-side { position: relative; margin: 0; }
.stw .stw-pair-side img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  filter: saturate(.78) contrast(.95);
}
.stw .stw-pair-after img { filter: none; }
.stw .stw-pair-side figcaption {
  position: absolute; left: 18px; bottom: 18px;
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 2px;
  background: rgba(21,24,28,.88); color: var(--stw-chalk);
  border: 1px solid var(--stw-line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.stw .stw-pair-after figcaption { color: var(--stw-brass-lift); }
@media (max-width: 640px) {
  .stw .stw-pair { grid-template-columns: 1fr; }
}/* End custom CSS */