/* =====================================================================
   CLARKSON ROOFING · Shared widgets stylesheet
   Newsletter (footer band + modal) + AI chatbot floating widget
   Loaded on every page. Uses the same dark editorial tokens as
   journal-styles.css. No em dashes anywhere.
   ===================================================================== */

:root {
  --cw-bg: #0a0a09;
  --cw-bg-2: #16150f;
  --cw-line: rgba(255, 249, 220, 0.09);
  --cw-line-strong: rgba(255, 249, 220, 0.16);
  --cw-gold: #FFD900;
  --cw-ink: #e9e6dc;
  --cw-ink-soft: #cfcbbe;
  --cw-taupe: #8a867a;
  --cw-ease: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ============ FOOTER NEWSLETTER SIGNUP (compact, inline in .j-footer-about) ============ */

.j-footer-signup {
  margin-top: 32px;
  padding: 0;
  border: 0;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.j-footer-signup .k {
  font-family: 'Inter Tight', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cw-gold);
  font-weight: 700;
  display: inline-flex; align-items: center; gap: 10px;
}
.j-footer-signup .k::before {
  content: ""; width: 22px; height: 1px; background: var(--cw-gold); flex-shrink: 0;
}
.j-footer-signup .cw-news-headline,
.j-footer .j-footer-signup h4.cw-news-headline {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 700; letter-spacing: -0.018em;
  color: rgba(255,255,255,0.95);
  line-height: 1.2;
  margin: 0; max-width: 22ch;
  text-transform: none;
}
.j-footer-signup .cw-news-desc {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px; line-height: 1.55;
  color: rgba(255,255,255,0.6);
  margin: 0; max-width: 44ch;
}
.j-footer-signup .cw-news-form {
  margin-top: 6px;
  padding: 0;
  gap: 0;
  border: 0;
  background: transparent;
  border-bottom: 1px solid rgba(255, 249, 220, 0.2);
  transition: border-color 0.25s var(--cw-ease);
}
.j-footer-signup .cw-news-form:focus-within { border-bottom-color: var(--cw-gold); }
.j-footer-signup .cw-news-form input {
  flex: 1;
  padding: 12px 0;
  font-size: 14px;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.95);
}
.j-footer-signup .cw-news-form input::placeholder { color: var(--cw-taupe); opacity: 0.55; }
.j-footer-signup .cw-news-form button {
  padding: 10px 18px;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  background: var(--cw-gold);
  color: #0a0a09;
  font-weight: 700;
  text-transform: uppercase;
  transition: background 0.25s var(--cw-ease), color 0.25s var(--cw-ease);
}
.j-footer-signup .cw-news-form button:hover { background: rgba(255,255,255,0.95); color: #0a0a09; }
.j-footer-signup .cw-news-form-row {
  display: flex; align-items: center; gap: 12px;
}
.j-footer-signup .cw-news-success {
  font-size: 11.5px;
  padding: 8px 12px;
  border: 1px solid rgba(235, 197, 2, 0.35);
  color: var(--cw-gold);
  width: 100%;
  margin-top: 6px;
}

/* ============ NAV TRANSPARENT AT TOP, SOLID ON SCROLL ============
   Preserves each page's existing position (fixed on homepage, sticky
   on the shared journal/service pages). Just overrides the background
   so the nav is see-through until the user scrolls. */
.j-nav {
  background: transparent !important;
  border-bottom-color: transparent !important;
  transition: background 0.35s var(--cw-ease), border-color 0.35s var(--cw-ease), backdrop-filter 0.35s var(--cw-ease), padding 0.35s var(--cw-ease);
}
.j-nav.is-scrolled {
  background: rgba(10, 10, 9, 0.9) !important;
  -webkit-backdrop-filter: saturate(1.15) blur(14px);
          backdrop-filter: saturate(1.15) blur(14px);
  border-bottom-color: rgba(255, 249, 220, 0.08) !important;
}
/* Homepage .nav already handles is-scrolled itself; no override needed here. */


/* Legacy .cw-news-band selectors kept for the popup MODAL only (which still uses .cw-news-form). Band section is removed from every page. */

.cw-news-form {
  display: flex;
  gap: 10px;
  border: 1px solid var(--cw-line-strong);
  padding: 6px;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.3s var(--cw-ease);
}
.cw-news-form:focus-within { border-color: var(--cw-gold); }
.cw-news-form input {
  flex: 1;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  color: var(--cw-ink);
  font-family: 'Inter Tight', sans-serif;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  outline: none;
  min-width: 0;
}
.cw-news-form input::placeholder { color: var(--cw-taupe); opacity: 0.7; }
.cw-news-form button {
  padding: 14px 24px;
  background: var(--cw-gold);
  color: #0a0a09;
  border: 0;
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s var(--cw-ease), color 0.3s var(--cw-ease);
  white-space: nowrap;
}
.cw-news-form button:hover { background: var(--cw-ink); color: #0a0a09; }
.cw-news-hint {
  font-size: 11.5px;
  color: var(--cw-taupe);
  line-height: 1.6;
  margin-top: 12px;
  letter-spacing: 0.02em;
}
.cw-news-success {
  display: none;
  font-family: 'Inter Tight', sans-serif;
  font-size: 13.5px;
  color: var(--cw-gold);
  padding: 16px 18px;
  border: 1px solid rgba(235, 197, 2, 0.35);
  background: rgba(235, 197, 2, 0.05);
  letter-spacing: -0.005em;
}
.cw-news-success.is-shown { display: block; }

/* ============ NEWSLETTER MINI POPUP (bottom-left card) ============ */

.cw-modal {
  position: fixed;
  left: 20px; bottom: 20px;
  z-index: 9500;
  display: none;
  background: transparent;
  padding: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--cw-ease);
}
.cw-modal.is-open { display: block; pointer-events: auto; }
.cw-modal-card {
  position: relative;
  width: 340px; max-width: calc(100vw - 40px);
  background: var(--cw-bg-2);
  border: 1px solid var(--cw-line-strong);
  border-top: 2px solid var(--cw-gold);
  padding: 20px 22px 22px;
  box-shadow: 0 20px 48px -12px rgba(0,0,0,0.6);
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.4s var(--cw-ease), opacity 0.35s var(--cw-ease);
}
.cw-modal.is-open .cw-modal-card { transform: translateY(0); opacity: 1; }
.cw-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  background: transparent;
  border: 0;
  color: var(--cw-ink-soft);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.25s var(--cw-ease);
}
.cw-modal-close:hover { color: var(--cw-gold); }
.cw-modal-eyebrow {
  font-family: 'Inter Tight', sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cw-gold);
  font-weight: 700;
  margin-bottom: 8px;
  display: block;
}
.cw-modal-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--cw-ink);
  letter-spacing: -0.012em;
  line-height: 1.2;
  margin: 0 0 6px;
  text-wrap: balance;
}
.cw-modal-title .italic { color: var(--cw-gold); font-weight: 700; font-style: normal; }
.cw-modal-desc {
  font-size: 12.5px;
  color: var(--cw-ink-soft);
  line-height: 1.55;
  margin: 0 0 14px;
}
.cw-modal-bullets { display: none; }
.cw-modal .cw-news-form {
  margin-top: 4px;
  padding: 4px;
  border: 1px solid var(--cw-line-strong);
  background: rgba(255,255,255,0.03);
  display: flex; gap: 6px;
}
.cw-modal .cw-news-form input {
  flex: 1; min-width: 0;
  padding: 8px 10px;
  font-size: 12.5px;
  background: transparent; border: 0;
  color: var(--cw-ink);
}
.cw-modal .cw-news-form button {
  padding: 8px 12px;
  font-size: 10.5px; letter-spacing: 0.2em;
  background: var(--cw-gold); color: #0a0a09;
  border: 0; font-weight: 700; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
}
.cw-modal .cw-news-hint { margin-top: 10px; font-size: 11px; }
@media (max-width: 720px) {
  .cw-modal { left: 12px; right: 12px; bottom: 90px; }
  .cw-modal-card { width: 100%; }
}

