/* ==========================================================================
   CRAFT — Components
   Every component reads from tokens.css. Never hardcode a colour here.
   ========================================================================== */

/* --- Base ----------------------------------------------------------------- */
body[class*="cft-"],
.editor-styles-wrapper {
  background: var(--cft-surface);
  color: var(--cft-ink);
  font-family: var(--cft-font-body);
  font-size: var(--cft-step-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

body[class*="cft-"] h1, body[class*="cft-"] h2,
body[class*="cft-"] h3, body[class*="cft-"] h4,
.editor-styles-wrapper h1, .editor-styles-wrapper h2,
.editor-styles-wrapper h3, .editor-styles-wrapper h4 {
  font-family: var(--cft-font-display);
  font-weight: var(--cft-display-weight);
  letter-spacing: var(--cft-display-tracking);
  line-height: 1.08;
  text-wrap: balance;
  margin: 0 0 0.4em;
}
body[class*="cft-"] h1, .editor-styles-wrapper h1 { font-size: var(--cft-step-4); }
body[class*="cft-"] h2, .editor-styles-wrapper h2 { font-size: var(--cft-step-3); }
body[class*="cft-"] h3, .editor-styles-wrapper h3 { font-size: var(--cft-step-1); }
body[class*="cft-"] p { max-width: 68ch; }

.cft-wrap { max-width: var(--cft-maxw); margin-inline: auto; padding-inline: var(--cft-gutter); }
.cft-section { padding-block: var(--cft-space-l); }
.cft-section--tight { padding-block: var(--cft-space-m); }
.cft-section--deep {
  background: var(--cft-surface-deep);
  color: var(--cft-ink-invert);
}
.cft-section--deep .cft-eyebrow { color: var(--cft-accent-light, #D6976D); }

.cft-eyebrow {
  font-size: var(--cft-step--1);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--cft-accent-deep);
  margin-bottom: 0.9rem;
  display: block;
}

::selection { background: var(--cft-accent); color: var(--cft-ink-invert); }
:focus-visible {
  outline: 2px solid var(--cft-accent);
  outline-offset: 3px;
}

/* --- Buttons -------------------------------------------------------------- */
.cft-btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--cft-font-body);
  font-weight: 600; font-size: var(--cft-step-0);
  padding: 0.85em 1.7em;
  border-radius: var(--cft-radius);
  border: 1.5px solid var(--cft-accent);
  background: var(--cft-accent);
  color: var(--cft-ink-invert);
  text-decoration: none; cursor: pointer;
  transition: transform 0.2s var(--cft-ease), background 0.2s, box-shadow 0.2s;
}
.cft-btn:hover { background: var(--cft-accent-deep); border-color: var(--cft-accent-deep); transform: translateY(-2px); }
.cft-btn--ghost { background: transparent; color: var(--cft-accent-deep); }
.cft-btn--ghost:hover { background: var(--cft-accent); color: var(--cft-ink-invert); }

/* --- 1. Sticky shrinking header ------------------------------------------ */
.cft-header {
  position: sticky; top: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
  padding: 1.4rem var(--cft-gutter);
  background: color-mix(in srgb, var(--cft-surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: padding 0.35s var(--cft-ease), border-color 0.35s, background 0.35s;
}
.cft-header.is-stuck {
  padding-block: 0.7rem;
  border-bottom-color: var(--cft-line);
}
.cft-header__mark {
  font-family: var(--cft-font-display);
  font-weight: var(--cft-display-weight);
  font-size: var(--cft-step-1);
  letter-spacing: var(--cft-display-tracking);
  text-decoration: none; color: var(--cft-ink);
  transition: font-size 0.35s var(--cft-ease);
}
.cft-header.is-stuck .cft-header__mark { font-size: var(--cft-step-0); }
.cft-nav { display: flex; gap: 1.9rem; align-items: center; }
.cft-nav a {
  color: var(--cft-ink-soft); text-decoration: none;
  font-size: var(--cft-step--1); font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  position: relative; padding-block: 0.3em;
}
.cft-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px; background: var(--cft-accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s var(--cft-ease);
}
.cft-nav a:hover { color: var(--cft-ink); }
.cft-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 800px) { .cft-nav { display: none; } }

/* --- 2. Scroll reveal ----------------------------------------------------- */
.cft-reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity var(--cft-dur) var(--cft-ease),
              transform var(--cft-dur) var(--cft-ease);
  transition-delay: var(--cft-delay, 0ms);
}
.cft-reveal.is-in { opacity: 1; transform: none; }

/* --- 3. Before / after slider -------------------------------------------- */
.cft-ba {
  position: relative; overflow: hidden;
  border-radius: var(--cft-radius-lg);
  aspect-ratio: 16 / 10;
  user-select: none; touch-action: pan-y;
  box-shadow: var(--cft-shadow);
  cursor: ew-resize;
}
.cft-ba__layer { position: absolute; inset: 0; background-size: cover; background-position: center; }
.cft-ba__layer--after { clip-path: inset(0 0 0 var(--cft-pos, 50%)); }
.cft-ba__handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--cft-pos, 50%);
  width: 2px; background: var(--cft-surface);
  transform: translateX(-1px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.cft-ba__grip {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--cft-surface); border: 2px solid var(--cft-accent);
  display: grid; place-items: center;
  font-size: 0.8rem; color: var(--cft-accent-deep); font-weight: 700;
}
.cft-ba__tag {
  position: absolute; bottom: 1rem;
  font-size: var(--cft-step--1); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  background: color-mix(in srgb, var(--cft-surface-deep) 78%, transparent);
  color: var(--cft-ink-invert);
  padding: 0.4em 0.9em; border-radius: var(--cft-radius);
}
.cft-ba__tag--l { left: 1rem; }
.cft-ba__tag--r { right: 1rem; }

/* --- 4. Count-up stats ---------------------------------------------------- */
.cft-stats {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  background: var(--cft-line);
  border: 1px solid var(--cft-line);
}
.cft-stat { background: var(--cft-surface); padding: var(--cft-space-s) 1.4rem; }
.cft-section--deep .cft-stats { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.14); }
.cft-section--deep .cft-stat { background: var(--cft-surface-deep); }
.cft-stat__num {
  font-family: var(--cft-font-display);
  font-weight: var(--cft-display-weight);
  font-size: var(--cft-step-3);
  letter-spacing: var(--cft-display-tracking);
  color: var(--cft-accent);
  display: block; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cft-stat__label {
  font-size: var(--cft-step--1); color: var(--cft-ink-soft);
  margin-top: 0.6rem; display: block;
}
.cft-section--deep .cft-stat__label { color: color-mix(in srgb, var(--cft-ink-invert) 72%, transparent); }

/* --- 5. Filterable grid --------------------------------------------------- */
.cft-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--cft-space-s); }
.cft-filter {
  font: inherit; font-size: var(--cft-step--1); font-weight: 600;
  padding: 0.5em 1.1em; cursor: pointer;
  background: transparent; color: var(--cft-ink-soft);
  border: 1px solid var(--cft-line); border-radius: var(--cft-radius);
  transition: all 0.2s var(--cft-ease);
}
.cft-filter:hover { border-color: var(--cft-accent); color: var(--cft-ink); }
.cft-filter[aria-pressed="true"] {
  background: var(--cft-ink); color: var(--cft-ink-invert); border-color: var(--cft-ink);
}
.cft-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.cft-card {
  border: 1px solid var(--cft-line);
  border-radius: var(--cft-radius-lg);
  background: var(--cft-surface);
  overflow: hidden;
  transition: transform 0.4s var(--cft-ease), box-shadow 0.4s var(--cft-ease), opacity 0.3s;
}
.cft-card:hover { transform: translateY(-5px); box-shadow: var(--cft-shadow); }
.cft-card.is-hidden { display: none; }
.cft-card__media { aspect-ratio: 4 / 3; background: var(--cft-surface-2) var(--cft-texture); }
.cft-card__body { padding: 1.2rem 1.3rem 1.5rem; }
.cft-card__meta {
  font-size: var(--cft-step--1); color: var(--cft-accent-deep);
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
}
.cft-card h3 { margin: 0.5rem 0 0.4rem; font-size: var(--cft-step-1); }
.cft-card p { font-size: var(--cft-step--1); color: var(--cft-ink-soft); margin: 0; }

/* --- 6. Marquee ----------------------------------------------------------- */
.cft-marquee {
  overflow: hidden; border-block: 1px solid var(--cft-line);
  padding-block: 1.1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.cft-marquee__track {
  display: flex; gap: 3.5rem; width: max-content;
  animation: cft-scroll 34s linear infinite;
}
.cft-marquee:hover .cft-marquee__track { animation-play-state: paused; }
.cft-marquee__item {
  font-family: var(--cft-font-display);
  font-size: var(--cft-step-1); font-weight: var(--cft-display-weight);
  color: var(--cft-ink-soft); white-space: nowrap;
  letter-spacing: var(--cft-display-tracking);
}
@keyframes cft-scroll { to { transform: translateX(-50%); } }

/* --- 7. Accordion --------------------------------------------------------- */
.cft-acc { border-top: 1px solid var(--cft-line); }
.cft-acc__item { border-bottom: 1px solid var(--cft-line); }
.cft-acc__btn {
  width: 100%; text-align: left; cursor: pointer;
  font: inherit; font-size: var(--cft-step-1);
  font-family: var(--cft-font-display);
  font-weight: var(--cft-display-weight);
  letter-spacing: var(--cft-display-tracking);
  color: var(--cft-ink); background: none; border: 0;
  padding: 1.35rem 2.5rem 1.35rem 0;
  position: relative;
}
.cft-acc__btn::after {
  content: ""; position: absolute; right: 0.4rem; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 2px solid var(--cft-accent);
  border-bottom: 2px solid var(--cft-accent);
  transform: rotate(45deg);
  transition: transform 0.35s var(--cft-ease);
}
.cft-acc__btn[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: -2px; }
.cft-acc__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--cft-ease);
}
.cft-acc__panel > div { overflow: hidden; }
.cft-acc__item.is-open .cft-acc__panel { grid-template-rows: 1fr; }
.cft-acc__panel p { padding-bottom: 1.4rem; color: var(--cft-ink-soft); }

