/* =========================================================
   Template Awesome — template.css
   No Bootstrap, no framework. Every color, font and metric
   comes from the custom properties emitted by theme.php, so
   the template is reskinned from Template Options alone.
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--tpl-ground);
  color: var(--tpl-ink);
  font-family: var(--tpl-body);
  font-size: var(--tpl-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }

/* =========================================================
   OVERFLOW CONTAINMENT
   One element wider than the viewport makes the whole page
   scroll sideways: full-width bands then stop at the viewport
   edge while text runs past it, and side padding looks like it
   has vanished on the right. These rules stop that happening
   rather than hiding it after the fact.
   ========================================================= */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }

/* Flex and grid children default to min-width:auto, which refuses to shrink
   below their content. This is the single most common cause of the overflow. */
.tpl-wrap > *, .tpl-grid > *, .tpl-main__inner > *, .tpl-callbar__inner > *,
.tpl-header__bar > *, .tpl-hero__inner > *, .pc > *, .pc-out-row > *,
.pc-calc-body > *, .pc-strip-bar > *, .pc-strip-legend > * { min-width: 0; }

/* Long unbroken strings — URLs, "debt-to-income", big figures — must wrap. */
.tpl-content p, .tpl-content li, .tpl-content h1, .tpl-content h2,
.tpl-content h3, .tpl-content h4, .pc p, .pc li, .pc td, .pc dd {
  overflow-wrap: break-word;
}

/* Anything intrinsically wide scrolls inside its own box, not the page. */
.tpl-content table, .pc table { max-width: 100%; }
.pc-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tpl-content pre, .tpl-content iframe, .tpl-content video { max-width: 100%; }

.tpl-wrap {
  width: 100%;
  max-width: var(--tpl-max);
  margin-inline: auto;
  padding-inline: var(--tpl-pad, 1.25rem);
}

@media (max-width: 700px) {
  .tpl-wrap { padding-inline: var(--tpl-pad-mobile, 18px); }

  /* Fixed px heading sizes do not adapt on their own — scale them down. */
  .tpl-content h1 { font-size: calc(var(--tpl-art-h1, 40px) * var(--tpl-art-mobile, 0.8)); }
  .tpl-content h2 { font-size: calc(var(--tpl-art-h2, 28px) * var(--tpl-art-mobile, 0.8)); }
  .tpl-content h3 { font-size: calc(var(--tpl-art-h3, 21px) * var(--tpl-art-mobile, 0.85)); }
  .pc h2 { font-size: calc(1.6rem * var(--tpl-art-mobile, 0.8)); }
  .pc h3 { font-size: calc(1.2rem * var(--tpl-art-mobile, 0.85)); }
}

.tpl-skip {
  position: absolute; left: -9999px;
  background: var(--tpl-primary); color: var(--tpl-on-primary);
  padding: 0.7rem 1.2rem; z-index: 100;
}
.tpl-skip:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- type ---------- */
h1, h2, h3, h4 {
  font-family: var(--tpl-display);
  font-weight: 500;
  color: var(--tpl-primary-dark);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(2rem, 1.6rem + 2vw, 3.2rem); }
h2 { font-size: clamp(1.55rem, 1.35rem + 1vw, 2.15rem); margin-top: 2.3rem; }
h3 { font-size: clamp(1.22rem, 1.15rem + 0.5vw, 1.5rem); margin-top: 1.7rem; }

p, li { max-width: 68ch; }

