/* =========================================================
   Formeta Dental – Subpage components (v0.5.0)
   Builds on style.css / glow.css / why.css.
   Brand rules (HARD):
   - no kickers/eyebrows above headings
   - main headings use .headline-accent (white + red marker)
   - NEVER red text on blue (red only as graphic/marker/block)
   - no light/coral red (#FF5E7A) — only brand red #BF214C
   - section BG = navy gradient (.wf-mesh), calm & clean
   ========================================================= */

/* ---- generic section / wrap (like why.css) ---- */
.fd-section { position: relative; padding: clamp(5rem,11vw,9rem) 0; overflow: hidden; }
.fd-section--tight { padding: clamp(3.5rem,8vw,6rem) 0; }
.fd-wrap { position: relative; z-index: 1; max-width: 98rem; margin-inline: auto; padding-inline: clamp(1.25rem,4vw,3rem); }
.fd-wrap--narrow { max-width: 70rem; }
.fd-head { margin-bottom: clamp(2.5rem,5vw,4rem); }
/* Uniform title→lead spacing: when a lead follows DIRECTLY after the head, do NOT
   add the large fd-head-margin + lead-margin, but a uniform 1.4rem (like head(title,lead)). */
.fd-head:has(+ .fd-section-lead) { margin-bottom: 1.4rem; }
.fd-head + .fd-section-lead { margin-top: 0; }
.fd-section-title { font-size: clamp(2.1rem,4.6vw,3.8rem); max-width: 1050px; font-weight: 300; letter-spacing: -.015em; line-height: 1.05; }
.fd-section-lead { margin-top: 1.4rem; max-width: 60rem; color: rgba(255,255,255,.68); font-size: 1.08rem; line-height: 1.65; }
.fd-eyebrow-meta { font-family: ui-monospace,monospace; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-metal); }

/* =========================================================
   COMPACT SUBHERO (for functional pages: Contact, Portal,
   Upload, Thanks, 404). Navy gradient, left-aligned, calm.
   ========================================================= */
.fd-subhero { position: relative; overflow: hidden; background: var(--brand-blue-dark);
  padding: clamp(8rem,16vw,11rem) 0 clamp(3.5rem,7vw,5.5rem); }