/* --- 8. Coverage calculator ---------------------------------------------- */
.cft-calc {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--cft-line);
  border-radius: var(--cft-radius-lg);
  overflow: hidden;
}
@media (max-width: 780px) { .cft-calc { grid-template-columns: 1fr; } }

.cft-calc__form { padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--cft-surface); }
.cft-calc__title { font-size: var(--cft-step-1); margin: 0 0 1.3rem; }

.cft-calc__field { display: block; margin-bottom: 1rem; }
.cft-calc__field > span {
  display: block; font-size: var(--cft-step--1); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--cft-ink-soft); margin-bottom: 0.45rem;
}
.cft-calc__field input, .cft-calc__field select {
  width: 100%; font: inherit; font-size: var(--cft-step-0);
  padding: 0.7em 0.85em;
  color: var(--cft-ink); background: var(--cft-surface-2);
  border: 1px solid var(--cft-line); border-radius: var(--cft-radius);
}
.cft-calc__field input:focus, .cft-calc__field select:focus {
  outline: 2px solid var(--cft-accent); outline-offset: 1px;
}
.cft-calc__row { display: grid; grid-template-columns: 1.3fr 1fr 0.8fr; gap: 0.7rem; }

.cft-calc__out {
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: var(--cft-calc-panel, #EFE4CD);
  color: var(--cft-ink);
  display: flex; flex-direction: column;
  border-left: 1px solid var(--cft-line);
}
@media (max-width: 780px) {
  .cft-calc__out { border-left: 0; border-top: 1px solid var(--cft-line); }
}
.cft-calc__primary {
  margin-bottom: 1.4rem; padding-bottom: 1.1rem;
  border-bottom: 2px solid var(--cft-accent);
}
.cft-calc__qty {
  display: block; font-family: var(--cft-font-display);
  font-weight: var(--cft-display-weight); font-size: var(--cft-step-3);
  letter-spacing: var(--cft-display-tracking); line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--cft-ink);
}
.cft-calc__qtylabel {
  display: block; margin-top: 0.5rem; font-size: var(--cft-step--1);
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--cft-calc-label, #5F594C);
}
.cft-calc__lines { margin: 0 0 1.2rem; font-size: var(--cft-step--1); }
.cft-calc__lines > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--cft-ink) 14%, transparent);
}
.cft-calc__lines dt { color: var(--cft-calc-label, #5F594C); margin: 0; }
.cft-calc__lines dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cft-ink); }
.cft-calc__note {
  font-size: var(--cft-step--1); margin: 0 0 1.2rem;
  color: var(--cft-calc-label, #5F594C);
}
.cft-calc__out .cft-btn { align-self: flex-start; margin-top: auto; }
.cft-calc__disclaimer {
  font-size: 0.76rem; line-height: 1.5; margin: 1rem 0 0;
  color: var(--cft-calc-label, #5F594C);
}

/* --- Gutenberg / Kadence block integration ------------------------------- */

/* Buttons: style the inner anchor, not the wrapper. Without this the wrapper
   takes the accent and the link keeps the theme's default blue. */
:where(.cft-ferrocon, .editor-styles-wrapper) .wp-block-button.cft-btn { background: none; padding: 0; border: 0; }
:where(.cft-ferrocon, .editor-styles-wrapper) .wp-block-button.cft-btn .wp-block-button__link,
:where(.cft-ferrocon, .editor-styles-wrapper) .wp-block-button.cft-btn .wp-element-button {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--cft-font-body); font-weight: 600;
  font-size: var(--cft-step-0); line-height: 1.2;
  padding: 0.85em 1.7em;
  border-radius: var(--cft-radius);
  border: 1.5px solid var(--cft-accent);
  background: var(--cft-accent);
  color: var(--cft-ink-invert);
  text-decoration: none;
  transition: transform 0.2s var(--cft-ease), background 0.2s, border-color 0.2s;
}
:where(.cft-ferrocon, .editor-styles-wrapper) .wp-block-button.cft-btn .wp-block-button__link:hover,
:where(.cft-ferrocon, .editor-styles-wrapper) .wp-block-button.cft-btn .wp-element-button:hover {
  background: var(--cft-accent-deep);
  border-color: var(--cft-accent-deep);
  color: var(--cft-ink-invert);
  transform: translateY(-2px);
}

/* Deep sections: force every descendant to the inverted ink, or block themes
   leave headings dark-on-dark. */
:where(.cft-ferrocon, .editor-styles-wrapper) .cft-section--deep,
:where(.cft-ferrocon, .editor-styles-wrapper) .cft-section--deep h1,
:where(.cft-ferrocon, .editor-styles-wrapper) .cft-section--deep h2,
:where(.cft-ferrocon, .editor-styles-wrapper) .cft-section--deep h3,
:where(.cft-ferrocon, .editor-styles-wrapper) .cft-section--deep h4,
:where(.cft-ferrocon, .editor-styles-wrapper) .cft-section--deep p,
:where(.cft-ferrocon, .editor-styles-wrapper) .cft-section--deep li,
:where(.cft-ferrocon, .editor-styles-wrapper) .cft-section--deep td,
:where(.cft-ferrocon, .editor-styles-wrapper) .cft-section--deep th {
  color: var(--cft-ink-invert);
}
:where(.cft-ferrocon, .editor-styles-wrapper) .cft-section--deep .cft-eyebrow { color: var(--cft-accent-light, #D6976D); }
:where(.cft-ferrocon, .editor-styles-wrapper) .cft-section--deep a:not(.wp-block-button__link) {
  color: var(--cft-ink-invert); text-decoration: underline;
}

/* Section blocks imported as groups need their own padding and full width. */
:where(.cft-ferrocon, .editor-styles-wrapper) .wp-block-group.cft-section {
  padding-block: var(--cft-space-l);
  padding-inline: var(--cft-gutter);
}
:where(.cft-ferrocon, .editor-styles-wrapper) .wp-block-group.cft-section--band,
:where(.cft-ferrocon, .editor-styles-wrapper) .wp-block-group.cft-section--deep {
  max-width: none;
}

/* Tables inside the theme */
:where(.cft-ferrocon, .editor-styles-wrapper) .wp-block-table table { border-collapse: collapse; width: 100%; }
:where(.cft-ferrocon, .editor-styles-wrapper) .wp-block-table td {
  border-bottom: 1px solid var(--cft-line);
  padding: 0.7rem 0.5rem 0.7rem 0;
  font-size: var(--cft-step-0);
}
:where(.cft-ferrocon, .editor-styles-wrapper) .wp-block-table tr td:first-child {
  color: var(--cft-ink-soft); width: 38%;
}

:where(.cft-ferrocon, .editor-styles-wrapper) .cft-section--deep .wp-block-button.cft-btn .wp-block-button__link,
:where(.cft-ferrocon, .editor-styles-wrapper) .cft-section--deep .cft-btn {
  background: var(--cft-accent-light, #D6976D);
  border-color: var(--cft-accent-light, #D6976D);
  color: #2E2A25;
}

/* --- 9. Video hero -------------------------------------------------------- */
.cft-vhero {
  position: relative;
  min-height: clamp(420px, 72vh, 760px);
  display: grid; align-items: end;
  overflow: hidden;
  background: var(--cft-black, #141210);
}
.cft-vhero__media {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background-size: cover; background-position: center;
}
.cft-vhero__scrim {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(20, 18, 16, var(--cft-scrim, 0.72)) 0%,
    rgba(20, 18, 16, calc(var(--cft-scrim, 0.72) * 0.6)) 45%,
    rgba(20, 18, 16, calc(var(--cft-scrim, 0.72) * 0.25)) 100%);
}
.cft-vhero__inner {
  position: relative; z-index: 2;
  max-width: var(--cft-maxw); width: 100%;
  margin-inline: auto;
  padding: var(--cft-space-l) var(--cft-gutter);
}
.cft-vhero__inner > * { color: #F5F1EA; }
.cft-vhero__inner h1 {
  font-size: var(--cft-step-4);
  max-width: 17ch; margin: 0 0 1rem;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.cft-vhero__inner p { max-width: 52ch; font-size: var(--cft-step-1); }
.cft-vhero .cft-eyebrow { color: var(--cft-accent-light, #D6976D); }
.cft-vhero .cft-btn,
.cft-vhero .wp-block-button.cft-btn .wp-block-button__link {
  background: var(--cft-accent-light, #D6976D);
  border-color: var(--cft-accent-light, #D6976D);
  color: #2E2A25;
}

/* No autoplay for anyone who has asked for less motion — poster only. */
@media (prefers-reduced-motion: reduce) {
  .cft-vhero video.cft-vhero__media { display: none; }
}


/* --- Black button variant ------------------------------------------------- */
.cft-btn--dark,
:where(.cft-ferrocon, .editor-styles-wrapper) .wp-block-button.cft-btn--dark .wp-block-button__link {
  background: var(--cft-black, #141210);
  border-color: var(--cft-black, #141210);
  color: #F5F1EA;
}
.cft-btn--dark:hover,
:where(.cft-ferrocon, .editor-styles-wrapper) .wp-block-button.cft-btn--dark .wp-block-button__link:hover {
  background: #000; border-color: #000; color: #F5F1EA;
}

/* Header action is black, not clay — it should read as navigation, not offer. */
.cft-header .cft-btn {
  background: var(--cft-black, #141210);
  border-color: var(--cft-black, #141210);
  color: #F5F1EA;
}
.cft-header .cft-btn:hover { background: #000; border-color: #000; }

/* Logo slot */
.cft-header__logo {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; min-width: 132px; padding: 0 0.9rem;
  border: 1px dashed var(--cft-line);
  font: 600 0.7rem/1 var(--cft-font-body);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cft-ink-soft); text-decoration: none;
}


/* Cards sitting on a black section keep their own light surface */
:where(.cft-ferrocon, .editor-styles-wrapper) .cft-section--deep .cft-card {
  background: var(--cft-surface);
  border-color: rgba(255,255,255,0.14);
}
:where(.cft-ferrocon, .editor-styles-wrapper) .cft-section--deep .cft-card h3,
:where(.cft-ferrocon, .editor-styles-wrapper) .cft-section--deep .cft-card p {
  color: var(--cft-ink);
}
:where(.cft-ferrocon, .editor-styles-wrapper) .cft-section--deep .cft-card__meta { color: var(--cft-accent-deep); }

/* ==========================================================================
   Kadence layout integration
   Kadence boxes page content in a white container with padding, which stops
   full-width section bands reaching the edge of the viewport. These rules
   unbox it on pages only, so blog posts keep Kadence's normal layout.
   ========================================================================== */

/* Kill the page-title hero banner on pages */
.cft-ferrocon.page .entry-hero-container-inner,
.cft-ferrocon.page .entry-hero,
.cft-ferrocon.page .page-hero-section,
.cft-ferrocon.page header.entry-header .entry-title {
  display: none !important;
}

/* Unbox the content area */
.cft-ferrocon.page .content-bg,
.cft-ferrocon.page .content-area .content-bg,
.cft-ferrocon.page .site-main .content-bg {
  background: transparent !important;
  box-shadow: none !important;
}
.cft-ferrocon.page .entry-content-wrap {
  padding: 0 !important;
}
.cft-ferrocon.page .content-container,
.cft-ferrocon.page .site-container {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.cft-ferrocon.page .site-main { margin-block: 0 !important; }
.cft-ferrocon.page article.entry { border: 0; }

/* Full-bleed sections */
.cft-ferrocon body,
.cft-ferrocon { overflow-x: hidden; }
.cft-ferrocon.page .wp-block-group.cft-section,
.cft-ferrocon.page .cft-vhero,
.cft-ferrocon.page .cft-marquee {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Keep the inner content of a full-bleed section constrained and readable */
.cft-ferrocon.page .wp-block-group.cft-section > * {
  max-width: var(--cft-maxw);
  margin-inline: auto;
}


/* No poster supplied: the black base above shows during load. */
.cft-vhero--noposter .cft-vhero__scrim { --cft-scrim: 0.55; }

/* ==========================================================================
   Overlay header
   When a page opens with a video hero, the header floats over it with no
   background, then turns solid once the hero has scrolled past.
   ========================================================================== */

/* Remove the gap Kadence leaves above the first section */
.cft-ferrocon.page .site-main,
.cft-ferrocon.page .content-area {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.cft-ferrocon.page .entry-content > .cft-vhero:first-child { margin-top: 0; }

/* Header floats over the hero */
.cft-ferrocon.has-vhero #masthead,
.cft-ferrocon.has-vhero .site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 60;
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.cft-ferrocon.has-vhero #masthead .site-header-wrap,
.cft-ferrocon.has-vhero #masthead .site-header-row,
.cft-ferrocon.has-vhero #masthead .site-top-header-wrap,
.cft-ferrocon.has-vhero #masthead .site-main-header-wrap {
  background: transparent !important;
  border: 0 !important;
}

/* Links and logo read light while floating */
.cft-ferrocon.has-vhero:not(.header-solid) #masthead a,
.cft-ferrocon.has-vhero:not(.header-solid) #masthead .site-title {
  color: #F5F1EA !important;
}
.cft-ferrocon.has-vhero:not(.header-solid) #masthead .site-branding img {
  filter: brightness(0) invert(1);
}
.cft-ferrocon.has-vhero:not(.header-solid) #masthead .menu-toggle-icon,
.cft-ferrocon.has-vhero:not(.header-solid) #masthead .menu-toggle-open .menu-toggle-icon span {
  background-color: #F5F1EA !important;
  color: #F5F1EA !important;
}

/* Solid state once the hero is behind us */
.cft-ferrocon.has-vhero.header-solid #masthead,
.cft-ferrocon.has-vhero.header-solid .site-header {
  position: fixed;
  background: var(--cft-surface) !important;
  box-shadow: 0 1px 0 var(--cft-line) !important;
}
.cft-ferrocon.has-vhero.header-solid #masthead a,
.cft-ferrocon.has-vhero.header-solid #masthead .site-title {
  color: var(--cft-ink) !important;
}
.cft-ferrocon.has-vhero.header-solid #masthead .site-branding img {
  filter: none;
}

/* The hero starts at the very top of the viewport */
.cft-ferrocon.has-vhero .cft-vhero { min-height: 100vh; }
@media (max-width: 780px) {
  .cft-ferrocon.has-vhero .cft-vhero { min-height: 82vh; }
}

/* Taller header band. Generous while floating over the hero, a little
   shorter once it goes solid so it takes less room when reading. */
.cft-ferrocon #masthead .site-main-header-inner-wrap,
.cft-ferrocon .site-header-row-container-inner .site-header-row {
  min-height: 104px;
  transition: min-height 0.3s ease;
}
.cft-ferrocon.header-solid #masthead .site-main-header-inner-wrap,
.cft-ferrocon.header-solid .site-header-row-container-inner .site-header-row {
  min-height: 76px;
}
@media (max-width: 780px) {
  .cft-ferrocon #masthead .site-main-header-inner-wrap,
  .cft-ferrocon .site-header-row-container-inner .site-header-row { min-height: 78px; }
  .cft-ferrocon.header-solid #masthead .site-main-header-inner-wrap,
  .cft-ferrocon.header-solid .site-header-row-container-inner .site-header-row { min-height: 64px; }
}

/* Nav sits a touch larger and more spaced in the taller band */
.cft-ferrocon #masthead .primary-menu-container > ul > li > a {
  font-size: var(--cft-step-0);
  padding-inline: 1rem;
}

/* A soft gradient behind the floating header keeps light text legible even
   over a bright frame of the video. */
.cft-ferrocon.has-vhero:not(.header-solid) #masthead::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 170px;
  background: linear-gradient(to bottom, rgba(20,18,16,0.5), rgba(20,18,16,0));
  pointer-events: none; z-index: -1;
}

/* Header band height, and stripping every residual background and border
   Kadence paints on the header wrappers while it floats over the hero. */
.cft-ferrocon #masthead .site-main-header-inner-wrap,
.cft-ferrocon .site-header-row-container-inner .site-header-row {
  min-height: 130px;
}
.cft-ferrocon.header-solid #masthead .site-main-header-inner-wrap,
.cft-ferrocon.header-solid .site-header-row-container-inner .site-header-row {
  min-height: 84px;
}
@media (max-width: 780px) {
  .cft-ferrocon #masthead .site-main-header-inner-wrap,
  .cft-ferrocon .site-header-row-container-inner .site-header-row { min-height: 92px; }
  .cft-ferrocon.header-solid #masthead .site-main-header-inner-wrap,
  .cft-ferrocon.header-solid .site-header-row-container-inner .site-header-row { min-height: 68px; }
}

.cft-ferrocon.has-vhero:not(.header-solid) #masthead,
.cft-ferrocon.has-vhero:not(.header-solid) #masthead *:not(a):not(img):not(span):not(svg) {
  background-color: transparent !important;
  border-color: transparent !important;
}
.cft-ferrocon.has-vhero:not(.header-solid) #masthead,
.cft-ferrocon.has-vhero:not(.header-solid) #masthead .site-header-row,
.cft-ferrocon.has-vhero:not(.header-solid) #masthead .site-header-row-container,
.cft-ferrocon.has-vhero:not(.header-solid) #masthead .site-header-row-container-inner,
.cft-ferrocon.has-vhero:not(.header-solid) #masthead .site-branding,
.cft-ferrocon.has-vhero:not(.header-solid) #masthead .site-header-item {
  border: 0 !important;
  box-shadow: none !important;
}

/* Taller band needs the gradient to reach further down */
.cft-ferrocon.has-vhero:not(.header-solid) #masthead::before { height: 220px; }

/* ==========================================================================
   Overlay header — corrections
   1. Fixed in both states, so it never vanishes mid-scroll.
   2. Contents vertically centred in the band.
   3. 170px tall.
   ========================================================================== */

.cft-ferrocon.has-vhero #masthead,
.cft-ferrocon.has-vhero .site-header,
.cft-ferrocon.has-vhero.header-solid #masthead,
.cft-ferrocon.has-vhero.header-solid .site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
}

/* Centre the row contents vertically */
.cft-ferrocon #masthead .site-main-header-inner-wrap,
.cft-ferrocon .site-header-row-container-inner .site-header-row,
.cft-ferrocon #masthead .site-header-row {
  align-items: center !important;
}
.cft-ferrocon #masthead .site-header-item,
.cft-ferrocon #masthead .site-branding {
  display: flex;
  align-items: center;
}

/* Band height, both states */
.cft-ferrocon #masthead .site-main-header-inner-wrap,
.cft-ferrocon .site-header-row-container-inner .site-header-row,
.cft-ferrocon.header-solid #masthead .site-main-header-inner-wrap,
.cft-ferrocon.header-solid .site-header-row-container-inner .site-header-row {
  min-height: 170px;
}
@media (max-width: 780px) {
  .cft-ferrocon #masthead .site-main-header-inner-wrap,
  .cft-ferrocon .site-header-row-container-inner .site-header-row,
  .cft-ferrocon.header-solid #masthead .site-main-header-inner-wrap,
  .cft-ferrocon.header-solid .site-header-row-container-inner .site-header-row {
    min-height: 96px;
  }
}


.cft-ferrocon.has-vhero:not(.header-solid) #masthead::before { height: 260px; }

/* Header band: fixed 110px. No size change on hover — the menu items
   respond instead. */
.cft-ferrocon #masthead .site-main-header-inner-wrap,
.cft-ferrocon .site-header-row-container-inner .site-header-row,
.cft-ferrocon.header-solid #masthead .site-main-header-inner-wrap,
.cft-ferrocon.header-solid .site-header-row-container-inner .site-header-row {
  min-height: 110px;
}
@media (max-width: 780px) {
  .cft-ferrocon #masthead .site-main-header-inner-wrap,
  .cft-ferrocon .site-header-row-container-inner .site-header-row,
  .cft-ferrocon.header-solid #masthead .site-main-header-inner-wrap,
  .cft-ferrocon.header-solid .site-header-row-container-inner .site-header-row {
    min-height: 78px;
  }
}

/* --- Menu item hover ------------------------------------------------------
   The hovered item grows slightly and shifts colour. Scaling from the centre
   keeps its neighbours still, so the row does not jitter as the pointer
   moves across it. */
.cft-ferrocon #masthead .primary-menu-container > ul > li > a {
  display: inline-block;
  transform-origin: center;
  transition: transform 0.22s var(--cft-ease), color 0.22s var(--cft-ease);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .cft-ferrocon #masthead .primary-menu-container > ul > li > a:hover {
    transform: scale(1.13);
  }
  .cft-ferrocon.has-vhero:not(.header-solid) #masthead .primary-menu-container > ul > li > a:hover {
    color: var(--cft-accent-light, #D6976D) !important;
  }
  .cft-ferrocon.header-solid #masthead .primary-menu-container > ul > li > a:hover,
  .cft-ferrocon:not(.has-vhero) #masthead .primary-menu-container > ul > li > a:hover {
    color: var(--cft-accent) !important;
  }
}

/* --- Current-page indicator ----------------------------------------------
   A short clay rule under the active item. Kadence's own indicator is
   replaced rather than layered on, so there is only ever one mark. */
.cft-ferrocon #masthead .current-menu-item > a,
.cft-ferrocon #masthead .current_page_item > a,
.cft-ferrocon #masthead .current-menu-ancestor > a {
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  position: relative;
}
.cft-ferrocon #masthead .primary-menu-container > ul > li > a::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -0.45em;
  width: 0; height: 2px;
  transform: translateX(-50%);
  background: currentColor;
  transition: width 0.25s var(--cft-ease);
}
.cft-ferrocon #masthead .primary-menu-container > ul > li.current-menu-item > a::after,
.cft-ferrocon #masthead .primary-menu-container > ul > li.current_page_item > a::after,
.cft-ferrocon #masthead .primary-menu-container > ul > li.current-menu-ancestor > a::after {
  width: 62%;
}

