/* ===========================================================================
   Canada Create — Content Components (Brand System 2026)
   One source of truth for comparison tables, pricing tables and CTAs inside
   article and page content. Everything inherits the brand tokens defined in
   cc-brand-2026.css; no font families, colours or sizes are invented here.

   Responsive strategy: NEVER horizontal scroll. Wide tables pin their first
   column as the row label and tab through the remaining columns on small
   screens (progressive enhancement — without JS the table simply wraps).
   ========================================================================= */

:root{
  --cc-c-radius:14px;
  --cc-c-border:#DDE3F0;
  --cc-c-shadow:0 18px 40px rgba(7,27,56,.08);
  --cc-c-gap:clamp(16px,2.2vw,28px);
}

/* ---------------------------------------------------------------- block ---*/
.cc-block{
  width:100%;
  max-width:100%;
  margin:clamp(32px,4vw,56px) 0;
  box-sizing:border-box;
}
.cc-block__head{margin:0 0 var(--cc-c-gap)}
.cc-block__eyebrow{
  display:block;
  font-family:var(--cc-font-head);
  font-weight:600;
  font-size:12px;
  line-height:1.25;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--cc-red);
  margin:0 0 8px;
}
.cc-block__title{margin:0 0 10px}
.cc-block__lead{
  margin:0;
  font-family:var(--cc-font-body);
  font-size:18px;
  line-height:1.5;
  color:var(--cc-slate);
  max-width:70ch;
}

/* ---------------------------------------------------------------- table ---*/
.cc-table-wrap{
  width:100%;
  max-width:100%;
  border:1px solid var(--cc-c-border);
  border-radius:var(--cc-c-radius);
  background:#fff;
  box-shadow:var(--cc-c-shadow);
  overflow:hidden;      /* clip, never scroll */
  box-sizing:border-box;
}

.cc-table{
  width:100%;
  max-width:100%;
  border-collapse:collapse;
  background:transparent;
  font-family:var(--cc-font-body);
  font-size:16px;
  line-height:1.5;
  color:#222;
}
.cc-table th,
.cc-table td{
  padding:14px 16px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--cc-c-border);
  overflow-wrap:break-word;   /* never mid-word unless unavoidable */
  word-break:normal;
  hyphens:none;
  min-width:0;
}
.cc-table thead th{
  font-family:var(--cc-font-head);
  font-weight:700;
  font-size:15px;
  line-height:1.25;
  letter-spacing:0;
  color:#fff;
  background:var(--cc-midnight);
  border-bottom:0;
  position:relative;
}
.cc-table tbody tr:last-child th,
.cc-table tbody tr:last-child td{border-bottom:0}
.cc-table tbody tr:nth-child(even){background:var(--cc-paper)}
.cc-table tbody th{
  font-family:var(--cc-font-body);
  font-weight:700;
  color:var(--cc-midnight);
}
.cc-table a{color:var(--cc-red);text-decoration:none;font-weight:500}
.cc-table a:hover,.cc-table a:focus-visible{color:var(--cc-ember)}

/* numeric / short columns stay tight */
.cc-table .cc-col-num{width:1%;white-space:nowrap;color:var(--cc-slate);font-variant-numeric:tabular-nums}

/* Name column: a proper noun must never break across lines. It takes exactly
   the width its longest label needs, and the prose columns absorb the rest. */
.cc-table .cc-col-name{
  width:1%;
  white-space:nowrap;
  overflow-wrap:normal;
  word-break:keep-all;
  font-weight:700;
  color:var(--cc-midnight);
}
.cc-table .cc-col-name a{white-space:nowrap}

/* the emphasised column (your own product/plan) */
.cc-table .cc-col-highlight{background:rgba(227,21,7,.05)}
.cc-table thead .cc-col-highlight{background:var(--cc-red)}
.cc-table thead .cc-col-highlight small{
  display:block;
  font-family:var(--cc-font-body);
  font-weight:500;
  font-size:12px;
  line-height:1.4;
  opacity:.9;
  margin-top:3px;
}