/* ============ AI CHATBOT WIDGET ============ */

.cw-chat-fab {
  position: fixed !important;
  right: clamp(18px, 3vw, 32px);
  bottom: clamp(18px, 3vw, 32px);
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--cw-gold);
  color: #0a0a09;
  border: 0;
  cursor: pointer;
  z-index: 9999;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(235, 197, 2, 0.2);
  transition: transform 0.3s var(--cw-ease), background 0.3s var(--cw-ease);
  visibility: visible !important;
}
.cw-chat-fab:hover { transform: translateY(-2px); background: #FFD900; }
.cw-chat-fab svg { width: 28px; height: 28px; display: block; }
.cw-chat-fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #0a0a09;
  color: var(--cw-gold);
  border: 1px solid var(--cw-gold);
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: cw-pulse 2.4s ease-in-out infinite;
}
.cw-chat-fab.is-open .cw-chat-fab-badge { display: none; }
@keyframes cw-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.cw-chat-panel {
  position: fixed;
  right: clamp(18px, 3vw, 32px);
  bottom: calc(clamp(18px, 3vw, 32px) + 78px);
  width: min(400px, calc(100vw - 32px));
  height: min(600px, calc(100vh - 140px));
  background: var(--cw-bg-2);
  border: 1px solid var(--cw-line-strong);
  border-top: 2px solid var(--cw-gold);
  z-index: 9996;
  display: none;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
  transform: translateY(20px) scale(0.96);
  opacity: 0;
  transition: transform 0.35s var(--cw-ease), opacity 0.3s var(--cw-ease);
}
.cw-chat-panel.is-open {
  display: flex;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.cw-chat-header {
  padding: 20px 24px 18px;
  border-bottom: 1px solid var(--cw-line);
  display: flex;
  align-items: center;
  gap: 14px;
}
.cw-chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cw-gold), #FFD900);
  color: #0a0a09;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.cw-chat-title { flex: 1; min-width: 0; }
.cw-chat-title strong {
  display: block;
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px;
  color: var(--cw-ink);
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.cw-chat-title span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cw-taupe);
  font-weight: 500;
}
.cw-chat-title span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6bcf7f;
  box-shadow: 0 0 0 3px rgba(107, 207, 127, 0.15);
}
.cw-chat-close {
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--cw-line);
  color: var(--cw-ink-soft);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.25s var(--cw-ease);
  flex-shrink: 0;
}
.cw-chat-close:hover { border-color: var(--cw-gold); color: var(--cw-gold); }

.cw-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px 24px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--cw-line-strong) transparent;
}
.cw-chat-body::-webkit-scrollbar { width: 6px; }
.cw-chat-body::-webkit-scrollbar-thumb { background: var(--cw-line-strong); }

.cw-msg {
  max-width: 86%;
  padding: 14px 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #fdfaf0;
  letter-spacing: -0.005em;
  opacity: 1;
  animation: cw-rise 0.35s var(--cw-ease) both;
  font-weight: 400;
}
@keyframes cw-rise {
  from { transform: translateY(6px); }
  to { transform: translateY(0); }
}
.cw-msg.bot {
  align-self: flex-start;
  background: #23221b;
  border: 1px solid rgba(255, 249, 220, 0.14);
  border-top-left-radius: 0;
  color: #F7F4EC;
}
/* Force chat text to inherit the bubble colour so a page-level p{color} rule
   cannot dim it (bot bubbles were rendering dark-grey and unreadable). */
.cw-msg p, .cw-msg { color: inherit; }
.cw-msg.bot, .cw-msg.bot p { color: #F7F4EC; }
.cw-msg.bot strong { color: var(--cw-gold); font-weight: 600; }
.cw-msg.user {
  align-self: flex-end;
  background: var(--cw-gold);
  color: #0a0a09;
  border-top-right-radius: 0;
  font-weight: 500;
}
.cw-msg a {
  color: var(--cw-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(235, 197, 2, 0.35);
}
.cw-msg.user a { color: #0a0a09; border-bottom-color: rgba(10, 10, 9, 0.35); }
.cw-msg p { margin: 0 0 8px; }
.cw-msg p:last-child { margin: 0; }

.cw-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 24px 16px;
  border-top: 1px solid transparent;
}
/* Legacy fixed chips container is now unused; collapse it so it never steals
   space from the conversation or covers the input. Chips render inline in the
   scrollable body instead (.cw-chips-inline). */
.cw-chips:empty { display: none; padding: 0; }
.cw-chips-inline { padding: 6px 0 10px; }
.cw-chips button {
  padding: 9px 14px;
  background: transparent;
  color: var(--cw-ink-soft);
  border: 1px solid var(--cw-line-strong);
  cursor: pointer;
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  letter-spacing: -0.005em;
  transition: border-color 0.25s var(--cw-ease), color 0.25s var(--cw-ease), background 0.25s var(--cw-ease);
}
.cw-chips button:hover {
  border-color: var(--cw-gold);
  color: var(--cw-gold);
  background: rgba(235, 197, 2, 0.04);
}

.cw-chat-input {
  border-top: 1px solid var(--cw-line);
  padding: 14px 18px 16px;
  display: flex;
  gap: 8px;
  align-items: center;
  background: rgba(6, 6, 5, 0.4);
}
.cw-chat-input input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--cw-line);
  color: var(--cw-ink);
  font-family: 'Inter Tight', sans-serif;
  font-size: 13.5px;
  letter-spacing: -0.005em;
  outline: none;
  transition: border-color 0.25s var(--cw-ease);
}
.cw-chat-input input:focus { border-color: var(--cw-gold); }
.cw-chat-input input::placeholder { color: var(--cw-taupe); opacity: 0.7; }
.cw-chat-input button {
  width: 44px;
  height: 44px;
  background: var(--cw-gold);
  color: #0a0a09;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s var(--cw-ease);
  flex-shrink: 0;
}
.cw-chat-input button:hover { background: var(--cw-ink); }
.cw-chat-input button svg { width: 18px; height: 18px; }

.cw-chat-foot {
  padding: 8px 24px 12px;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cw-taupe);
  text-align: center;
  font-weight: 500;
}
.cw-chat-foot a { color: var(--cw-gold); text-decoration: none; }

.cw-typing {
  display: inline-flex;
  gap: 4px;
  padding: 14px 16px;
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--cw-line);
}
.cw-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cw-gold);
  opacity: 0.45;
  animation: cw-typing 1.2s ease-in-out infinite;
}
.cw-typing span:nth-child(2) { animation-delay: 0.15s; }
.cw-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes cw-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-3px); opacity: 1; }
}

@media (max-width: 520px) {
  .cw-chat-panel {
    right: 12px;
    left: 12px;
    width: auto;
    bottom: calc(clamp(18px, 3vw, 32px) + 72px);
    height: min(560px, calc(100vh - 120px));
  }
}

/* ============ NAV: SERVICES DROPDOWN ============ */
.j-nav-menu li.has-sub,
.nav-menu li.has-sub { position: relative; }
/* Chevron hidden (clean nav) */
.j-nav-menu li.has-sub > a .sub-chev,
.nav-menu li.has-sub > a .sub-chev { display: none; }

