/*
  Photo support for placeholder tiles.
  ------------------------------------
  The original design has no raster images — every gallery/product tile is a
  styled placeholder box. These rules are purely additive: they only apply once a
  real <img> is placed inside a tile, so a site with no photography yet renders
  byte-for-byte as the original did.

  Tiles are position:relative with a fixed aspect-ratio, so the image is absolutely
  positioned to fill the box and object-fit:cover preserves the crop. It sits below
  the caption, which is already position:absolute with its own stacking context.
*/

.cap-gallery__item > img,
.infra-gallery__item > img,
.products-card__media > img,
.about-timeline__media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}

/* Keep the caption legible over a photograph rather than a flat placeholder. */
.cap-gallery__item > img ~ .cap-gallery__caption,
.infra-gallery__item > img ~ .infra-gallery__caption {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ---------------------------------------------------------------------------
   Photo fill for the About / Infrastructure gallery tiles and the story
   portrait. Additive: these rules only bite once a real <img> is present.
   .gallery-thumb__placeholder is position:absolute, so it is already a
   containing block for an absolutely positioned child.
   --------------------------------------------------------------------------- */
.gallery-thumb__placeholder > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}

.about-story__img-placeholder {
  position: relative;
  overflow: hidden;
}
.about-story__img-placeholder > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}

/* Lightbox photograph - contain, so the whole casting is visible. */
.lightbox-img-area {
  position: relative;
}
.lightbox-img-area__photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  border: 0;
  border-radius: inherit;
}


/* ──────────────────────────────────────────────────────────────
   Related-ranges block
   Used on the product detail pages to link sibling product pages
   and the supporting Quality / Industries pages. Rendered from a
   plain text widget so the markup stays editable in Elementor.
   ────────────────────────────────────────────────────────────── */
.tcf-related {
  padding: 4rem 0;
  border-top: 1px solid var(--glass-border);
}
.tcf-related .v2-section-super {
  margin-bottom: 1.25rem;
}
.tcf-rel-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tcf-rel-list li {
  margin: 0;
}
.tcf-rel-list a {
  display: inline-block;
  padding: 0.7rem 1.15rem;
  border: 1px solid var(--glass-border);
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.03);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.2;
  color: var(--ash, #c7ced9);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.tcf-rel-list a:hover,
.tcf-rel-list a:focus-visible {
  border-color: var(--molten);
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
@media (max-width: 640px) {
  .tcf-related { padding: 3rem 0; }
  .tcf-rel-list a { font-size: 0.875rem; padding: 0.6rem 0.95rem; }
}


/* ──────────────────────────────────────────────────────────────
   Product category cards
   The original catalogue styles assumed a static placeholder tile
   and no link. These additions let each card be a real anchor to a
   product page, carry a photograph, and hold a short summary.
   ────────────────────────────────────────────────────────────── */
a.prod-card {
  text-decoration: none;
  color: inherit;
}
a.prod-card:focus-visible {
  outline: 2px solid var(--molten);
  outline-offset: 3px;
}
.prod-card__img {
  position: relative;
  overflow: hidden;
}
.prod-card__img > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.prod-card__desc {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ash);
  margin-top: 0.5rem;
}
.prod-card__more {
  margin-top: auto;
  padding-top: 1rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--molten);
}
a.prod-card:hover .prod-card__more {
  color: var(--white);
}

/* Enquiry failure notice: revealed by the body class set in inc/helpers.php. */
.tcf-enquiry-error {
  display: none;
  margin-bottom: 1.25rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgba(248, 113, 113, 0.45);
  border-radius: 0.6rem;
  background: rgba(248, 113, 113, 0.08);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #fca5a5;
}
.tcf-enquiry-failed .tcf-enquiry-error {
  display: block;
}

/* ---------------------------------------------------------------------
   Hero stats band: values now carry their unit inline
   ("1500 MT/Month", "1500 kg/Piece"), so each cell needs more room than
   the original four-across grid allowed. Below 1140px the band drops to
   two columns, and on phones the number scales with the viewport so the
   value never wraps onto a second line.
   --------------------------------------------------------------------- */