/* ----------------------------------------------------------- table tabs ---*/
.cc-table-tabs{
  display:none;                    /* desktop: not needed */
  gap:4px;
  margin:0 0 14px;
  padding:4px;
  border:0;
  border-radius:12px;
  background:#E9EDF4;
  box-sizing:border-box;
}
/* Segmented control: one grey track, the active segment is a raised white
   card with a red underline. Each segment carries a number badge (identity)
   and a chevron (state: right = closed, down = open). */
.cc-table-tabs button{
  appearance:none;
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;                 /* real touch target */
  padding:8px 12px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#5A6678;
  font-family:var(--cc-font-body);
  font-weight:500;
  font-size:14px;
  line-height:1.3;
  cursor:pointer;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
  min-width:0;
  overflow-wrap:anywhere;
}
.cc-table-tabs button .cc-tab-label{flex:1 1 auto;min-width:0}
.cc-table-tabs button .cc-tab-num{
  flex:none;
  width:24px;
  height:24px;
  border:1.5px solid #B9C2D2;
  color:#5A6678;
  font-weight:700;
  font-size:12px;
  line-height:21px;
  text-align:center;
  box-sizing:border-box;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.cc-table-tabs button .cc-tab-chev{
  flex:none;
  margin-left:auto;
  width:10px;
  height:10px;
  border-right:2px solid #B9C2D2;
  border-bottom:2px solid #B9C2D2;
  transform:rotate(-45deg);
  transition:transform .15s ease,border-color .15s ease;
}
/* Hover on a non-active segment: midnight fill, everything in it goes white
   (text, number badge, chevron). Overrides the theme's generic button:hover. */
.cc-table-tabs button:not(.is-active):hover{
  background-color:var(--cc-midnight);
  color:#fff;
}
.cc-table-tabs button:not(.is-active):hover .cc-tab-num{border-color:#fff;color:#fff;background:transparent}
.cc-table-tabs button:not(.is-active):hover .cc-tab-chev{border-color:#fff}
.cc-table-tabs button.is-active,
.cc-table-tabs button.is-active:hover,
.cc-table-tabs button.is-active:focus{
  background-color:#fff;
  color:var(--cc-midnight);
  font-weight:700;
  box-shadow:0 1px 2px rgba(7,27,56,.18),0 3px 8px rgba(7,27,56,.10);
}
.cc-table-tabs button.is-active::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:0;
  height:3px;
  background:var(--cc-red);
}
.cc-table-tabs button.is-active .cc-tab-num{background:var(--cc-red);border-color:var(--cc-red);color:#fff}
.cc-table-tabs button.is-active .cc-tab-chev{border-color:var(--cc-red);transform:rotate(45deg)}
/* Column swap is instant and solid: no fade. */
.cc-has-tabs .cc-table tbody td,
.cc-has-tabs .cc-table thead th{transition:none;opacity:1}
.cc-table-tabs button:focus-visible{
  outline:3px solid var(--cc-coral);
  outline-offset:2px;
}

/* ------------------------------------------------------------ table CTA ---*/
.cc-table-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:clamp(18px,2.4vw,26px);
  border-top:1px solid var(--cc-c-border);
  background:var(--cc-midnight);
  color:#fff;
  box-sizing:border-box;
}
.cc-table-cta__copy{min-width:0;flex:1 1 300px}
.cc-table-cta__title{
  display:block;
  font-family:var(--cc-font-head);
  font-weight:700;
  font-size:20px;
  line-height:1.25;
  color:#fff;
  margin:0 0 4px;
}
.cc-table-cta__text{
  margin:0;
  font-family:var(--cc-font-body);
  font-size:15px;
  line-height:1.5;
  color:rgba(255,255,255,.82);
}
.cc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:13px 24px;
  border:0;
  border-radius:10px;
  background:var(--cc-grad-cta);
  color:#fff!important;
  font-family:var(--cc-font-body);
  font-weight:700;
  font-size:16px;
  line-height:1.35;
  text-align:center;
  text-decoration:none!important;
  white-space:normal;
  box-sizing:border-box;
  transition:filter .16s ease,transform .16s ease;
}
.cc-btn:hover,.cc-btn:focus-visible{background:var(--cc-grad-cta-hover);transform:translateY(-1px)}
.cc-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.cc-btn--ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,.45);
}
.cc-btn--ghost:hover{background:rgba(255,255,255,.1);transform:none}

