/* =========================
   Poppins
========================= */

@font-face {
    font-family: "Poppins";
    src: url("/fonts/Poppins-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("/fonts/Poppins-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("/fonts/Poppins-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("/fonts/Poppins-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* =========================
   Inter
========================= */

@font-face {
    font-family: "Inter";
    src: url("/fonts/Inter/ttf/Inter-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("/fonts/Inter/ttf/Inter-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* =========================
   Noto Sans Thai
========================= */

@font-face {
    font-family: "Noto Sans Thai";
    src: url("/fonts/NotoSansThai-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* =========================
   JetBrains Mono
========================= */

@font-face {
    font-family: "JetBrains Mono";
    src: url("/fonts/JetBrainsMono-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("/fonts/JetBrainsMono-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("/fonts/JetBrainsMono-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   Fissionsoft theme  —  dark charcoal + mid-gray, yellow accent
   Fonts: Poppins (headings) / Inter + Noto Sans Thai (body)
   ============================================================ */

:root {
  --font-poppins: "Poppins";
    --font-inter: "Inter";
    --font-noto-thai: "Noto Sans Thai";
    --font-mono: "JetBrains Mono";
    --bs-body-font-family:var(--font-inter),var(--font-noto-thai),system-ui,sans-serif;
  /* Brand palette — Lamborghini-inspired: true black + gold */
  --fs-yellow: #f3d721;         /* gold accent (design primary) — matches logo dots */
  --fs-yellow-soft: #f5df4d;
  --fs-yellow-rgb: 243, 215, 33;
  --fs-gold-dark: #8d7d13;      /* pressed / hover-dark gold */
  --fs-ink: #000000;            /* absolute black — dominant surface */
  --fs-surface: #181818;        /* dark iron — deep sections */
  --fs-surface-2: #202020;      /* charcoal — raised cards/panels */
  --fs-line: rgba(255, 255, 255, 0.12);
  --fs-text: #ffffff;
  --fs-muted: #969696;          /* steel — muted text */

  /* Bootstrap variable overrides */
  --bs-body-bg: var(--fs-ink);
  --bs-body-color: var(--fs-text);
  --bs-body-font-family: var(--font-inter), var(--font-noto-thai), system-ui, sans-serif;
  --font-display: var(--font-poppins), var(--font-noto-thai), system-ui, sans-serif;
  --font-technical: var(--font-mono), ui-monospace, "SFMono-Regular", monospace;
  --bs-emphasis-color: #ffffff;
  --bs-border-color: var(--fs-line);
  --bs-primary: var(--fs-yellow);
  --bs-link-color: var(--fs-yellow);
  --bs-link-hover-color: var(--fs-yellow-soft);
  --bs-heading-color: var(--fs-text);

  /* Metro style — square corners everywhere */
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-2xl: 0;
  --bs-border-radius-pill: 0;
}

body {
  background-color: var(--fs-ink);
  color: var(--fs-text);
  font-family: var(--bs-body-font-family);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.font-head {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* Lamborghini voice — display headings SHOUT in uppercase, tight leading */
h1, h2, .display-cine {
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.98;
}

/* ---------- Section backgrounds ---------- */
.section {
  padding: 5.5rem 0;
}
.bg-ink { background-color: var(--fs-ink) !important; }
.bg-surface { background-color: var(--fs-surface) !important; }
.bg-surface-2 { background-color: var(--fs-surface-2) !important; }

.text-muted-soft { color: var(--fs-muted) !important; }
.text-yellow { color: var(--fs-yellow) !important; }

/* ---------- Yellow accent bits ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-technical);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fs-yellow);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--fs-yellow);
}
/* fission "bubbles" motif */
.bubbles {
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
}
.bubbles span {
  display: block;
  border-radius: 50%;
  background: var(--fs-yellow);
}
.bubbles span:nth-child(1) { width: 6px; height: 6px; opacity: 0.6; }
.bubbles span:nth-child(2) { width: 9px; height: 9px; opacity: 0.8; }
.bubbles span:nth-child(3) { width: 13px; height: 13px; }

/* ---------- Navbar (light bar so the logo stays legible) ---------- */
.fs-navbar {
  background-color: #ffffff;
  border-bottom: 3px solid var(--fs-yellow);
}
.fs-navbar .fs-logo-img {
  height: 30px;
  width: auto;
  display: block;
}
/* ---------- Wordmark logo (text based, no background) ---------- */
.fs-wordmark {
  display: inline-flex;
  align-items: flex-end;
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  padding-top: 8px;
}
.fs-wordmark-fission { color: #ffffff; }
.fs-wordmark-soft { color: #8a9099; }
.fs-wordmark-dots {
  position: absolute;
  top: -2px;
  left: 0.02em;
  display: flex;
  align-items: flex-end;
  gap: 0.12em;
}
.fs-wordmark-dots i {
  display: block;
  border-radius: 50%;
  background: var(--fs-yellow);
}
.fs-wordmark-dots i:nth-child(1) { width: 0.16em; height: 0.16em; opacity: 0.55; }
.fs-wordmark-dots i:nth-child(2) { width: 0.22em; height: 0.22em; opacity: 0.8; }
.fs-wordmark-dots i:nth-child(3) { width: 0.3em; height: 0.3em; }
.fs-navbar .nav-link {
  color: #555555;
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.5rem 0.9rem !important;
  position: relative;
  transition: color 0.15s ease;
}
.fs-navbar .nav-link:hover,
.fs-navbar .nav-link.active {
  color: #000000;
}
.fs-navbar .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: -2px;
  height: 2px;
  background: var(--fs-yellow);
}
.fs-navbar .navbar-toggler {
  border-color: rgba(0, 0, 0, 0.15);
}
.fs-navbar .navbar-toggler:focus { box-shadow: none; }
.fs-navbar .dropdown-toggle::after { vertical-align: 0.15em; }
.fs-dropdown {
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-top: 2px solid var(--fs-yellow);
  border-radius: 0;
  margin-top: 0.5rem;
  padding: 0.35rem 0;
}
.fs-dropdown .dropdown-item {
  color: #555555;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.5rem 1.1rem;
}
.fs-dropdown .dropdown-item:hover,
.fs-dropdown .dropdown-item:focus {
  background-color: rgba(var(--fs-yellow-rgb), 0.16);
  color: #000000;
}
.fs-dropdown .dropdown-item.active,
.fs-dropdown .dropdown-item:active {
  background-color: var(--fs-yellow);
  color: #000000;
}

/* ---------- Buttons ---------- */
.btn-yellow {
  --bs-btn-color: #000000;
  --bs-btn-bg: var(--fs-yellow);
  --bs-btn-border-color: var(--fs-yellow);
  --bs-btn-hover-color: #000000;
  --bs-btn-hover-bg: var(--fs-gold-dark);
  --bs-btn-hover-border-color: var(--fs-gold-dark);
  --bs-btn-active-bg: var(--fs-gold-dark);
  --bs-btn-active-border-color: var(--fs-gold-dark);
  --bs-btn-font-weight: 600;
  border-radius: 0;
  padding: 0.8rem 1.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.9rem;
}
/* transparent ghost — white border at 50% opacity */
.btn-outline-light-soft {
  --bs-btn-color: var(--fs-text);
  --bs-btn-border-color: rgba(255, 255, 255, 0.5);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.08);
  --bs-btn-hover-border-color: #ffffff;
  --bs-btn-font-weight: 600;
  border-radius: 0;
  padding: 0.8rem 1.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.9rem;
}

/* ---------- Cards ---------- */
.fs-card {
  background: var(--fs-surface-2);
  border: 1px solid var(--fs-line);
  border-radius: 0;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
}
.fs-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--fs-yellow-rgb), 0.5);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.fs-location-list {
  --bs-list-group-bg: transparent;
  --bs-list-group-color: inherit;
  --bs-list-group-border-color: transparent;
  --bs-list-group-action-color: inherit;
  --bs-list-group-action-hover-color: inherit;
  --bs-list-group-action-hover-bg: rgba(var(--fs-yellow-rgb), 0.06);
  --bs-list-group-action-active-color: inherit;
  --bs-list-group-action-active-bg: rgba(var(--fs-yellow-rgb), 0.1);
  --bs-list-group-active-color: inherit;
  --bs-list-group-active-bg: rgba(var(--fs-yellow-rgb), 0.1);
  --bs-list-group-active-border-color: rgba(var(--fs-yellow-rgb), 0.3);
}
.fs-location-item {
  text-align: left;
  padding: 0.6rem 0.7rem;
  margin: 0 -0.7rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.fs-location-item.active {
  border-color: rgba(var(--fs-yellow-rgb), 0.3);
}
/* metro accent — yellow top bar on hover */
.fs-card-accent { position: relative; }
.fs-card-accent::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--fs-yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.fs-card-accent:hover::before { transform: scaleX(1); }
.fs-icon-badge {
  width: 54px;
  height: 54px;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--fs-yellow-rgb), 0.12);
  color: var(--fs-yellow);
}
.fs-icon-img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.chip {
  display: inline-block;
  font-family: var(--font-technical);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.05);
  color: var(--fs-muted);
  border: 1px solid var(--fs-line);
}
.chip-yellow {
  background: rgba(var(--fs-yellow-rgb), 0.12);
  color: var(--fs-yellow);
  border-color: rgba(var(--fs-yellow-rgb), 0.35);
}

/* ---------- Hero banner (full-bleed background photo) ---------- */
.hero-banner {
  position: relative;
  overflow: hidden;
 /* min-height: clamp(520px, 82vh, 760px); */
  display: flex;
  align-items: center;
}
.hero-banner-img {
  object-fit: cover;
  object-position: center right;
  z-index: 0;
}
.hero-banner-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, var(--fs-ink) 0%, rgba(0, 0, 0, 0.82) 34%, rgba(0, 0, 0, 0.35) 70%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(0deg, var(--fs-ink) 2%, transparent 30%);
  pointer-events: none;
}
.hero-banner-content {
  z-index: 2;
  padding-top: 3.5rem;
  padding-bottom: 3rem;
}
.hero-banner-stats {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--fs-line);
  max-width: 640px;
}

/* ---------- Stats ---------- */
.stat-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--fs-yellow);
}

/* ---------- Footer ---------- */
.fs-footer {
  background: #0f1114;
  border-top: 1px solid var(--fs-line);
}
.fs-footer a {
  color: var(--fs-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.fs-footer a:hover { color: var(--fs-yellow); }
.fs-footer h6 {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fs-muted) !important;
  margin-bottom: 0.75rem !important;
}
.fs-footer a,
.fs-footer li {
  font-size: 0.82rem;
  line-height: 1.4;
}
.fs-footer .fs-foot-links { gap: 0.45rem !important; }
.fs-footer .eyebrow { font-size: 0.68rem; }
.fs-footer .small { font-size: 0.72rem; }

/* Soft-radius helpers — Bootstrap's .rounded-* utilities are neutralized by the
   metro square-corner theme above, so these two named values cover the few
   intentionally-rounded photo/logo containers (company/partner/cert logos, exec photo). */
.rounded-8 { border-radius: 8px; }
.rounded-12 { border-radius: 12px; }

/* Service/Product illustration containers */
.fs-service-image-container {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(var(--fs-yellow-rgb), 0.06) 0%, rgba(var(--fs-yellow-rgb), 0.02) 100%);
  border: 1px solid var(--fs-line);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.fs-service-image-container:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--fs-yellow-rgb), 0.4);
}
.fs-service-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1rem;
}
.fs-service-thumb {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 6px;
  padding: 0.4rem;
}
.fs-service-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* QR code container in Get in touch section */
.fs-qr-container {
  flex-shrink: 0;
  width: 72px;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--fs-line);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.fs-qr-container:hover {
  background: rgba(var(--fs-yellow-rgb), 0.08);
  border-color: rgba(var(--fs-yellow-rgb), 0.3);
}
.fs-qr-img {
  width: 100%;
  height: auto;
  display: block;
}

/* white panel that holds the 5 group company logos */
.fs-logo-panel {
  background: #c0c0c0;
  border-top: 3px solid var(--fs-yellow);
  padding: 1.5rem 1.5rem;
}
.fs-logo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  align-items: center;
}
@media (min-width: 576px) { .fs-logo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .fs-logo-grid { grid-template-columns: repeat(5, 1fr); } }
.fs-logo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  min-height: 68px;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
.fs-logo-cell:hover {
  filter: grayscale(0);
  opacity: 1;
  transform: translateY(-2px);
}
.fs-logo-cell img {
  max-width: 100%;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ---------- Latest news carousel ---------- */
.fs-carousel { position: relative; }
.fs-carousel-viewport { overflow: hidden; border: 1px solid var(--fs-line); }
.fs-carousel-slide {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--fs-surface-2);
}
@media (min-width: 768px) {
  .fs-carousel-slide { grid-template-columns: 1.1fr 1fr; }
}
.fs-carousel-media {
  position: relative;
  min-height: 160px;
  background-color: #0d0d0f;
  background-image: radial-gradient(circle at 50% 45%, rgba(var(--fs-yellow-rgb), 0.07), transparent 68%);
}
@media (min-width: 768px) { .fs-carousel-media { min-height: 240px; } }
.fs-carousel-media img { width: 100%; height: 100%; object-fit: contain; display: block; position: absolute; inset: 0; }
.fs-carousel-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem 1.25rem;
}
@media (min-width: 768px) { .fs-carousel-body { padding: 1.75rem 2rem; } }
.fs-carousel-body h3 { font-size: clamp(1rem, 4vw, 1.35rem); margin-bottom: 0.75rem !important; }
.fs-carousel-body p { font-size: 0.9rem; margin-bottom: 0.75rem !important; }
.fs-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  border: 1px solid var(--fs-line);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  z-index: 2;
}
.fs-carousel-arrow:hover { background: var(--fs-yellow); color: #000000; border-color: var(--fs-yellow); }
.fs-carousel-prev { left: 0; }
.fs-carousel-next { right: 0; }
.fs-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.85rem;
}
.fs-carousel-dot {
  width: 20px;
  height: 3px;
  background: var(--fs-line);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s ease;
}
.fs-carousel-dot.active { background: var(--fs-yellow); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  padding: 7rem 0 3.5rem;
  border-bottom: 1px solid var(--fs-line);
  position: relative;
  overflow: hidden;
}
.breadcrumb-fs {
  --bs-breadcrumb-divider-color: var(--fs-muted);
  --bs-breadcrumb-item-active-color: var(--fs-muted);
  font-size: 0.85rem;
  color: var(--fs-muted);
}
.breadcrumb-fs a { color: var(--fs-muted); text-decoration: none; }
.breadcrumb-fs a:hover { color: var(--fs-yellow); }