/* Active item colour matches the hover accent, in both header states */
.cft-ferrocon.has-vhero:not(.header-solid) #masthead .current-menu-item > a,
.cft-ferrocon.has-vhero:not(.header-solid) #masthead .current_page_item > a {
  color: var(--cft-accent-light, #D6976D) !important;
}
.cft-ferrocon.header-solid #masthead .current-menu-item > a,
.cft-ferrocon.header-solid #masthead .current_page_item > a,
.cft-ferrocon:not(.has-vhero) #masthead .current-menu-item > a,
.cft-ferrocon:not(.has-vhero) #masthead .current_page_item > a {
  color: var(--cft-accent) !important;
}

/* Hovering a non-active item draws the same rule, so the two agree visually */
@media (hover: hover) and (pointer: fine) {
  .cft-ferrocon #masthead .primary-menu-container > ul > li > a:hover::after { width: 62%; }
}

/* ==========================================================================
   Nav centring + hover magnify — broadened selectors
   Kadence names its nav wrappers differently depending on the header row
   layout, so these cover every variant rather than one.
   ========================================================================== */

/* Hover magnify — every Kadence nav link variant */
.cft-ferrocon #masthead .main-navigation ul li a,
.cft-ferrocon #masthead .header-navigation ul li a,
.cft-ferrocon #masthead .primary-menu-container ul li a,
.cft-ferrocon #masthead ul.menu > li > a,
.cft-ferrocon #masthead nav ul li a {
  display: inline-block;
  position: relative;
  transform-origin: center;
  transition: transform 0.22s var(--cft-ease), color 0.22s var(--cft-ease);
}