/* ---------------------------------------------------------- phone / call --*/
.cc-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 20px;
  min-width:0;
}
.cc-call{
  display:inline-flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  text-decoration:none!important;
}
.cc-call__label{
  font-family:var(--cc-font-head);
  font-weight:600;
  font-size:11px;
  line-height:1.3;
  letter-spacing:.9px;
  text-transform:uppercase;
  color:var(--cc-coral);
  white-space:nowrap;
}
.cc-call__number{
  font-family:var(--cc-font-head);
  font-weight:700;
  font-size:clamp(22px,2.3vw,28px);
  line-height:1.2;
  letter-spacing:-.01em;
  color:#fff;
  white-space:nowrap;
  text-decoration:none!important;
}
.cc-call:hover .cc-call__number,
.cc-call:focus-visible .cc-call__number{color:var(--cc-coral)}
.cc-call:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:6px}

/* Light-surface variant of the call block. */
.cc-call--ink .cc-call__label{color:var(--cc-red)}
.cc-call--ink .cc-call__number{color:var(--cc-midnight)}
.cc-call--ink:hover .cc-call__number,
.cc-call--ink:focus-visible .cc-call__number{color:var(--cc-red)}
.cc-call--ink:focus-visible{outline-color:var(--cc-red)}

/* Sits directly under a card's action button, inside the same column. */
.cc-call--card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  width:100%;
  margin-top:14px;
  padding-top:13px;
  /* Neutral rule reads correctly on both light and dark cards. */
  border-top:1px solid rgba(128,128,128,.32);
  text-align:center;
  box-sizing:border-box;
  /* Take the card's text colour, not the theme's link colour, so the number
     below can inherit a value that actually contrasts with the card. */
  color:inherit;
}
.cc-call--card .cc-call__label{
  font-size:10px;
  letter-spacing:.8px;
}
/* The number inherits the card's own text colour, so it stays legible on a
   white card (#1A1A1A) and on a dark featured card (#FFFFFF) with no
   per-card overrides. */
.cc-call--card .cc-call__number{
  font-size:20px;
  line-height:1.25;
  color:inherit;
}
.cc-call--card:hover .cc-call__number,
.cc-call--card:focus-visible .cc-call__number{color:var(--cc-red)}

/* Dark featured cards: Signal Red on #1A1A1A is only 3.63:1, so the label
   switches to Coral Flare (5.24:1). */
[style*="color:#ffffff"] .cc-call--card .cc-call__label,
[style*="color: #ffffff"] .cc-call--card .cc-call__label,
[style*="color:#fff;"] .cc-call--card .cc-call__label,
[style*="background:#1a1a1a"] .cc-call--card .cc-call__label,
[style*="background:#071b38"] .cc-call--card .cc-call__label{
  color:var(--cc-coral);
}
[style*="color:#ffffff"] .cc-call--card .cc-call__number,
[style*="color: #ffffff"] .cc-call--card .cc-call__number,
[style*="color:#fff;"] .cc-call--card .cc-call__number,
[style*="background:#1a1a1a"] .cc-call--card .cc-call__number,
[style*="background:#071b38"] .cc-call--card .cc-call__number{
  color:#fff!important;
}
[style*="color:#ffffff"] .cc-call--card:hover .cc-call__number,
[style*="background:#1a1a1a"] .cc-call--card:hover .cc-call__number{color:var(--cc-coral)!important}
/* Cards keep their actions stacked at the foot of the column. */
.cc-price-card{display:flex;flex-direction:column}
.cc-price-card .cc-price-button{margin-top:auto}