.page-hero-photo { min-height: clamp(360px, 46vh, 460px); display: flex; align-items: center; }
.page-hero-img { object-fit: cover; object-position: center 30%; z-index: 0; }
.page-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.25) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0%, transparent 40%);
  pointer-events: none;
}

/* ---------- Forms ---------- */
.form-control, .form-select {
  background-color: var(--fs-surface);
  border-color: var(--fs-line);
  color: var(--fs-text);
  padding: 0.75rem 1rem;
  border-radius: 0;
}
.form-control:focus, .form-select:focus {
  background-color: var(--fs-surface);
  color: var(--fs-text);
  border-color: var(--fs-yellow);
  box-shadow: 0 0 0 0.2rem rgba(var(--fs-yellow-rgb), 0.15);
}
.form-control::placeholder { color: #6b7280; }
.form-label { color: var(--fs-text); font-weight: 500; font-size: 0.9rem; }

/* selection */
::selection { background: var(--fs-yellow); color: #14161a; }

/* ============================================================
   Scroll-reveal animations
   ============================================================ */
.reveal {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal-up { transform: translateY(38px); }
.reveal-left { transform: translateX(-42px); }
.reveal-right { transform: translateX(42px); }
.reveal-zoom { transform: scale(0.94); }
/* cinematic masked reveal — content wipes up behind a clip mask */
.reveal-mask {
  transform: translateY(24px);
  clip-path: inset(0 0 100% 0);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    clip-path 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* floating banner image + bubbles */
@keyframes fs-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.fs-float { animation: fs-float 6s ease-in-out infinite; }

@keyframes fs-spin {
  to { transform: rotate(360deg); }
}

.fs-media {
  position: relative;
  border: 1px solid var(--fs-line);
  overflow: hidden;
}
.fs-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fs-media-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(20, 22, 26, 0.55));
  pointer-events: none;
}

.fs-highlight-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fs-yellow);
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--fs-yellow-rgb), 0.14), transparent 70%),
    var(--fs-surface);
}