@media (hover: hover) and (pointer: fine) {
  .cft-ferrocon #masthead .main-navigation ul li a:hover,
  .cft-ferrocon #masthead .header-navigation ul li a:hover,
  .cft-ferrocon #masthead .primary-menu-container ul li a:hover,
  .cft-ferrocon #masthead ul.menu > li > a:hover,
  .cft-ferrocon #masthead nav ul li a:hover {
    transform: scale(1.15);
  }
  .cft-ferrocon.has-vhero:not(.header-solid) #masthead nav ul li a:hover {
    color: var(--cft-accent-light, #D6976D) !important;
  }
  .cft-ferrocon.header-solid #masthead nav ul li a:hover,
  .cft-ferrocon:not(.has-vhero) #masthead nav ul li a:hover {
    color: var(--cft-accent) !important;
  }
}

/* Underline rule on every variant too */
.cft-ferrocon #masthead nav ul > li > a::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -0.45em;
  width: 0; height: 2px;
  transform: translateX(-50%);
  background: currentColor;
  transition: width 0.25s var(--cft-ease);
}
.cft-ferrocon #masthead nav ul > li.current-menu-item > a::after,
.cft-ferrocon #masthead nav ul > li.current_page_item > a::after,
.cft-ferrocon #masthead nav ul > li.current-menu-ancestor > a::after {
  width: 62%;
}
@media (hover: hover) and (pointer: fine) {
  .cft-ferrocon #masthead nav ul > li > a:hover::after { width: 62%; }
}

/* Vertically centre everything in the header band. Kadence lays the row out
   as a grid, so the items need align-self as well as the container rule. */
.cft-ferrocon #masthead .site-main-header-inner-wrap,
.cft-ferrocon #masthead .site-header-row,
.cft-ferrocon #masthead .site-header-row-container-inner,
.cft-ferrocon #masthead .site-header-upper-inner-wrap {
  align-items: center !important;
  align-content: center !important;
}
.cft-ferrocon #masthead .site-header-item,
.cft-ferrocon #masthead .site-branding,
.cft-ferrocon #masthead .site-header-section,
.cft-ferrocon #masthead .main-navigation,
.cft-ferrocon #masthead .header-navigation,
.cft-ferrocon #masthead nav {
  align-self: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.cft-ferrocon #masthead .site-header-section {
  display: flex;
  align-items: center;
}

/* --- 12. Product tiles ----------------------------------------------------
   Image with the name always visible over it. Hover is enhancement only —
   on touch the resting state already reads correctly.
   -------------------------------------------------------------------------- */
.cft-tiles {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: none;
}
@media (min-width: 560px)  { .cft-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cft-tiles { grid-template-columns: repeat(4, 1fr); } }

/* A tile row inside a constrained group still spans the section width */
.cft-ferrocon .wp-block-group.cft-section .cft-tiles,
.cft-ferrocon .wp-block-shortcode .cft-tiles {
  width: 100%;
  max-width: var(--cft-maxw);
  margin-inline: auto;
}

.cft-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--cft-radius-lg);
  aspect-ratio: 16 / 11;          /* wide on mobile so cards don't tower */
  text-decoration: none;
  background: var(--cft-surface-2);
  isolation: isolate;
}
@media (min-width: 700px) {
  .cft-tile { aspect-ratio: 4 / 5; }   /* taller once they sit side by side */
}

.cft-tile__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--cft-ease);
}

/* Permanent scrim — the name has to be readable with no hover at all */
.cft-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(20,18,16,0.78) 0%,
    rgba(20,18,16,0.35) 42%,
    rgba(20,18,16,0.08) 100%);
  transition: background 0.35s var(--cft-ease);
  z-index: 1;
}

.cft-tile__body {
  position: absolute; z-index: 2;
  left: 0; right: 0; bottom: 0;
  padding: 1.3rem 1.4rem;
}
.cft-tile__name {
  display: block;
  font-family: var(--cft-font-display);
  font-weight: var(--cft-display-weight);
  letter-spacing: var(--cft-display-tracking);
  font-size: var(--cft-step-2);
  line-height: 1.1;
  color: #F5F1EA;
  transition: color 0.28s var(--cft-ease);
}
.cft-tile__meta {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--cft-step--1);
  color: rgba(245,241,234,0.78);
}