/* ------------------------------------------------ end-of-post lead CTA ----*/
.cc-endcta{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(20px,3vw,40px);
  margin:clamp(36px,4.5vw,56px) 0;
  padding:clamp(26px,3.4vw,40px);
  border-radius:var(--cc-c-radius);
  background:var(--cc-grad-dark);
  color:#fff;
  box-sizing:border-box;
  position:relative;
  overflow:hidden;
}
.cc-endcta::after{
  content:"";
  position:absolute;
  inset:auto -60px -80px auto;
  width:320px;height:260px;
  background:radial-gradient(ellipse at center,rgba(227,21,7,.20),transparent 70%);
  pointer-events:none;
}
.cc-endcta__copy{min-width:0;position:relative;z-index:1}
.cc-endcta__title{
  font-family:var(--cc-font-head);
  font-weight:700;
  font-size:clamp(24px,2.6vw,32px);
  line-height:1.25;
  color:#fff;
  margin:0 0 8px;
}
.cc-endcta__text{
  margin:0;
  font-family:var(--cc-font-body);
  font-size:17px;
  line-height:1.5;
  color:rgba(255,255,255,.84);
  max-width:56ch;
}
.cc-endcta__actions{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  position:relative;
  z-index:1;
}

@media(max-width:820px){
  .cc-endcta{grid-template-columns:minmax(0,1fr)}
  .cc-endcta__actions{align-items:stretch}
  .cc-endcta__actions .cc-btn{width:100%}
  .cc-endcta__actions .cc-call{align-items:center;text-align:center}
}

/* -------------------------------------------------------------- pricing ---*/
.cc-pricing{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:var(--cc-c-gap);
  margin:clamp(24px,3vw,36px) 0;
  padding:0;
  list-style:none;
}
.cc-plan{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  padding:clamp(22px,2.6vw,30px);
  border:1px solid var(--cc-c-border);
  border-radius:var(--cc-c-radius);
  background:#fff;
  box-sizing:border-box;
}
.cc-plan--featured{
  border-color:var(--cc-red);
  box-shadow:var(--cc-c-shadow);
  position:relative;
}
.cc-plan--featured::after{
  content:attr(data-badge);
  position:absolute;
  top:-11px;
  left:clamp(22px,2.6vw,30px);
  padding:3px 10px;
  border-radius:999px;
  background:var(--cc-red);
  color:#fff;
  font-family:var(--cc-font-head);
  font-weight:700;
  font-size:11px;
  line-height:1.5;
  letter-spacing:.5px;
  text-transform:uppercase;
}
.cc-plan__name{
  font-family:var(--cc-font-head);
  font-weight:700;
  font-size:20px;
  line-height:1.25;
  color:var(--cc-midnight);
  margin:0;
}
.cc-plan__price{
  font-family:var(--cc-font-head);
  font-weight:700;
  font-size:clamp(34px,4vw,44px);
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--cc-midnight);
  margin:0;
  overflow-wrap:anywhere;
}
.cc-plan__price small{
  display:inline-block;
  font-family:var(--cc-font-body);
  font-weight:400;
  font-size:15px;
  line-height:1.4;
  color:var(--cc-slate);
  margin-left:4px;
}
.cc-plan__list{margin:6px 0 0;padding:0 0 0 18px}
.cc-plan__list li{
  font-family:var(--cc-font-body);
  font-size:16px;
  line-height:1.6;
  margin:0 0 6px;
}
.cc-plan .cc-btn{margin-top:auto;width:100%}

/* ----------------------------------------------------------- standalone ---*/
.cc-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:clamp(32px,4vw,48px) 0;
  padding:clamp(22px,3vw,34px);
  border-radius:var(--cc-c-radius);
  border-left:5px solid var(--cc-red);
  background:var(--cc-midnight);
  color:#fff;
  box-sizing:border-box;
}
.cc-cta__title{
  font-family:var(--cc-font-head);
  font-weight:700;
  font-size:clamp(22px,2.4vw,28px);
  line-height:1.25;
  color:#fff;
  margin:0 0 6px;
}
.cc-cta p{
  margin:0;
  font-family:var(--cc-font-body);
  font-size:17px;
  line-height:1.5;
  color:rgba(255,255,255,.85);
  max-width:60ch;
}