a { color: var(--tpl-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover, a:focus { color: var(--tpl-accent); }
strong { font-weight: 600; color: var(--tpl-primary-dark); }

.tpl-eyebrow {
  display: block;
  font-family: var(--tpl-mono);
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--tpl-accent); margin-bottom: 0.7rem;
}

/* Signature tick-rule. Toggleable from Template Options. */
.tpl-content h2::before,
.tpl-hero__main h2::before {
  content: '';
  display: var(--tpl-rule-display);
  width: 72px; height: 9px; margin-bottom: 0.8rem; opacity: 0.45;
  background-image:
    repeating-linear-gradient(to right, var(--tpl-primary) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(to right, var(--tpl-accent) 0 1.5px, transparent 1.5px 45px);
  background-size: 100% 5px, 100% 9px;
  background-repeat: no-repeat;
}

a[href^="tel:"] {
  font-family: var(--tpl-mono); letter-spacing: -0.03em; white-space: nowrap;
}

/* ---------- top bar / call bar ---------- */
.tpl-topbar {
  background: var(--tpl-primary-soft);
  border-bottom: 1px solid var(--tpl-line);
  font-size: 0.85rem;
}

.tpl-callbar {
  background: var(--tpl-primary-dark);
  font-family: var(--tpl-mono); font-size: 0.8rem;
}
.tpl-callbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; justify-content: center; }
.tpl-callbar a { color: #fff; text-decoration: none; padding: 0.65rem 0.9rem; display: inline-flex; gap: 0.5rem; align-items: baseline; }
.tpl-callbar a:hover, .tpl-callbar a:focus { background: var(--tpl-accent); color: var(--tpl-on-accent); }
.tpl-callbar__label { opacity: 0.7; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.68rem; }
.tpl-callbar__ctas { margin-left: auto; display: inline-flex; gap: 0.5rem; align-items: center; }

/* ---------- CTA buttons ----------
   Padding, radius, color and glow all come from Template Options. */
.tpl-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--tpl-cta-pad-y, 12px) var(--tpl-cta-pad-x, 22px) !important;
  border-radius: var(--tpl-cta-radius, 4px);
  font-family: var(--tpl-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  border: 2px solid transparent;
  transition: box-shadow 0.2s ease, transform 0.12s ease, background 0.2s ease, color 0.2s ease;
}

.tpl-cta--1 { background: var(--tpl-cta1-bg); color: var(--tpl-cta1-fg) !important; border-color: var(--tpl-cta1-bg); box-shadow: var(--tpl-cta1-glow); }
.tpl-cta--2 { background: var(--tpl-cta2-bg); color: var(--tpl-cta2-fg) !important; border-color: var(--tpl-cta2-bg); box-shadow: var(--tpl-cta2-glow); }

.tpl-cta--1:hover, .tpl-cta--1:focus-visible { box-shadow: var(--tpl-cta1-glow-hover); transform: translateY(-1px); background: var(--tpl-cta1-bg); color: var(--tpl-cta1-fg) !important; }
.tpl-cta--2:hover, .tpl-cta--2:focus-visible { box-shadow: var(--tpl-cta2-glow-hover); transform: translateY(-1px); background: var(--tpl-cta2-bg); color: var(--tpl-cta2-fg) !important; }

/* Outline variant: same geometry, color on the border and text instead. */
.tpl-cta--outline.tpl-cta--1 { background: transparent; color: var(--tpl-cta1-bg) !important; }
.tpl-cta--outline.tpl-cta--2 { background: transparent; color: var(--tpl-cta2-bg) !important; }
.tpl-cta--outline.tpl-cta--1:hover { background: var(--tpl-cta1-bg); color: var(--tpl-cta1-fg) !important; }
.tpl-cta--outline.tpl-cta--2:hover { background: var(--tpl-cta2-bg); color: var(--tpl-cta2-fg) !important; }

/* On the dark call bar an outline button needs a visible edge even before hover. */
.tpl-callbar .tpl-cta--outline { border-color: currentColor; }

/* Ghost: text only until hover. */
.tpl-cta--ghost { background: transparent; border-color: transparent; box-shadow: none !important; }
.tpl-cta--ghost.tpl-cta--1 { color: var(--tpl-cta1-bg) !important; }
.tpl-cta--ghost.tpl-cta--2 { color: var(--tpl-cta2-bg) !important; }
.tpl-callbar .tpl-cta--ghost { color: #fff !important; }
.tpl-cta--ghost:hover { text-decoration: underline; transform: none; }

@media (prefers-reduced-motion: reduce) { .tpl-cta:hover { transform: none; } }

/* ---------- header ---------- */
.tpl-header { background: #fff; border-top: 3px solid var(--tpl-primary); border-bottom: 1px solid var(--tpl-line); }
.tpl-header.is-sticky { position: sticky; top: 0; z-index: 40; }
.tpl-header__bar { display: flex; align-items: center; gap: 1rem; padding-block: 0.85rem; }
.tpl-header__right { margin-left: auto; }

/* Brand: logo/wordmark with the tagline either stacked below or inline right.
   line-height:1 and zero margins keep the header as tight as the logo itself. */
.tpl-brand {
  display: inline-flex;
  text-decoration: none;
  line-height: 1;
  gap: 0.35rem;
}
.tpl-brand--tag-below  { flex-direction: column; align-items: flex-start; }
/* Inline: vertically centered against the logo by default. `baseline` looked
   right in theory but sits the tagline low, because the logo's line box is
   much taller than the tagline's. */
.tpl-brand--tag-inline {
  flex-direction: row;
  align-items: var(--tpl-tagline-align, center);
  gap: 0.85rem;
  flex-wrap: wrap;
}
.tpl-brand--tag-inline .tpl-tagline { margin: 0; }

/* Keep the logo and tagline on one visual line at small sizes before wrapping. */
@media (max-width: 700px) {
  .tpl-brand--tag-inline { gap: 0.5rem; }
}

/* The global `img { height: auto }` rule above would otherwise cancel the
   height attribute on the logo, making the Logo height setting do nothing.
   Driven from the template parameter instead. */
.tpl-brand img {
  height: var(--tpl-logo-h, 56px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
@media (max-width: 600px) {
  .tpl-brand img { height: var(--tpl-logo-h-mobile, 45px); }
}
.tpl-wordmark {
  font-family: var(--tpl-display); font-size: 1.6rem; color: var(--tpl-primary-dark);
  letter-spacing: -0.02em; line-height: 1; display: block;
}
.tpl-wordmark em { font-style: normal; color: var(--tpl-accent); }
.tpl-tagline {
  font-family: var(--tpl-tagline-font, var(--tpl-mono));
  font-size: var(--tpl-tagline-size, 11px);
  letter-spacing: var(--tpl-tagline-track, 0.16em);
  text-transform: var(--tpl-tagline-case, uppercase);
  color: var(--tpl-tagline-color, var(--tpl-accent));
  line-height: 1.2;
  white-space: nowrap;
}
@media (max-width: 600px) { .tpl-tagline { white-space: normal; } }

.tpl-menurow { background: #fff; border-top: 1px solid var(--tpl-line); }

/* An empty module container must take no space. A published-but-empty module
   in `menu`, `topbar` or `header-right` otherwise leaves a tall blank band
   that looks like the logo has a giant background. */
.tpl-menurow:empty,
.tpl-topbar:empty,
.tpl-header__right:empty,
.tpl-nav:empty,
.tpl-hero__aside:empty { display: none; padding: 0; border: 0; margin: 0; }
.tpl-menurow > .tpl-wrap:empty,
.tpl-topbar > .tpl-wrap:empty { display: none; }

/* Header height is driven by the parameter, not by whatever is inside it.
   The extra specificity and min-height:0 stop a stray inherited rule from
   inflating the bar. */
.tpl-header .tpl-header__bar {
  padding-block: var(--tpl-header-pad, 14px);
  min-height: 0;
}

/* Outside spacing (margin) around the logo — distinct from header padding. */
.tpl-header .tpl-brand {
  margin-block: var(--tpl-logo-mar-y, 0);
  margin-inline: var(--tpl-logo-mar-x, 0);
}
.tpl-brand img {
  max-height: var(--tpl-logo-h, 56px);
  margin: 0;
}

/* Outside spacing around CTA buttons. */
.tpl-cta { margin: var(--tpl-cta-mar-y, 6px) var(--tpl-cta-mar-x, 4px); }

/* Call bar vertical breathing room. */
.tpl-callbar__inner { padding-block: var(--tpl-callbar-pad, 0); }
.tpl-header--inline .tpl-nav { margin-left: auto; }

/* nav — styles Joomla's mod_menu output, no markup override needed */
.tpl-nav ul { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; gap: 0.1rem; }
.tpl-nav--center ul { justify-content: center; }
.tpl-nav--end ul { justify-content: flex-end; }
.tpl-nav li { position: relative; max-width: none; }
.tpl-nav a, .tpl-nav .separator, .tpl-nav span {
  display: block; padding: 0.85rem 0.85rem; text-decoration: none;
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--tpl-ink); border-bottom: 2px solid transparent;
}
.tpl-nav a:hover, .tpl-nav li.active > a, .tpl-nav li.current > a {
  color: var(--tpl-primary); border-bottom-color: var(--tpl-accent);
}
/* one level of dropdown, CSS only */
.tpl-nav li ul {
  display: none; position: absolute; left: 0; top: 100%; min-width: 15rem;
  background: #fff; border: 1px solid var(--tpl-line); box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  flex-direction: column; z-index: 30; padding: 0.3rem 0;
}
.tpl-nav li:hover > ul, .tpl-nav li:focus-within > ul { display: flex; }
.tpl-nav li ul a { text-transform: none; letter-spacing: 0; font-size: 0.9rem; padding: 0.55rem 1rem; border: 0; }
.tpl-nav li ul a:hover { background: var(--tpl-primary-soft); }

.tpl-toggle {
  display: none; margin-left: auto; flex-direction: column; gap: 4px; justify-content: center;
  width: 44px; height: 40px; background: none; border: 1px solid var(--tpl-line);
  border-radius: 3px; cursor: pointer;
}
.tpl-toggle span { display: block; height: 2px; width: 20px; margin-inline: auto; background: var(--tpl-primary); }

/* ---------------------------------------------------------------
   One toggle only.
   When a nav module (mod_cleannav) is placed inside the template's
   menu container it ships its own hamburger, so mobile ends up with
   two — the template's, plus a second malformed one from the module.
   The template's toggle already shows/hides the whole container, so
   the nested one is suppressed.
   --------------------------------------------------------------- */
.tpl-nav .cn-toggle,
.tpl-menurow .cn-toggle,
.tpl-header .cn-toggle { display: none !important; }

/* A nested nav module should not re-create the row's own layout. */
.tpl-nav .cn { display: block; gap: 0; }
.tpl-nav .cn-nav { display: block !important; }

/* Belt and braces on the template's own toggle: fix the bar geometry so no
   inherited flex rule can stretch the spans into blocks. */
.tpl-toggle span {
  flex: 0 0 auto !important;
  width: 20px !important;
  height: 2px !important;
  border-radius: 1px;
}

@media (max-width: 900px) {
  .tpl-nav ul { flex-direction: column; }
  .tpl-nav li ul { position: static; display: flex; box-shadow: none; border: 0; padding-left: 1rem; }
  .tpl-menurow .tpl-nav.is-open { padding-bottom: 0.75rem; }
}

/* ---------- hero ---------- */
.tpl-hero { background: var(--tpl-primary); color: #fff; position: relative; overflow: hidden; }
.tpl-hero::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 10px; opacity: 0.5;
  background-image: repeating-linear-gradient(to right, rgba(255,255,255,0.35) 0 1px, transparent 1px 10px);
}
.tpl-hero__inner { padding-block: clamp(2.5rem, 6vw, 5rem); display: grid; gap: 2rem; }
.tpl-hero--split .tpl-hero__inner { grid-template-columns: 1fr; }
@media (min-width: 900px) { .tpl-hero--split .tpl-hero__inner { grid-template-columns: 1.2fr 0.8fr; align-items: center; } }
.tpl-hero h1, .tpl-hero h2, .tpl-hero h3 { color: #fff; }
.tpl-hero p { color: rgba(255,255,255,0.92); max-width: 46ch; font-size: 1.1rem; }
.tpl-hero__main h2::before { opacity: 0.6; }
.tpl-hero__aside .tpl-card { background: #fff; color: var(--tpl-ink); }

/* ---------- rows: the "add a row" mechanism ---------- */
.tpl-row { padding-block: clamp(2rem, 5vw, 3.5rem); }
.tpl-row:nth-of-type(even) { background: var(--tpl-primary-soft); }
.tpl-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .tpl-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .tpl-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .tpl-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) { .tpl-cols-4 { grid-template-columns: repeat(4, 1fr); } }

.tpl-card {
  background: var(--tpl-surface); border: 1px solid var(--tpl-line);
  border-radius: 3px; padding: 1.5rem;
}
.tpl-card > h3:first-child, .tpl-card > h2:first-child { margin-top: 0; }

/* ---------- main ---------- */
.tpl-main { padding-block: 2.5rem; }

/* The article column fills its container by default. Give it a width in
   Template Options and it centers instead of hugging the left edge. */
.tpl-content {
  width: 100%;
  max-width: var(--tpl-content-max, none);
  margin-inline: var(--tpl-content-mid, auto);
  min-width: 0;
}
.tpl-main__inner { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 950px) {
  body.has-sidebar .tpl-main__inner { grid-template-columns: minmax(0,1fr) 20rem; }
  body.has-sidebar .tpl-side--left { grid-row: 1; grid-column: 1; }
}

/* =========================================================
   ARTICLE SURFACE — Template Options > Articles
   Four presentations, chosen with the "Article style" field.
   ========================================================= */
.tpl-content .item-page,
.tpl-content .blog-item,
.tpl-content .com-content-article {
  margin-bottom: 2rem;
  font-family: var(--tpl-art-body-font, var(--tpl-body));
  font-size: var(--tpl-art-body, 17px);
  line-height: var(--tpl-art-lead, 1.65);
}

/* boxed (default): white card with a hairline border */
.art-boxed .tpl-content .item-page,
.art-boxed .tpl-content .blog-item,
.art-boxed .tpl-content .com-content-article {
  background: #fff;
  border: 1px solid var(--tpl-line);
  border-radius: 3px;
  padding: clamp(1.1rem, 4vw, 2.75rem);
}

/* plain: no box at all, article sits directly on the page */
.art-plain .tpl-content .item-page,
.art-plain .tpl-content .blog-item,
.art-plain .tpl-content .com-content-article {
  background: transparent; border: 0; padding: 0;
}

/* shadow: floating card, no border */
.art-shadow .tpl-content .item-page,
.art-shadow .tpl-content .blog-item,
.art-shadow .tpl-content .com-content-article {
  background: #fff; border: 0; border-radius: 4px;
  padding: clamp(1.3rem, 4vw, 2.75rem);
  box-shadow: 0 2px 4px rgba(20,32,42,0.04), 0 12px 32px rgba(20,32,42,0.07);
}

/* rule: a single accent rule across the top, otherwise unboxed */
.art-rule .tpl-content .item-page,
.art-rule .tpl-content .blog-item,
.art-rule .tpl-content .com-content-article {
  background: transparent; border: 0;
  border-top: 3px solid var(--tpl-accent);
  border-radius: 0;
  padding: 1.75rem 0 0;
}

/* article headings: family, weight and tracking all controllable */
.tpl-content h1, .tpl-content h2, .tpl-content h3, .tpl-content h4 {
  font-family: var(--tpl-art-head-font, var(--tpl-display));
  font-weight: var(--tpl-art-head-weight, 500);
  letter-spacing: var(--tpl-art-head-track, -0.015em);
  line-height: var(--tpl-art-head-lead, 1.15);
}
.tpl-content h1 { font-size: var(--tpl-art-h1, 40px); }
.tpl-content h2 { font-size: var(--tpl-art-h2, 28px); }
.tpl-content h3 { font-size: var(--tpl-art-h3, 21px); }
.tpl-content p, .tpl-content li { max-width: var(--tpl-art-measure, 68ch); }

.tpl-content .item-page > p:first-of-type {
  font-family: var(--tpl-art-head-font, var(--tpl-display));
  font-size: calc(var(--tpl-art-body, 17px) * 1.2);
  line-height: 1.5;
  color: var(--tpl-primary-dark);
}
body.art-lead-off .tpl-content .item-page > p:first-of-type {
  font-family: inherit; font-size: inherit; color: inherit;
}
.tpl-content ul { list-style: none; padding-left: 1.4rem; }
.tpl-content ul li::before {
  content: ''; display: inline-block; width: 7px; height: 1px; background: var(--tpl-accent);
  vertical-align: middle; margin-left: -1.4rem; margin-right: 0.75rem;
}
.tpl-content ol li::marker { font-family: var(--tpl-mono); color: var(--tpl-accent); font-size: 0.85em; }
.tpl-content img.float-end { float: right; margin: 0 0 1rem 1rem; background: var(--tpl-primary-soft); padding: 0.6rem; border-radius: 3px; }

blockquote { border-left: 2px solid var(--tpl-accent); padding-left: 1.2rem; font-family: var(--tpl-display); font-style: italic; margin-inline: 0; }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 0.94rem; margin-block: 1.5rem; }
th {
  font-family: var(--tpl-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  text-align: left; color: var(--tpl-primary); border-bottom: 2px solid var(--tpl-primary); padding: 0.6rem 0.8rem;
}
td { border-bottom: 1px solid var(--tpl-line); padding: 0.7rem 0.8rem; vertical-align: top; }
tr:hover td { background: var(--tpl-primary-soft); }

/* ---------- buttons + forms ---------- */
.btn, .btn-primary, .readmore .btn, button.btn, input[type="submit"] {
  display: inline-block; background: var(--tpl-primary); color: var(--tpl-on-primary);
  border: 1px solid var(--tpl-primary); border-radius: 3px; cursor: pointer;
  font-family: var(--tpl-body); font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none;
  padding: 0.75rem 1.6rem; transition: background 0.18s ease, border-color 0.18s ease;
}
.btn:hover, .btn-primary:hover, .readmore .btn:hover, input[type="submit"]:hover {
  background: var(--tpl-accent); border-color: var(--tpl-accent); color: var(--tpl-on-accent);
}
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="password"], select, textarea {
  font: inherit; padding: 0.6rem 0.7rem; border: 1px solid var(--tpl-line);
  border-radius: 3px; background: #fff; color: var(--tpl-ink); max-width: 100%;
}

/* ---------- breadcrumbs ---------- */
.tpl-crumbs { padding-top: 1.25rem; }
.tpl-crumbs ol, .tpl-crumbs ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; }
.tpl-crumbs { font-family: var(--tpl-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.tpl-crumbs a { text-decoration: none; }

/* ---------- footer ---------- */
.tpl-footer { background: var(--tpl-primary-dark); color: rgba(255,255,255,0.82); margin-top: 3rem; }
.tpl-footer a { color: #fff; }
.tpl-footer a:hover { color: var(--tpl-accent); }
.tpl-footer h3, .tpl-footer h4 { color: #fff; }
.tpl-footer__cols { display: grid; gap: 2rem; padding-block: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 750px) { .tpl-footer__cols { grid-template-columns: repeat(3, 1fr); } }
.tpl-footer ul { list-style: none; padding: 0; }
.tpl-footer__bottom { padding-block: 1.25rem; border-top: 1px solid rgba(255,255,255,0.14); font-size: 0.85rem; }
.tpl-copy { margin: 0; opacity: 0.7; }

/* ---------- sticky mobile call bar ---------- */
@media (max-width: 767px) {
  body.has-sticky-callbar .tpl-callbar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
    box-shadow: 0 -2px 14px rgba(0,0,0,0.25);
  }
  body.has-sticky-callbar { padding-bottom: 3.4rem; }
  body.has-sticky-callbar .tpl-callbar__inner > * { flex: 1 1 0; text-align: center; justify-content: center; }
  body.has-sticky-callbar .tpl-callbar__ctas { margin-left: 0; flex: 1 1 auto; }
  body.has-sticky-callbar .tpl-cta { flex: 1 1 0; padding-inline: 0.6rem !important; font-size: 0.72rem; }
  body.has-sticky-callbar .tpl-callbar__label { display: none; }
}

/* ---------- quality floor ---------- */
:focus-visible { outline: 3px solid var(--tpl-accent); outline-offset: 2px; }
::selection { background: var(--tpl-accent); color: var(--tpl-on-accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media print {
  .tpl-header, .tpl-footer, .tpl-callbar, .tpl-topbar, .tpl-crumbs, .tpl-toggle { display: none !important; }
  .tpl-content .item-page { border: 0; padding: 0; }
  body { padding-bottom: 0; }
  a[href^="tel:"]::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}

/* =========================================================
   BOOTSTRAP UTILITY SHIM
   This template ships no Bootstrap. Joomla core output and
   our content packs both use a handful of Bootstrap utility
   classes, so the small subset that actually appears is
   implemented here. Without this, `row-cols-md-4` grids
   silently collapse into a single column.
   ========================================================= */

.row { display: flex; flex-wrap: wrap; margin-inline: -0.75rem; }
.row > * { padding-inline: 0.75rem; }

.row-cols-1 > * { flex: 0 0 100%; max-width: 100%; }
.row-cols-2 > * { flex: 0 0 50%;  max-width: 50%; }
.row-cols-3 > * { flex: 0 0 33.3333%; max-width: 33.3333%; }
.row-cols-4 > * { flex: 0 0 25%;  max-width: 25%; }

@media (min-width: 768px) {
  .row-cols-md-1 > * { flex: 0 0 100%; max-width: 100%; }
  .row-cols-md-2 > * { flex: 0 0 50%;  max-width: 50%; }
  .row-cols-md-3 > * { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .row-cols-md-4 > * { flex: 0 0 25%;  max-width: 25%; }
}
@media (min-width: 992px) {
  .row-cols-lg-2 > * { flex: 0 0 50%; max-width: 50%; }
  .row-cols-lg-3 > * { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .row-cols-lg-4 > * { flex: 0 0 25%; max-width: 25%; }
}

/* gutters */
.g-0 { margin-inline: 0; } .g-0 > * { padding-inline: 0; }
.g-2 > * { padding-block: 0.5rem; }
.g-3 > * { padding-block: 0.75rem; }
.g-4 > * { padding-block: 1rem; }
.g-5 > * { padding-block: 1.5rem; }

/* text + display */
.text-center { text-align: center; }
.text-start  { text-align: left; }
.text-end    { text-align: right; }
.d-none      { display: none; }
.d-block     { display: block; }
.d-flex      { display: flex; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* float + spacing (only the steps actually used in content) */
.float-end   { float: right; }
.float-start { float: left; }
.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.5rem}
.ms-1{margin-left:.25rem}.ms-2{margin-left:.5rem}.ms-3{margin-left:1rem}
.me-1{margin-right:.25rem}.me-2{margin-right:.5rem}.me-3{margin-right:1rem}
.my-3{margin-block:1rem}.my-4{margin-block:1.5rem}.my-5{margin-block:2.5rem}
.p-3{padding:1rem}.p-4{padding:1.5rem}
.w-100 { width: 100%; }

/* Joomla core output that assumes Bootstrap */
.alert { border: 1px solid var(--tpl-line); border-left-width: 3px; padding: 1rem 1.2rem; margin-block: 1rem; background: var(--tpl-surface); }
.alert-success { border-left-color: #2F7D32; }
.alert-danger, .alert-error { border-left-color: #B3261E; }
.alert-warning { border-left-color: var(--tpl-accent); }
.alert-info { border-left-color: var(--tpl-primary); }
.pagination { display: flex; gap: 0.3rem; list-style: none; padding: 0; }
.pagination a, .pagination span { display: block; padding: 0.45rem 0.8rem; border: 1px solid var(--tpl-line); text-decoration: none; border-radius: 3px; }
.pagination .active span { background: var(--tpl-primary); color: var(--tpl-on-primary); border-color: var(--tpl-primary); }
.form-control, .inputbox { font: inherit; padding: 0.6rem 0.7rem; border: 1px solid var(--tpl-line); border-radius: 3px; width: 100%; max-width: 100%; }
.control-group { margin-bottom: 1rem; }
.table { width: 100%; border-collapse: collapse; }


/* =========================================================
   CONTENT COMPONENTS
   Classes for use inside article HTML. They pick up the
   template palette, so the same markup works on any site.
   Both `tpl-` and `pcx-` prefixes are supported, so content
   authored for the Padcents Capital template keeps working.
   ========================================================= */

/* Eyebrow label — small mono caps above a heading */
.tpl-eyebrow, .pcx-eyebrow {
  display: block;
  font-family: var(--tpl-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tpl-accent);
  margin-bottom: 0.6rem;
  max-width: none;
}

/* Panel — soft surface with an accent bar down the left edge */
.tpl-panel, .pcx-panel {
  position: relative;
  background: var(--tpl-primary-soft);
  border-radius: var(--tpl-panel-radius, 10px);
  padding: 1.4rem 1.6rem 1.4rem 1.9rem;
  margin-block: 1.75rem;
  overflow: hidden;
}
.tpl-panel::before, .pcx-panel::before {
  content: '';
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 4px;
  background: linear-gradient(to bottom, var(--tpl-accent), color-mix(in srgb, var(--tpl-accent) 45%, transparent));
}
.tpl-panel > :first-child, .pcx-panel > :first-child { margin-top: 0; }
.tpl-panel > :last-child, .pcx-panel > :last-child { margin-bottom: 0; }

/* Inside a panel, bullets read better as plain discs than as accent dashes */
.tpl-panel ul, .pcx-panel ul { list-style: disc; padding-left: 1.3rem; }
.tpl-panel ul li::before, .pcx-panel ul li::before { content: none; margin: 0; }
.tpl-panel li, .pcx-panel li { margin-bottom: 0.45rem; }

/* Card — bordered surface for grids of features */
.tpl-card-inline, .pcx-card {
  background: #fff;
  border: 1px solid var(--tpl-line);
  border-radius: var(--tpl-panel-radius, 10px);
  padding: 1.4rem;
}

/* Chips — compact pill labels, good for a row of qualifying criteria */
.tpl-chips, .pcx-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; list-style: none; margin-block: 1.2rem; }
.tpl-chip, .pcx-chip {
  display: inline-block;
  font-family: var(--tpl-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--tpl-primary-soft);
  color: var(--tpl-primary-dark);
  border: 1px solid var(--tpl-line);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  max-width: none;
  text-decoration: none;
}
a.tpl-chip:hover, a.pcx-chip:hover { background: var(--tpl-accent); color: var(--tpl-on-accent); border-color: var(--tpl-accent); }

/* Accent rule under a headline */
.tpl-accent, .pcx-accent { color: var(--tpl-accent); }
.tpl-underline, .pcx-underline { position: relative; padding-bottom: 0.35em; }
.tpl-underline::after, .pcx-underline::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 3.5rem; height: 4px; border-radius: 2px; background: var(--tpl-accent);
}

/* Buttons inside article content, pill or square from the parameter */
.tpl-content .btn, .tpl-content .btn-primary { border-radius: var(--tpl-btn-radius, 3px); }

/* Terms rail — label/value pairs, e.g. rate sheet rows */
.tpl-terms, .pcx-terms { list-style: none; padding: 0; margin-block: 1.5rem; }
.tpl-terms li, .pcx-terms li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 0; border-bottom: 1px solid var(--tpl-line); max-width: none;
}
.tpl-terms li::before, .pcx-terms li::before { content: none; margin: 0; }
.tpl-terms strong, .pcx-terms strong { font-family: var(--tpl-mono); font-weight: 500; }


/* =========================================================
   PC CONTENT COMPONENT LAYER  (built in, no external file)
   Ported from the Padcents content pack's own stylesheet so
   the components work with zero configuration. Every color
   is mapped onto the template palette via the --pc-*
   variables defined below, so the same content pack adopts
   whichever site it is installed on.

   pass / watch / fail stay green / amber / red on every site:
   they carry meaning about a DSCR verdict, not brand identity.
   ========================================================= */

.pc {
  --pc-ink:   var(--tpl-primary-dark);
  --pc-slate: var(--tpl-ink);
  --pc-mute:  color-mix(in srgb, var(--tpl-ink) 55%, var(--tpl-ground));
  --pc-paper: var(--tpl-primary-soft);
  --pc-rule:  var(--tpl-line);
  --pc-brass: var(--tpl-accent);
  --pc-brass-soft: color-mix(in srgb, var(--tpl-accent) 14%, var(--tpl-ground));
  --pc-mono:  var(--tpl-mono);

  /* semantic, deliberately not palette-mapped */
  --pc-pass:  #2e7d5b;
  --pc-watch: #b07b24;
  --pc-fail:  #a33a32;

  color: var(--pc-slate);
  font-family: var(--tpl-art-body-font, var(--tpl-body));
  font-size: var(--tpl-art-body, 17px);
  line-height: var(--tpl-art-lead, 1.65);
}

.pc h1, .pc h2, .pc h3, .pc h4 {
  font-family: var(--tpl-art-head-font, var(--tpl-display));
  font-weight: var(--tpl-art-head-weight, 500);
  letter-spacing: var(--tpl-art-head-track, -0.015em);
  color: var(--pc-ink);
}

/* The template's own list dashes must not fight the pack's lists. */
.pc ul li::before { content: none; margin: 0; }
.pc ul { list-style: disc; }
.pc-steps, .pc-related ul, .pc-strip-legend { list-style: none; }
.pc p, .pc li { max-width: var(--tpl-art-measure, 68ch); }
.pc-table-wrap, .pc-strip, .pc-grid, .pc-calc, .pc-cta { max-width: none; }

/* Radius follows the template's component shape setting. */
.pc .pc-card, .pc .pc-calc, .pc .pc-out, .pc .pc-strip, .pc .pc-grid,
.pc .pc-note, .pc .pc-key, .pc .pc-cta { border-radius: var(--tpl-panel-radius, 0); }
.pc .pc-btn, .pc .pc-btn-ghost { border-radius: var(--tpl-btn-radius, 2px); }

/* Hardcoded in the original; re-pointed at the palette. */
.pc .pc-btn { background: var(--pc-brass); color: var(--tpl-on-accent) !important; }
.pc .pc-btn:hover { background: var(--tpl-primary); color: var(--tpl-on-primary) !important; }
/* ============================================================
   Padcents content styles
   Scoped to .pc — safe to load alongside Helix Ultimate.
   Identity: a lender's rate sheet. Ledger rules, tabular
   figures, functional color reserved for DSCR verdicts only.
   ============================================================ */


.pc h2,
.pc h3,
.pc h4 {
  color: var(--pc-ink);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.pc h2 {
  margin: 2.6rem 0 0.9rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--pc-rule);
  font-size: 1.6rem;
}

.pc h3 { margin: 1.9rem 0 0.6rem; font-size: 1.2rem; }
.pc h4 { margin: 1.4rem 0 0.4rem; font-size: 1.02rem; }
.pc p { margin: 0 0 1rem; }
.pc a { color: var(--pc-brass); text-decoration: underline; text-underline-offset: 2px; }
.pc a:hover { color: var(--pc-ink); }
.pc strong { color: var(--pc-ink); font-weight: 650; }

/* --- Eyebrow + lede ---------------------------------------- */
.pc-eyebrow {
  font-family: var(--pc-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pc-brass);
  margin: 0 0 0.5rem;
}

.pc-lede {
  font-size: 1.16rem;
  line-height: 1.6;
  color: var(--pc-ink);
  margin-bottom: 1.6rem;
}

/* --- Key takeaways ----------------------------------------- */
.pc-key {
  background: var(--pc-paper);
  border-left: 3px solid var(--pc-brass);
  padding: 1.1rem 1.3rem;
  margin: 0 0 2rem;
}
.pc-key p {
  font-family: var(--pc-mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--pc-mute);
  margin: 0 0 0.6rem;
}
.pc-key ul { margin: 0; padding-left: 1.1rem; }
.pc-key li { margin-bottom: 0.35rem; }

/* --- Rate-sheet tables -------------------------------------- */
.pc-table-wrap { overflow-x: auto; margin: 1.3rem 0 1.8rem; }
.pc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}
.pc table th {
  text-align: left;
  font-family: var(--pc-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pc-mute);
  font-weight: 600;
  padding: 0.55rem 0.7rem;
  border-bottom: 2px solid var(--pc-ink);
  white-space: nowrap;
}
.pc table td {
  padding: 0.62rem 0.7rem;
  border-bottom: 1px solid var(--pc-rule);
  vertical-align: top;
}
.pc table tbody tr:nth-child(even) { background: rgba(16, 35, 58, 0.025); }
.pc table td:first-child { color: var(--pc-ink); font-weight: 550; }
.pc-num { font-family: var(--pc-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- DSCR verdict strip (signature element) ----------------- */
.pc-strip {
  margin: 1.6rem 0 2rem;
  border: 1px solid var(--pc-rule);
  background: #fff;
}
.pc-strip-bar { display: flex; height: 46px; }
.pc-strip-seg {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pc-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: #fff;
  text-align: center;
  padding: 0 0.4rem;
}
.pc-seg-fail  { background: var(--pc-fail); }
.pc-seg-watch { background: var(--pc-watch); }
.pc-seg-ok    { background: #4a7d63; }
.pc-seg-best  { background: var(--pc-pass); }
.pc-strip-legend {
  display: flex;
  border-top: 1px solid var(--pc-rule);
}
.pc-strip-legend div {
  flex: 1;
  padding: 0.55rem 0.5rem;
  font-size: 0.8rem;
  text-align: center;
  border-right: 1px solid var(--pc-rule);
}
.pc-strip-legend div:last-child { border-right: 0; }

/* --- Callouts ------------------------------------------------ */
.pc-note {
  border: 1px solid var(--pc-rule);
  border-left: 3px solid var(--pc-ink);
  padding: 0.95rem 1.2rem;
  margin: 1.4rem 0;
  background: #fff;
  font-size: 0.96rem;
}
.pc-note strong { display: block; margin-bottom: 0.25rem; }
.pc-warn { border-left-color: var(--pc-fail); }

/* --- Program cards ------------------------------------------- */
.pc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--pc-rule);
  border: 1px solid var(--pc-rule);
  margin: 1.6rem 0 2rem;
}
.pc-card { background: #fff; padding: 1.2rem 1.3rem; }
.pc-card h4 { margin: 0 0 0.4rem; }
.pc-card p { font-size: 0.93rem; margin: 0 0 0.6rem; }
.pc-card .pc-stat {
  font-family: var(--pc-mono);
  font-size: 0.78rem;
  color: var(--pc-brass);
  display: block;
  margin-bottom: 0.5rem;
}

/* --- Steps (real sequences only) ----------------------------- */
.pc-steps { list-style: none; counter-reset: pcstep; padding: 0; margin: 1.5rem 0 2rem; }
.pc-steps li {
  counter-increment: pcstep;
  position: relative;
  padding: 0 0 1.1rem 3rem;
  border-left: 1px solid var(--pc-rule);
  margin-left: 0.9rem;
}
.pc-steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.pc-steps li::before {
  content: counter(pcstep);
  position: absolute;
  left: -0.9rem;
  top: 0;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--pc-ink);
  color: #fff;
  font-family: var(--pc-mono);
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pc-steps li strong { display: block; margin-bottom: 0.15rem; }

/* --- Calculators --------------------------------------------- */
.pc-calc {
  border: 1px solid var(--pc-ink);
  background: #fff;
  margin: 1.8rem 0 2.2rem;
}
.pc-calc-head {
  background: var(--pc-ink);
  color: #fff;
  padding: 0.75rem 1.2rem;
  font-family: var(--pc-mono);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pc-calc-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem 1.4rem;
  padding: 1.3rem;
}
.pc-field label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pc-mute);
  margin-bottom: 0.3rem;
  font-weight: 600;
}
.pc-field input,
.pc-field select {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--pc-rule);
  border-radius: 2px;
  font-family: var(--pc-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.98rem;
  color: var(--pc-ink);
  background: #fff;
}
.pc-field input:focus,
.pc-field select:focus {
  outline: 2px solid var(--pc-brass);
  outline-offset: 1px;
  border-color: var(--pc-brass);
}
.pc-field small { display: block; margin-top: 0.25rem; font-size: 0.76rem; color: var(--pc-mute); }

.pc-out {
  border-top: 1px solid var(--pc-rule);
  padding: 1.2rem 1.3rem;
  background: var(--pc-paper);
}
.pc-out-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-bottom: 0.9rem;
}
.pc-out-item { min-width: 120px; }
.pc-out-item span {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pc-mute);
  margin-bottom: 0.15rem;
}
.pc-out-item b {
  font-family: var(--pc-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--pc-ink);
  line-height: 1.1;
}
.pc-verdict {
  font-family: var(--pc-mono);
  font-size: 0.85rem;
  padding: 0.6rem 0.85rem;
  border-left: 3px solid var(--pc-mute);
  background: #fff;
}
.pc-v-pass  { border-left-color: var(--pc-pass); color: var(--pc-pass); }
.pc-v-watch { border-left-color: var(--pc-watch); color: var(--pc-watch); }
.pc-v-fail  { border-left-color: var(--pc-fail); color: var(--pc-fail); }

/* --- CTA ------------------------------------------------------ */
.pc-cta {
  background: var(--pc-ink);
  color: #fff;
  padding: 1.8rem;
  margin: 2.4rem 0 1rem;
}
.pc-cta h3 { color: #fff; margin: 0 0 0.5rem; }
.pc-cta p { color: rgba(255, 255, 255, 0.82); margin: 0 0 1.1rem; }
.pc-btn {
  display: inline-block;
  background: var(--pc-brass);
  color: #10233a !important;
  padding: 0.7rem 1.4rem;
  font-weight: 650;
  text-decoration: none !important;
  border-radius: 2px;
  margin: 0 0.5rem 0.5rem 0;
}
.pc-btn:hover { background: #c99a52; }
.pc-btn-ghost {
  background: transparent;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.45);
}
.pc-btn-ghost:hover { background: rgba(255, 255, 255, 0.1); }

/* --- FAQ ------------------------------------------------------- */
.pc-faq { border-top: 1px solid var(--pc-rule); margin-top: 2rem; }
.pc-faq details { border-bottom: 1px solid var(--pc-rule); }
.pc-faq summary {
  cursor: pointer;
  padding: 0.95rem 0;
  color: var(--pc-ink);
  font-weight: 600;
  list-style: none;
}
.pc-faq summary::-webkit-details-marker { display: none; }
.pc-faq summary::before { content: "+ "; color: var(--pc-brass); font-family: var(--pc-mono); }
.pc-faq details[open] summary::before { content: "− "; }
.pc-faq details > *:not(summary) { padding-bottom: 0.9rem; }

/* --- Related links ---------------------------------------------- */
.pc-related {
  border-top: 2px solid var(--pc-ink);
  margin-top: 2.6rem;
  padding-top: 1.1rem;
}
.pc-related p {
  font-family: var(--pc-mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--pc-mute);
}
.pc-related ul { columns: 2; column-gap: 2rem; padding-left: 1.1rem; }
.pc-related li { margin-bottom: 0.3rem; break-inside: avoid; }

/* --- Disclaimer -------------------------------------------------- */
.pc-disclaimer {
  font-size: 0.82rem;
  color: var(--pc-mute);
  border-top: 1px solid var(--pc-rule);
  margin-top: 2rem;
  padding-top: 1rem;
}

/* --- Glossary ---------------------------------------------------- */
.pc-gloss dt {
  color: var(--pc-ink);
  font-weight: 650;
  margin-top: 1rem;
  font-family: var(--pc-mono);
  font-size: 0.95rem;
}
.pc-gloss dd { margin: 0.2rem 0 0; padding-left: 0; }

@media (max-width: 640px) {
  .pc-related ul { columns: 1; }
  .pc-strip-seg { font-size: 0.62rem; }
  .pc-out-item b { font-size: 1.25rem; }
}

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

/* =========================================================
   OVERFLOW CONTAINMENT — LAST WORD
   These repeat rules from the top of the file deliberately.
   The pc- component layer is defined after them and, at equal
   specificity, later wins. Placing them at the end of the
   stylesheet makes the containment authoritative.
   ========================================================= */

.pc-out-row > .pc-out-item,
.pc-strip-legend > div,
.pc-strip-bar > .pc-strip-seg,
.pc-calc-body > .pc-field,
.pc-grid > .pc-card { min-width: 0; }

@media (max-width: 700px) {
  /* Four output figures side by side need roughly 600px. Wrap to two. */
  .pc-out-row { gap: 1rem 1.2rem; }
  .pc-out-row > .pc-out-item { flex: 1 1 45%; min-width: 0; }
  .pc-out-item b { font-size: 1.25rem; }

  /* The verdict strip stays four segments, but the labels have to shrink. */
  .pc-strip-seg { font-size: 0.6rem; letter-spacing: 0.02em; padding: 0 0.2rem; }
  .pc-strip-legend { flex-wrap: wrap; }
  .pc-strip-legend div { flex: 1 1 50%; border-bottom: 1px solid var(--pc-rule); font-size: 0.76rem; }

  /* Calculator fields go single column rather than squeezing two in. */
  .pc-calc-body { grid-template-columns: 1fr; padding: 1rem; }
  .pc-grid { grid-template-columns: 1fr; }

  /* Tables scroll inside their wrapper; give the hint that they can. */
  .pc-table-wrap { overflow-x: auto; }
  .pc table { font-size: 0.88rem; }
  .pc table th, .pc table td { padding: 0.5rem 0.55rem; }

  /* Nothing in the tagline should force the header wider than the screen. */
  .tpl-tagline { white-space: normal; }

  /* Steps indent less on a narrow screen. */
  .pc-steps li { padding-left: 2.4rem; }

  /* Related links single column (the pack does this at 640; match our 700). */
  .pc-related ul { columns: 1; }
}

@media (max-width: 420px) {
  .pc-out-row > .pc-out-item { flex: 1 1 100%; }
  .pc-strip-legend div { flex: 1 1 100%; }
}

/* =========================================================
   MENU PARENT INDICATORS  (works with any menu module)
   Chevron on desktop, plus button on mobile. The classes are
   added by script, so no module markup override is needed.
   ========================================================= */

.tpl-nav--carets .tpl-has-sub > a,
.tpl-nav--carets .tpl-has-sub > span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.tpl-nav--carets .tpl-has-sub > a::after,
.tpl-nav--carets .tpl-has-sub > span::after {
  content: '';
  width: 0.4em;
  height: 0.4em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-0.1em);
  opacity: 0.6;
  transition: transform 0.18s ease, opacity 0.18s ease;
  flex: 0 0 auto;
}
.tpl-nav--carets .tpl-has-sub:hover > a::after,
.tpl-nav--carets .tpl-has-sub:focus-within > a::after { opacity: 1; transform: rotate(225deg) translateY(-0.25em); }
.tpl-nav--carets .tpl-has-sub .tpl-has-sub > a::after { transform: rotate(-45deg); }

.tpl-sub {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 48px;
  padding: 0;
  background: none;
  border: 0;
  border-left: 1px solid var(--tpl-line);
  color: inherit;
  cursor: pointer;
  z-index: 2;
}
svg.tpl-sub-icon {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto;
  opacity: 0.72;
  transition: transform 0.22s ease, opacity 0.22s ease;
  overflow: visible;
}
.tpl-sub:hover svg.tpl-sub-icon { opacity: 1; }

/* Chevron, caret and arrow rotate to point the other way when open. */
.tpl-has-sub.is-expanded > .tpl-sub--chevron svg.tpl-sub-icon,
.tpl-has-sub.is-expanded > .tpl-sub--caret svg.tpl-sub-icon,
.tpl-has-sub.is-expanded > .tpl-sub--arrow svg.tpl-sub-icon { transform: rotate(180deg); }

/* Plus turns into a minus: the vertical stroke rotates away. */
.tpl-sub--plus svg.tpl-sub-icon path:first-child {
  transform-origin: 50% 50%;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.tpl-has-sub.is-expanded > .tpl-sub--plus svg.tpl-sub-icon path:first-child {
  transform: rotate(90deg);
  opacity: 0;
}
.tpl-sub:hover { background: color-mix(in srgb, var(--tpl-primary) 7%, transparent); }

/* =========================================================
   MOBILE NAV — full width, nothing shifted or clipped
   ========================================================= */
@media (max-width: 900px) {
  .tpl-menurow, .tpl-menurow > .tpl-wrap { width: 100%; }
  .tpl-nav, .tpl-nav > *, .tpl-nav ul, .tpl-nav li { width: 100%; max-width: 100%; }
  .tpl-nav ul { flex-direction: column; align-items: stretch; margin: 0; padding: 0; }
  .tpl-nav li { position: relative; border-bottom: 1px solid var(--tpl-line); }
  /* Full-width labels — but NOT the icon span inside the expand button.
     `.tpl-nav span` matched .tpl-sub-icon too, stretching a 13px icon across
     the row and turning the plus into a long bar running off the screen. */
  .tpl-nav li > a,
  .tpl-nav li > span:not(.tpl-sub-icon) { display: block; width: 100%; }

  /* Room for the plus button so long labels never run under it. */
  .tpl-has-sub > a, .tpl-has-sub > span { padding-right: 58px; }
  .tpl-sub { display: block; }

  /* Chevrons are a hover affordance; on touch the button carries the meaning. */
  .tpl-nav--carets .tpl-has-sub > a::after,
  .tpl-nav--carets .tpl-has-sub > span::after { display: none; }

  /* Accordion: nested lists closed until their button is pressed. */
  .tpl-nav li ul {
    display: none; position: static; box-shadow: none; border: 0;
    padding-left: 1rem; width: 100%; min-width: 0;
  }
  .tpl-nav li.is-expanded > ul { display: block; }

  /* A nav module nested inside the row must not add its own layout. */
  .tpl-nav .cn { display: block; width: 100%; }
  .tpl-nav .cn-actions { width: 100%; margin: 0.6rem 0 0; }
}


/* The expand button icon must keep its own geometry regardless of any
   full-width rules applied to the nav. */
.tpl-sub,
.tpl-sub * { box-sizing: border-box; }
svg.tpl-sub-icon {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 auto;
}
.cn-sub-icon {
  display: block !important;
  width: 13px !important;
  height: 13px !important;
  margin: 0 auto !important;
}