/* Desktop hover: name shifts to clay, image drifts in slightly */
@media (hover: hover) and (pointer: fine) {
  .cft-tile:hover .cft-tile__name { color: var(--cft-accent-light, #D6976D); }
  .cft-tile:hover .cft-tile__img { transform: scale(1.06); }
  .cft-tile:hover::after {
    background: linear-gradient(
      to top,
      rgba(20,18,16,0.86) 0%,
      rgba(20,18,16,0.45) 42%,
      rgba(20,18,16,0.12) 100%);
  }
}

/* Touch: a brief press state, since there is no hover to give feedback */
@media (hover: none) {
  .cft-tile:active .cft-tile__name { color: var(--cft-accent-light, #D6976D); }
  .cft-tile:active { transform: scale(0.985); transition: transform 0.1s; }
}

.cft-tile:focus-visible { outline: 3px solid var(--cft-accent); outline-offset: 3px; }

/* The shortcode wrapper inherits WordPress's constrained content width, which
   squeezes a four-across row into two. Let tile rows use the section width. */
.cft-ferrocon .wp-block-group.cft-section > .wp-block-shortcode,
.cft-ferrocon .wp-block-group.cft-section > * > .wp-block-shortcode {
  max-width: var(--cft-maxw) !important;
  width: 100%;
  margin-inline: auto;
}

/* Four narrow tiles read better slightly less tall */
@media (min-width: 1000px) {
  .cft-tile { aspect-ratio: 3 / 4; }
}


/* A calculator scoped to a single product has nothing to pick, so the
   selector is hidden and the product name shown as a label instead. */
.cft-calc--single .cft-calc__field--product { display: none; }
.cft-calc__single-label {
  display: block;
  font-size: var(--cft-step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cft-accent);
  margin-bottom: 1rem;
}

/* --- 13. Feature blocks with icons ----------------------------------------
   For sections like "Why Ferrocon" — a line icon above each heading, so three
   equal text blocks on a dark band have something to anchor the eye.
   -------------------------------------------------------------------------- */
.cft-features {
  display: grid;
  gap: var(--cft-space-m);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .cft-features { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

.cft-feature__icon {
  display: block;
  width: 64px; height: 64px;
  margin-bottom: 1.3rem;
  color: var(--cft-accent-light, #D6976D);
}
@media (max-width: 759px) {
  .cft-feature__icon { width: 52px; height: 52px; }
}
.cft-feature__icon svg { width: 100%; height: 100%; display: block; }
.cft-feature h3 {
  font-size: var(--cft-step-1);
  margin: 0 0 0.6rem;
}
.cft-feature p {
  margin: 0;
  font-size: var(--cft-step-0);
  max-width: 34ch;
}

/* On a light section the icon takes the deeper accent instead */
.cft-section:not(.cft-section--deep) .cft-feature__icon { color: var(--cft-accent); }

/* Feature rows span the section width like tiles do, rather than inheriting
   WordPress's narrower constrained content width. */
.cft-ferrocon .wp-block-group.cft-section .cft-features,
.cft-ferrocon .wp-block-shortcode .cft-features {
  width: 100%;
  max-width: var(--cft-maxw);
  margin-inline: auto;
  align-items: start;
}

/* Columns start at the same line even when the text runs to different lengths */
.cft-feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cft-feature__icon { flex: 0 0 auto; }

/* Belt and braces: if any stray empty element still lands inside a grid
   wrapper, it must not occupy a cell. */
.cft-features > p:empty,
.cft-features > br,
.cft-tiles > p:empty,
.cft-tiles > br,
.cft-swatches > p:empty,
.cft-swatches > br,
.cft-stats > p:empty,
.cft-stats > br,
.cft-acc > p:empty,
.cft-acc > br {
  display: none !important;
}

/* Space between a section heading and the feature row below it. Applies when
   a heading sits directly above the row inside the same section. */
.cft-ferrocon .cft-section h2 + .cft-features,
.cft-ferrocon .cft-section h2 + * .cft-features,
.cft-ferrocon .cft-section .wp-block-heading + .wp-block-shortcode .cft-features {
  margin-top: var(--cft-space-m);
}

/* Same for the other grid components, so headings never sit flush on a row */
.cft-ferrocon .cft-section h2 + .cft-tiles,
.cft-ferrocon .cft-section h2 + * .cft-tiles,
.cft-ferrocon .cft-section .wp-block-heading + .wp-block-shortcode .cft-tiles,
.cft-ferrocon .cft-section h2 + .cft-swatches,
.cft-ferrocon .cft-section .wp-block-heading + .wp-block-shortcode .cft-swatches {
  margin-top: var(--cft-space-m);
}

/* A little more breathing room inside deep sections generally — dark bands
   need more space than light ones to avoid feeling cramped. */
.cft-ferrocon .wp-block-group.cft-section--deep {
  padding-block: var(--cft-space-l);
}
.cft-ferrocon .cft-section--deep h2 {
  margin-bottom: var(--cft-space-s);
}

/* --- 15. Mobile drawer menu -----------------------------------------------
   Full-width dark panel, one row per item, hairline dividers, chevrons on
   anything with children. Rows are tall enough to tap accurately.
   -------------------------------------------------------------------------- */
.cft-ferrocon #mobile-drawer,
.cft-ferrocon .popup-drawer,
.cft-ferrocon .popup-drawer .drawer-inner,
.cft-ferrocon .popup-drawer .drawer-content {
  background: var(--cft-black, #141210) !important;
}

.cft-ferrocon .popup-drawer .drawer-header {
  padding: 1.1rem var(--cft-gutter);
}
.cft-ferrocon .popup-drawer .drawer-toggle svg,
.cft-ferrocon .popup-drawer .drawer-toggle {
  color: #F5F1EA !important;
  fill: #F5F1EA !important;
}

/* Rows */
.cft-ferrocon .mobile-navigation ul,
.cft-ferrocon #mobile-menu {
  margin: 0; padding: 0; list-style: none;
}
.cft-ferrocon .mobile-navigation li {
  border-bottom: 1px solid rgba(245, 241, 234, 0.12);
}
.cft-ferrocon .mobile-navigation li a {
  display: block;
  padding: 1.15rem var(--cft-gutter) !important;
  font-size: var(--cft-step-1);
  font-family: var(--cft-font-body);
  font-weight: 500;
  color: #F5F1EA !important;
  text-decoration: none;
  transform: none !important;
}
.cft-ferrocon .mobile-navigation li a::after { display: none !important; }
.cft-ferrocon .mobile-navigation li a:active,
.cft-ferrocon .mobile-navigation li a:hover {
  background: rgba(245, 241, 234, 0.07);
  color: var(--cft-accent-light, #D6976D) !important;
}

/* Current page */
.cft-ferrocon .mobile-navigation li.current-menu-item > a,
.cft-ferrocon .mobile-navigation li.current_page_item > a {
  color: var(--cft-accent-light, #D6976D) !important;
}

/* Submenu: indented, no panel of its own, same divider rhythm */
.cft-ferrocon .mobile-navigation .sub-menu {
  background: rgba(245, 241, 234, 0.04) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.cft-ferrocon .mobile-navigation .sub-menu li a {
  padding-left: calc(var(--cft-gutter) + 1rem) !important;
  font-size: var(--cft-step-0);
  color: rgba(245, 241, 234, 0.82) !important;
}

/* Expand chevron */
.cft-ferrocon .mobile-navigation .drawer-nav-drop-wrap button,
.cft-ferrocon .mobile-navigation .dropdown-nav-toggle {
  background: transparent !important;
  border: 0 !important;
  border-left: 1px solid rgba(245, 241, 234, 0.12) !important;
  color: #F5F1EA !important;
  padding: 0 1.1rem !important;
}
.cft-ferrocon .mobile-navigation .drawer-nav-drop-wrap button svg,
.cft-ferrocon .mobile-navigation .dropdown-nav-toggle svg {
  fill: #F5F1EA !important;
  transition: transform 0.25s var(--cft-ease);
}
.cft-ferrocon .mobile-navigation [aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* --- 16. Full-width desktop dropdown --------------------------------------
   Hovering a parent item drops a dark panel across the whole header width,
   with one row per child and hairline dividers.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {

  /* Ancestors must be unpositioned so the panel can measure from #masthead */
  .cft-ferrocon #masthead { position: fixed; }
  .cft-ferrocon #masthead .site-header-wrap,
  .cft-ferrocon #masthead .site-header-inner-wrap,
  .cft-ferrocon #masthead .site-header-upper-wrap,
  .cft-ferrocon #masthead .site-header-upper-inner-wrap,
  .cft-ferrocon #masthead .site-main-header-wrap,
  .cft-ferrocon #masthead .site-main-header-inner-wrap,
  .cft-ferrocon #masthead .site-header-row-container,
  .cft-ferrocon #masthead .site-header-row-container-inner,
  .cft-ferrocon #masthead .site-container,
  .cft-ferrocon #masthead .main-navigation,
  .cft-ferrocon #masthead .header-navigation,
  .cft-ferrocon #masthead .primary-menu-container,
  .cft-ferrocon #masthead li.menu-item-has-children {
    position: static !important;
    overflow: visible !important;
  }

  .cft-ferrocon #masthead .sub-menu,
  .cft-ferrocon #masthead ul ul {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--cft-black, #141210) !important;
    border: 0 !important;
    border-top: 1px solid rgba(245, 241, 234, 0.14) !important;
    border-radius: 0 !important;
    box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.7) !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.22s var(--cft-ease), transform 0.22s var(--cft-ease), visibility 0s linear 0.22s;
  }

  .cft-ferrocon #masthead li.menu-item-has-children:hover > .sub-menu,
  .cft-ferrocon #masthead li.menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .cft-ferrocon #masthead .sub-menu li {
    border-bottom: 1px solid rgba(245, 241, 234, 0.1);
    width: 100%;
  }
  .cft-ferrocon #masthead .sub-menu li:last-child { border-bottom: 0; }

  .cft-ferrocon #masthead .sub-menu li a {
    display: block;
    width: 100%;
    padding: 1.15rem calc((100vw - var(--cft-maxw)) / 2 + 1rem) !important;
    font-size: var(--cft-step-1) !important;
    font-weight: 500;
    color: #F5F1EA !important;
    background: transparent !important;
    transform: none !important;
    transition: background 0.18s var(--cft-ease), color 0.18s var(--cft-ease), padding-left 0.22s var(--cft-ease);
  }
  .cft-ferrocon #masthead .sub-menu li a:hover {
    background: rgba(245, 241, 234, 0.07) !important;
    color: var(--cft-accent-light, #D6976D) !important;
    padding-left: calc((100vw - var(--cft-maxw)) / 2 + 1.8rem) !important;
  }
  .cft-ferrocon #masthead .sub-menu li.current-menu-item > a {
    color: var(--cft-accent-light, #D6976D) !important;
  }
}

/* Narrower desktops: keep the panel padded to the gutter instead */
@media (min-width: 1025px) and (max-width: 1220px) {
  .cft-ferrocon #masthead .sub-menu li a,
  .cft-ferrocon #masthead .sub-menu li a:hover {
    padding-left: var(--cft-gutter) !important;
  }
}

/* --- Dropdown hover bridge ------------------------------------------------
   The panel opens below the header, but a menu item is only as tall as its
   text, so moving the pointer down exits the item before it reaches the
   panel and the menu closes. Stretching the item to the full header height
   makes the hover area continuous.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .cft-ferrocon #masthead .primary-menu-container,
  .cft-ferrocon #masthead .main-navigation,
  .cft-ferrocon #masthead .header-navigation,
  .cft-ferrocon #masthead nav > ul,
  .cft-ferrocon #masthead ul.menu {
    height: 100%;
    display: flex;
    align-items: stretch;
  }

  .cft-ferrocon #masthead ul.menu > li,
  .cft-ferrocon #masthead nav > ul > li {
    display: flex;
    align-items: center;
    height: 100%;
  }

  /* Keep it open while the pointer is inside the panel itself */
  .cft-ferrocon #masthead li.menu-item-has-children:hover > .sub-menu,
  .cft-ferrocon #masthead .sub-menu:hover,
  .cft-ferrocon #masthead .sub-menu:focus-within {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    transition-delay: 0s !important;
  }

  /* A short close delay stops the panel vanishing if the pointer strays */
  .cft-ferrocon #masthead .sub-menu {
    transition: opacity 0.2s var(--cft-ease),
                transform 0.2s var(--cft-ease),
                visibility 0s linear 0.35s !important;
  }
}

/* --- Dropdown: compact panel ----------------------------------------------
   Not full width. The panel sits under its parent item at roughly twice the
   item's width, dark, with smaller rows.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {

  /* The parent item is positioned again so the panel measures from it */
  .cft-ferrocon #masthead li.menu-item-has-children {
    position: relative !important;
  }

  .cft-ferrocon #masthead .sub-menu,
  .cft-ferrocon #masthead ul ul {
    left: 50% !important;
    right: auto !important;
    top: 100% !important;
    width: max-content !important;
    min-width: 200% !important;      /* twice the parent item's width */
    max-width: 320px !important;
    transform: translateX(-50%) translateY(-6px) !important;
    background: #FFFFFF !important;
    border: 1px solid var(--cft-line) !important;
    border-radius: var(--cft-radius-lg) !important;
    box-shadow: 0 20px 44px -24px rgba(20, 18, 16, 0.5) !important;
    padding: 0.35rem 0 !important;
    overflow: hidden;
  }

  .cft-ferrocon #masthead li.menu-item-has-children:hover > .sub-menu,
  .cft-ferrocon #masthead li.menu-item-has-children:focus-within > .sub-menu,
  .cft-ferrocon #masthead .sub-menu:hover {
    transform: translateX(-50%) translateY(0) !important;
  }

  /* Smaller, quieter rows */
  .cft-ferrocon #masthead .sub-menu li {
    border-bottom: 1px solid var(--cft-line);
  }
  .cft-ferrocon #masthead .sub-menu li:last-child { border-bottom: 0; }

  .cft-ferrocon #masthead .sub-menu li a,
  .cft-ferrocon #masthead .sub-menu li a:hover {
    padding: 0.72rem 1.1rem !important;
    font-size: var(--cft-step--1) !important;
    font-weight: 500;
    white-space: nowrap;
    color: var(--cft-ink) !important;
  }
  .cft-ferrocon #masthead .sub-menu li a:hover {
    background: #F2EDE5 !important;
    color: var(--cft-accent-deep) !important;
  }
  .cft-ferrocon #masthead .sub-menu li.current-menu-item > a {
    color: var(--cft-accent) !important;
  }
}