/* ------------------------------------------------------------ responsive --*/
@media(max-width:900px){
  .cc-table th,.cc-table td{padding:12px 13px}
  .cc-table{font-size:15px}
}

@media(max-width:760px){
  /* Tabs appear only once JS has wired them up. */
  /* One full-width choice per row: long column labels stay readable. */
  .cc-has-tabs .cc-table-tabs,
  .cc-has-tabs .cc-table-tabs.is-wrapped{
    display:grid;
    grid-auto-flow:row;
    grid-template-columns:minmax(0,1fr);
    gap:4px;
    width:100%;
    max-width:100%;
  }
  .cc-has-tabs .cc-table-tabs > button{
    width:100%;
    max-width:100%;
    min-height:44px;
    white-space:normal;
    overflow-wrap:anywhere;
    text-align:start;
    box-sizing:border-box;
  }
  /* Hide every tabbed column except the active one and any highlight column. */
  .cc-has-tabs .cc-table [data-cc-col]:not(.is-active):not(.cc-col-highlight){display:none}

  .cc-table{font-size:15px;line-height:1.5}
  .cc-table th,.cc-table td{padding:12px}
  .cc-table thead th{font-size:14px}
  /* Names may wrap between words on small screens, but never mid-word. */
  .cc-table .cc-col-name{
    white-space:normal;
    overflow-wrap:normal;
    word-break:keep-all;
    width:auto;
  }

  .cc-table-cta{flex-direction:column;align-items:flex-start}
  /* Stacked: the copy block must size to its text, not to its 300px row basis. */
  .cc-table-cta__copy{flex:0 0 auto;width:100%}
  .cc-table-cta .cc-actions{width:100%}
  .cc-table-cta .cc-btn{width:100%}
  .cc-cta{flex-direction:column;align-items:flex-start}
  .cc-cta .cc-btn{width:100%}
  .cc-plan__list li{font-size:15px}
}

@media(max-width:480px){
  .cc-block__lead{font-size:16px}
  .cc-table{font-size:14px}
  .cc-table th,.cc-table td{padding:11px 10px}
}

@media(prefers-reduced-motion:reduce){
  .cc-btn,.cc-table-tabs button{transition:none}
  .cc-btn:hover{transform:none}
}

/* ===========================================================================
   LEGACY FALLBACKS
   Hand-built blocks that still live inside post content. These rules give them
   brand typography and safe layout so that when inline font-sizes are removed
   nothing is left unstyled. Attribute selectors are used deliberately: they
   brand the old markup without rewriting a single article.
   ========================================================================= */

/* Old horizontal-scroll wrappers are neutralised — components never scroll. */
.cc-block [style*="overflow-x"],
.entry-content > [style*="overflow-x:auto"],
.entry-content > [style*="overflow-x: auto"]{
  overflow-x:visible!important;
  overflow:visible!important;
}

/* Hand-built card/pricing grids: reflow instead of overflowing, brand type. */
[class*="cc-"] [style*="grid-template-columns"],
.entry-content [style*="grid-template-columns"],
.cc-prose-inner [style*="grid-template-columns"],
#packages [style*="grid-template-columns"]{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))!important;
  gap:var(--cc-c-gap)!important;
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box;
}
.entry-content [style*="grid-template-columns"] > *,
.cc-prose-inner [style*="grid-template-columns"] > *,
#packages [style*="grid-template-columns"] > *{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box;
}

/* Legacy blog CTA: brand surface, brand type, real touch targets. */
.cc-blog-cost-cta{
  border-radius:var(--cc-c-radius);
  padding:clamp(22px,3vw,34px)!important;
  box-sizing:border-box;
}
.cc-blog-cost-cta :is(h2,h3,h4){
  font-family:var(--cc-font-head);
  font-weight:700;
  line-height:1.25;
  color:#fff;
}
.cc-blog-cost-cta p,.cc-blog-cost-cta li{
  font-family:var(--cc-font-body);
  font-size:17px;
  line-height:1.5;
}
.cc-blog-cost-cta a:not(.cc-btn){
  color:var(--cc-coral);
  font-weight:700;
}