.fs-navbar,
.fs-footer {
    font-size: 16px;
    line-height: 1.5;
}

.fs-footer h6 {
    line-height: 1.2;
}

.fs-footer .small {
    line-height: 1.5;
}

.fs-footer .small a {
    font-size: inherit;
    line-height: inherit;
}

.fs-footer .fs-qr-container p {
    font-family: inherit;
}

@font-face {
  font-family: "FSNavbarInter";
  src: url("/fonts/Inter/woff-hinted/Inter-React-Latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.fs-navbar {
  font-family: "FSNavbarInter", "Noto Sans Thai", system-ui, sans-serif;
}

.fs-footer {
    font-family: "FSNavbarInter", "Inter", "Noto Sans Thai", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

.fs-footer h6 {
    line-height: 1.2;
}

.fs-footer .small {
    line-height: 1.5;
}

.fs-footer .small a {
    font-size: inherit;
    line-height: inherit;
}

.fs-footer .fs-qr-container p {
    font-family: inherit;
}

.hero-banner {
    font-family: "FSNavbarInter", "Inter", "Noto Sans Thai", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

.hero-banner p {
    font-family: inherit;
}

#news-carousel .carousel-inner {
    display: grid;
}

#news-carousel .carousel-inner::after {
    display: none;
}

#news-carousel .carousel-item {
    display: block;
    grid-area: 1 / 1;
    float: none;
    margin-right: 0;
    visibility: hidden;
    pointer-events: none;
}