/* The dropdown stays light in both header states. The header's transparent
   state turns its own links cream, so the submenu must opt back out. */
.cft-ferrocon.has-vhero:not(.header-solid) #masthead .sub-menu,
.cft-ferrocon.has-vhero.header-solid #masthead .sub-menu {
  background: #FFFFFF !important;
}
.cft-ferrocon.has-vhero:not(.header-solid) #masthead .sub-menu li a,
.cft-ferrocon.has-vhero.header-solid #masthead .sub-menu li a {
  color: var(--cft-ink) !important;
}
.cft-ferrocon.has-vhero:not(.header-solid) #masthead .sub-menu li a:hover,
.cft-ferrocon.has-vhero.header-solid #masthead .sub-menu li a:hover {
  color: var(--cft-accent-deep) !important;
  background: #F2EDE5 !important;
}

/* The hover underline belongs to the top row only. Inside a dropdown the rows
   already highlight on hover, so a rule underneath is noise. */
.cft-ferrocon #masthead .sub-menu li a::after,
.cft-ferrocon #masthead .sub-menu li a:hover::after,
.cft-ferrocon #masthead ul ul li a::after,
.cft-ferrocon #masthead ul ul li a:hover::after,
.cft-ferrocon #masthead .sub-menu li.current-menu-item > a::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
}

/* --- 17. Forms ------------------------------------------------------------
   Styles common form plugins (Fluent Forms, WPForms, Contact Form 7) so a
   form looks like part of the site rather than a plugin dropped into it.
   -------------------------------------------------------------------------- */
.cft-ferrocon .fluentform,
.cft-ferrocon .wpforms-container,
.cft-ferrocon .wpcf7 {
  max-width: 620px;
}

.cft-ferrocon .fluentform label,
.cft-ferrocon .wpforms-field-label,
.cft-ferrocon .wpcf7 label {
  font-size: var(--cft-step--1) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cft-ink-soft) !important;
  margin-bottom: 0.45rem !important;
}