/* ---------------------------------------------------------------- footer --
   The footer contact rows are Ccl icon boxes whose titles are <h3>.
   Once per-widget sizes were removed they inherited the heading scale, so the
   address rendered at 35px. These rules give the column its own proper scale.
   ------------------------------------------------------------------------ */
.ccl-location-footer .ccl-icon-box-wrapper{
  display:flex;
  align-items:flex-start;
  gap:12px;
  text-align:left;
}
.ccl-location-footer .ccl-icon-box-icon{
  flex:0 0 auto;
  margin:2px 0 0!important;
}
.ccl-location-footer .ccl-icon-box-icon .ccl-icon{
  font-size:16px!important;
  width:auto!important;
  height:auto!important;
  line-height:1!important;
  color:var(--cc-coral)!important;
}
.ccl-location-footer .ccl-icon-box-content{min-width:0}
.ccl-location-footer .ccl-icon-box-title,
.ccl-location-footer .ccl-icon-box-title a,
.ccl-location-footer .ccl-icon-box-description{
  font-family:var(--cc-font-body)!important;
  font-size:15px!important;
  font-weight:400!important;
  line-height:1.6!important;
  letter-spacing:0!important;
  margin:0!important;
  color:rgba(255,255,255,.88)!important;
  overflow-wrap:break-word;
  word-break:normal;
}
/* The local number stays the most prominent line in the block. */
.ccl-location-footer .ccl-icon-box-title a[href^="tel:"]{
  font-family:var(--cc-font-head)!important;
  font-size:17px!important;
  font-weight:700!important;
  color:#fff!important;
  white-space:nowrap;
}
.ccl-location-footer .ccl-icon-box-title a[href^="tel:"]:hover,
.ccl-location-footer .ccl-icon-box-title a[href^="mailto:"]:hover{color:var(--cc-coral)!important}
.ccl-location-footer .ccl-icon-box-title a[href^="mailto:"]{
  font-size:15px!important;
  overflow-wrap:anywhere;
}
.ccl-location-footer .ccl-widget-icon-box{margin-bottom:10px!important}