.fd-subhero--center { text-align: center; }
.fd-subhero--center .fd-subhero-sub,
.fd-subhero--center .fd-subhero-actions { margin-inline: auto; }
.fd-subhero--center .fd-subhero-actions { justify-content: center; }
.fd-subhero-inner { position: relative; z-index: 2; max-width: 98rem; margin-inline: auto; padding-inline: clamp(1.25rem,4vw,3rem); }
.fd-subhero--center .fd-subhero-inner { max-width: 60rem; }
.fd-subhero-title { font-size: clamp(2.2rem,4.8vw,3.9rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.03; max-width: 20ch; }
.fd-subhero--center .fd-subhero-title { max-width: 24ch; margin-inline: auto; }
.fd-subhero-sub { margin-top: 1.5rem; max-width: 48rem; font-size: clamp(1.05rem,1.6vw,1.3rem); line-height: 1.6; color: rgba(255,255,255,.8); }
.fd-subhero-sub strong { color: #fff; font-weight: 600; }
.fd-subhero-actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .9rem; }
/* v0.7.0: subhero with image on the right, slightly cropped (Contact team) */
.fd-subhero--media .fd-subhero-title,
.fd-subhero--media .fd-subhero-sub { max-width: 34rem; }
.fd-subhero-figure { position: absolute; right: 0; bottom: 0; z-index: 1; width: clamp(380px, 44vw, 740px); pointer-events: none; }
.fd-subhero-figure img { display: block; width: 100%; height: auto; transform: translateX(8%); filter: drop-shadow(-20px 24px 48px rgba(0,0,0,.45)); }
@media (max-width: 900px) {
  .fd-subhero--media { padding-bottom: 0; }
  .fd-subhero--media .fd-subhero-title, .fd-subhero--media .fd-subhero-sub { max-width: none; }
  .fd-subhero-figure { position: static; width: min(100%, 26rem); margin: 2.2rem auto 0; padding-inline: clamp(1.25rem,4vw,3rem); }
  .fd-subhero-figure img { transform: none; }
}

/* =========================================================
   GRIDS
   ========================================================= */
.fd-grid { display: grid; gap: clamp(1.25rem,2.5vw,1.75rem); }
.fd-grid-2 { grid-template-columns: repeat(2,1fr); }
.fd-grid-3 { grid-template-columns: repeat(3,1fr); }
@media (max-width: 900px) { .fd-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .fd-grid-2, .fd-grid-3 { grid-template-columns: 1fr; } }

/* ---- Feature / info card (reuse .glass.bento-card from style.css) ---- */
.fd-card { position: relative; border-radius: 20px; padding: clamp(1.6rem,2.4vw,2.1rem);
  background: var(--glass-bg); border: 1px solid var(--glass-border); overflow: hidden; }
.fd-card h3 { margin-top: 1.2rem; font-size: clamp(1.15rem,1.8vw,1.4rem); font-weight: 600; line-height: 1.25; }
.fd-card p { margin-top: .65rem; color: rgba(255,255,255,.68); line-height: 1.65; font-size: .98rem; }
.fd-card .icon-flat { width: 46px; height: 46px; }
.fd-card-num { font-family: 'Outfit'; font-weight: 300; font-size: clamp(2rem,3vw,2.6rem); line-height: 1; letter-spacing: -.02em; color: #fff; }

/* =========================================================
   SPLIT (image + text) — generic (like .wf-split, without forced parallax)
   ========================================================= */
.fd-split { position: relative; display: grid; gap: clamp(2rem,5vw,4.5rem); grid-template-columns: 1fr 1fr; align-items: center;
  max-width: 98rem; margin-inline: auto; padding-inline: clamp(1.25rem,4vw,3rem); }
.fd-split--rev .fd-split-media { order: 2; }
.fd-split-media { position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 4/5; border: 1px solid rgba(255,255,255,.1); }
.fd-split-media-inner { position: absolute; inset: -8% 0; will-change: transform; }
.fd-split-media-inner img { width: 100%; height: 100%; object-fit: cover; }
.fd-split-badge { position: absolute; left: 1.1rem; bottom: 1.1rem; z-index: 2; font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(10,30,61,.6); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px); padding: .5rem .9rem; border-radius: 999px; }
.fd-split-title { font-size: clamp(2.1rem,4.4vw,3.4rem); max-width: 1050px; font-weight: 300; letter-spacing: -.015em; line-height: 1.06; }
/* STANDARD (central): body copy directly after a split heading ALWAYS has 1.5rem spacing —
   whether .fd-richtext or .fd-split-text. Permanently prevents the "heading sticks to the text". */
.fd-split-title + .fd-richtext,
.fd-split-title + .fd-split-text { margin-top: 1.5rem; }
.fd-split-text { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1.05rem; color: rgba(255,255,255,.7); font-size: 1.05rem; line-height: 1.7; }
.fd-split-text strong { color: #fff; font-weight: 600; }
@media (max-width: 900px) { .fd-split { grid-template-columns: 1fr; } .fd-split--rev .fd-split-media { order: 0; } .fd-split-media { aspect-ratio: 4/3; } }

/* ---- Full-bleed variant: image breaks out flush to the viewport edge (no border, only inner side rounded) ---- */
.fd-split--bleed { max-width: none; margin-inline: 0; padding-inline: 0; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: center; }
.fd-split--bleed .fd-split-media { aspect-ratio: auto; align-self: stretch; min-height: clamp(440px,56vw,720px); border: 0; border-radius: 0 26px 26px 0; }
.fd-split--bleed .fd-split-body { max-width: 760px; padding-right: clamp(1.5rem,6vw,5rem); padding-block: clamp(1rem,3vw,2.5rem); }
.fd-split--bleed.fd-split--rev .fd-split-media { border-radius: 26px 0 0 26px; }
.fd-split--bleed.fd-split--rev .fd-split-body { padding-right: 0; padding-left: clamp(1.5rem,6vw,5rem); margin-right: auto; }
@media (max-width: 900px) {
  .fd-split--bleed { grid-template-columns: 1fr; }
  /* Mobile: dock the image flush to the top section edge (remove the wrapper section's top padding). */
  .fd-section:has(> .fd-split--bleed) { padding-top: 0; }
  .fd-split--bleed .fd-split-media, .fd-split--bleed.fd-split--rev .fd-split-media { min-height: 62vw; border-radius: 0 0 22px 22px; }
  .fd-split--bleed .fd-split-body, .fd-split--bleed.fd-split--rev .fd-split-body { padding-inline: clamp(1.25rem,4vw,3rem); }
}

/* ---- Bullet list with a red check (white-on-red is allowed; marker = graphic) ---- */
.fd-checklist { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .85rem; }
.fd-checklist li { position: relative; padding-left: 2.1rem; color: rgba(255,255,255,.74); line-height: 1.6; }
.fd-checklist li::before { content: ''; position: absolute; left: 0; top: .15rem; width: 1.25rem; height: 1.25rem; border-radius: 999px;
  background: var(--brand-red); border: 0; }
.fd-checklist li::after { content: ''; position: absolute; left: .44rem; top: .34rem; width: .38rem; height: .68rem;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* Onsite comparison card has a strong red background → invert marker (white circle, red check) */
.fd-compare-card--onsite .fd-checklist li::before { background: #fff; }
.fd-compare-card--onsite .fd-checklist li::after { border-color: var(--brand-red); }
.fd-checklist li strong { color: #fff; font-weight: 600; }

/* =========================================================
   PROMISES — numbered promises (e.g. pricing page).
   Reuse of the wf-adv number typography, but as a calm 2-column grid.
   ========================================================= */
.fd-promises { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,3vw,2.5rem) clamp(2rem,5vw,4.5rem); }
.fd-promise { display: flex; gap: 1.3rem; padding: clamp(1.4rem,2.5vw,2rem) 0; border-top: 1px solid rgba(255,255,255,.1); }
.fd-promise-num { flex: 0 0 auto; min-width: 2.4ch; font-family: 'Outfit'; font-weight: 300; font-size: clamp(2rem,3.2vw,3rem);
  line-height: 1; letter-spacing: -.02em; color: #fff; }
.fd-promise h3 { font-size: clamp(1.2rem,2vw,1.6rem); font-weight: 600; line-height: 1.2; }
.fd-promise p { margin-top: .6rem; color: rgba(255,255,255,.68); line-height: 1.6; font-size: .98rem; }
@media (max-width: 760px) { .fd-promises { grid-template-columns: 1fr; } }

/* =========================================================
   COMPARE — FTC vs. Onsite comparison
   ========================================================= */
.fd-compare { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem,2.5vw,1.75rem); }
.fd-compare-card { position: relative; border-radius: 22px; padding: clamp(1.8rem,3vw,2.6rem);
  background: linear-gradient(165deg, rgba(3,38,86,.5), rgba(10,30,61,.7)); border: 1px solid rgba(255,255,255,.1); overflow: hidden; }
.fd-compare-card h3 { font-size: clamp(1.4rem,2.4vw,1.9rem); font-weight: 600; }
.fd-compare-card .fd-compare-tag { font-family: ui-monospace,monospace; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand-red-on-dark); display: inline-block; margin-bottom: .8rem; }
.fd-compare-card p { margin-top: .6rem; color: rgba(255,255,255,.7); line-height: 1.6; }
@media (max-width: 760px) { .fd-compare { grid-template-columns: 1fr; } }

/* =========================================================
   STATIC STEPS — numbered flow without pin (e.g. Upload)
   ========================================================= */
.fd-steps { display: grid; gap: clamp(1.25rem,2.5vw,1.75rem); grid-template-columns: repeat(3,1fr); counter-reset: fdstep; }
.fd-steps--5 { grid-template-columns: repeat(5,1fr); }
.fd-step { position: relative; border-radius: 18px; padding: clamp(1.5rem,2.4vw,2rem); background: var(--glass-bg); border: 1px solid var(--glass-border); }
.fd-step-num { font-family: 'Outfit'; font-weight: 900; font-size: 2.6rem; line-height: 1; letter-spacing: -.04em; color: #fff; }
.fd-step h3 { margin-top: .9rem; font-size: 1.15rem; font-weight: 600; }
.fd-step p { margin-top: .55rem; color: rgba(255,255,255,.66); line-height: 1.6; font-size: .95rem; }
@media (max-width: 1000px) { .fd-steps, .fd-steps--5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .fd-steps, .fd-steps--5 { grid-template-columns: 1fr; } }

/* =========================================================
   FORM (Contact / Upload) — reuse .input / .check from style.css
   ========================================================= */
.fd-form { max-width: 46rem; }
.fd-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.fd-form-grid .fd-col-full { grid-column: 1 / -1; }
.fd-field { display: flex; flex-direction: column; gap: .5rem; }
.fd-field label { font-size: .85rem; font-weight: 500; color: rgba(255,255,255,.78); }
.fd-field label .opt { color: var(--brand-metal); font-weight: 400; }
.fd-consent { display: flex; align-items: flex-start; gap: .7rem; margin-top: .4rem; font-size: .88rem; color: rgba(255,255,255,.66); line-height: 1.5; }
.fd-form-note { margin-top: 1rem; font-size: .85rem; color: var(--brand-metal); }
@media (max-width: 600px) { .fd-form-grid { grid-template-columns: 1fr; } }

/* ---- Dropzone (upload placeholder, non-functional) ---- */
.fd-dropzone { border: 1.5px dashed rgba(255,255,255,.22); border-radius: 18px; padding: clamp(2.2rem,5vw,3.5rem);
  text-align: center; background: rgba(255,255,255,.025); transition: border-color .25s, background .25s; }
.fd-dropzone:hover { border-color: rgba(191,33,76,.5); background: rgba(191,33,76,.04); }
.fd-dropzone .fd-dz-icon { width: 54px; height: 54px; margin: 0 auto 1rem; display: grid; place-items: center;
  background: transparent; border: 0; color: #fff; }
.fd-dropzone .fd-dz-icon svg { stroke: #fff; }
.fd-dropzone p { color: rgba(255,255,255,.7); }
.fd-dropzone .fd-dz-meta { margin-top: .6rem; font-size: .82rem; color: var(--brand-metal); }

/* =========================================================
   CONTACT CHANNELS (Contact page)
   ========================================================= */
.fd-channels { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2vw,1.5rem); }
.fd-channel { border-radius: 18px; padding: clamp(1.4rem,2.4vw,1.9rem); background: var(--glass-bg); border: 1px solid var(--glass-border); }
.fd-channel .icon-flat { margin-bottom: 1rem; }
.fd-channel h3 { font-size: 1.1rem; font-weight: 600; }
.fd-channel p { margin-top: .5rem; color: rgba(255,255,255,.7); line-height: 1.55; font-size: .95rem; }
.fd-channel .fd-placeholder { color: var(--brand-metal); font-style: italic; }
@media (max-width: 800px) { .fd-channels { grid-template-columns: 1fr; } }

/* Download center (v0.9.52 — client request Christina 06.07.) */
.fd-downloads { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 1rem; margin-top: clamp(1.5rem,3vw,2.2rem); }
.fd-download { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: 16px; background: var(--glass-bg); border: 1px solid var(--glass-border); color: #fff; text-decoration: none; transition: border-color .25s, background .25s, transform .25s; }
.fd-download:hover { border-color: rgba(255,255,255,.28); background: var(--glass-bg-strong); transform: translateY(-2px); }
.fd-download-ic { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: rgba(191,33,76,.15); }
.fd-download-ic svg { width: 22px; height: 22px; color: #fff; }
.fd-download-main { flex: 1; min-width: 0; }
.fd-download-main b { display: block; font-weight: 600; font-size: .98rem; line-height: 1.3; }
.fd-download-main span { display: block; font-size: .8rem; color: rgba(255,255,255,.55); margin-top: .2rem; }
.fd-download-dl { flex: 0 0 auto; color: rgba(255,255,255,.5); transition: color .25s, transform .25s; }
.fd-download-dl svg { width: 20px; height: 20px; }
.fd-download:hover .fd-download-dl { color: #fff; transform: translateY(2px); }
@media (max-width: 640px) { .fd-downloads { grid-template-columns: 1fr; } }

/* ---- Placeholder badge (clearly marked open content) ---- */
.fd-placeholder-box { border: 1px dashed rgba(255,255,255,.2); border-radius: 16px; padding: clamp(1.4rem,3vw,2rem);
  background: rgba(255,255,255,.02); color: rgba(255,255,255,.6); }
.fd-placeholder-box .fd-ph-tag { display: inline-block; font-family: ui-monospace,monospace; font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand-red-on-dark); border: 1px solid rgba(191,33,76,.35); border-radius: 999px;
  padding: .25rem .7rem; margin-bottom: .9rem; }

/* =========================================================
   LINKEDIN / PROFILE CARDS (News page)
   ========================================================= */
.fd-profiles { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2vw,1.5rem); }
.fd-profile { display: flex; align-items: center; gap: 1rem; border-radius: 16px; padding: 1.2rem 1.3rem;
  background: var(--glass-bg); border: 1px solid var(--glass-border); transition: border-color .25s, transform .25s; text-decoration: none; }
.fd-profile:hover { border-color: rgba(191,33,76,.4); transform: translateY(-2px); }
.fd-profile-av { flex: 0 0 auto; width: 64px; height: 64px; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 999px; overflow: hidden; color: #fff; }
.fd-profile-av svg { stroke: #fff; }
.fd-profile b { display: block; color: #fff; font-weight: 600; font-size: 1rem; }
.fd-profile span { display: block; font-size: .85rem; color: rgba(255,255,255,.6); }
@media (max-width: 800px) { .fd-profiles { grid-template-columns: 1fr; } }

/* =========================================================
   AUTH / PORTAL CTA split cards (customer portal)
   ========================================================= */
.fd-authgrid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem,2.5vw,1.75rem); }
.fd-auth { border-radius: 22px; padding: clamp(1.8rem,3vw,2.6rem); background: linear-gradient(165deg, rgba(3,38,86,.5), rgba(10,30,61,.7));
  border: 1px solid rgba(255,255,255,.1); }
.fd-auth h3 { font-size: clamp(1.3rem,2.2vw,1.7rem); font-weight: 600; }
.fd-auth p { margin-top: .6rem; color: rgba(255,255,255,.7); line-height: 1.6; }
@media (max-width: 700px) { .fd-authgrid { grid-template-columns: 1fr; } }

/* =========================================================
   CTA BAND (slim closing CTA, reuse cta-mesh look via wf-mesh)
   ========================================================= */
.fd-cta { position: relative; overflow: hidden; padding: clamp(4.5rem,9vw,7rem) 0; text-align: center; }
.fd-cta-inner { position: relative; z-index: 2; max-width: 52rem; margin-inline: auto; padding-inline: clamp(1.25rem,4vw,3rem); }
.fd-cta h2 { font-size: clamp(2rem,4.4vw,3.4rem); font-weight: 300; letter-spacing: -.015em; line-height: 1.08; }
.fd-cta p { margin-top: 1.1rem; font-size: 1.12rem; line-height: 1.6; color: rgba(255,255,255,.78); }
.fd-cta-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

/* =========================================================
   THANKS / 404 — centered content
   ========================================================= */
.fd-center-list { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.fd-signature { margin-top: 2.4rem; font-family: 'Outfit'; font-weight: 300; font-style: italic; font-size: 1.25rem; color: rgba(255,255,255,.7); }

/* =========================================================
   FULLBLEED — large-scale image statement section (100svh, parallax)
   ========================================================= */
.fd-fullbleed { position: relative; min-height: 92svh; display: flex; overflow: hidden; isolation: isolate; background: var(--brand-blue-dark); }
.fd-fullbleed-media { position: absolute; inset: -8% 0; z-index: 0; will-change: transform; }
.fd-fullbleed-media img { width: 100%; height: 100%; object-fit: cover; }
.fd-fullbleed-scrim { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(100deg, rgba(0,11,28,.92) 0%, rgba(10,30,61,.7) 42%, rgba(10,30,61,.2) 72%, transparent 100%),
  linear-gradient(0deg, rgba(0,11,28,.8), transparent 35%); }
.fd-fullbleed-inner { position: relative; z-index: 2; display: flex; align-items: center; width: 100%; max-width: 98rem;
  margin-inline: auto; padding: clamp(4rem,10vw,8rem) clamp(1.25rem,4vw,3rem); }
.fd-fullbleed-inner[style*="center"] { justify-content: center; }
.fd-fullbleed-title { font-size: clamp(2.1rem,5vw,4rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.03; }
.fd-fullbleed-text { margin-top: 1.3rem; font-size: clamp(1.05rem,1.5vw,1.3rem); line-height: 1.6; color: rgba(255,255,255,.82); }
.fd-fullbleed-text strong { color: #fff; font-weight: 600; }

/* =========================================================
   MOSAIC — asymmetric image grid with hover zoom
   ========================================================= */
.fd-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px,18vw,230px); gap: clamp(.75rem,1.5vw,1.1rem); }
.fd-mosaic-tile { position: relative; margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); }
.fd-mosaic-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .5s; }
.fd-mosaic-tile:hover img { transform: scale(1.05); filter: brightness(1.05) saturate(1.08); }
.fd-mosaic-cap { position: absolute; left: 1rem; bottom: .9rem; z-index: 2; font-family: ui-monospace,monospace; font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(0,11,28,.55); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px); padding: .35rem .7rem; border-radius: 999px; }
.fd-mosaic-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,11,28,.35), transparent 45%); pointer-events: none; }
.fd-mosaic-wide { grid-column: span 2; }
.fd-mosaic-tall { grid-row: span 2; }
.fd-mosaic-big { grid-column: span 2; grid-row: span 2; }
@media (max-width: 760px) {
  .fd-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(130px,30vw,180px); }
  .fd-mosaic-big { grid-column: span 2; grid-row: span 2; }
  .fd-mosaic-wide { grid-column: span 2; }
  .fd-mosaic-tall { grid-row: span 1; }
}

@media (max-width: 520px) {
  .fd-subhero-actions .btn, .fd-cta-actions .btn, .fd-center-list .btn { width: 100%; justify-content: center; }
}

/* =========================================================
   ICON — style 1: white glass icon (gradient) in a red-tinted frosted circle.
   Uses the shared SVG gradient #iconGlass (must be present once in the DOM).
   Size via Tailwind w-/h- on the element; otherwise default 3.5rem.
   ========================================================= */
.fd-icon1 { position:relative; flex:0 0 auto; display:grid; place-items:center start; color:#fff;
  background:transparent; border:0; border-radius:0; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  transition:transform .25s ease, opacity .25s ease; }
.fd-icon1:not([class*="w-"]) { width:3.5rem; height:3.5rem; }
.fd-icon1 svg { width:62%; height:62%; display:block; stroke:#fff; fill:none; filter:none; }
.bento-card:hover .fd-icon1, .fd-icon1:hover { transform:translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .fd-icon1 { transition:none; } }
/* compact spacing icon → title in feature cards & contact channels */
.fd-card > .fd-icon1 + h3, .fd-channel > .fd-icon1 + h3 { margin-top:.7rem; }

/* text-free video divider (parallax visual without overlay text) */
.wf-band--bare { min-height: 62svh; }
@media (max-width: 700px){ .wf-band--bare { min-height: 46svh; } }

/* Compare card color worlds (Solutions): FTC = blue, Onsite = red */
.fd-compare-card--ftc { background: linear-gradient(165deg, rgba(3,64,135,.30), rgba(10,30,61,.65)); border-color: rgba(96,150,224,.32); }
.fd-compare-card--onsite { background: linear-gradient(165deg, rgba(191,33,76,.22), rgba(10,30,61,.65)); border-color: rgba(191,33,76,.4); }
.fd-compare-card--ftc h3 { color: #fff; }
.fd-compare-card--onsite h3 { color: #fff; }

/* Hero with video background (e.g. Contact) */
.wf-hero-media video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Full-height video section with text overlay (e.g. Products: why 3D metal printing) */
.fd-video-section { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; isolation: isolate; background: var(--brand-blue-dark); }
.fd-video-section .fd-vs-media { position: absolute; inset: -8% 0; z-index: 0; will-change: transform; }
.fd-video-section .fd-vs-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fd-video-section .fd-vs-scrim { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(100deg, rgba(0,11,28,.9) 0%, rgba(10,30,61,.7) 44%, rgba(10,30,61,.32) 72%, rgba(0,11,28,.5) 100%),
  linear-gradient(0deg, rgba(0,11,28,.7), transparent 40%); }
.fd-video-section .fd-vs-inner { position: relative; z-index: 2; width: 100%; max-width: 98rem; margin-inline: auto; padding: clamp(4rem,9vw,7rem) clamp(1.25rem,4vw,3rem); }
.fd-video-section .fd-vs-inner .fd-section-title, .fd-video-section .fd-vs-inner h2 { max-width: 1000px; }

/* =========================================================
   v0.7.0 — go-live correction package: new building blocks
   ========================================================= */

/* --- Solution modules FTC/Onsite (wow): large typography + large media + parallax (item 15) --- */
.fd-solution { position: relative; padding: clamp(4rem,9vw,8rem) 0; overflow: hidden; isolation: isolate; }
/* v0.8.0: full-bleed split like .wf-split--bleed (origin band): image breaks out flush to the
   viewport edge (rounded only on the inside, full-height), head + body sit in the text column. */
.fd-solution-split { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem,5vw,5rem); align-items: stretch; }
/* min-width:0 prevents grid blowout from the box slider's max-content track (otherwise overflow on mobile). */
.fd-solution-media, .fd-solution-body { min-width: 0; }
.fd-solution-media { position: relative; overflow: hidden; align-self: stretch;
  min-height: clamp(440px,52vw,680px); border-radius: 0 28px 28px 0; }
.fd-solution--rev .fd-solution-media { order: 2; border-radius: 28px 0 0 28px; }
.fd-solution-media-inner { position: absolute; inset: -8% 0; will-change: transform; }
.fd-solution-media-inner img { width: 100%; height: 100%; object-fit: cover; }
.fd-solution-body { max-width: 760px; align-self: center;
  padding-right: clamp(1.5rem,6vw,5rem); padding-block: clamp(1rem,3vw,2.5rem); }
.fd-solution--rev .fd-solution-body { order: 1; padding-right: 0; padding-left: clamp(1.5rem,6vw,5rem); }
.fd-solution-head { display: flex; align-items: baseline; gap: clamp(.8rem,2vw,1.6rem); margin-bottom: clamp(1.4rem,3vw,2.2rem); }
.fd-solution-num { flex: 0 0 auto; font-family: 'Outfit'; font-weight: 800; font-size: clamp(2.6rem,6vw,4.6rem); line-height: .8; letter-spacing: -.04em; color: rgba(255,255,255,.16); }
.fd-solution-title { font-size: clamp(2rem,4.4vw,3.4rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.04; color: #fff; }
.fd-solution-tag { margin-top: .5rem; font-size: clamp(1.1rem,2.2vw,1.6rem); font-weight: 300; color: rgba(255,255,255,.92); }
.fd-solution-body .fd-split-text { margin-top: 0; }
@media (max-width: 900px) {
  /* Mobile: dock the image flush to the top section edge (no top-padding strip above the image). */
  .fd-solution { padding-top: 0; }
  .fd-solution-split { grid-template-columns: 1fr; }
  .fd-solution-media, .fd-solution--rev .fd-solution-media { order: 0; min-height: 62vw; border-radius: 0 0 22px 22px; }
  .fd-solution-body, .fd-solution--rev .fd-solution-body { order: 1; max-width: none;
    padding-inline: clamp(1.25rem,4vw,3rem); padding-right: clamp(1.25rem,4vw,3rem); padding-left: clamp(1.25rem,4vw,3rem); }
  .fd-solution-head { gap: .6rem; }
}

/* v0.8.0: "What you get" — horizontal auto-slider of boxes that bleed off the edge.
   Pure CSS marquee (track duplicated 1×, translateX 0→-50% = seamless), hover pauses. */
.fd-bslider { position: relative; margin-top: 1.4rem; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.fd-bslider-track { display: flex; width: max-content; animation: fd-bslide 36s linear infinite; }
.fd-bslider:hover .fd-bslider-track { animation-play-state: paused; }
.fd-bcard { flex: 0 0 auto; width: clamp(220px,24vw,290px); margin-right: 1rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: .9rem;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px; padding: 1.5rem 1.4rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.fd-bcard .fd-icon1 { width: 3rem; height: 3rem; }
.fd-bcard p { color: rgba(255,255,255,.82); line-height: 1.55; font-size: .98rem; }
@keyframes fd-bslide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .fd-bslider { overflow-x: auto; -webkit-mask: none; mask: none; }
  .fd-bslider-track { animation: none; }
}

/* --- ROI section with background image + overlay (item 18) --- */
.fd-roi { position: relative; overflow: hidden; isolation: isolate; padding: clamp(3.5rem,8vw,6.5rem) 0; }
.fd-roi-media { position: absolute; inset: -8% 0; z-index: 0; will-change: transform; }
.fd-roi-media img { width: 100%; height: 100%; object-fit: cover; }
.fd-roi-scrim { position: absolute; inset: 0; z-index: 1; background:
  radial-gradient(ellipse 90% 80% at 32% 40%, rgba(10,30,61,.78), rgba(0,11,28,.93) 72%),
  linear-gradient(180deg, rgba(0,11,28,.55), rgba(0,11,28,.85)); }
.fd-roi-inner { position: relative; z-index: 2; max-width: 60rem; margin-inline: auto; padding-inline: clamp(1.25rem,4vw,3rem); text-align: center; }
.fd-roi-inner .fd-section-title, .fd-roi-inner .fd-section-lead { margin-inline: auto; }
.fd-roi-inner .fd-checklist { display: inline-flex; text-align: left; margin-inline: auto; }
.fd-roi-inner [style*="display:flex"] { justify-content: center; }

/* --- "What fits you" section: heading + body text/CTA centered (item 16) --- */
.fd-compare-block { text-align: center; }
.fd-compare-block .fd-head { text-align: center; max-width: 48rem; margin-inline: auto; }
.fd-compare-block .fd-section-lead { margin-inline: auto; }
.fd-compare-block .fd-compare { text-align: left; max-width: 70rem; margin-inline: auto; }
.fd-compare-foot { max-width: 48rem; margin: clamp(1.75rem,3vw,2.5rem) auto 0; color: rgba(255,255,255,.8); }
.fd-compare-foot strong { color: #fff; }
.fd-compare-foot p + p { margin-top: 1rem; }
.fd-compare-block [style*="display:flex"] { justify-content: center; }

/* --- "What fits you" boxes EXACTLY in the homepage card styling (glass-strong FTC / vibrant-red Onsite + accent-stripe) --- */
.fd-compare-card { position: relative; overflow: hidden; text-align: center; border-radius: 24px; padding: clamp(2rem,4vw,2.7rem);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s, border-color .5s, background .5s; }
.fd-compare-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.22); }
.fd-compare-card::before { content: ''; position: absolute; top: 0; right: 0; width: 130px; height: 130px; pointer-events: none; opacity: .25;
  background: repeating-linear-gradient(135deg, var(--cstripe,#fff) 0 2px, transparent 2px 12px);
  -webkit-mask-image: radial-gradient(circle at top right, #000, transparent 70%);
  mask-image: radial-gradient(circle at top right, #000, transparent 70%); }
.fd-compare-card h3 { font-size: clamp(1.45rem,2.6vw,2rem); line-height: 1.12; position: relative; }
.fd-compare-card .fd-checklist { display: inline-flex; text-align: left; margin-inline: auto; position: relative; }
.fd-compare-card--ftc { background: var(--glass-bg-strong); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border: 1px solid var(--glass-border-strong); --cstripe: #5a8ad0; }
.fd-compare-card--onsite { background: linear-gradient(160deg, rgba(191,33,76,.85), rgba(191,33,76,.55) 60%, rgba(191,33,76,.4)); border: 1px solid rgba(255,255,255,.18); --cstripe: #ffffff; }

/* --- News: LinkedIn section with iPhone mockup + parallax (item 19) --- */
.fd-linkedin { position: relative; overflow: hidden; isolation: isolate; padding: clamp(3.5rem,8vw,6.5rem) 0; }
.fd-linkedin-wrap { position: relative; z-index: 1; max-width: 98rem; margin-inline: auto; padding-inline: clamp(1.25rem,4vw,3rem); display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.fd-linkedin-sub { font-size: clamp(1.4rem,3vw,2.4rem); font-weight: 300; color: #fff; margin-top: .3rem; }
.fd-linkedin-media { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: clamp(340px,42vw,560px); overflow: hidden; }
.fd-linkedin-phone { width: clamp(220px,80%,360px); height: auto; border-radius: 34px; filter: drop-shadow(0 30px 60px rgba(0,0,0,.5)); will-change: transform; }
@media (max-width: 900px) {
  .fd-linkedin-wrap { grid-template-columns: 1fr; }
  .fd-linkedin-media { order: -1; min-height: auto; }
  .fd-linkedin-phone { width: clamp(200px,55%,300px); }
}
.fd-profile-av--img { overflow: hidden; }
.fd-profile-av--img img { width: 100%; height: 100%; object-fit: cover; }
.fd-profile-av--logo { background: rgba(255,255,255,.06); }
.fd-profile-av--logo img { width: 64%; height: 64%; object-fit: contain; margin: auto; }

/* --- Contact: boxes to the left of the form (item 22) --- */
.fd-contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(1.5rem,4vw,3rem); align-items: start; }
.fd-contact-col { display: flex; flex-direction: column; gap: 1rem; }
.fd-contact-box { display: flex; gap: 1rem; align-items: flex-start; border: 1px solid var(--glass-border); background: var(--glass-bg); border-radius: 18px; padding: clamp(1.2rem,2.4vw,1.7rem); }
.fd-contact-box h3 { font-size: 1.05rem; font-weight: 600; color: #fff; }
.fd-contact-box p { margin-top: .3rem; color: rgba(255,255,255,.7); font-size: .95rem; line-height: 1.5; }
.fd-contact-box .fd-placeholder { color: var(--brand-metal); font-style: italic; }
.fd-contact-box .fd-contact-link { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); transition: color .2s, border-color .2s; }
.fd-contact-box .fd-contact-link:hover { color: var(--brand-red-on-dark); border-color: var(--brand-red-on-dark); }
.fd-contact-box address p { margin-top: .3rem; }
.fd-contact-form .fd-section-lead { margin-top: 0; }
@media (max-width: 860px) { .fd-contact-grid { grid-template-columns: 1fr; } }

/* --- Customer portal: 3 how-to videos (item 24) --- */
.fd-portal-videos { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2.5vw,1.75rem); margin-top: clamp(1.5rem,3vw,2.5rem); }
.fd-pvid { margin: 0; }
.fd-pvid-el { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 18px; background: #0A1E3D; border: 1px solid rgba(255,255,255,.1); display: block; }
.fd-pvid figcaption { margin-top: .8rem; font-size: .95rem; color: rgba(255,255,255,.78); font-weight: 500; }
@media (max-width: 860px) { .fd-portal-videos { grid-template-columns: 1fr; max-width: 32rem; margin-inline: auto; } }

/* --- Production: certification design cards (item 27) --- */
.fd-certcards { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2.5vw,1.75rem); margin-top: clamp(1.5rem,3vw,2.2rem); }
.fd-certcard { display: flex; flex-direction: column; gap: .7rem; padding: clamp(1.6rem,3vw,2.2rem); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: rgba(255,255,255,.035); }
.fd-certcard-tag { font-family: ui-monospace, monospace; font-weight: 800; font-size: clamp(2rem,4.5vw,3.2rem); line-height: 1; letter-spacing: .02em; color: #fff; }
.fd-certcard h3 { font-size: 1.1rem; font-weight: 600; color: #fff; line-height: 1.3; }
@media (max-width: 760px) { .fd-certcards { grid-template-columns: 1fr; } }

/* --- Legal pages (imprint/privacy, item 29) --- */
/* Font size increased (Feedbucket 802247/801237): legal texts more readable */
.fd-legal { max-width: 60rem; color: rgba(255,255,255,.8); line-height: 1.75; font-size: 1.08rem; }
.fd-legal h3 { margin-top: 2rem; font-size: 1.35rem; font-weight: 600; color: #fff; }
.fd-legal p { margin-top: .6rem; }
.fd-legal a { color: var(--brand-red-on-dark); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.fd-legal h4 { margin-top: 1.4rem; font-size: 1.14rem; font-weight: 600; color: #fff; }
.fd-legal ul, .fd-legal ol { margin-top: .6rem; padding-left: 1.4rem; list-style: disc; }
.fd-legal ol { list-style: decimal; }
.fd-legal li { margin-top: .3rem; }
.fd-legal strong { color: #fff; font-weight: 600; }

.fd-ph { color: var(--brand-metal); font-style: italic; }
.fd-legal-note { max-width: 60rem; margin-bottom: 2rem; border: 1px solid rgba(191,33,76,.4); background: rgba(191,33,76,.08); border-radius: 14px; padding: 1.1rem 1.3rem; color: rgba(255,255,255,.85); line-height: 1.6; }
.fd-legal-note strong { color: #fff; }
.fd-legal-note .fd-ph { color: rgba(255,255,255,.7); }

/* --- File upload: split (form card + "What happens next") — concept A --- */
.fd-upl-split { display: grid; grid-template-columns: 1.4fr .9fr; gap: clamp(1.5rem,4vw,3rem); align-items: start; }
.fd-upl-card { background: var(--glass-bg-strong); border: 1px solid var(--glass-border-strong); border-radius: 24px; padding: clamp(1.6rem,3vw,2.6rem); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); }
.fd-upl-card h2 { font-size: clamp(1.6rem,3vw,2.2rem); margin-bottom: 1.4rem; }
.fd-upl-dz { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; border: 1.5px dashed rgba(255,255,255,.24); border-radius: 18px; padding: clamp(2rem,4vw,3rem); cursor: pointer; transition: border-color .3s, background .3s; }
.fd-upl-dz:hover { border-color: rgba(191,33,76,.55); background: rgba(255,255,255,.03); }
.fd-upl-dz-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #fff; margin-bottom: .2rem; }
.fd-upl-dz-icon svg { stroke: #fff; }
.fd-upl-dz-meta { font-size: .9rem; color: rgba(255,255,255,.7); }
.fd-upl-after { border-radius: 20px; padding: clamp(1.5rem,2.6vw,2.1rem); background: var(--glass-bg); border: 1px solid var(--glass-border); }
.fd-upl-after h2 { font-size: clamp(1.4rem,2.4vw,1.9rem); margin-bottom: 1.3rem; }
.fd-upl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.fd-upl-list li { display: flex; gap: .95rem; align-items: flex-start; }
.fd-upl-num { flex: 0 0 auto; font-family: 'Outfit'; font-weight: 800; font-size: 1.35rem; line-height: 1.2; color: #fff; min-width: 2ch; }
.fd-upl-list p { color: rgba(255,255,255,.74); line-height: 1.55; font-size: .98rem; margin: 0; }
.fd-upl-note { margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.6); font-size: .92rem; line-height: 1.55; }
@media (max-width: 900px) { .fd-upl-split { grid-template-columns: 1fr; } }

/* --- Centered video section (last section of Products): evenly dark overlay for readable centered text --- */
.fd-vs--center .fd-vs-scrim { background:
  radial-gradient(ellipse 120% 100% at 50% 45%, rgba(10,30,61,.78), rgba(0,11,28,.93) 82%),
  linear-gradient(180deg, rgba(0,11,28,.6), transparent 30%, transparent 70%, rgba(0,11,28,.75)); }
/* 4 icon feature boxes horizontal */
.fd-featrow { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(1rem,2vw,1.5rem); margin-top: clamp(2rem,4vw,2.8rem); text-align: left; }
.fd-feat { display: flex; flex-direction: column; gap: .7rem; padding: clamp(1.3rem,2.4vw,1.8rem); border-radius: 18px; background: linear-gradient(160deg,#0a2c5e,#061d3a); border: 1px solid rgba(255,255,255,.10); backdrop-filter: none; -webkit-backdrop-filter: none; }
.fd-feat p { color: rgba(255,255,255,.82); line-height: 1.5; font-size: .96rem; margin: 0; }
@media (max-width: 860px) { .fd-featrow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .fd-featrow { grid-template-columns: 1fr; } }

/* =========================================================
   VIDEO MODAL (works-in-action popup, like warum-formeta)
   ========================================================= */
#video-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: clamp(1rem,4vw,3rem); }
#video-modal.open { display: flex; }
#video-modal .vm-scrim { position: absolute; inset: 0; background: rgba(0,8,20,.86); backdrop-filter: blur(6px); animation: vm-fade .25s ease; }
#video-modal .vm-dialog { position: relative; z-index: 1; width: 100%; max-width: 1100px; aspect-ratio: 16/9; border-radius: 18px; overflow: hidden;
  background: #000; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 40px 100px -40px rgba(0,0,0,.8); animation: vm-pop .3s cubic-bezier(.2,.8,.2,1); }
#video-modal .vm-dialog video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
#video-modal .vm-close { position: absolute; top: .7rem; right: .7rem; transform: none; z-index: 3; width: 44px; height: 44px; border-radius: 999px;
  display: grid; place-items: center; background: var(--brand-red); color: #fff; border: 2px solid #fff; cursor: pointer; box-shadow: 0 6px 18px -8px rgba(0,0,0,.6); }
#video-modal .vm-close:hover { background: var(--brand-red-bright); }
@keyframes vm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vm-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #video-modal .vm-scrim, #video-modal .vm-dialog { animation: none; } }

/* =========================================================
   CAREERS — body text, job listing, application block
   ========================================================= */
/* Centered section (e.g. speculative application) — head, body and CTAs centered.
   STANDARD: body text NEVER runs wider than the heading → narrow, centered body column (44rem);
   the headline keeps its own (wider) max-width. Applies to ALL body paragraphs incl. uncapped <p>. */
.fd-section--center .fd-head { text-align: center; }
.fd-section--center .fd-section-title { margin-inline: auto; }
.fd-section--center .fd-wrap > p,
.fd-section--center .fd-wrap > .fd-richtext,
.fd-section--center .fd-section-lead { text-align: center; margin-inline: auto; max-width: 44rem; }
.fd-section--center .reveal[style*="display:flex"] { justify-content: center; }

/* Body text block (multiple paragraphs, left, calm) */
.fd-richtext { max-width: 60rem; color: rgba(255,255,255,.78); }
.fd-richtext p { margin-top: 1rem; line-height: 1.72; font-size: 1.06rem; }
.fd-richtext p:first-child { margin-top: 0; }
.fd-richtext a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--brand-red); }
.fd-richtext a:hover { text-decoration-color: #fff; }

/* Job intro: body text left + key-facts card right (structured instead of loose badges) */
.fd-jobintro { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(2rem,4.5vw,3.75rem); align-items: start; }
.fd-jobintro .fd-richtext { max-width: 42rem; }
.fd-jobcard { background: var(--glass-bg-strong); border: 1px solid var(--glass-border-strong); border-radius: 22px; padding: clamp(1.6rem,2.6vw,2.15rem); }
.fd-jobcard-h { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-metal); margin-bottom: 1.25rem; }
.fd-jobfacts { display: flex; flex-direction: column; gap: 1.15rem; margin-bottom: 1.7rem; }
.fd-jobfact { display: flex; align-items: flex-start; gap: .85rem; }
.fd-jobfact .fd-icon1 { width: 1.75rem; height: 1.75rem; }
.fd-jobfact-label { display: block; font-size: .8rem; color: rgba(255,255,255,.55); margin-bottom: .1rem; }
.fd-jobfact-value { display: block; font-size: 1.02rem; font-weight: 600; color: #fff; line-height: 1.25; }
.fd-jobcard .btn { display: flex; width: 100%; justify-content: center; }
@media (max-width: 860px) { .fd-jobintro { grid-template-columns: 1fr; gap: 2.25rem; } .fd-jobintro .fd-richtext { max-width: none; } }

/* Meta badges (workload / area / location) — neutral tags, no red, no eyebrow */
.fd-job-meta { display: flex; flex-wrap: wrap; gap: .55rem; }
.fd-job-badge { font-size: .8rem; font-weight: 500; letter-spacing: .01em; color: rgba(255,255,255,.82);
  padding: .34rem .8rem; border-radius: 999px; background: var(--glass-bg-strong); border: 1px solid var(--glass-border-strong); white-space: nowrap; }

/* Job listing */
.fd-jobs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem,2.6vw,1.9rem); margin-top: clamp(1.75rem,3vw,2.6rem); }
@media (max-width: 880px) { .fd-jobs { grid-template-columns: 1fr; } }
.fd-job { position: relative; display: flex; flex-direction: column; gap: 1rem; border-radius: 22px; overflow: hidden;
  padding: clamp(1.7rem,2.8vw,2.4rem); background: var(--glass-bg); border: 1px solid var(--glass-border);
  transition: transform .5s cubic-bezier(.16,1,.3,1), border-color .5s ease, background .5s ease, box-shadow .5s ease; }
.fd-job:hover { transform: translateY(-6px); border-color: var(--glass-border-strong); background: var(--glass-bg-strong);
  box-shadow: 0 34px 64px -34px rgba(0,0,0,.7); }
/* Accent as a growing title marker (brand language, no side stripe) */
.fd-job-title { font-size: clamp(1.4rem,2.4vw,1.9rem); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; color: #fff;
  padding-bottom: .5rem; background-image: linear-gradient(var(--brand-red), var(--brand-red)); background-repeat: no-repeat;
  background-position: 0 100%; background-size: 2.4rem 3px; transition: background-size .5s cubic-bezier(.16,1,.3,1); }
.fd-job:hover .fd-job-title { background-size: 4.6rem 3px; }
@media (prefers-reduced-motion: reduce) { .fd-job, .fd-job-title { transition: none; } .fd-job:hover { transform: none; } }
.fd-job-teaser { color: rgba(255,255,255,.7); line-height: 1.6; font-size: 1rem; }
.fd-job-deadline { display: inline-flex; align-items: center; gap: .55rem; font-size: .92rem; color: rgba(255,255,255,.82); margin-top: -.2rem; }
.fd-job-deadline .fd-icon1 { width: 1.4rem; height: 1.4rem; }
.fd-job-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: auto; padding-top: .4rem; }

/* Application block — 2-column: pitch left (heading/text/deadline), contact card right */
.fd-applygrid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(2rem,4.5vw,3.75rem); align-items: start; }
/* Limit pitch text to a readable width (section stays full-width, text flush left) */
.fd-apply-pitch { max-width: 42rem; }
.fd-apply-pitch .fd-section-lead, .fd-apply-pitch .fd-apply-deadline { max-width: none; }
@media (max-width: 860px) { .fd-applygrid { grid-template-columns: 1fr; gap: 2.25rem; } .fd-apply-pitch { max-width: none; } }
.fd-apply-deadline { display: flex; align-items: flex-start; gap: .7rem; max-width: 52rem; margin-top: 1.4rem;
  color: #fff; font-weight: 500; font-size: 1.05rem; line-height: 1.5; }
.fd-apply-deadline .fd-icon1 { width: 1.7rem; height: 1.7rem; margin-top: .1rem; }
.fd-apply-card { display: flex; flex-direction: column; gap: 1.6rem;
  padding: clamp(1.6rem,2.8vw,2.15rem); border-radius: 22px;
  background: var(--glass-bg-strong); border: 1px solid var(--glass-border-strong); }
.fd-apply-person { display: flex; align-items: center; gap: 1rem; }
.fd-apply-person .fd-icon1 { width: 3rem; height: 3rem; }
.fd-apply-label { display: block; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-metal); }
.fd-apply-person h3 { font-size: clamp(1.3rem,2.2vw,1.75rem); font-weight: 600; color: #fff; line-height: 1.1; margin-top: .15rem; }
.fd-apply-lines { display: flex; flex-direction: column; gap: .55rem; }
.fd-apply-line { display: flex; align-items: center; gap: .8rem; color: rgba(255,255,255,.85); font-size: 1rem; line-height: 1.45; transition: color .2s ease; }
.fd-apply-line .fd-icon1 { width: 1.55rem; height: 1.55rem; }
a.fd-apply-line:hover { color: #fff; }
.fd-apply-line--static { color: rgba(255,255,255,.72); align-items: flex-start; }
.fd-apply-line--static .fd-icon1 { margin-top: .1rem; }
.fd-apply-privacy { max-width: 62rem; margin-top: clamp(1.5rem,2.6vw,2.1rem); font-size: .85rem; line-height: 1.6; color: rgba(255,255,255,.5); }
.fd-apply-privacy a { color: rgba(255,255,255,.8); text-decoration: underline; text-underline-offset: 2px; }
.fd-apply-privacy a:hover { color: #fff; }