.cft-ferrocon .fluentform input[type="text"],
.cft-ferrocon .fluentform input[type="email"],
.cft-ferrocon .fluentform input[type="tel"],
.cft-ferrocon .fluentform input[type="number"],
.cft-ferrocon .fluentform select,
.cft-ferrocon .fluentform textarea,
.cft-ferrocon .wpforms-field input,
.cft-ferrocon .wpforms-field select,
.cft-ferrocon .wpforms-field textarea,
.cft-ferrocon .wpcf7 input:not([type="submit"]),
.cft-ferrocon .wpcf7 select,
.cft-ferrocon .wpcf7 textarea {
  width: 100% !important;
  font-family: var(--cft-font-body) !important;
  font-size: var(--cft-step-0) !important;
  color: var(--cft-ink) !important;
  background: #FFFFFF !important;
  border: 1px solid var(--cft-line) !important;
  border-radius: var(--cft-radius) !important;
  padding: 0.8em 0.9em !important;
  box-shadow: none !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.cft-ferrocon .fluentform input:focus,
.cft-ferrocon .fluentform select:focus,
.cft-ferrocon .fluentform textarea:focus,
.cft-ferrocon .wpforms-field input:focus,
.cft-ferrocon .wpforms-field textarea:focus,
.cft-ferrocon .wpcf7 input:focus,
.cft-ferrocon .wpcf7 textarea:focus {
  border-color: var(--cft-accent) !important;
  box-shadow: 0 0 0 3px rgba(168, 90, 56, 0.16) !important;
  outline: none !important;
}

.cft-ferrocon .fluentform textarea,
.cft-ferrocon .wpforms-field textarea,
.cft-ferrocon .wpcf7 textarea { min-height: 130px; }

/* Submit button matches the site button */
.cft-ferrocon .fluentform button[type="submit"],
.cft-ferrocon .fluentform .ff-btn-submit,
.cft-ferrocon .wpforms-submit,
.cft-ferrocon .wpcf7 input[type="submit"] {
  font-family: var(--cft-font-body) !important;
  font-weight: 600 !important;
  font-size: var(--cft-step-0) !important;
  padding: 0.85em 1.9em !important;
  background: var(--cft-accent) !important;
  border: 1.5px solid var(--cft-accent) !important;
  border-radius: var(--cft-radius) !important;
  color: var(--cft-ink-invert) !important;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s var(--cft-ease);
}
.cft-ferrocon .fluentform button[type="submit"]:hover,
.cft-ferrocon .wpforms-submit:hover,
.cft-ferrocon .wpcf7 input[type="submit"]:hover {
  background: var(--cft-accent-deep) !important;
  border-color: var(--cft-accent-deep) !important;
  transform: translateY(-2px);
}

/* File upload area */
.cft-ferrocon .ff-el-input--content .ff_file_upload_holder,
.cft-ferrocon .ff-btn-upload {
  border: 1px dashed var(--cft-line) !important;
  background: #FFFFFF !important;
  border-radius: var(--cft-radius) !important;
  color: var(--cft-ink-soft) !important;
}

/* Errors and confirmations in the theme's own voice */
.cft-ferrocon .ff-el-is-error input,
.cft-ferrocon .ff-el-is-error textarea { border-color: #A33 !important; }
.cft-ferrocon .error, .cft-ferrocon .ff-el-is-error .text-danger {
  font-size: var(--cft-step--1); color: #A33 !important;
}
.cft-ferrocon .ff-message-success,
.cft-ferrocon .wpforms-confirmation-container-full {
  background: var(--cft-surface-2) !important;
  border: 1px solid var(--cft-line) !important;
  border-radius: var(--cft-radius-lg) !important;
  color: var(--cft-ink) !important;
  padding: 1.2rem 1.3rem !important;
}

/* A form sitting on a band section gets a white card so fields stay legible */
.cft-section--band .fluentform,
.cft-section--band .wpforms-container {
  background: #FFFFFF;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid var(--cft-line);
  border-radius: var(--cft-radius-lg);
}

/* --- 18. WhatsApp button --------------------------------------------------- */
.cft-wa {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  background: #1FA855 !important;
  border-color: #1FA855 !important;
  color: #FFFFFF !important;
}
.cft-wa:hover {
  background: #17853F !important;
  border-color: #17853F !important;
  color: #FFFFFF !important;
}
.cft-wa svg { flex: 0 0 auto; }

/* Floating variant, bottom right on every page it is placed on */
.cft-wa--float {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 80;
  border-radius: 999px;
  padding: 0.9em 1.4em;
  box-shadow: 0 14px 30px -12px rgba(20, 18, 16, 0.5);
}
@media (max-width: 620px) {
  /* Icon only on small screens, so it does not cover content */
  .cft-wa--float { padding: 0.95em; }
  .cft-wa--float span { display: none; }
}

/* Contact details block */
.cft-contact-details {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-top: var(--cft-space-m);
}
.cft-contact-details dt {
  font-size: var(--cft-step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cft-ink-soft);
  margin-bottom: 0.4rem;
}
.cft-contact-details dd {
  margin: 0;
  font-size: var(--cft-step-0);
  line-height: 1.6;
}
.cft-contact-details a { color: var(--cft-ink); text-decoration: underline; }
.cft-contact-details a:hover { color: var(--cft-accent); }

/* --- 19. Instagram button + map ------------------------------------------- */
.cft-ig {
  display: inline-flex; align-items: center; gap: 0.6em;
  background: linear-gradient(45deg, #F09433 0%, #E6683C 25%, #DC2743 50%, #CC2366 75%, #BC1888 100%) !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: #FFFFFF !important;
}
.cft-ig:hover {
  color: #FFFFFF !important;
  filter: brightness(1.06);
}
.cft-ig svg { flex: 0 0 auto; }

.cft-actions {
  display: flex; flex-wrap: wrap; gap: 0.8rem;
  margin-top: var(--cft-space-s);
}

.cft-map {
  position: relative;
  width: 100%;
  height: var(--cft-map-h, 420px);
  border-radius: var(--cft-radius-lg);
  overflow: hidden;
  border: 1px solid var(--cft-line);
  background: var(--cft-surface-2);
}
.cft-map__frame {
  width: 100%; height: 100%;
  border: 0; display: block;
}
/* Placeholder pattern shown until the iframe loads */
.cft-map::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(31,28,24,0.06) 28px 29px),
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(31,28,24,0.06) 28px 29px);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.cft-map.is-loaded::before { opacity: 0; }

.cft-map__open {
  position: absolute;
  right: 0.9rem; bottom: 0.9rem;
  z-index: 2;
  background: #FFFFFF;
  color: var(--cft-ink);
  font-size: var(--cft-step--1);
  font-weight: 600;
  padding: 0.6em 1em;
  border-radius: var(--cft-radius);
  border: 1px solid var(--cft-line);
  text-decoration: none;
  box-shadow: 0 8px 20px -12px rgba(20,18,16,0.5);
}
.cft-map__open:hover { color: var(--cft-accent); }

/* Slightly rounded action buttons */
.cft-wa, .cft-ig { border-radius: 8px !important; }

/* --- Accordion on dark sections -------------------------------------------
   The accordion button carries its own colour, so on a black band it inherits
   ink and disappears. These put it back to cream.
   -------------------------------------------------------------------------- */
.cft-ferrocon .cft-section--deep .cft-acc,
.cft-ferrocon .cft-section--deep .cft-acc__item {
  border-color: rgba(245, 241, 234, 0.18) !important;
}
.cft-ferrocon .cft-section--deep .cft-acc__btn {
  color: #F5F1EA !important;
}
.cft-ferrocon .cft-section--deep .cft-acc__btn::after {
  border-right-color: var(--cft-accent-light, #D6976D) !important;
  border-bottom-color: var(--cft-accent-light, #D6976D) !important;
}
.cft-ferrocon .cft-section--deep .cft-acc__panel p {
  color: rgba(245, 241, 234, 0.82) !important;
}

/* No colour shift on hover — the chevron rotating is feedback enough */
.cft-ferrocon .cft-acc__btn:hover,
.cft-ferrocon .cft-section--deep .cft-acc__btn:hover {
  color: inherit;
  background: transparent;
}
.cft-ferrocon .cft-section--deep .cft-acc__btn:hover { color: #F5F1EA !important; }

/* --- Header: full width on every page --------------------------------------
   On pages with no video hero the header keeps Kadence's own background, and
   an earlier layout rule let the wrapper shrink to its content width, leaving
   a half-width band. These pin every wrapper to the full viewport width and
   put the background on the outermost element only.
   -------------------------------------------------------------------------- */
.cft-ferrocon #masthead,
.cft-ferrocon #main-header,
.cft-ferrocon .site-header,
.cft-ferrocon .site-header-wrap,
.cft-ferrocon .site-header-inner-wrap,
.cft-ferrocon .site-header-upper-wrap,
.cft-ferrocon .site-header-upper-inner-wrap,
.cft-ferrocon .site-main-header-wrap,
.cft-ferrocon .site-header-row-container,
.cft-ferrocon .site-header-row-container-inner {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

/* Only the inner row is constrained, so the band spans but the content aligns */
.cft-ferrocon #masthead .site-container,
.cft-ferrocon #masthead .site-main-header-inner-wrap {
  max-width: var(--cft-maxw) !important;
  margin-inline: auto !important;
  padding-inline: var(--cft-gutter) !important;
}

/* Background lives on the outermost wrapper; inner ones stay clear */
.cft-ferrocon:not(.has-vhero) #masthead,
.cft-ferrocon:not(.has-vhero) #main-header {
  background: var(--cft-surface) !important;
  border-bottom: 1px solid var(--cft-line) !important;
}
.cft-ferrocon:not(.has-vhero) #masthead .site-header-wrap,
.cft-ferrocon:not(.has-vhero) #masthead .site-header-inner-wrap,
.cft-ferrocon:not(.has-vhero) #masthead .site-header-upper-wrap,
.cft-ferrocon:not(.has-vhero) #masthead .site-header-upper-inner-wrap,
.cft-ferrocon:not(.has-vhero) #masthead .site-main-header-wrap,
.cft-ferrocon:not(.has-vhero) #masthead .site-header-row-container,
.cft-ferrocon:not(.has-vhero) #masthead .site-header-row-container-inner,
.cft-ferrocon:not(.has-vhero) #masthead .site-container {
  background: transparent !important;
}

/* Pages without a hero need the content to clear the fixed header */
.cft-ferrocon:not(.has-vhero) #masthead { position: sticky; top: 0; z-index: 60; }

/* --- No blue focus or tap highlight ---------------------------------------
   Browsers draw a blue ring on click and a blue flash on tap. Both are
   removed for pointer input. Keyboard users still get a ring, in the theme's
   own accent, because without it the site becomes unusable by keyboard.
   -------------------------------------------------------------------------- */
.cft-ferrocon * {
  -webkit-tap-highlight-color: transparent;
}

.cft-ferrocon .cft-acc__btn:focus,
.cft-ferrocon .cft-acc__btn:active,
.cft-ferrocon button:focus:not(:focus-visible),
.cft-ferrocon a:focus:not(:focus-visible),
.cft-ferrocon summary:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

.cft-ferrocon .cft-acc__btn:focus-visible {
  outline: 2px solid var(--cft-accent);
  outline-offset: 3px;
}
.cft-ferrocon .cft-section--deep .cft-acc__btn:focus-visible {
  outline-color: var(--cft-accent-light, #D6976D);
}

/* Kadence adds its own focus styling to buttons in places */
.cft-ferrocon .cft-acc__btn::-moz-focus-inner { border: 0; }
.cft-ferrocon .cft-acc__btn:active { background: transparent !important; }

/* --- Header: logo hard left ------------------------------------------------
   The header row was constrained to the content width, which on a wide screen
   pushes the logo well inward. The band now runs full width with a modest
   gutter, so the logo sits left without touching the edge.
   -------------------------------------------------------------------------- */
.cft-ferrocon #masthead .site-container,
.cft-ferrocon #masthead .site-main-header-inner-wrap {
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: clamp(1.25rem, 2.5vw, 2.75rem) !important;
}

.cft-ferrocon #masthead .site-header-item-branding,
.cft-ferrocon #masthead .site-branding {
  justify-self: start !important;
  margin-left: 0 !important;
}

/* --- Map: full bleed -------------------------------------------------------
   Breaks out of the section's content width to span the viewport. Square
   corners and no side borders, since it now meets both edges.
   -------------------------------------------------------------------------- */
.cft-ferrocon .cft-map {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}

/* The section wrapping a full-bleed map must not clip it */
.cft-ferrocon .cft-section:has(.cft-map) {
  overflow: visible;
}

/* Keep the open-in-maps button clear of the right edge */
.cft-ferrocon .cft-map__open {
  right: clamp(1rem, 3vw, 2.5rem);
}

/* --- 20. Page banner ------------------------------------------------------- */
.cft-banner {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: var(--cft-banner-h, 460px);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--cft-black, #141210);
}
.cft-banner__media {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
}
.cft-banner__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    to top,
    rgba(20,18,16,var(--cft-scrim,0.6)) 0%,
    rgba(20,18,16,calc(var(--cft-scrim,0.6) * 0.7)) 60%,
    rgba(20,18,16,calc(var(--cft-scrim,0.6) * 0.45)) 100%);
}
.cft-banner__inner {
  position: relative; z-index: 2;
  width: 100%;
  max-width: var(--cft-maxw);
  margin-inline: auto;
  padding: var(--cft-space-m) var(--cft-gutter);
}
.cft-banner__inner > * { color: #F5F1EA; }
.cft-banner__inner h1 { font-size: var(--cft-step-3); margin: 0 0 0.5rem; max-width: 20ch; }
.cft-banner__inner p  { font-size: var(--cft-step-1); max-width: 52ch; margin: 0; }
.cft-banner__inner .cft-eyebrow { color: var(--cft-accent-light, #D6976D); }
.cft-banner--center .cft-banner__inner { text-align: center; }
.cft-banner--center .cft-banner__inner h1,
.cft-banner--center .cft-banner__inner p { margin-inline: auto; }
@media (max-width: 780px) {
  .cft-banner { min-height: 300px; }
}

/* --- Header refinements ---------------------------------------------------- */
/* Tighter left padding */
.cft-ferrocon #masthead .site-container,
.cft-ferrocon #masthead .site-main-header-inner-wrap {
  padding-inline: clamp(0.65rem, 2vw, 2.15rem) !important;
}

/* Larger logo */
.cft-ferrocon #masthead .site-branding img,
.cft-ferrocon #masthead .site-header-item-branding img,
.cft-ferrocon #masthead .custom-logo {
  max-height: 62px !important;
  height: auto !important;
  width: auto !important;
}
@media (max-width: 780px) {
  .cft-ferrocon #masthead .site-branding img,
  .cft-ferrocon #masthead .custom-logo { max-height: 44px !important; }
}

/* Force true vertical centring — remove any inherited top offset */
.cft-ferrocon #masthead .site-main-header-inner-wrap,
.cft-ferrocon #masthead .site-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between;
}
.cft-ferrocon #masthead .site-branding,
.cft-ferrocon #masthead .site-header-item,
.cft-ferrocon #masthead .site-header-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-block: 0 !important;
  align-self: center !important;
  display: flex;
  align-items: center;
}
.cft-ferrocon #masthead .site-branding a { display: flex; align-items: center; }

/* --- Banner sits flush under the header ------------------------------------
   Kadence pads the content wrappers, which leaves a strip of page background
   between the header and a banner. Zeroed on pages that open with one.
   -------------------------------------------------------------------------- */
.cft-ferrocon.has-banner #page,
.cft-ferrocon.has-banner .site,
.cft-ferrocon.has-banner #wrapper,
.cft-ferrocon.has-banner #inner-wrap,
.cft-ferrocon.has-banner .site-main,
.cft-ferrocon.has-banner .content-area,
.cft-ferrocon.has-banner .entry-content,
.cft-ferrocon.has-banner article.entry,
.cft-ferrocon.has-banner .content-bg {
  padding-top: 0 !important;
  margin-top: 0 !important;
  border-top: 0 !important;
}

.cft-ferrocon.has-banner .entry-content > .cft-banner:first-child,
.cft-ferrocon.has-banner .cft-banner:first-of-type {
  margin-top: 0 !important;
}

/* No hairline under the header either — the banner supplies its own edge */
.cft-ferrocon.has-banner:not(.has-vhero) #masthead,
.cft-ferrocon.has-banner:not(.has-vhero) #main-header {
  border-bottom: 0 !important;
}