/* Toll-free block sitting under the local number, on the dark footer. */
.cc-call--footer{
  align-items:flex-start;
  width:100%;
  margin:14px 0 4px;
  padding-top:13px;
  border-top:1px solid rgba(255,255,255,.18);
  text-align:left;
}
.cc-call--footer .cc-call__label{font-size:10px;letter-spacing:.8px;color:var(--cc-coral)}
.cc-call--footer .cc-call__number{font-size:21px;line-height:1.25;color:#fff}
.cc-call--footer:hover .cc-call__number{color:var(--cc-coral)}

/* Compact button variant for tight columns like the footer. */
.cc-btn--sm{
  min-height:42px;
  padding:10px 18px;
  font-size:14px;
  border-radius:9px;
}
.cc-footer-cta{margin:16px 0 4px}

@media(max-width:767px){
  .ccl-location-footer .ccl-icon-box-title a[href^="tel:"]{white-space:normal}
  .cc-call--footer{align-items:flex-start}
}

/* Any anchor styled as a button inline keeps a real target once sizes go. */
.entry-content a[style*="background"],
.cc-prose-inner a[style*="background"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:13px 22px;
  border-radius:10px;
  font-family:var(--cc-font-body);
  font-weight:700;
  font-size:16px;
  line-height:1.35;
  box-sizing:border-box;
  max-width:100%;
  white-space:normal;
}

/* Big numeric callouts (prices, stats) keep presence without inline sizes. */
.entry-content [class*="price"] strong,
.cc-prose-inner [class*="price"] strong,
#packages [style*="font-weight"] + span,
.cc-stat-value{
  font-family:var(--cc-font-head);
  font-weight:700;
  font-size:clamp(30px,3.4vw,40px);
  line-height:1.15;
  color:var(--cc-midnight);
  overflow-wrap:anywhere;
}

/* Nothing inside article content may exceed its column. */
.entry-content img,.cc-prose-inner img,.cc-block img{max-width:100%;height:auto}
.entry-content pre,.cc-prose-inner pre{max-width:100%;overflow-x:auto}

/* ============================================================ breadcrumb ==
   One breadcrumb standard site-wide (inc/cc-breadcrumbs.php). Hero variant
   sits inside a page's hero; header variant sits inside the header shell,
   directly under the navigation container, same width and same background.
   ========================================================================= */
.cc-svc-crumbs{margin:0;font-family:var(--cc-font-body);font-size:14px;line-height:1.5;min-width:0}
.cc-svc-crumbs ol{display:flex;flex-wrap:wrap;gap:4px 0;list-style:none;margin:0;padding:0}
.cc-svc-crumbs li{display:inline-flex;align-items:center;min-width:0;color:rgba(255,255,255,.78)}
.cc-svc-crumbs li+li::before{content:"/";padding-inline:8px;opacity:.55}
.cc-svc-crumbs a{color:#fff;text-decoration:none;font-weight:400}
.cc-svc-crumbs a:hover,.cc-svc-crumbs a:focus-visible{color:var(--cc-coral);text-decoration:none}
.cc-svc-crumbs [aria-current]{color:#fff;font-weight:500;overflow-wrap:anywhere}
/* Ccl Pro breadcrumbs widget wrapper (fed by the yoast_breadcrumb shim). */
.ccl-widget-breadcrumbs #breadcrumbs{margin:0}
/* Header placement: sits right under the navigation container, same width,
   no box of its own, minimal height so the header does not grow. */
header.ccl-location-header .cc-svc-crumbs--header{width:100%;max-width:1320px;margin:0 auto;padding:2px 0 8px;line-height:1.3;box-sizing:border-box}
header.ccl-location-header .cc-svc-crumbs--header ol{padding-inline:4px}

/* Toll-free 24/7 line beside the local number in the header top bar. */
header.ccl-location-header .cc-hdr-tollfree{display:inline-flex;align-items:baseline;gap:6px;margin:0 auto 0 18px;padding:0;min-width:0;color:#fff;font-family:var(--cc-font-body);font-size:14px;line-height:1.3;text-decoration:none!important;white-space:nowrap}
header.ccl-location-header .cc-hdr-tollfree__label{color:rgba(255,255,255,.78);font-weight:500}
header.ccl-location-header .cc-hdr-tollfree__label::after{content:":"}
header.ccl-location-header .cc-hdr-tollfree__number{font-family:var(--cc-font-head);font-weight:700;color:#fff}
header.ccl-location-header .cc-hdr-tollfree:hover .cc-hdr-tollfree__number,
header.ccl-location-header .cc-hdr-tollfree:focus-visible .cc-hdr-tollfree__number{color:var(--cc-coral)}
header.ccl-location-header .cc-hdr-tollfree:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}
header.ccl-location-header .cc-header-meta{flex-wrap:wrap;align-items:center;row-gap:2px}
@media(max-width:1024px){
  header.ccl-location-header .cc-hdr-tollfree{font-size:13px;margin-left:12px}
}
@media(max-width:767px){
  .cc-svc-crumbs{font-size:12px}
  .cc-svc-crumbs li+li::before{padding-inline:6px}
  header.ccl-location-header .cc-svc-crumbs--header{padding:0 0 6px}
  header.ccl-location-header .cc-hdr-tollfree{font-size:12px;margin-left:10px;gap:4px}
  header.ccl-location-header .cc-hdr-tollfree__label{font-size:11px}
}
@media(max-width:480px){
  header.ccl-location-header .cc-hdr-tollfree__label{display:none}
  header.ccl-location-header .cc-hdr-tollfree::before{content:"24/7";color:rgba(255,255,255,.78);font-size:11px;font-weight:500}
}