@media (max-width: 1140px) {
  .tcf-slider__stats-band .tcf-slider__stats-inner {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 1.25rem;
  }
}

@media (max-width: 600px) {
  .tcf-slider__stats-band .tcf-slider__stat {
    padding-right: 0.5rem;
  }
  .tcf-slider__stats-band .tcf-slider__stat-num {
    font-size: clamp(0.95rem, 4.4vw, 1.75rem);
  }
}

/* ---------------------------------------------------------------------
   Lightbox close button.
   .lightbox-close is absolutely positioned and comes FIRST in the dialog,
   before .lightbox-img-area. Giving the image area position: relative
   above turned it into a positioned box too, so with both at z-index auto
   the later element in source order painted on top and swallowed the close
   button. Lift the button back out.
   --------------------------------------------------------------------- */
.lightbox-dialog .lightbox-close {
  z-index: 2;
}

/* --- FAQ block (Quality page) ------------------------------------- */
.tcf-faq {
  padding: var(--space-2xl) 0;
}
.tcf-faq__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 2.5rem;
  margin-top: var(--space-lg);
}
.tcf-faq__item {
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: rgba(11, 42, 91, 0.35);
}
.tcf-faq__q {
  margin: 0 0 0.6rem;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--white);
}
.tcf-faq__a {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ash);
}
@media (max-width: 900px) {
  .tcf-faq__list { grid-template-columns: 1fr; gap: 1rem; }
}

/* ---------------------------------------------------------------------
   Fluent Forms: match the enquiry form to the dark theme.
   The plugin ships light-theme defaults, so every control is restyled
   here rather than in the plugin, which keeps plugin updates safe.
   --------------------------------------------------------------------- */
.contact-form-panel .fluentform .ff-el-group {
  margin-bottom: 1.1rem;
}
.contact-form-panel .fluentform .ff-el-input--label label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 500;
  margin-bottom: 0.45rem;
}
.contact-form-panel .fluentform .ff-el-is-required.asterisk-right label:after {
  color: var(--orange);
}
.contact-form-panel .fluentform input[type="text"],
.contact-form-panel .fluentform input[type="email"],
.contact-form-panel .fluentform input[type="tel"],
.contact-form-panel .fluentform input[type="number"],
.contact-form-panel .fluentform select,
.contact-form-panel .fluentform textarea {
  width: 100%;
  background: rgba(4, 10, 24, 0.45);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  color: var(--white);
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.5;
  box-shadow: none;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.contact-form-panel .fluentform select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.25rem;
}
.contact-form-panel .fluentform .ff-el-input--content {
  position: relative;
}
.contact-form-panel .fluentform input::placeholder,
.contact-form-panel .fluentform textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.contact-form-panel .fluentform input:focus,
.contact-form-panel .fluentform select:focus,
.contact-form-panel .fluentform textarea:focus {
  outline: none;
  border-color: var(--orange);
  background: rgba(4, 10, 24, 0.7);
}
.contact-form-panel .fluentform option {
  background: #0b2a5b;
  color: var(--white);
}
.contact-form-panel .fluentform .ff-btn-submit {
  background: var(--orange);
  border: none;
  color: #0a1220;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.95rem 2rem;
  border-radius: 999px;
  cursor: pointer;
  transition: transform var(--dur-fast), filter var(--dur-fast);
}
.contact-form-panel .fluentform .ff-btn-submit:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.contact-form-panel .fluentform .ff-el-form-check-label,
.contact-form-panel .fluentform .ff-el-help-message {
  color: var(--ash);
}
.contact-form-panel .fluentform .error-text,
.contact-form-panel .fluentform .text-danger {
  color: #ff9d7a;
  font-size: 0.8125rem;
}
.contact-form-panel .form-note--intro {
  margin: 0 0 1.5rem;
}

/* Two columns on wider screens. Fluent Forms nests its groups inside a
   fieldset, so the grid goes there, not on the form element. */
@media (min-width: 900px) {
  .contact-form-panel .fluentform form fieldset {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.1rem;
  }
  .contact-form-panel .fluentform form fieldset > legend {
    grid-column: 1 / -1;
  }
  .contact-form-panel .fluentform form fieldset > .ff-el-group:has(textarea),
  .contact-form-panel .fluentform form fieldset > .ff_submit_btn_wrapper {
    grid-column: 1 / -1;
  }
}