/* Kadence puts the vertical padding on .entry-content-wrap, driven by the
   content-vertical-padding-show body class. That is the element that leaves a
   gap above a banner or hero, so it is zeroed explicitly. */
.cft-ferrocon.has-banner .entry-content-wrap,
.cft-ferrocon.has-vhero .entry-content-wrap,
.cft-ferrocon.has-banner.content-vertical-padding-show .entry-content-wrap,
.cft-ferrocon.has-vhero.content-vertical-padding-show .entry-content-wrap,
.cft-ferrocon.has-banner .content-container .entry-content-wrap,
.cft-ferrocon.has-vhero .content-container .entry-content-wrap {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Boxed content style draws a white card with its own padding */
.cft-ferrocon.has-banner.content-style-boxed .content-bg,
.cft-ferrocon.has-vhero.content-style-boxed .content-bg,
.cft-ferrocon.has-banner .content-bg.entry-content-wrap {
  padding-top: 0 !important;
  margin-top: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* And the page wrapper itself */
.cft-ferrocon.has-banner #inner-wrap,
.cft-ferrocon.has-banner .site-container,
.cft-ferrocon.has-banner .content-container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* A section whose first content is a banner or hero must not add its own top
   padding — the banner is meant to meet the header. */
.cft-ferrocon .wp-block-group.cft-section:has(> .cft-banner:first-child),
.cft-ferrocon .wp-block-group.cft-section:has(> .wp-block-group__inner-container > .cft-banner:first-child),
.cft-ferrocon .wp-block-group.cft-section:has(> .cft-vhero:first-child),
.cft-ferrocon .wp-block-group.cft-section:has(> .wp-block-group__inner-container > .cft-vhero:first-child) {
  padding-top: 0 !important;
}

/* A banner inside a constrained group still spans the viewport */
.cft-ferrocon .wp-block-group__inner-container > .cft-banner,
.cft-ferrocon .wp-block-group.cft-section > .cft-banner {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Fallback for browsers without :has() — a banner as the first child pulls
   itself up by the section's own padding. */
@supports not (selector(:has(*))) {
  .cft-ferrocon .wp-block-group.cft-section > .wp-block-group__inner-container > .cft-banner:first-child,
  .cft-ferrocon .wp-block-group.cft-section > .cft-banner:first-child {
    margin-top: calc(var(--cft-space-l) * -1);
  }
}

/* --- Overlay header: hover turns it solid ---------------------------------
   Same treatment as scrolling past the hero — white band, ink logo and links.
   -------------------------------------------------------------------------- */
.cft-ferrocon.has-vhero.header-hovered #masthead,
.cft-ferrocon.has-vhero.header-hovered #main-header {
  background: var(--cft-surface) !important;
  box-shadow: 0 1px 0 var(--cft-line) !important;
}
.cft-ferrocon.has-vhero.header-hovered #masthead a,
.cft-ferrocon.has-vhero.header-hovered #masthead .site-title {
  color: var(--cft-ink) !important;
}
.cft-ferrocon.has-vhero.header-hovered #masthead .site-branding img,
.cft-ferrocon.has-vhero.header-hovered #masthead .custom-logo {
  filter: none !important;
}
.cft-ferrocon.has-vhero.header-hovered #masthead .current-menu-item > a,
.cft-ferrocon.has-vhero.header-hovered #masthead .current_page_item > a {
  color: var(--cft-accent) !important;
}
.cft-ferrocon.has-vhero.header-hovered #masthead::before {
  opacity: 0;
}
.cft-ferrocon.has-vhero #masthead::before {
  transition: opacity 0.25s var(--cft-ease);
}
.cft-ferrocon.has-vhero #masthead,
.cft-ferrocon.has-vhero #main-header {
  transition: background 0.28s var(--cft-ease), box-shadow 0.28s var(--cft-ease);
}
.cft-ferrocon.has-vhero #masthead a,
.cft-ferrocon.has-vhero #masthead .site-branding img {
  transition: color 0.22s var(--cft-ease), filter 0.22s var(--cft-ease);
}

/* A banner page overlays the header, so the banner starts at the very top */
.cft-ferrocon.has-vhero .cft-banner { min-height: var(--cft-banner-h, 460px); }

/* Inline map — stays inside its column instead of spanning the viewport */
.cft-ferrocon .cft-map--inline {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  border-radius: var(--cft-radius-lg);
  border: 1px solid var(--cft-line);
}

/* Contact layout: map beside details */
.cft-contact-split {
  display: grid;
  gap: var(--cft-space-m);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .cft-contact-split { grid-template-columns: 1.15fr 0.85fr; gap: 2.5rem; }
}
.cft-contact-split .cft-map { margin-top: 0; }

/* Clicking a question should not select its text — that blue selection
   highlight is what shows up on a double or dragged click. */
.cft-ferrocon .cft-acc__btn {
  -webkit-user-select: none;
  user-select: none;
}
.cft-ferrocon .cft-acc__btn::selection,
.cft-ferrocon .cft-acc__btn *::selection {
  background: transparent;
}

/* Action buttons sit in separate blocks, so they need their own spacing */
.cft-ferrocon .cft-wa,
.cft-ferrocon .cft-ig {
  margin: 0 0.75rem 0.75rem 0;
}
.cft-ferrocon .cft-wa:last-child,
.cft-ferrocon .cft-ig:last-child {
  margin-right: 0;
}

/* When both sit in one wrapper, use a proper gap instead */
.cft-actions .cft-wa,
.cft-actions .cft-ig { margin: 0; }

/* The accordion button is a real <button>, so Kadence's global button styles
   apply a background on focus and active. Cleared in every state — the row
   should never fill with colour. */
.cft-ferrocon .cft-acc__btn,
.cft-ferrocon .cft-acc__btn:hover,
.cft-ferrocon .cft-acc__btn:focus,
.cft-ferrocon .cft-acc__btn:focus-visible,
.cft-ferrocon .cft-acc__btn:active,
.cft-ferrocon .cft-acc__btn[aria-expanded="true"],
.cft-ferrocon .cft-acc__item button,
.cft-ferrocon .cft-acc__item button:focus,
.cft-ferrocon .cft-acc__item button:active {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-shadow: none !important;
}

/* Keep the deep-section colour after the reset above */
.cft-ferrocon .cft-section--deep .cft-acc__btn,
.cft-ferrocon .cft-section--deep .cft-acc__btn:focus,
.cft-ferrocon .cft-section--deep .cft-acc__btn:active,
.cft-ferrocon .cft-section--deep .cft-acc__btn[aria-expanded="true"] {
  color: #F5F1EA !important;
}
.cft-ferrocon .cft-section:not(.cft-section--deep) .cft-acc__btn {
  color: var(--cft-ink) !important;
}

/* Keyboard focus still needs to be visible, as an outline rather than a fill */
.cft-ferrocon .cft-acc__btn:focus-visible {
  outline: 2px solid var(--cft-accent-light, #D6976D) !important;
  outline-offset: -2px;
}

/* --- 21. Team grid --------------------------------------------------------- */
.cft-team {
  display: grid;
  gap: var(--cft-space-m) 1.6rem;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  max-width: var(--cft-maxw);
  margin-inline: auto;
}
@media (min-width: 700px) {
  .cft-team {
    grid-template-columns: repeat(3, 1fr);
    max-width: 900px;          /* three people should not sprawl */
  }
}

.cft-member__photo {
  aspect-ratio: 3 / 4;
  background: var(--cft-surface-2);
  border-radius: var(--cft-radius-lg);
  overflow: hidden;
  margin-bottom: 1rem;
}
.cft-member__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1);
  transition: filter 0.4s var(--cft-ease), transform 0.5s var(--cft-ease);
}
@media (hover: hover) and (pointer: fine) {
  .cft-member:hover .cft-member__photo img {
    filter: grayscale(0);
    transform: scale(1.04);
  }
}

.cft-member__name {
  font-size: var(--cft-step-0) !important;
  margin: 0 0 0.15rem !important;
}
.cft-member__role {
  display: block;
  font-size: var(--cft-step--1);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--cft-accent);
  margin-bottom: 0.6rem;
}
.cft-member__bio {
  font-size: var(--cft-step--1);
  color: var(--cft-ink-soft);
  margin: 0;
  max-width: none;
}

/* On a dark band */
.cft-section--deep .cft-member__role { color: var(--cft-accent-light, #D6976D); }
.cft-section--deep .cft-member__bio { color: rgba(245,241,234,0.78); }

/* --- 22. Product cards ----------------------------------------------------- */
.cft-products {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  max-width: var(--cft-maxw);
  margin-inline: auto;
}
@media (min-width: 760px)  { .cft-products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .cft-products { grid-template-columns: repeat(4, 1fr); } }

.cft-product {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--cft-line);
  border-radius: var(--cft-radius-lg);
  overflow: hidden;
  transition: transform 0.35s var(--cft-ease), box-shadow 0.35s var(--cft-ease);
}
@media (hover: hover) and (pointer: fine) {
  .cft-product:hover { transform: translateY(-4px); box-shadow: var(--cft-shadow); }
}

.cft-product__media { aspect-ratio: 1 / 1; background: var(--cft-surface-2); }
.cft-product__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

.cft-product__body {
  padding: 1rem 1.1rem 1.2rem;
  display: flex; flex-direction: column; flex: 1;
}
.cft-product__meta {
  font-size: var(--cft-step--1);
  text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 600; color: var(--cft-accent);
}
.cft-product__name {
  font-size: var(--cft-step-0) !important;
  margin: 0.35rem 0 0.4rem !important;
  line-height: 1.25;
}
.cft-product__spec {
  font-size: var(--cft-step--1);
  color: var(--cft-ink-soft);
  margin: 0 0 1rem; max-width: none;
}
.cft-product__cta {
  margin-top: auto; align-self: flex-start;
  padding: 0.6em 1.2em !important;
  font-size: var(--cft-step--1) !important;
}

.cft-section--band .cft-product,
.cft-section--deep .cft-product { background: #FFFFFF; }
.cft-section--deep .cft-product__name,
.cft-section--deep .cft-product__spec { color: var(--cft-ink) !important; }