#news-carousel .carousel-item.active,
#news-carousel .carousel-item-next,
#news-carousel .carousel-item-prev {
    visibility: visible;
    pointer-events: auto;
}

#news-carousel .fs-carousel-slide {
    height: 100%;
    min-width: 0;
}

#news-carousel .fs-carousel-excerpt {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.75rem !important;
}

#news-carousel .fs-carousel-excerpt p {
    font-size: inherit;
    line-height: inherit;
}

#news-carousel .fs-carousel-excerpt > :last-child {
    margin-bottom: 0 !important;
}

#news-carousel .fs-carousel-media {
    position: relative;
    min-width: 0;
    min-height: 160px;
    overflow: hidden;
}

#news-carousel .fs-carousel-media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (min-width: 768px) {
    #news-carousel .fs-carousel-media {
        min-height: 240px;
    }
}

#news-carousel .carousel-item {
    transition: none;
}

@media (prefers-reduced-motion: no-preference) {
    #news-carousel .carousel-item.active,
    #news-carousel .carousel-item-next.carousel-item-start,
    #news-carousel .carousel-item-prev.carousel-item-end {
        transition: transform 0.6s ease-in-out;
    }
}

.fs-latest-news {
    font-family: "FSNavbarInter", "Inter", "Noto Sans Thai", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

.fs-latest-news p {
    font-family: inherit;
}

.fs-vision-page {
    font-family: "FSNavbarInter", "Inter", "Noto Sans Thai", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

.fs-vision-page p {
    font-family: inherit;
}

/* The Vision rich text contains a p inside the h2. */
.fs-vision-page .fs-vm-section h2 p {
    font: inherit;
    margin: 0;
}

/* The existing Mission rules read these variables, including its counter. */
.fs-vision-page .fs-vm-section {
    --font-inter: "FSNavbarInter", "Inter", "Noto Sans Thai", system-ui, sans-serif;
    --vm-muted: var(--fs-muted);
    --vm-yellow: var(--fs-yellow);
}

.fs-vision-page .fs-vm-mission {
    font-size: 1rem;
    line-height: 1.5;
}

.fs-vision-page .fs-vm-mission li::before,
.fs-vision-page .fs-vm-mission > p::before {
    font-weight: 700;
    line-height: 1.5;
}

/* Core Values descriptions: Inter 14px with a 21px line height. */
.fs-vision-page .bg-surface .fs-card p {
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
}

.fs-executive-page {
    font-family: "FSNavbarInter", "Inter", "Noto Sans Thai", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

.fs-executive-page p {
    font-family: inherit;
}

/* Rich text paragraphs inherit the quote wrapper's 14px italic gray text. */
.fs-executive-page .fs-card .fst-italic p {
    font: inherit;
    color: inherit;
    margin: 0;
}

.fs-projects-page {
    font-family: "FSNavbarInter", "Inter", "Noto Sans Thai", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

.fs-projects-page p {
    font-family: inherit;
}

/* Rich text paragraphs inherit the description wrapper's 14px gray text. */
.fs-projects-page .custom-text-truncate-2 p {
    font: inherit;
    color: inherit;
    margin: 0;
}

.fs-services-page {
    font-family: "FSNavbarInter", "Inter", "Noto Sans Thai", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

.fs-services-page p {
    font-family: inherit;
}

/* Bootstrap 5.2 on Umbraco does not define fw-medium. */
.fs-services-page .fs-card .fw-medium {
    font-weight: 500;
}

/* The original React page has no vertical Services label. */
.fs-services-page .hilite-title {
    display: none;
}

.fs-product-detail-page {
    font-family: "FSNavbarInter", "Inter", "Noto Sans Thai", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

.fs-product-detail-page p {
    font-family: inherit;
}

.fs-product-detail-page .product-description,
.fs-product-detail-page .text-detail {
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--fs-muted);
}

.fs-product-detail-page .product-description > p {
    margin: 0 0 0.5rem;
}

/* The current rich text represents its eight headings as p > strong. */
.fs-product-detail-page .product-description > p:has(> strong:only-child) {
    margin-top: 1.5rem;
}

.fs-product-detail-page .product-description > p > strong {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--fs-yellow);
    margin: 0;
}

.fs-product-detail-page .product-description ul,
.fs-product-detail-page .text-detail ul {
    margin: 0;
    padding-left: 2rem;
}

.fs-product-detail-page .product-description li > p,
.fs-product-detail-page .text-detail li > p {
    font: inherit;
    color: inherit;
    margin: 0;
}

.fs-product-detail-page .product-description > p:empty,
.fs-product-detail-page .text-detail > p:empty {
    display: none;
}

/* Feature and Benefit use h3 in Umbraco; the React headings use h2. */
.fs-product-detail-page .section-content h3.h5.text-yellow {
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

/* Match the React mb-4 spacing, overriding the current Bootstrap mb-5. */
.fs-product-detail-page > .bg-surface > .container > h2.h4 {
    margin-bottom: 1.5rem !important;
}


.fs-service-detail-page,
.fs-service-detail-page + section.section.bg-surface {
    font-family: "FSNavbarInter", "Inter", "Noto Sans Thai", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

.fs-service-detail-page p {
    font-family: inherit;
}

.fs-service-detail-page .service-detail-content .product-description {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--fs-muted);
}

.fs-service-detail-page .service-detail-content .product-description :is(p, ul, ol, li, blockquote) {
    font: inherit;
    color: inherit;
}

.fs-service-detail-page .service-detail-content .product-description p {
    margin: 0 0 0.5rem;
}

/* Inline labels, the opening quote, and ordinary emphasis are body text in React. */
.fs-service-detail-page .service-detail-content .product-description :is(strong, b) {
    display: inline;
    font: inherit;
    color: inherit;
    margin: 0;
}

/* The six true section headings must use h2 in the Rich Text source. */
.fs-service-detail-page .service-detail-content .product-description h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--fs-yellow);
    margin: 1.5rem 0 0.5rem;
}

.fs-service-detail-page .service-detail-content .product-description :is(ul, ol) {
    margin: 0 0 1.5rem;
    padding-left: 2rem;
}

.fs-service-detail-page .service-detail-content .product-description li > p {
    margin: 0;
}

.fs-service-detail-page .service-detail-content .product-description blockquote {
    margin: 0 0 0.5rem;
}

.fs-service-detail-page .service-detail-content .product-description blockquote > p {
    margin: 0;
}

.fs-service-detail-page .service-detail-content .product-description p:empty {
    display: none;
}

.fs-service-detail-page .service-detail-content .product-description p:has(> img:only-child) {
    margin-bottom: 1rem;
}

.fs-news-page {
    font-family: "FSNavbarInter", "Inter Fallback", "Noto Sans Thai", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

.fs-news-page p {
    font-family: inherit;
}

/* Rich Text paragraphs follow their description wrapper's font and color. */
.fs-news-page .fs-card .text-muted-soft.mb-0 p {
    font: inherit;
    color: inherit;
    margin: 0;
}

.fs-news-detail-page {
    font-family: "FSNavbarInter", "Inter", "Noto Sans Thai", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

.fs-news-detail-page p {
    font-family: inherit;
}

/* Keep Rich Text paragraphs 16px apart, as in React's gap-3 wrapper. */
.fs-news-detail-page .section div.text-muted-soft.fs-5.mb-0 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.fs-news-detail-page .section div.text-muted-soft.fs-5.mb-0 p {
    font: inherit;
    color: inherit;
    margin: 0;
}

.fs-csr-page {
    font-family: "FSNavbarInter", "Inter", "Noto Sans Thai", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

.fs-csr-page p {
    font-family: inherit;
}


.fs-csr-detail-page {
    font-family: "FSNavbarInter", "Inter", "Noto Sans Thai", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

.fs-csr-detail-page p {
    font-family: inherit;
}

.fs-csr-detail-page > .section-full {
    padding: 5.5rem 0;
}

/* The legacy decorative title does not appear in the React content. */
.fs-csr-detail-page .blog-single-space > .hilite-title {
    display: none;
}

.fs-csr-detail-page .single-blog-post {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 0;
}

.fs-csr-detail-page .single-blog-post > .sx-post-text {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--fs-muted);
}

.fs-csr-detail-page .sx-post-detail-subtitle {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    /* Override the existing Bootstrap text-white and mt-5 utilities. */
    color: var(--fs-yellow) !important;
    margin: 0 0 0.5rem !important;
}

.fs-csr-detail-page .sx-post-text p {
    font: inherit;
    color: inherit;
    margin: 0;
}

.fs-join-page {
    font-family: "FSNavbarInter", "Inter", "Noto Sans Thai", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

.fs-join-page p {
    font-family: inherit;
}

/* Benefit Rich Text already contains its own ul and li elements. */
.fs-join-page .job-responsibilities,
.fs-join-page .job-responsibilities ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.fs-join-page .job-responsibilities ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fs-join-page .job-responsibilities ul > li {
    display: flex;
    gap: 0.5rem;
    margin: 0;
    /* Override the existing disc !important from the Job detail CSS. */
    list-style-type: none !important;
}

.fs-join-page .job-responsibilities li::before {
    content: "\2022";
    flex-shrink: 0;
    color: var(--fs-yellow);
}

.fs-join-page .job-responsibilities :is(p, span) {
    font: inherit;
    margin: 0;
    /* Override the inline #cccccc color stored in the Rich Text. */
    color: inherit !important;
}

.fs-join-page .fs-join-intro {
    margin: 0 0 1rem;
}

.fs-join-page .fs-join-intro p {
    font: inherit;
    color: inherit;
    margin: 0;
}

/* How to Apply uses 14px body text, matching React's small utility. */
.fs-join-page .stat-num ~ .text-muted-soft {
    display: block;
    font-size: 0.875rem;
    line-height: 1.5;
}

.fs-join-page .stat-num ~ .text-muted-soft p {
    font: inherit;
    color: inherit;
    margin: 0;
}

.fs-contact-page {
    font-family: "FSNavbarInter", "Inter", "Noto Sans Thai", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

.fs-contact-page p {
    font-family: inherit;
}

/* Rich Text has its own p elements inside these wrappers. */
.fs-contact-page .page-hero .fs-5 p,
.fs-contact-page .fs-contact-head-address p,
.fs-contact-page .fs-location-item > .text-muted-soft p {
    font: inherit;
    color: inherit;
    margin: 0;
}

/* Reset the legacy .form-control height: 44px and font: 13px/20px.
   With the existing 12px vertical padding and 1px borders:
   input = 47px; textarea rows="3" = 89px, matching React.
*/
.fs-contact-page form .form-control {
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
    height: auto;
}

@font-face {
    font-family: "FSBlogsNotoThai";
    src: url("/fonts/NotoSansThai-React-Thai.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+2D7, U+303, U+331, U+E01-E5B, U+200C-200D, U+25CC;
}

.fs-blogs-page {
    font-family: "FSNavbarInter", "FSBlogsNotoThai", "Inter", "Noto Sans Thai", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

.fs-blogs-page p {
    font-family: inherit;
}

/* Keep Poppins for Latin headings; use React's variable Thai face for Thai. */
.fs-blogs-page :is(h1, h2, h3) {
    font-family: "Poppins", "FSBlogsNotoThai", "Noto Sans Thai", system-ui, sans-serif;
}

/* Rich Text already includes p elements inside these description divs. */
.fs-blogs-page .fs-card .text-muted-soft.mb-0 p {
    font: inherit;
    color: inherit;
    margin: 0;
}

/* Use with fs-blog-meta on the category/date/external-link row. */
.fs-blogs-page .fs-blog-meta > svg {
    flex-shrink: 0;
}

.fs-cloud-detail-page {
    font-family: "FSNavbarInter", "FSBlogsNotoThai", "Inter", "Noto Sans Thai", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

.fs-cloud-detail-page p {
    font-family: inherit;
}

.fs-cloud-detail-page :is(h1, h2, h3) {
    font-family: "Poppins", "FSBlogsNotoThai", "Noto Sans Thai", system-ui, sans-serif;
}

.fs-cloud-detail-page .fs-cloud-article {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--fs-muted);
}

.fs-cloud-detail-page .fs-cloud-article > p {
    font: inherit;
    color: inherit;
    margin: 0;
}

.fs-cloud-detail-page .fs-cloud-article > h2 {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--fs-yellow);
    margin: 0 0 0.5rem;
}

/* React groups each heading and paragraph, with 24px between groups. */
.fs-cloud-detail-page .fs-cloud-article > p + h2,
.fs-cloud-detail-page .fs-cloud-article > p + p {
    margin-top: 1.5rem;
}

/* Optional image-wrapper change described in the HTML guide. */
.fs-cloud-detail-page .fs-cloud-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    margin-bottom: 1.5rem;
}

.fs-cloud-detail-page .fs-cloud-media > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}



.fs-products-page {
    font-family: "FSNavbarInter", "Inter", "Noto Sans Thai", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

.fs-products-page p {
    font-family: inherit;
}

/* Bootstrap 5.2 does not define fw-medium. React also uses 0.95rem here. */
.fs-products-page .fs-card .fw-medium {
    font-size: 0.95rem;
    font-weight: 500;
    /* Preserve the width of a word when deciding whether the chip fits. */
    flex-basis: min-content;
    min-width: 0;
    overflow-wrap: break-word;
}

/* QAS has detail chips on every row. Move the chip below when needed. */
.fs-products-page .fs-card > .flex-column > .d-flex {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

.fs-products-page .fs-card > .flex-column > .d-flex > .chip {
    margin-left: auto;
}

.fs-products-page > .section-full {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
}

.fs-company-page {
    font-family: "FSNavbarInter", "Inter", "Noto Sans Thai", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

.fs-company-page p {
    font-family: inherit;
}

/* Custom.css uses this variable in an existing color !important rule. */
.fs-company-page .fs-company-profile {
    --company-muted: var(--fs-muted);
}

.fs-company-page .fs-company-description {
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0 0 1rem;
}

.fs-company-page .fs-company-description :is(p, span),
.fs-company-page .fs-company-address :is(p, span),
.fs-company-page .fs-vision-content :is(p, span),
.fs-company-page .fs-company-quote :is(p, span) {
    font: inherit;
    color: inherit;
    margin: 0;
}

.fs-company-page .fs-company-description > p + p {
    margin-top: 1rem;
}

.fs-company-page .fs-company-description > p:empty,
.fs-company-page .fs-mission-content > p:empty {
    display: none;
}

.fs-company-page .fs-mission-content {
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
}

.fs-company-page .fs-mission-content li {
    display: flex;
    gap: 1rem;
    font-size: 1rem;
    line-height: 1.5;
}

.fs-company-page .fs-mission-content li::before {
    flex: 0 0 auto;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
}

.fs-company-page .fs-mission-content li p {
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: inherit;
    margin: 0;
}

.fs-home-page {
    font-family: "FSNavbarInter", "Inter", "Noto Sans Thai", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

.fs-home-page p {
    font-family: inherit;
}

/* Rich Text already supplies its own paragraphs. */
.fs-home-page .fs-home-card-description {
    font-weight: 400;
}

.fs-home-page .fs-home-card-description :is(p, span) {
    font: inherit;
    color: inherit;
    margin: 0;
}

.fs-home-page .fs-home-card-description > p + p {
    margin-top: 1rem;
}

.fs-home-page .fs-home-card-description > p:empty {
    display: none;
}

/* The old p-t80 / p-b80 utilities reduce padding below the React spacing. */
.fs-home-page > .section-full.sx-why-choose-outer {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
}

.fs-project-detail-page {
    font-family: "FSNavbarInter", "Inter", "Noto Sans Thai", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

.fs-project-detail-page p {
    font-family: inherit;
}

.fs-project-detail-page .fs-project-description {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--fs-muted);
}

.fs-project-detail-page .fs-project-description > p {
    margin: 0 0 0.5rem;
}


.fs-job-detail-page {
    font-family: "FSNavbarInter", "Inter", "Noto Sans Thai", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

.fs-job-detail-page p {
    font-family: inherit;
}

.fs-job-detail-page .fs-job-list {
    font-size: 1rem;
    line-height: 1.5;
}

.fs-job-detail-page .fs-job-list.fs-job-benefits {
    font-size: 0.875rem;
}

.fs-job-detail-page .fs-job-list ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.fs-job-detail-page .fs-job-list ul > li {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
}

.fs-job-detail-page .fs-job-list li::before {
    content: "\2022";
    flex-shrink: 0;
    color: var(--fs-yellow);
}

.fs-job-detail-page .fs-job-list :is(p, span) {
    font: inherit;
    color: inherit;
    margin: 0;
}

.fs-job-detail-page .fs-job-list p:empty {
    display: none;
}