/* Fluent Forms injects a per-form style block for the button, so these two
   declarations need to outrank it. Everything else is plain specificity. */
.contact-form-panel .fluentform button.ff-btn-submit.ff_btn_style {
  background-color: var(--orange) !important;
  color: #0a1220 !important;
  border: none;
}
.contact-form-panel .fluentform button.ff-btn-submit.ff_btn_style:hover {
  background-color: var(--orange) !important;
  filter: brightness(1.08);
}

/* ---------------------------------------------------------------------
   Blog: category strip, tags and related posts.
   --------------------------------------------------------------------- */
.blog-cats {
  padding: 0 0 var(--space-lg);
}
.blog-cats__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.blog-cats__link {
  display: inline-block;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ash);
  text-decoration: none;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.blog-cats__link:hover,
.blog-cats__link:focus-visible {
  color: var(--white);
  border-color: var(--orange);
}
.blog-cats__link.is-active {
  color: #0a1220;
  background: var(--orange);
  border-color: var(--orange);
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 var(--space-lg);
}
.post-tags__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-right: 0.25rem;
}
.post-tag {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--ash);
  text-decoration: none;
}
.post-tag:hover,
.post-tag:focus-visible {
  color: var(--white);
  border-color: var(--orange);
}

.post-related {
  padding: var(--space-lg) 0 0;
  border-top: 1px solid var(--glass-border);
  margin-bottom: var(--space-lg);
}
.post-related__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 0.75rem;
}
.post-related__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.post-related__list a {
  color: var(--white);
  text-decoration: none;
  font-size: 1.0625rem;
  line-height: 1.4;
  border-bottom: 1px solid transparent;
}
.post-related__list a:hover,
.post-related__list a:focus-visible {
  border-bottom-color: var(--orange);
}
@media (min-width: 760px) {
  .post-related__list { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}

/* Featured images: keep every blog card the same shape regardless of the
   photo that was uploaded. Without this a portrait image stretches the card. */
.blog-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.blog-card__media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Post hero image: a fixed 16:9 banner, cropped rather than stretched, so a
   post never upscales a small upload and every article looks the same shape.
   Upload featured images at 1600 x 900 px for a crisp result at any width. */
.post-body__hero-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 620px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  background: rgba(11, 42, 91, 0.4);
}


/* ============================================================
   BRAND LOGO — header mark and footer lockup
   The uploaded PNGs are transparent, so they sit on the frosted
   nav pill and the dark footer without a white plate behind them.
   ============================================================ */
.v2-nav__logo-img {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}
@media (max-width: 600px) {
  .v2-nav__logo-img { width: 34px; height: 34px; }
}
.v2-footer__logo {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  margin: 0 0 1.15rem;
}
@media (max-width: 768px) {
  .v2-footer__logo { max-width: 168px; margin-bottom: 1rem; }
}


/* ============================================================
   DOWNLOADS GRID - MOBILE FIT
   The grid used repeat(auto-fit, minmax(380px, 1fr)), so on a
   375px phone the single column was still 387px wide and the
   card pushed the whole page sideways. Below 640px the grid
   collapses to one fluid column and the card stacks its button
   onto its own row instead of squeezing the title to 93px.
   ============================================================ */