/* =========== MOBILE NAV HAMBURGER + ACCORDION =========== */
.cw-mnav-btn {
  display: none;
  width: 44px; height: 44px;
  background: transparent; border: 0; padding: 0;
  cursor: pointer; align-items: center; justify-content: center;
  z-index: 10001; position: relative;
}
.cw-mnav-btn span {
  display: block; width: 24px; height: 1.5px;
  background: currentColor; position: relative;
  transition: transform 0.3s var(--cw-ease), opacity 0.3s var(--cw-ease);
}
.cw-mnav-btn span::before,
.cw-mnav-btn span::after {
  content: ""; position: absolute; left: 0;
  width: 100%; height: 1.5px; background: currentColor;
  transition: transform 0.3s var(--cw-ease), top 0.3s var(--cw-ease);
}
.cw-mnav-btn span::before { top: -7px; }
.cw-mnav-btn span::after  { top: 7px; }
.cw-mnav-btn.is-open span { background: transparent; }
.cw-mnav-btn.is-open span::before { top: 0; transform: rotate(45deg); }
.cw-mnav-btn.is-open span::after  { top: 0; transform: rotate(-45deg); }

.cw-mnav {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(5,5,5,0.98);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--cw-ease), visibility 0.35s;
  display: flex; flex-direction: column;
  padding: 96px clamp(24px, 6vw, 48px) 32px;
  overflow-y: auto;
}
.cw-mnav.is-open { opacity: 1; visibility: visible; }
.cw-mnav ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0;
}
.cw-mnav > ul > li {
  border-bottom: 1px solid rgba(243,240,232,0.08);
}
.cw-mnav > ul > li > a,
.cw-mnav > ul > li > button {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 20px 0;
  font-family: 'Inter Tight', sans-serif;
  font-size: 22px; font-weight: 500; letter-spacing: -0.015em;
  color: #F3F0E8; text-decoration: none;
  background: transparent; border: 0; cursor: pointer;
  text-align: left;
}
.cw-mnav > ul > li > button .chev {
  width: 12px; height: 12px; position: relative; display: inline-block;
  transition: transform 0.3s var(--cw-ease);
}
.cw-mnav > ul > li > button .chev::before {
  content: ""; position: absolute; top: 2px; left: 1px;
  width: 8px; height: 8px;
  border-right: 1.5px solid #FFD900;
  border-bottom: 1.5px solid #FFD900;
  transform: rotate(45deg);
}
.cw-mnav > ul > li.is-expanded > button .chev { transform: rotate(180deg); }
.cw-mnav-sub {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s var(--cw-ease);
}
.cw-mnav > ul > li.is-expanded .cw-mnav-sub { max-height: 600px; }
.cw-mnav-sub li a {
  display: block; padding: 12px 0 12px 16px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 15.5px; font-weight: 400; letter-spacing: -0.005em;
  color: rgba(243,240,232,0.7); text-decoration: none;
}
.cw-mnav-sub li:last-child a { padding-bottom: 20px; }
.cw-mnav-sub li a:hover { color: #FFD900; }
.cw-mnav-foot {
  margin-top: auto; padding-top: 32px;
  display: flex; flex-direction: column; gap: 12px;
}
.cw-mnav-foot a.cta {
  display: flex; align-items: center; justify-content: center;
  padding: 16px 20px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; font-weight: 700;
  text-decoration: none;
}
.cw-mnav-foot a.book { background: #FFD900; color: #050505; }
.cw-mnav-foot a.call { background: transparent; color: #F3F0E8; border: 1px solid rgba(243,240,232,0.35); }

body.cw-mnav-open { overflow: hidden; }

@media (max-width: 1024px) {
  .cw-mnav-btn { display: inline-flex; color: var(--cw-ink, #F3F0E8); }
  .j-nav-menu, nav.nav .nav-menu { display: none !important; }
  .j-nav-cta, nav.nav .nav-cta { display: none !important; }
  .cw-nav-phone { display: none !important; }
}
.j-nav-menu .sub-menu,
.nav-menu .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 260px;
  padding: 12px 0;
  background: rgba(10, 10, 9, 0.95);
  -webkit-backdrop-filter: saturate(1.2) blur(18px);
          backdrop-filter: saturate(1.2) blur(18px);
  border: 1px solid rgba(255, 249, 220, 0.09);
  border-top: 2px solid var(--cw-gold);
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s var(--cw-ease), transform 0.28s var(--cw-ease), visibility 0.28s;
  z-index: 100;
  box-shadow: 0 20px 60px -10px rgba(0,0,0,0.6);
}
.j-nav-menu .sub-menu::before,
.nav-menu .sub-menu::before {
  content: "";
  position: absolute;
  top: -14px; left: 0; right: 0; height: 14px;
}
.j-nav-menu li.has-sub:hover .sub-menu,
.j-nav-menu li.has-sub:focus-within .sub-menu,
.nav-menu li.has-sub:hover .sub-menu,
.nav-menu li.has-sub:focus-within .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.j-nav-menu .sub-menu li,
.nav-menu .sub-menu li {
  display: block;
  margin: 0; padding: 0;
}
.j-nav-menu .sub-menu a,
.nav-menu .sub-menu a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 20px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  color: var(--cw-ink-soft);
  text-transform: none;
  letter-spacing: -0.005em;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.22s var(--cw-ease), background 0.22s var(--cw-ease), padding-left 0.22s var(--cw-ease);
}
.j-nav-menu .sub-menu a::before,
.nav-menu .sub-menu a::before {
  content: attr(data-num);
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--cw-taupe);
  font-weight: 600;
  min-width: 20px;
  transition: color 0.22s var(--cw-ease);
}
.j-nav-menu .sub-menu a::after,
.nav-menu .sub-menu a::after {
  display: none !important;
}
.j-nav-menu .sub-menu a:hover,
.nav-menu .sub-menu a:hover {
  color: var(--cw-gold);
  background: rgba(235, 197, 2, 0.06);
  padding-left: 24px;
}
.j-nav-menu .sub-menu a:hover::before,
.nav-menu .sub-menu a:hover::before { color: var(--cw-gold); }
/* Homepage nav uses lighter default type */
.nav-menu .sub-menu a { color: rgba(255,255,255,0.75); }

/* Phone number in nav, injected via JS */
.cw-nav-phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 13.5px; letter-spacing: -0.005em;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  padding: 8px 4px;
  transition: color 0.25s var(--cw-ease);
  white-space: nowrap;
}
.cw-nav-phone:hover { color: var(--cw-gold); }
.cw-nav-phone::before {
  content: "";
  width: 14px; height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z'/></svg>") no-repeat center / contain;
  color: var(--cw-gold);
  flex-shrink: 0;
}
@media (max-width: 1080px) { .cw-nav-phone { display: none; } }

/* =========== ARCHITECTURAL FRAME =========================
   Drafting-style offset yellow rectangle behind an image with
   two corner registration marks. Wrap any single standalone
   editorial image with <div class="arch-frame">...</div>.
   Use sparingly on hero portraits and feature photography.
   ========================================================== */
/* Arch-frame decorative bracket disabled, images now render full bleed */
.arch-frame { position: relative; padding: 0; }
.arch-frame > * { position: relative; z-index: 1; height: 100%; }
.arch-frame::before, .arch-frame::after { content: none; }
.arch-frame > .arch-corner-br { display: none; }

/* ============ BLOG POST WHITE THEME + HERO TOP-FOLD =========
   Turns each blog post page ivory with a cinematic hero using
   the existing .j-hero-image img as the header background.
   Body class .jp-white is added via JS on pages with .j-article-body.
   ============================================================ */
body.jp-white {
  background: #FDFDFC !important;
  color: #1A1916;
}
body.jp-white .j-nav {
  background: transparent !important;
}
body.jp-white .j-nav.is-scrolled {
  background: rgba(10, 10, 9, 0.9) !important;
  -webkit-backdrop-filter: saturate(1.15) blur(14px);
          backdrop-filter: saturate(1.15) blur(14px);
}
body.jp-white .j-hero-image { display: none !important; }

body.jp-white .j-article-header {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  padding: 160px 0 clamp(56px, 6vw, 96px);
  color: #F3F0E8;
  margin: 0;
}
body.jp-white .j-article-header::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background-image: var(--jp-hero, url('clarkson-assets/DSC07830-1.webp'));
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  animation: jp-hero-in 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
@keyframes jp-hero-in {
  from { opacity: .4; transform: scale(1.08); }
  to   { opacity: 1;  transform: scale(1.02); }
}
body.jp-white .j-article-header::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(5,5,5,0.55), rgba(5,5,5,0.35) 40%, rgba(5,5,5,0.9)),
    linear-gradient(90deg, rgba(5,5,5,0.5), rgba(5,5,5,0) 55%);
}
body.jp-white .j-article-header .container-narrow {
  max-width: 920px;
  width: 100%;
  padding: 0 clamp(24px, 4.4vw, 72px);
  margin: 0 auto;
}
body.jp-white .j-article-header .j-breadcrumb,
body.jp-white .j-article-header .j-breadcrumb a,
body.jp-white .j-article-header .j-breadcrumb .here,
body.jp-white .j-article-header .j-breadcrumb .sep {
  color: rgba(243,240,232,0.75);
}
body.jp-white .j-article-header .j-breadcrumb a:hover { color: #FFD900; }
body.jp-white .j-article-header .j-breadcrumb .here { color: #FFD900; }
body.jp-white .j-article-header .j-article-meta { color: rgba(243,240,232,0.72); margin-top: 24px; margin-bottom: 28px; }
body.jp-white .j-article-header .j-article-meta .cat {
  background: transparent; color: #FFD900; padding: 0;
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px; letter-spacing: 0.28em;
  text-transform: uppercase; font-weight: 600;
}
body.jp-white .j-article-header .j-article-meta .dot { background: rgba(255,217,0,0.6); }
body.jp-white .j-article-header h1 {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(32px, 4.4vw, 64px);
  line-height: 1.04; letter-spacing: -0.024em; font-weight: 700;
  color: #F3F0E8;
  margin: 0 0 18px;
  max-width: 22ch;
}
body.jp-white .j-article-header h1 .italic,
body.jp-white .j-article-header h1 em {
  color: #FFD900; font-style: normal; font-weight: 700;
}
body.jp-white .j-article-header .j-article-lede {
  font-family: 'Inter', sans-serif;
  font-size: clamp(15.5px, 1.1vw, 17px); line-height: 1.65;
  color: rgba(243,240,232,0.88);
  max-width: 52ch;
  margin: 0 0 32px;
}
body.jp-white .j-article-header .j-author-row {
  padding-top: 24px;
  border-top: 1px solid rgba(243,240,232,0.14);
  color: rgba(243,240,232,0.75);
}
body.jp-white .j-article-header .j-author-name { color: #F3F0E8; }
body.jp-white .j-article-header .j-author-role { color: rgba(243,240,232,0.6); }
body.jp-white .j-article-header .j-share a { color: rgba(243,240,232,0.75); border-color: rgba(243,240,232,0.22); }
body.jp-white .j-article-header .j-share a:hover { color: #FFD900; border-color: #FFD900; }

/* Article body on ivory */
body.jp-white .j-article-body {
  background: #FDFDFC;
  color: #1A1916;
  padding: clamp(72px, 8vw, 120px) 0;
}
body.jp-white .j-article-body p,
body.jp-white .j-article-body li { color: #343A38; }
body.jp-white .j-article-body h2,
body.jp-white .j-article-body h3,
body.jp-white .j-article-body h4 { color: #1A1916; }
body.jp-white .j-article-body h2::before { background: #FFD900; }
body.jp-white .j-article-body a { color: #1A1916; border-bottom-color: #FFD900; }
body.jp-white .j-article-body a:hover { color: #343A38; }
body.jp-white .j-article-body strong,
body.jp-white .j-article-body b { color: #1A1916; font-weight: 600; }
body.jp-white .j-article-body em,
body.jp-white .j-article-body i { color: #1A1916; font-style: italic; }
body.jp-white .j-article-body blockquote {
  border-left-color: #FFD900;
  color: #1A1916;
}
body.jp-white .j-faq-item { border-bottom-color: rgba(20,20,18,0.14); }
body.jp-white .j-faq-item h3 { color: #1A1916; }
body.jp-white .j-faq-item p  { color: #343A38; }
body.jp-white .j-faq-item strong,
body.jp-white .j-faq-item b { color: #1A1916; font-weight: 600; }
body.jp-white .j-faq-item em,
body.jp-white .j-faq-item i { color: #1A1916; font-style: italic; }
body.jp-white .j-related { background: #FDFDFC; color: #1A1916; }
body.jp-white .j-related h2 { color: #1A1916; }
body.jp-white .j-related-card { background: transparent; }
body.jp-white .j-related-card h3 { color: #1A1916; }
body.jp-white .j-related-card p  { color: #6B6760; }
body.jp-white .j-cta-band { color: #F3F0E8; }
body.jp-white .j-cta-band h2 { color: #F3F0E8; }
body.jp-white .j-cta-band p  { color: rgba(243,240,232,0.78); }
body.jp-white .j-cta-band .eyebrow { color: #FFD900; }

/* Callout on ivory */
body.jp-white .j-callout {
  background: #EFEBE3;
  border-color: rgba(20,20,18,0.12);
  border-top-color: #FFD900;
}
body.jp-white .j-callout h4 { color: #1A1916; }
body.jp-white .j-callout p  { color: #343A38; }
body.jp-white .j-callout-label { color: #8B7A00; }

/* Inline mid-article CTA (dark card on ivory page) */
body.jp-white .j-inline-cta {
  background: #14140F;
  margin: clamp(36px, 4vw, 56px) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(32px, 3.5vw, 48px);
  border-top: 1px solid #FFD900;
}
body.jp-white .j-inline-cta-text {
  display: flex; flex-direction: column; gap: 10px;
  color: #F3F0E8;
  flex: 1;
  max-width: 34ch;
}
body.jp-white .j-inline-cta h4 {
  color: #F3F0E8;
  max-width: none;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  margin: 0;
}
body.jp-white .j-inline-cta-eyebrow {
  color: #FFD900;
  margin-bottom: 0;
}
body.jp-white .j-inline-cta .j-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 220px;
  min-height: 52px;
  padding: 0 28px;
  text-align: center;
  line-height: 1;
}
@media (max-width: 720px) {
  body.jp-white .j-inline-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  body.jp-white .j-inline-cta .j-btn { width: 100%; }
}

/* Tighten article-end + author-bio spacing on ivory */
body.jp-white .j-article-end { padding: clamp(20px, 2vw, 32px) 0; margin-top: clamp(24px, 3vw, 40px); }
body.jp-white .j-author-bio { padding: clamp(24px, 3vw, 40px) 0; }

/* Tags + share strip */
body.jp-white .j-article-end {
  border-top-color: rgba(20,20,18,0.14);
  border-bottom-color: rgba(20,20,18,0.14);
}
body.jp-white .j-tags li {
  border-color: rgba(20,20,18,0.22);
  color: #343A38;
}
body.jp-white .j-tags li:hover { border-color: #1A1916; color: #1A1916; }
body.jp-white .j-share-end { color: #6B6760; }
body.jp-white .j-share-end a { color: #1A1916; }
body.jp-white .j-share-end a:hover { color: #6B6760; }

/* Author bio block */
body.jp-white .j-author-bio { border-bottom-color: rgba(20,20,18,0.14); }
body.jp-white .j-author-bio h4 { color: #1A1916; }
body.jp-white .j-author-role-line { color: #6B6760; }
body.jp-white .j-author-bio p  { color: #343A38; }
body.jp-white .j-author-bio p a { color: #1A1916; border-bottom-color: #FFD900; }
body.jp-white .j-author-avatar {
  background: #EFEBE3;
  border-color: rgba(20,20,18,0.14);
  color: #1A1916;
}

/* Figure captions on ivory */
body.jp-white .j-article-body figure figcaption {
  color: #343A38;
  font-style: italic;
}

/* FAQ accordion on ivory */
body.jp-white .j-faq h2 { color: #1A1916; }
body.jp-white .j-faq-intro { color: #6B6760; }
body.jp-white .j-faq-list { border-top-color: rgba(20,20,18,0.14); }
body.jp-white .j-faq-q { color: #1A1916; }
body.jp-white .j-faq-a-inner { color: #343A38; }
body.jp-white .j-faq-icon { border-color: rgba(20,20,18,0.28); }

@media (max-width: 720px) {
  body.jp-white .j-article-header { min-height: 70vh; padding-top: 130px; }
}

/* ==========================================================
   COOKIE CONSENT BANNER
   ========================================================== */
.cc-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10002;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px 18px;
  padding: 11px clamp(16px, 4vw, 44px);
  background: #14140F;
  color: #F4F1EA;
  border-top: 2px solid rgba(255,217,0,0.55);
  box-shadow: 0 -14px 40px -22px rgba(0,0,0,0.6);
  font-family: 'Inter', 'Inter Tight', sans-serif;
  opacity: 0; transform: translateY(100%);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.cc-banner.is-shown { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* Thin single-row bar: hide the eyebrow + headline, inline the message and actions */
.cc-banner .cc-eyebrow, .cc-banner h3 { display: none; }
.cc-banner p { margin: 0; font-size: 12.5px; line-height: 1.5; color: rgba(244,241,234,0.82); flex: 1 1 360px; max-width: none; }
.cc-banner .cc-actions { margin: 0; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.cc-banner .cc-btn { flex: 0 0 auto; }
.cc-banner .cc-btn-manage { flex-basis: auto; margin-top: 0; }
@media (max-width: 640px) {
  .cc-banner { padding: 12px 16px; gap: 8px 12px; }
  .cc-banner p { flex-basis: 100%; text-align: center; }
  .cc-banner .cc-actions { width: 100%; justify-content: center; }
}
.cc-eyebrow {
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: #FFD900; font-weight: 600;
  margin-bottom: 10px; display: block;
}
.cc-banner h3 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 16px; font-weight: 500;
  color: #F4F1EA; margin: 0 0 8px;
  letter-spacing: -0.005em; line-height: 1.3;
}
.cc-banner p {
  font-size: 13px; line-height: 1.55;
  color: rgba(243,240,232,0.7); margin: 0 0 18px;
}
.cc-banner p a { color: #FFD900; text-decoration: none; border-bottom: 1px solid rgba(255,217,0,0.4); }
.cc-banner p a:hover { border-bottom-color: #FFD900; }
.cc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-btn {
  flex: 1 1 auto;
  padding: 10px 14px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 600; cursor: pointer;
  border-radius: 2px;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap;
}
.cc-btn-accept { background: #FFD900; color: #14140F; border: 1px solid #FFD900; }
.cc-btn-accept:hover { background: transparent; color: #FFD900; }
.cc-btn-reject { background: transparent; color: #F4F1EA; border: 1px solid rgba(243,240,232,0.32); }
.cc-btn-reject:hover { border-color: #F4F1EA; }
.cc-btn-manage { background: transparent; color: rgba(243,240,232,0.7); border: 1px solid transparent; padding-left: 6px; padding-right: 6px; flex-basis: 100%; margin-top: 4px; }
.cc-btn-manage:hover { color: #FFD900; }

/* Preferences modal */
.cc-modal {
  position: fixed; inset: 0; z-index: 10002;
  display: none; align-items: center; justify-content: center;
  background: rgba(5,5,5,0.72);
  padding: 24px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.cc-modal.is-open { display: flex; }
.cc-modal-card {
  background: #14140F;
  color: #F4F1EA;
  max-width: 560px; width: 100%;
  max-height: 88vh; overflow-y: auto;
  padding: 32px 32px 24px;
  border: 1px solid rgba(255,217,0,0.5);
  border-radius: 4px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7);
  position: relative;
}
.cc-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  background: transparent; border: 0; cursor: pointer;
  color: rgba(243,240,232,0.6);
  font-size: 22px; line-height: 1;
  transition: color 0.2s ease;
}
.cc-modal-close:hover { color: #FFD900; }
.cc-modal h3 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 22px; font-weight: 500;
  margin: 0 0 8px; letter-spacing: -0.01em;
  color: #F4F1EA;
}
.cc-modal > .cc-modal-card > p {
  font-size: 14px; line-height: 1.6;
  color: rgba(243,240,232,0.72);
  margin: 0 0 24px;
}
.cc-cat {
  padding: 18px 0;
  border-top: 1px solid rgba(243,240,232,0.12);
  display: grid; grid-template-columns: 1fr auto; gap: 16px;
  align-items: start;
}
.cc-cat:last-of-type { border-bottom: 1px solid rgba(243,240,232,0.12); }
.cc-cat h4 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px; font-weight: 500;
  margin: 0 0 6px; color: #F4F1EA;
  letter-spacing: -0.005em;
}
.cc-cat p {
  font-size: 12.5px; line-height: 1.55;
  color: rgba(243,240,232,0.65); margin: 0;
}
.cc-toggle {
  position: relative; width: 44px; height: 24px;
  display: inline-block; flex-shrink: 0; margin-top: 2px;
}
.cc-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.cc-toggle-track {
  position: absolute; inset: 0;
  background: rgba(243,240,232,0.16);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s ease;
}
.cc-toggle-track::before {
  content: ""; position: absolute;
  left: 3px; top: 3px;
  width: 18px; height: 18px;
  background: #F4F1EA; border-radius: 50%;
  transition: transform 0.25s ease;
}
.cc-toggle input:checked ~ .cc-toggle-track { background: #FFD900; }
.cc-toggle input:checked ~ .cc-toggle-track::before {
  transform: translateX(20px);
  background: #14140F;
}
.cc-toggle input:disabled ~ .cc-toggle-track {
  background: rgba(255,217,0,0.4); cursor: not-allowed;
}
.cc-toggle input:disabled ~ .cc-toggle-track::before { background: #14140F; }
.cc-modal-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 24px;
}
.cc-modal-actions .cc-btn { flex: 1 1 auto; min-width: 140px; }

/* =====================================================================
   MOBILE STICKY ACTION BAR
   Two full-width buttons (Call · Free Survey) fixed to bottom of viewport
   on phones. Auto-injected via widgets.js. Only visible ≤720px so it
   never competes with the desktop chatbot / sticky pill.
   ===================================================================== */
.cw-mbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9990;
  display: none;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  gap: 8px;
  background: rgba(14, 14, 12, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 217, 0, 0.35);
  transform: translateY(120%);
  transition: transform 0.4s var(--cw-ease);
}
.cw-mbar.is-shown { transform: translateY(0); }
.cw-mbar a {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 14px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  border-radius: 2px;
  transition: opacity 0.25s ease;
}
.cw-mbar a:active { opacity: 0.7; }
.cw-mbar a.cw-mbar-call {
  background: transparent;
  color: #FFD900;
  border: 1px solid rgba(255, 217, 0, 0.55);
}
.cw-mbar a.cw-mbar-survey {
  background: #FFD900;
  color: #14140F;
}
.cw-mbar svg { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 720px) {
  .cw-mbar { display: flex; }
  /* Nudge chatbot up so it never sits over the bar */
  .cw-chat-fab { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
  /* Hide older desktop-style sticky pill on mobile */
  .sticky-cta { display: none !important; }
  body { padding-bottom: 76px; }
}

/* =====================================================================
   LQIP / SHIMMER SKELETON
   Applied automatically to <img loading="lazy"> before the image loads.
   Adds a soft warm shimmer that fades out once the image is decoded.
   ===================================================================== */
img.cw-lqip {
  background:
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.08) 40%, rgba(255,255,255,0) 80%),
    #d8d3c6;
  background-repeat: no-repeat;
  background-size: 200% 100%;
  animation: cwShimmer 1.4s ease-in-out infinite;
  opacity: 0;
  transition: opacity 0.5s ease;
}
img.cw-lqip.cw-in { opacity: 1; }
img.cw-lqip.cw-loaded {
  animation: none;
  background: none;
}
@keyframes cwShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =====================================================================
   CTA DESIGN TOKENS
   Three canonical button styles for all future CTAs.
   Legacy CTAs remain unchanged; use these on new pages.
   ===================================================================== */
.cta-tk {
  --cta-h: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: var(--cta-h);
  padding: 0 26px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: background 0.3s var(--cw-ease), color 0.3s var(--cw-ease), gap 0.3s var(--cw-ease), border-color 0.3s var(--cw-ease);
  cursor: pointer;
}
.cta-tk--primary { background: #FFD900; color: #14140F; }
.cta-tk--primary:hover { background: transparent; color: #FFD900; border-color: #FFD900; gap: 18px; }

.cta-tk--ghost { background: transparent; color: #14140F; border-color: rgba(20,20,15,0.35); }
.cta-tk--ghost:hover { background: #14140F; color: #F4F1EA; border-color: #14140F; gap: 18px; }
.cta-tk--ghost.on-dark { color: #F4F1EA; border-color: rgba(244,241,234,0.45); }
.cta-tk--ghost.on-dark:hover { background: #FFD900; color: #14140F; border-color: #FFD900; }

.cta-tk--link {
  padding: 0; min-height: auto; background: transparent; border: 0;
  color: #14140F; letter-spacing: 0.18em;
  border-bottom: 1px solid currentColor; padding-bottom: 6px;
}
.cta-tk--link:hover { gap: 18px; color: #6B6760; }
.cta-tk--link.on-dark { color: #F4F1EA; }
.cta-tk--link.on-dark:hover { color: #FFD900; }
.cta-tk .arrow { transition: transform 0.3s var(--cw-ease); }
.cta-tk:hover .arrow { transform: translateX(4px); }

/* =====================================================================
   PRINT STYLES
   Hide interactive chrome; keep content readable on paper.
   ===================================================================== */
@media print {
  .j-nav, nav.nav, .cw-mnav, .cw-mnav-btn, .cw-nav-phone,
  .cw-chat-fab, .cw-chat-panel, .cw-mbar,
  .cw-news-modal, .cc-banner, .cc-modal,
  .sticky-cta, .j-footer-signup, .footer-newsletter,
  .exit-modal, .rain, .drone-marquee, .fb-band,
  .pr-cta-band, .cta-band, .footer-cta {
    display: none !important;
  }
  html, body {
    background: #fff !important;
    color: #14140F !important;
    font-size: 12pt;
    line-height: 1.55;
  }
  * {
    background: transparent !important;
    color: #14140F !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a { color: #14140F !important; text-decoration: underline; }
  img { max-width: 100% !important; page-break-inside: avoid; }
  h1, h2, h3 { page-break-after: avoid; }
  section, article { page-break-inside: avoid; }
  .hero, .hero-bg, .pj-hero, .j-post-hero {
    height: auto !important; min-height: 0 !important;
  }
  /* Print header on every page */
  @page { margin: 20mm 18mm; }
}

/* =====================================================================
   SITEWIDE FOOTER (homepage pattern)
   Ported from clarkson-roofing.html so every page renders the same
   footer. Self-contained (no dependency on page-local CSS vars).
   ===================================================================== */
.footer {
  background-color: #060605;
  color: rgba(255,255,255,0.7);
  padding: 60px 0 30px;
  font-family: 'Inter Tight', sans-serif;
}
.footer .container {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding-left: clamp(22px, 4.4vw, 80px);
  padding-right: clamp(22px, 4.4vw, 80px);
}
.footer a { color: inherit; text-decoration: none; transition: color 0.3s ease, opacity 0.3s ease; }
.footer a:hover { color: #FFD900; opacity: 1; }
.footer .logo-wordmark.footer-wordmark { height: 38px; display: block; }
.footer .logo.logo-img { margin-bottom: 22px; }
.footer .logo { color: #fff; margin-bottom: 22px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 44px;
}
.footer-about p {
  font-size: 14px; line-height: 1.7;
  max-width: 42ch;
  color: rgba(255,255,255,0.55);
  margin: 0 0 22px;
}
.footer-contact { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.footer-contact a:hover { color: #FFD900; opacity: 1; }
.footer-contact .phone {
  font-family: 'Inter Tight', sans-serif;
  font-size: 22px; color: #fff;
  font-weight: 400; margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.footer-col h4 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px; letter-spacing: 0.26em;
  text-transform: uppercase; color: #FFD900;
  font-weight: 600; margin: 0 0 20px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: 14px; color: rgba(255,255,255,0.8); }

/* Accreditation logo strip (injected before .footer-bottom by clarkson-widgets.js) */
.footer-accred {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 26px 0 4px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-accred-label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: #FFD900; font-weight: 600;
}
.footer-accred-logos { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.footer-accred-chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 8px 16px;
  background: #fff; border-radius: 4px;
}
.footer-accred-chip img { height: 100%; width: auto; display: block; object-fit: contain; }
.footer-accred-text {
  flex-direction: column; gap: 2px; line-height: 1;
  font-family: 'Inter Tight', sans-serif; font-weight: 700;
  color: #1A1916; font-size: 15px; letter-spacing: -0.01em;
}
.footer-accred-text small {
  font-size: 8.5px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: #8B7A00;
}
.footer-bottom {
  margin-top: 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.4);
}
.footer-bottom > :nth-child(1) { justify-self: start; }
.footer-bottom > :nth-child(2) { justify-self: center; text-align: center; }
.footer-bottom > :nth-child(3) { justify-self: end; text-align: right; }
.footer-bottom-meta {
  display: inline-flex; align-items: center;
  gap: 18px; flex-wrap: wrap;
  justify-content: center;
}
.footer-bottom-meta span:not(:last-child)::after {
  content: '·';
  margin-left: 18px;
  color: rgba(255,255,255,0.2);
}
.footer-credit {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11.5px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.04em;
}
.footer-credit a { color: rgba(255,255,255,0.7); }
.footer-credit a:hover { color: #FFD900; }
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 900px) {
  .footer-bottom { grid-template-columns: 1fr; text-align: center; }
  .footer-bottom > :nth-child(1),
  .footer-bottom > :nth-child(2),
  .footer-bottom > :nth-child(3) { justify-self: center; text-align: center; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; }
}


/* ---------------- Featured reading (service pages) ---------------- */
.cw-read-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.6vw, 24px); margin-top: 44px; }
@media (max-width: 860px) { .cw-read-grid { grid-template-columns: 1fr; max-width: 460px; } }
.cw-read-card { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(20,20,18,0.12); text-decoration: none; color: inherit; transition: border-color .25s ease, transform .25s ease; }
.cw-read-card:hover { border-color: rgba(20,20,18,0.42); transform: translateY(-3px); }
.cw-read-card-img { aspect-ratio: 16 / 10; overflow: hidden; background: #EFEBE3; }
.cw-read-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(0.2,0.7,0.2,1); }
.cw-read-card:hover .cw-read-card-img img { transform: scale(1.05); }
.cw-read-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.cw-read-cat { font-family: 'Inter Tight', sans-serif; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: #8B8B84; }
.cw-read-title { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 19px; line-height: 1.18; letter-spacing: -0.012em; color: #141412; }
.cw-read-more { margin-top: auto; font-family: 'Inter Tight', sans-serif; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: #141412; display: inline-flex; align-items: center; gap: 8px; }
.cw-read-more::after { content: "\2192"; transition: margin-left .25s ease; }
.cw-read-card:hover .cw-read-more { gap: 14px; }

/* ---------------- Page fade-in (seamless page to page) ----------------
   Pure CSS, render-blocking in <head>, so it applies before first paint.
   Each page simply fades its content in on load. No overlay, no JS, so it
   can never get stuck covering the page. Opacity does not affect fixed
   positioning, so the sticky nav and widgets are unaffected. */
@keyframes cwPageFade { from { opacity: 0; } to { opacity: 1; } }
body { animation: cwPageFade 0.42s ease both; }
@media (prefers-reduced-motion: reduce) { body { animation: none; } }

/* ---------------- Per-service gallery (gallery-page style) ---------------- */
.cw-svcgal { column-count: 3; column-gap: 4px; }
@media (max-width: 900px) { .cw-svcgal { column-count: 2; } }
@media (max-width: 560px) { .cw-svcgal { column-count: 1; } }
.cw-svcgal-tile {
  display: block; width: 100%; margin-bottom: 4px;
  break-inside: avoid; position: relative; overflow: hidden;
  background: #0d0d0b; cursor: default;
}
.cw-svcgal-tile img {
  width: 100%; height: auto; display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease;
}
.cw-svcgal-tile:hover img { transform: scale(1.04); filter: brightness(0.9); }

/* ---------------- Newsletter minimised tab ---------------- */
.cw-news-tab {
  position: fixed; left: 20px; bottom: 20px; z-index: 9490;
  display: none; align-items: center; gap: 10px;
  padding: 11px 12px 11px 15px;
  background: var(--cw-bg-2);
  border: 1px solid var(--cw-line-strong);
  border-top: 2px solid var(--cw-gold);
  color: var(--cw-ink);
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 16px 40px -16px rgba(0,0,0,0.6);
  transition: border-color 0.25s var(--cw-ease), transform 0.25s var(--cw-ease);
  animation: cw-news-tab-in 0.35s var(--cw-ease);
}
.cw-news-tab.is-shown { display: inline-flex; }
.cw-news-tab:hover { transform: translateY(-2px); border-top-color: var(--cw-gold); }
.cw-news-tab .cw-news-tab-ico { color: var(--cw-gold); display: inline-flex; }
.cw-news-tab .cw-news-tab-ico svg { width: 17px; height: 17px; }
.cw-news-tab .k { line-height: 1; }
.cw-news-tab .cw-news-tab-x {
  margin-left: 4px; width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; color: var(--cw-taupe);
  border: 1px solid var(--cw-line); border-radius: 2px;
}
.cw-news-tab .cw-news-tab-x:hover { color: var(--cw-gold); border-color: var(--cw-gold); }
@keyframes cw-news-tab-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 520px) { .cw-news-tab { left: 12px; bottom: 12px; } }

/* ---------------- Related case studies (service pages) ---------------- */
.cw-cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.6vw, 24px); margin-top: 44px; }
@media (max-width: 900px) { .cw-cs-grid { grid-template-columns: 1fr; max-width: 460px; } }
.cw-cs-card { display: block; text-decoration: none; color: inherit; background: #FFFFFF; border: 1px solid #DDD8CF; transition: border-color .25s ease, transform .25s ease; }
.cw-cs-card:hover { border-color: #FFD900; transform: translateY(-4px); }
.cw-cs-img { display: block; aspect-ratio: 16/10; overflow: hidden; background: #EFEBE3; }
.cw-cs-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(0.2,0.7,0.2,1); }
.cw-cs-card:hover .cw-cs-img img { transform: scale(1.05); }
.cw-cs-body { display: block; padding: 22px 24px 26px; }
.cw-cs-tag { display: block; font-family: 'Inter Tight', sans-serif; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: #8B7A00; margin-bottom: 11px; }
.cw-cs-title { display: block; font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 18.5px; letter-spacing: -0.012em; color: #1A1916; line-height: 1.2; }
.cw-cs-desc { display: block; margin-top: 9px; font-size: 13.5px; line-height: 1.55; color: #6B6760; }
.cw-cs-more { display: inline-block; margin-top: 16px; font-family: 'Inter Tight', sans-serif; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: #1A1916; }
.cw-cs-more::after { content: " \2192"; color: #8B7A00; }

/* Site-wide motion: scroll progress bar */
.cw-scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;transform:scaleX(0);transform-origin:0 50%;background:#FFD900;z-index:2147483000;pointer-events:none;will-change:transform;transition:transform .08s linear}
@media (prefers-reduced-motion:reduce){.cw-scroll-progress{display:none}}

/* ---------------- Footer accreditation lockup (right-side gap, no background) ---------------- */
.footer-grid .footer-about { grid-row: 1 / span 2; }
.footer-accred {
  grid-column: 2 / -1; grid-row: 2;
  align-self: end; justify-self: end;
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  gap: clamp(26px, 3vw, 46px);
  padding-top: 34px;
}
.footer-accred .fa-label {
  flex-basis: 100%; margin-bottom: -6px;
  font-family: 'Inter Tight', sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,.34); text-align: right;
}
.footer-accred img {
  display: block; width: auto; opacity: .62;
  transition: opacity .3s ease, filter .3s ease;
  filter: saturate(0);
}
.footer-accred img.fa-nfrc   { height: 30px; }
.footer-accred img.fa-restec { height: 30px; }
.footer-accred img.fa-rubber { height: 30px; }
.footer-accred img:hover { opacity: .95; }
@media (max-width: 900px) {
  .footer-grid .footer-about { grid-row: auto; }
  .footer-accred { grid-column: 1 / -1; grid-row: auto; justify-self: start; align-items: center; padding-top: 6px; }
  .footer-accred .fa-label { text-align: left; }
}

/* ---------------- Scrolling Google reviews (dark section) ---------------- */
.rev-wrap { margin-top: clamp(40px, 5vw, 66px); position: relative; }
.rev-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.rev-track { display: flex; gap: 22px; width: max-content; animation: rev-scroll 72s linear infinite; will-change: transform; }
.rev-wrap:hover .rev-track { animation-play-state: paused; }
.rev-card {
  flex: 0 0 clamp(290px, 82vw, 410px); box-sizing: border-box;
  background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.10);
  padding: 30px 32px 26px; display: flex; flex-direction: column; gap: 15px; min-height: 268px;
  transition: border-color .3s ease, background .3s ease;
}
.rev-card:hover { border-color: rgba(255,217,0,0.5); background: rgba(255,255,255,0.06); }
.rev-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rev-stars { display: inline-flex; gap: 3px; color: #FFD900; }
.rev-stars svg { width: 15px; height: 15px; }
.rev-gicon { width: 19px; height: 19px; flex: none; }
.rev-quote { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 14.5px; line-height: 1.62; color: rgba(243,240,232,0.84); margin: 0; }
.rev-cite { margin-top: auto; display: flex; align-items: center; gap: 11px; padding-top: 6px; }
.rev-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 15px; color: #fff; flex: none; }
.rev-who { display: flex; flex-direction: column; line-height: 1.32; }
.rev-name { font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 13.5px; color: #fff; letter-spacing: -0.01em; }
.rev-meta { font-size: 11px; color: rgba(243,240,232,0.5); letter-spacing: 0.015em; }
@keyframes rev-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 11px)); } }
@media (prefers-reduced-motion: reduce) {
  .rev-viewport { overflow-x: auto; }
  .rev-track { animation: none; }
}

/* ---------------- Site-wide auto scroll-reveal (obvious rise) ---------------- */
.cw-rise { opacity: 0; transform: translateY(58px) scale(.988); transition: opacity .7s ease, transform .92s cubic-bezier(.16,.84,.32,1); will-change: opacity, transform; }
.cw-rise.cw-shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .cw-rise { opacity: 1 !important; transform: none !important; } }

/* ---------------- Work Breakdown: full-screen 2-column panels ---------------- */
.wb-panels { display: block; }
.wb-panel { display: grid; grid-template-columns: 1.02fr 0.98fr; min-height: 100vh; }
.wb-panel-media { position: relative; overflow: hidden; background: #0a0a09; min-height: 54vh; }
.wb-panel-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.09); transition: transform 1.6s cubic-bezier(.16,.84,.32,1); }
.wb-panel.cw-shown .wb-panel-media img { transform: scale(1); }
.wb-stage { position: absolute; left: 22px; bottom: 22px; z-index: 2; font-family: 'Inter Tight', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: rgba(10,10,9,.5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); padding: 8px 15px; }
.wb-panel-body { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: clamp(44px,6vw,112px); background: #F4F1EA; }
.wb-num { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: clamp(54px,7vw,104px); line-height: .85; letter-spacing: -.03em; color: rgba(26,25,22,.10); }
.wb-kicker { font-family: 'Inter Tight', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #8B7A00; }
.wb-title { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: clamp(26px,3vw,40px); line-height: 1.12; letter-spacing: -.02em; color: #1A1916; }
.wb-copy { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 16px; line-height: 1.75; color: #5c574f; max-width: 46ch; }
.wb-panel:nth-child(even) .wb-panel-media { order: 2; }
.wb-panel:nth-child(even) .wb-panel-body { order: 1; background: #100F0E; }
.wb-panel:nth-child(even) .wb-num { color: rgba(255,255,255,.09); }
.wb-panel:nth-child(even) .wb-kicker { color: #FFD900; }
.wb-panel:nth-child(even) .wb-title { color: #F4F1EA; }
.wb-panel:nth-child(even) .wb-copy { color: rgba(243,240,232,.68); }
.wb-panel-body > * { opacity: 0; transform: translateY(42px); transition: opacity .7s ease, transform .95s cubic-bezier(.16,.84,.32,1); }
.wb-panel.cw-shown .wb-panel-body > * { opacity: 1; transform: none; }
.wb-panel.cw-shown .wb-panel-body > *:nth-child(2) { transition-delay: .08s; }
.wb-panel.cw-shown .wb-panel-body > *:nth-child(3) { transition-delay: .16s; }
.wb-panel.cw-shown .wb-panel-body > *:nth-child(4) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .wb-panel-body > *, .wb-panel-media img { opacity: 1 !important; transform: none !important; } }
@media (max-width: 860px) {
  .wb-panel, .wb-panel:nth-child(even) { grid-template-columns: 1fr; }
  .wb-panel-media, .wb-panel:nth-child(even) .wb-panel-media { order: -1; min-height: 44vh; }
  .wb-panel-body, .wb-panel:nth-child(even) .wb-panel-body { order: 0; min-height: 52vh; padding: clamp(36px,9vw,60px); }
}

/* ---------------- Standalone image yellow offset frame (site-wide) ---------------- */
.cw-imgframe { position: relative; display: block; padding: 0 18px 18px 0; }
.cw-imgframe > * { position: relative; z-index: 1; display: block; margin: 0; }
.cw-imgframe::before {
  content: ""; position: absolute; top: 18px; left: 18px; right: 0; bottom: 0;
  border: 1px solid #FFD900; pointer-events: none; z-index: 0;
}
.cw-imgframe::after {
  content: ""; position: absolute; top: -1px; left: -1px; width: 24px; height: 24px;
  border-top: 1.5px solid #FFD900; border-left: 1.5px solid #FFD900;
  pointer-events: none; z-index: 2;
}
@media (max-width: 700px) { .cw-imgframe { padding: 0 12px 12px 0; } .cw-imgframe::before { top: 12px; left: 12px; } }

/* ============================================================
   White-default redesign: rounded buttons, WhatsApp FAB, benefit symbol
   ============================================================ */
/* Round every button sitewide (LP keeps its own token system) */
.pr-btn, .pr-btn-yellow, .pr-btn-ghost,
.ab-btn, .ab-btn-yellow, .ab-btn-ghost,
.svc-btn, .svc-btn-primary, .svc-btn-ghost, .svc-select-btn, .svc-select-cta,
.pcf-nav-btn, .pj-btn, .pj-btn-yellow, .pj-btn-ghost,
.j-btn, .j-nav-cta, .btn, .btn-gold, .btn-ghost-dark,
.form-submit, .sticky-cta, .cw-cta {
  border-radius: 10px !important;
}
/* Kill any dark/contrasting border on solid yellow CTAs */
.j-nav-cta, .ab-btn-yellow, .pr-btn-yellow, .pj-btn-yellow,
.btn-gold, .svc-btn-primary, .sticky-cta {
  border-color: #FFD900 !important;
}

/* WhatsApp floating action button (mounted on every page by widgets.js) */
.cw-wa-fab{position:fixed;right:clamp(18px,3vw,32px);left:auto;bottom:calc(clamp(18px,3vw,32px) + 76px);z-index:10050;display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;background:#25D366;color:#fff;border-radius:29px;overflow:hidden;box-shadow:0 10px 28px rgba(37,211,102,.34);transition:width .3s cubic-bezier(.16,.84,.32,1),box-shadow .25s ease,bottom .3s ease}
.cw-wa-fab svg{width:30px;height:30px;flex:none}
.cw-wa-fab .lbl{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:14.5px;white-space:nowrap;max-width:0;opacity:0;overflow:hidden;transition:max-width .3s cubic-bezier(.16,.84,.32,1),opacity .25s ease,margin .3s cubic-bezier(.16,.84,.32,1)}
.cw-wa-fab:hover{width:196px;justify-content:flex-start;padding-left:16px;box-shadow:0 12px 34px rgba(37,211,102,.5)}
.cw-wa-fab:hover .lbl{max-width:140px;opacity:1;margin-left:12px}
@media(max-width:640px){.cw-wa-fab{right:16px;left:auto;bottom:calc(80px + 62px + env(safe-area-inset-bottom,0px));width:52px;height:52px}.cw-wa-fab svg{width:26px;height:26px}.cw-wa-fab:hover{width:52px;padding-left:0;justify-content:center}.cw-wa-fab:hover .lbl{max-width:0;opacity:0;margin:0}}

/* When the thin cookie bar is showing, lift the corner controls clear of it */
body:has(.cc-banner.is-shown) .cw-chat-fab { bottom: calc(clamp(18px,3vw,32px) + 62px); }
body:has(.cc-banner.is-shown) .cw-wa-fab { bottom: calc(clamp(18px,3vw,32px) + 76px + 62px); }
body:has(.cc-banner.is-shown) .cw-modal { bottom: 84px; }
body:has(.cc-banner.is-shown) .cw-news-tab { bottom: 84px; }
@media(max-width:640px){
  body:has(.cc-banner.is-shown) .cw-chat-fab { bottom: calc(80px + 74px + env(safe-area-inset-bottom,0px)) !important; }
  body:has(.cc-banner.is-shown) .cw-wa-fab { bottom: calc(80px + 62px + 74px + env(safe-area-inset-bottom,0px)); }
}

/* Remove the leading hairline decoration on eyebrows (user request) */
.eyebrow::before,
.pr-hero-eyebrow::before,
.pj-case-num::before { display: none !important; }

/* Benefit row (.pr-proof): small gold roof symbol above each item */
.pr-proof-item::before{content:"";display:block;width:22px;height:22px;margin-bottom:14px;background:#FFD900;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12 L12 4 L21 12'/><path d='M6 10.5 V20 H18 V10.5'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12 L12 4 L21 12'/><path d='M6 10.5 V20 H18 V10.5'/></svg>") center/contain no-repeat}