@media (max-width: 640px) {
  .downloads-grid {
    grid-template-columns: 1fr;
  }
  .download-card {
    flex-wrap: wrap;
    padding: 1.25rem;
    gap: 0.9rem;
  }
  .download-card__info {
    flex: 1 1 auto;
    min-width: 0;
  }
  .download-card__btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* ============================================================
   SPEC TABLES ON PHONES - SIDE SCROLL
   Keep the real table layout. Give it a minimum width so the
   columns stay readable instead of breaking one word per line,
   and let the wrapper scroll sideways with momentum. A fading
   edge on the right hints that there is more to swipe to.
   ============================================================ */
@media (max-width: 900px) {
  .cap-specs__wrap {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    /* fade the right edge so the cut-off column reads as scrollable */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%);
  }
  .cap-specs__wrap.is-scroll-end {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .cap-spec-table {
    min-width: 660px;
  }
  .cap-spec-table th,
  .cap-spec-table td {
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
  }
  .cap-spec-table td:first-child,
  .cap-spec-table th:first-child {
    min-width: 150px;
  }
}

@media (max-width: 900px) {
  .cap-specs__wrap::-webkit-scrollbar {
    height: 6px;
  }
  .cap-specs__wrap::-webkit-scrollbar-thumb {
    background: rgba(242, 103, 34, 0.55);
    border-radius: 3px;
  }
}


/* ============================================================
   MOBILE HERO MOTION
   slider.css hides the four animated slide accents below 768px,
   which left phones with only a very slow background zoom - the
   hero read as a static image between slide changes. Below 768px
   the accent comes back, placed in the empty upper half (mobile
   copy is bottom-aligned), sized for a phone, sitting behind the
   text at reduced opacity so contrast is preserved. The entry
   animation for each slide is also lengthened and deepened so a
   slide change is unmistakable.
   ============================================================ */
@media (max-width: 768px) {

  .tcf-slide__orb-accent,
  .tcf-slide__gear-accent,
  .tcf-slide__precision-accent,
  .tcf-slide__certs-accent {
    display: block;
    top: 30%;
    right: 50%;
    left: auto;
    transform: translate(50%, -50%);
    width: min(300px, 64vw);
    z-index: 2;
    pointer-events: none;
  }

  .tcf-slide__certs-accent {
    display: flex;
    width: auto;
  }

  /* Softer than desktop so the headline stays legible over it. */
  .tcf-slide.is-active .tcf-slide__orb-accent,
  .tcf-slide.is-active .tcf-slide__gear-accent,
  .tcf-slide.is-active .tcf-slide__precision-accent {
    opacity: 0.52;
  }
  .tcf-slide.is-active .tcf-slide__certs-accent {
    opacity: 0.4;
  }

  /* Deepen the overlay a little to protect the copy. */
  .tcf-slide__overlay {
    background: linear-gradient(to bottom,
      rgba(10, 33, 72, 0.5) 0%,
      rgba(10, 33, 72, 0.58) 45%,
      rgba(5, 10, 22, 0.82) 100%);
  }

  /* ── Stronger entry animation per slide ── */
  .tcf-slide__eyebrow {
    transform: translateY(24px);
    transition: opacity 700ms var(--ease-out-expo),
                transform 700ms var(--ease-out-expo);
  }
  .tcf-slide__headline {
    transform: translateY(42px);
    filter: blur(7px);
    transition: opacity 860ms 90ms var(--ease-out-expo),
                transform 860ms 90ms var(--ease-out-expo),
                filter 860ms 90ms var(--ease-out-expo);
  }
  .tcf-slide.is-active .tcf-slide__headline {
    filter: blur(0);
  }
  .tcf-slide__sub {
    transform: translateY(30px);
    transition: opacity 800ms 260ms var(--ease-out-expo),
                transform 800ms 260ms var(--ease-out-expo);
  }
  .tcf-slide__ctas {
    transform: translateY(26px);
    transition: opacity 740ms 380ms var(--ease-out-expo),
                transform 740ms 380ms var(--ease-out-expo);
  }
}

/* Never blur or offset for readers who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .tcf-slide__headline,
  .tcf-slide__sub,
  .tcf-slide__eyebrow,
  .tcf-slide__ctas {
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* ============================================================
   FOUNDRY ATMOSPHERE - MOBILE HERO
   The ember canvas is now lifted onto the slider itself (see
   slider.js) so sparks drift across every slide. These rules add
   the rest of the room: a molten pool glowing at the floor line,
   a slow heat haze above it, and a deeper camera push on the
   background. Everything sits behind the copy and is switched
   off entirely for prefers-reduced-motion.
   ============================================================ */

/* The lifted canvas spans the whole hero, above the photo, below copy. */
.tcf-slider .tcf-slide__ember-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

@media (max-width: 768px) {

  /* ── Molten pool at the floor line ── */
  .tcf-slider::after {
    content: '';
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -14%;
    height: 46%;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 100%,
      rgba(255, 138, 40, 0.42) 0%,
      rgba(242, 103, 34, 0.22) 34%,
      rgba(196, 62, 12, 0.08) 58%,
      transparent 76%);
    filter: blur(14px);
    animation: tcfMoltenBreath 7s ease-in-out infinite;
  }

  /* ── Heat haze rising off the pool ── */
  .tcf-slider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 62%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top,
      rgba(255, 120, 30, 0.16) 0%,
      rgba(255, 120, 30, 0.05) 40%,
      transparent 78%);
    animation: tcfHeatHaze 9s ease-in-out infinite;
  }

  /* ── Deeper camera push so the plant feels alive ── */
  .tcf-slide__bg.kb-play {
    animation-duration: 9s;
  }
}

@keyframes tcfMoltenBreath {
  0%, 100% { opacity: 0.72; transform: translateY(0) scaleX(1); }
  50%      { opacity: 1;    transform: translateY(-5px) scaleX(1.05); }
}

@keyframes tcfHeatHaze {
  0%, 100% { opacity: 0.55; transform: translateY(0) scaleY(1); }
  50%      { opacity: 0.9;  transform: translateY(-10px) scaleY(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .tcf-slider::before,
  .tcf-slider::after {
    animation: none !important;
    opacity: 0.5 !important;
  }
}


/* ============================================================
   EXIT MOMENT
   Desktop: real exit intent. Mobile: foot of the page. Once per
   visitor, never on contact or thank-you. Same foundry palette
   as the hero so it reads as part of the plant, not an advert.
   ============================================================ */
.tcf-exit[hidden] { display: none; }
.tcf-exit {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.tcf-exit__scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 12, 28, 0.78);
  backdrop-filter: blur(6px);
  animation: tcfExitFade 260ms ease-out both;
}
.tcf-exit__panel {
  position: relative;
  width: min(460px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 2.25rem 1.9rem 2rem;
  border-radius: 18px;
  border: 1px solid rgba(242, 103, 34, 0.28);
  background: linear-gradient(165deg, #0d2a53 0%, #071a35 62%, #050f22 100%);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55);
  animation: tcfExitRise 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
  overflow-x: hidden;
}
/* molten pool inside the panel, same language as the hero */
.tcf-exit__glow {
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: -34%;
  height: 62%;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(255, 138, 40, 0.42) 0%,
    rgba(242, 103, 34, 0.2) 38%,
    transparent 72%);
  filter: blur(16px);
  animation: tcfMoltenBreath 7s ease-in-out infinite;
}
.tcf-exit__close {
  position: absolute;
  top: 0.55rem;
  right: 0.75rem;
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}
.tcf-exit__close:hover { color: #fff; }
.tcf-exit__super {
  position: relative;
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--molten, #f26722);
  margin: 0 0 0.6rem;
}
.tcf-exit__title {
  position: relative;
  font-family: var(--font-display, sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.98;
  font-size: clamp(1.7rem, 7vw, 2.3rem);
  color: #fff;
  margin: 0 0 0.75rem;
}
.tcf-exit__sub {
  position: relative;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 1.35rem;
}
.tcf-exit__list {
  position: relative;
  list-style: none;
  margin: 0 0 1.35rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.tcf-exit__list a {
  display: block;
  padding: 0.72rem 0.95rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  text-decoration: none;
  font-size: 0.92rem;
  transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
}
.tcf-exit__list a:hover,
.tcf-exit__list a:focus-visible {
  border-color: rgba(242, 103, 34, 0.75);
  background: rgba(242, 103, 34, 0.14);
  transform: translateX(3px);
}
.tcf-exit__cta {
  position: relative;
  display: block;
  text-align: center;
  padding: 0.85rem 1rem;
  border-radius: 100px;
  background: var(--molten, #f26722);
  color: #10203c;
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
}
@keyframes tcfExitFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tcfExitRise {
  from { opacity: 0; transform: translateY(26px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tcf-exit__scrim,
  .tcf-exit__panel { animation: none !important; }
  .tcf-exit__glow { animation: none !important; opacity: 0.5; }
}