@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root {
  --public-navy: #061634;
  --public-indigo: #262262;
  --public-cyan: #25a9e1;
  --public-text: #4a5068;
}
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.public-richtext { overflow-wrap: anywhere; line-height: 1.85; color: var(--public-text); }
.public-richtext :where(p,ul,ol,blockquote,figure,table) { margin: 0 0 1.15rem; }
.public-richtext :where(h2,h3,h4) { color: var(--public-indigo); font-weight: 750; line-height: 1.25; margin: 1.7rem 0 .7rem; }
.public-richtext h2 { font-size: clamp(1.35rem, 3vw, 1.9rem); }
.public-richtext h3 { font-size: 1.25rem; }
.public-richtext ul { list-style: disc; padding-left: 1.5rem; }
.public-richtext ol { list-style: decimal; padding-left: 1.5rem; }
.public-richtext a { color: #0f72a8; text-decoration: underline; text-underline-offset: .22em; }
.public-richtext img { max-width: 100%; height: auto; border-radius: 1rem; }
.public-richtext blockquote { border-left: 3px solid var(--public-cyan); padding-left: 1rem; color: #374151; }
.public-richtext table { display: block; overflow-x: auto; max-width: 100%; }
.public-richtext th, .public-richtext td { border: 1px solid #d8e0ed; padding: .7rem; }
.public-richtext th { background: #f3f5f9; }
.public-grid-pattern { background-image: linear-gradient(rgba(255,255,255,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.065) 1px,transparent 1px); background-size: 44px 44px; }
.public-photo-fallback { background-image: radial-gradient(circle at 85% 12%,rgba(37,169,225,.20),transparent 38%),linear-gradient(130deg,#061634 0%,#262262 90%); }
.public-card { transition: transform .2s ease, box-shadow .2s ease; }
.public-card:hover { transform: translateY(-4px); box-shadow: 0 24px 45px -28px rgba(6,22,52,.40); }
[x-cloak] { display: none !important; }


/* Public Website v1.3: all public content follows the 1280px container. */
.public-site-header {
  font-family: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
  width: 100%;
  background-color: rgba(255,255,255,.98);
}
.public-site-header__inner {
  width: calc(100% - 48px);
  max-width: 1280px;
  min-height: 70px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 22px;
}
.public-site-header__brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
  text-decoration: none;
  color: #262262;
}
.public-site-header__logo {
  display: block;
  width: auto;
  height: 48px;
  max-width: 54px;
  object-fit: contain;
}
.public-site-header__brand-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 9px;
  background-color: #262262;
  color: white;
  font-size: 19px;
  font-weight: 800;
}
.public-site-header__brand-name {
  max-width: 265px;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.02em;
  overflow-wrap: break-word;
}
.public-site-header__nav {
  margin-left: auto;
  flex: 0 1 auto;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  white-space: nowrap;
}
/* The Navigation menu is still rendered by the existing recursive include. */
.public-site-header__nav > a,
.public-site-header__nav > details > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 11px 9px;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.3;
  font-weight: 700;
  color: #262262;
  text-decoration: none;
  border-radius: 7px;
  transition: color .2s ease, background-color .2s ease;
}
.public-site-header__nav > a:hover,
.public-site-header__nav > details > summary:hover {
  color: #0f72a8;
  background: #eaf8fe;
}
.public-site-header__nav > details { position: relative; }
.public-site-header__nav > details > div { white-space: normal; }
.public-site-header__cta {
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 39px;
  padding: 0 18px;
  border-radius: 10px;
  background: #25a9e1;
  color: #061634;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.35;
  box-shadow: 0 1px 1px rgba(0,0,0,.05);
  transition: background-color .2s ease, box-shadow .2s ease;
}
.public-site-header__cta:hover,
.public-site-header__mobile-cta:hover {
  background-color: #52bdeb;
  box-shadow: 0 6px 15px -10px rgba(6,22,52,.5);
}
.public-site-header__toggle {
  width: 44px;
  height: 44px;
  margin-left: auto;
  border-radius: 12px;
}
.public-site-header__mobile-cta { font-size: 13px; }
@media (max-width: 1279px) {
  .public-site-header__inner { min-height: 72px; }
  .public-site-header__brand-name { font-size: 14px; }
}
@media (max-width: 639px) {
  .public-site-header__inner { width: calc(100% - 32px); }
  .public-site-header__logo { height: 43px; max-width: 48px; }
  .public-site-header__brand-name { font-size: 12.5px; max-width: min(52vw, 230px); }
}
/* Maintain top offset for sticky header when navigating via hash links. */
#consultation { scroll-margin-top: 86px; }


/* Shared width for all public page content, aligned with the site header. */
.public-container {
  width: calc(100% - 48px);
  max-width: 1280px;
  margin-inline: auto;
}
@media (max-width: 639px) {
  .public-container { width: calc(100% - 32px); }
}

/* Full-bleed hero background; text and navigation controls retain 1280px alignment. */
.public-hero {
  --public-hero-speed: 7500ms;
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  margin: 0;
  background: #061634;
  overflow: hidden;
  font-family: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
}
.public-hero__stage { position: relative; height: clamp(430px, 44vw, 580px); }
.public-hero__panel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 650ms ease;
}
.public-hero__panel.is-active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}
/* Never show outgoing caption: prevents stacked text when background timers throttle. */
.public-hero__panel:not(.is-active) .public-hero__content {
  visibility: hidden;
}
/* Keep first frame visible until Alpine initializes on slower connections. */
.public-hero:not([data-alpine-ready]) .public-hero__panel:first-child {
  opacity: 1;
}
.public-hero__image {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transform: scale(1);
  will-change: transform;
}
.public-hero__panel.is-active .public-hero__image.is-zooming {
  animation: public-hero-slow-zoom var(--public-hero-speed) linear both;
}
@keyframes public-hero-slow-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}
.public-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(5, 19, 46, .94) 0%,
    rgba(5, 19, 46, .81) 31%,
    rgba(5, 19, 46, .52) 60%,
    rgba(5, 19, 46, .12) 100%);
}
.public-hero__overlay--right {
  background: linear-gradient(270deg,
    rgba(5, 19, 46, .94) 0%,
    rgba(5, 19, 46, .81) 31%,
    rgba(5, 19, 46, .52) 60%,
    rgba(5, 19, 46, .12) 100%);
}
.public-hero__overlay--center {
  background: linear-gradient(90deg,
    rgba(5, 19, 46, .36) 0%,
    rgba(5, 19, 46, .82) 34%,
    rgba(5, 19, 46, .82) 66%,
    rgba(5, 19, 46, .36) 100%);
}
.public-hero__content {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; align-items: center;
  padding: 55px 0 86px;
  color: white;
}
.public-hero__content--left { justify-content: flex-start; text-align: left; }
.public-hero__content--right { justify-content: flex-end; text-align: right; }
.public-hero__content--center { justify-content: center; text-align: center; }
.public-hero__caption { width: 100%; max-width: 565px; }
.public-hero__eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 700; line-height: 1.45;
  color: #81d7fb;
  margin: 0 0 20px;
}
.public-hero__content--center .public-hero__eyebrow { justify-content: center; }
.public-hero__content--right .public-hero__eyebrow { justify-content: flex-end; }
.public-hero__eyebrow-line { display: inline-block; width: 39px; height: 5px; border-radius: 3px; background: #25a9e1; }
.public-hero__title {
  max-width: 100%; margin: 0;
  color: white; font-weight: 800;
  font-size: clamp(32px, 3.65vw, 49px);
  line-height: 1.13; letter-spacing: -.035em;
  text-wrap: balance;
}
.public-hero__description {
  max-width: 480px; margin: 21px 0 0;
  font-size: clamp(13px, 1.15vw, 16px);
  line-height: 1.8; color: #eef4ff;
}
.public-hero__content--right .public-hero__description { margin-left: auto; }
.public-hero__content--center .public-hero__description { margin-inline: auto; }
.public-hero__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px; margin-top: 30px;
}
.public-hero__content--right .public-hero__actions { justify-content: flex-end; }
.public-hero__content--center .public-hero__actions { justify-content: center; }
.public-hero__button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 12px 24px;
  border-radius: 10px; font-size: 13px; font-weight: 700; line-height: 1.3;
  white-space: nowrap; text-decoration: none; transition: background .2s, border-color .2s;
}
.public-hero__button--primary { background: #25a9e1; color: #061634; }
.public-hero__button--primary:hover { background: #52bdeb; }
.public-hero__button--secondary { border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.04); color: #fff; }
.public-hero__button--secondary:hover { background: rgba(255,255,255,.16); }
.public-hero__button:focus-visible, .public-hero__control:focus-visible, .public-hero__indicator:focus-visible {
  outline: 3px solid #81d7fb; outline-offset: 3px;
}
.public-hero__controls {
  position: absolute; z-index: 5;
  bottom: 31px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 1280px;
  display: flex; align-items: center; gap: 10px;
}
.public-hero__control {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.5); border-radius: 50%;
  background: rgba(6,22,52,.17); color: white;
  font-size: 24px; line-height: 1;
  cursor: pointer; transition: background .2s;
}
.public-hero__control:hover { background: rgba(255,255,255,.18); }
.public-hero__control--pause { font-size: 13px; }
.public-hero__indicators { display: flex; align-items: center; gap: 7px; margin: 0 4px; }
.public-hero__indicator {
  width: 22px; height: 4px; padding: 0; border: 0; border-radius: 2px;
  background: rgba(255,255,255,.43); cursor: pointer; transition: background .2s;
}
.public-hero__indicator.is-active { background: #25a9e1; }
@media (max-width: 639px) {
  .public-hero__stage { height: 520px; }
  .public-hero__content { padding: 35px 0 100px; }
  .public-hero__title { font-size: clamp(30px, 8vw, 40px); }
  .public-hero__description { font-size: 13px; }
  .public-hero__actions { gap: 10px; }
  .public-hero__button { padding: 11px 14px; min-height: 42px; font-size: 12px; }
  .public-hero__controls { width: calc(100% - 32px); bottom: 23px; }
  .public-hero__control { width: 38px; height: 38px; }
  .public-hero__indicator { width: 14px; }
  .public-hero__overlay--left { background: linear-gradient(90deg, rgba(5,19,46,.9), rgba(5,19,46,.4)); }
  .public-hero__overlay--right { background: linear-gradient(270deg, rgba(5,19,46,.9), rgba(5,19,46,.4)); }
}
@media (prefers-reduced-motion: reduce) {
  .public-hero__image, .public-hero__panel.is-active .public-hero__image.is-zooming { animation: none; transform: none; }
  .public-hero__panel { transition-duration: 0ms; }
}


/* Core Values (slug contract: chemistry-is-our-core-value).
   The section wrapper is emitted only for a published matching Page.
   The white section background is full-width; content uses .public-container (1280px). */
.public-values {
  width: 100%;
  background: #fff;
  padding: clamp(68px, 7vw, 100px) 0 clamp(74px, 7vw, 104px);
  font-family: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
  scroll-margin-top: 86px;
}
.public-values__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  align-items: start;
  gap: 36px;
}
.public-values__title {
  max-width: 530px;
  margin: 0;
  color: #262262;
  font-size: clamp(27px, 2.5vw, 36px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.045em;
}
.public-values__rule {
  display: block;
  width: 64px;
  height: 6px;
  border-radius: 999px;
  background: #25a9e1;
  margin-top: 16px;
}
.public-values__description {
  margin: 7px 0 0;
  color: #4a5068;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.85;
  overflow-wrap: anywhere;
}
.public-values__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 46px;
}
.public-values__card {
  min-width: 0;
  min-height: 284px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 27px 30px;
  border-radius: 27px;
  overflow-wrap: anywhere;
}
.public-values__card--cyan {
  background: #25a9e1;
  color: #061634;
}
.public-values__card--indigo {
  background: #262262;
  color: #fff;
}
.public-values__card--light {
  background: #e8e8ed;
  color: #262262;
}

/* Chemistry Core Value - Jodit Short Description */

.public-values__description > p {
    margin: 0;
}

.public-values__description > p + p {
    margin-top: 10px;
}

/* The icon artwork (including its own hexagon) comes from the uploaded file.
   Keep the icon slot even when no image exists so card headings stay aligned. */
.public-values__icon-badge {
  width: 78px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 78px;
  background: transparent;
  clip-path: none;
}
.public-values__icon-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.public-values__card-title {
  margin: 22px 0 0;
  color: inherit;
  font-size: clamp(15px, 1.28vw, 18px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.025em;
}
.public-values__card-title a {
  color: inherit;
  text-decoration: none;
}
.public-values__card-title a:hover,
.public-values__card-title a:focus-visible {
  text-decoration: underline;
  text-underline-offset: .18em;
}
.public-values__card-title a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
}
.public-values__card-description {
  margin: 18px 0 0;
  color: inherit;
  opacity: .9;
  font-size: 12.5px;
  line-height: 1.75;
}
@media (max-width: 899px) {
  .public-values__intro { grid-template-columns: 1fr; gap: 18px; }
  .public-values__description { margin-top: 0; max-width: 690px; }
  .public-values__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .public-values__cards { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
  .public-values__card { min-height: 235px; padding: 24px; border-radius: 22px; }
  .public-values__title { font-size: clamp(27px, 7.1vw, 33px); }
}


/* ============================================================
   ABOUT US SECTION
   Slug contract: about-us

   Design:
   - Full-width dark background
   - Left company description panel
   - Right company highlights
   - Uploaded icons only
   - Content maximum width: 1280px
   ============================================================ */


/* Main section */

.public-about {
    width: 100%;

    padding: clamp(64px, 6vw, 84px) 0;

    background: #050f27;
    color: #ffffff;

    font-family:
        "Plus Jakarta Sans",
        "Segoe UI",
        Arial,
        sans-serif;

    scroll-margin-top: 86px;
}


/* Main layout */

.public-about__layout {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.16fr)
        minmax(0, 0.95fr);

    gap: clamp(36px, 5vw, 66px);

    align-items: center;
}


/* Layout when there are no highlights */

.public-about__layout--solo {
    grid-template-columns: minmax(0, 1fr);
}

.public-about__layout--solo .public-about__summary {
    max-width: 720px;
}


/* ============================================================
   LEFT COLUMN
   ============================================================ */

.public-about__summary {
    min-width: 0;

    padding: clamp(36px, 5vw, 64px);

    background: #142957;

    border-radius:
        105px 32px 105px 32px;
}


/* Company title */

.public-about__title {
    max-width: 450px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(28px, 3vw, 36px);
    font-weight: 800;

    line-height: 1.12;
    letter-spacing: -0.045em;

    overflow-wrap: anywhere;
}


/* Blue underline */

.public-about__accent {
    display: block;

    width: 65px;
    height: 5px;

    margin: 18px 0 30px;

    border-radius: 999px;

    background: #25a9e1;
}


/* Company description */

.public-about__body {
    color: #c0cbed;

    font-size: 13px;
    font-weight: 400;

    line-height: 1.65;

    overflow-wrap: anywhere;
}


/* Rich text paragraphs */

.public-about__body :where(
    p,
    ul,
    ol,
    blockquote
) {
    margin: 0 0 18px;
}

.public-about__body :where(
    p,
    ul,
    ol,
    blockquote
):last-child {
    margin-bottom: 0;
}


/* Rich text lists */

.public-about__body :where(ul, ol) {
    padding-left: 20px;
}

.public-about__body ul {
    list-style: disc;
}

.public-about__body ol {
    list-style: decimal;
}


/* Rich text links */

.public-about__body a {
    color: #7fd7fc;

    text-decoration: underline;
}


/* Optional rich text headings */

.public-about__body :where(h3, h4) {
    margin: 15px 0 8px;

    color: #ffffff;

    font-weight: 700;
}


/* ============================================================
   RIGHT COLUMN — COMPANY HIGHLIGHTS
   ============================================================ */

.public-about__highlights {
    min-width: 0;
}


/* Highlights heading */

.public-about__highlights-heading {
    margin: 0 0 8px;

    color: #ffffff;

    font-size: 16px;
    font-weight: 800;

    line-height: 1.4;
}


/* Highlights list */

.public-about__highlights-list {
    margin: 0;
    padding: 0;

    list-style: none;
}


/* Individual highlight */

.public-about__highlight {
    display: flex;

    align-items: center;

    min-height: 71px;

    gap: 16px;

    padding: 11px 0;

    border-top:
        1px solid rgba(255, 255, 255, 0.18);
}


/* Last row bottom border */

.public-about__highlight:last-child {
    border-bottom:
        1px solid rgba(255, 255, 255, 0.18);
}


/* ============================================================
   UPLOADED ICONS

   No additional hexagon.
   Empty icon slots preserve alignment.
   ============================================================ */

.public-about__icon-slot {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    background: none;

    clip-path: none;
}


/* Original uploaded image */

.public-about__icon {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* Highlight text */

.public-about__highlight-label {
    min-width: 0;

    color: #ffffff;

    font-size: 13px;
    font-weight: 600;

    line-height: 1.45;

    overflow-wrap: anywhere;
}


/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */

@media (max-width: 899px) {

    .public-about__layout {
        grid-template-columns: 1fr;

        gap: 42px;
    }

    .public-about__summary {
        border-radius:
            76px 26px 76px 26px;
    }

}


/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width: 639px) {

    .public-about {
        padding: 48px 0 56px;
    }

    .public-about__summary {
        padding: 40px 28px;

        border-radius:
            60px 22px 60px 22px;
    }

    .public-about__title {
        font-size: clamp(27px, 7vw, 34px);
    }

    .public-about__layout {
        gap: 36px;
    }

    .public-about__highlight {
        gap: 14px;

        min-height: 68px;
    }

}

/* ============================================================
   VISION & MISSION

   Parent slug: vision-and-mission

   - Full-width dark background
   - Vision card on the left
   - Mission card on the right
   - Uploaded icons only
   - Responsive layout
   ============================================================ */


/* Main section */

.public-vision-mission {
    width: 100%;

    padding:
        clamp(48px, 5vw, 68px)
        0
        clamp(66px, 7vw, 100px);

    background: #050f27;
    color: #ffffff;

    scroll-margin-top: 86px;

    font-family:
        "Plus Jakarta Sans",
        "Segoe UI",
        Arial,
        sans-serif;
}


/*
 * About Us and Vision & Mission use the same background.
 * Avoid excessive vertical spacing when they appear together.
 */

.public-about + .public-vision-mission {
    padding-top: 0;
}


/* ============================================================
   CARD GRID
   ============================================================ */

.public-vision-mission__grid {
    width: 100%;
    max-width: 1280px;

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: 20px;

    align-items: stretch;
}


/* Single card layout */

.public-vision-mission__grid--single {
    grid-template-columns: minmax(0, 1fr);
}


/* ============================================================
   COMMON CARD
   ============================================================ */

.public-vision-mission__card {
    position: relative;
    isolation: isolate;

    min-width: 0;
    min-height: 330px;

    overflow: hidden;

    border-radius: 30px;

    padding: clamp(32px, 3.5vw, 46px);
}


/* ============================================================
   VISION CARD
   ============================================================ */

.public-vision-mission__card--vision {
    background: #292367;
}


/* Molecular network decoration */

.public-vision-mission__network {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0.66;

    pointer-events: none;

    z-index: 0;
}


/* ============================================================
   MISSION CARD
   ============================================================ */

.public-vision-mission__card--mission {
    background: #142d5d;

    border-left: 6px solid #25a9e1;

    padding-left: clamp(30px, 3.5vw, 46px);
}


/* ============================================================
   CARD CONTENT
   ============================================================ */

.public-vision-mission__card-content {
    position: relative;

    z-index: 1;
}


/* ============================================================
   UPLOADED ICONS

   No generated hexagon.
   Empty slot must preserve the same dimensions.
   ============================================================ */

.public-vision-mission__icon-slot {
    width: 78px;
    height: 78px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 78px;

    background: transparent;

    clip-path: none;
}


/* Original uploaded icon */

.public-vision-mission__icon {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* ============================================================
   CARD TITLE
   ============================================================ */

.public-vision-mission__title {
    margin: 13px 0 10px;

    color: #ffffff;

    font-size: clamp(20px, 2vw, 23px);

    font-weight: 800;

    line-height: 1.25;

    letter-spacing: -0.025em;
}


/* ============================================================
   CARD DESCRIPTION
   ============================================================ */

.public-vision-mission__description {
    margin: 0;

    color: #f0f4ff;

    font-size: 14px;

    line-height: 1.65;

    overflow-wrap: anywhere;
}


/* Rich text paragraphs and lists */

.public-vision-mission__description :where(
    p,
    ul,
    ol
) {
    margin: 0 0 12px;
}

.public-vision-mission__description :where(
    p,
    ul,
    ol
):last-child {
    margin-bottom: 0;
}


/* Rich text lists */

.public-vision-mission__description ul,
.public-vision-mission__description ol {
    padding-left: 20px;
}

.public-vision-mission__description ul {
    list-style: disc;
}

.public-vision-mission__description ol {
    list-style: decimal;
}


/* Rich text links */

.public-vision-mission__description a {
    color: #89dbfb;

    text-decoration: underline;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 899px) {

    .public-vision-mission__grid {
        grid-template-columns: 1fr;
    }

    .public-vision-mission__card {
        min-height: 290px;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 639px) {

    .public-vision-mission {
        padding-bottom: 56px;
    }

    .public-vision-mission__card {
        padding: 29px 26px;

        min-height: 260px;

        border-radius: 24px;
    }

    .public-vision-mission__card--mission {
        padding-left: 26px;
    }

    .public-vision-mission__description {
        font-size: 13px;
    }

}

/* ============================================================
   APPLICATIONS WE SERVE

   Parent slug: services
   Page type: SERVICE

   - Full-width white background
   - 1280px outer content container
   - Seven-column desktop grid
   - Uploaded icons only
   - Reserved icon space
   ============================================================ */


/* Main section */

.public-applications {
    width: 100%;

    background: #ffffff;
    color: #262262;

    padding:
        clamp(68px, 6vw, 92px)
        0
        clamp(78px, 7vw, 112px);

    scroll-margin-top: 86px;
}


/* Inner content */

.public-applications__inner {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
}


/* ============================================================
   SECTION HEADING
   ============================================================ */

.public-applications__intro {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    align-items: center;

    gap: clamp(24px, 5vw, 70px);
}


/* Title */

.public-applications__title {
    margin: 0;

    font-size: clamp(30px, 3.2vw, 38px);
    font-weight: 800;

    line-height: 1.15;
    letter-spacing: -0.04em;

    overflow-wrap: anywhere;
}


/* Cyan underline */

.public-applications__rule {
    display: block;

    width: 64px;
    height: 5px;

    margin-top: 18px;

    background: #25a9e1;

    border-radius: 999px;
}


/* Description */

.public-applications__lead {
    margin: 0;

    color: #4a5068;

    font-size: 14px;
    line-height: 1.65;

    overflow-wrap: anywhere;
}


/* ============================================================
   APPLICATIONS GRID
   ============================================================ */

.public-applications__list {
    display: grid;

    grid-template-columns:
        repeat(7, minmax(0, 1fr));

    gap: 20px 14px;

    padding: 0;

    margin: clamp(42px, 4.5vw, 56px) 0 0;

    list-style: none;
}


/* Individual item */

.public-applications__item {
    min-width: 0;

    text-align: center;
}


/* Item link */

.public-applications__link {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;

    height: 100%;

    color: #262262;

    text-decoration: none;

    border-radius: 12px;
}


/* Hover effect */

.public-applications__link:hover
.public-applications__item-title,

.public-applications__link:focus-visible
.public-applications__item-title {
    color: #0f72a8;
}


/* Keyboard accessibility */

.public-applications__link:focus-visible {
    outline: 3px solid #25a9e1;
    outline-offset: 5px;
}


/* ============================================================
   ICONS

   Images come directly from CMS.
   No generated background or hexagon.
   ============================================================ */


/* Reserved icon space */

.public-applications__icon-slot {
    width: 74px;
    height: 74px;

    flex: 0 0 74px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: transparent;

    clip-path: none;
}


/* Uploaded icon */

.public-applications__icon {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* Application name */

.public-applications__item-title {
    max-width: 148px;

    color: #262262;

    font-size: 12px;
    font-weight: 700;

    line-height: 1.35;

    overflow-wrap: anywhere;

    transition: color 150ms ease;
}


/* ============================================================
   RESPONSIVE — SMALL DESKTOP / TABLET
   ============================================================ */

@media (max-width: 1099px) {

    .public-applications__list {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        row-gap: 32px;
    }

}


/* ============================================================
   RESPONSIVE — TABLET / MOBILE
   ============================================================ */

@media (max-width: 699px) {

    .public-applications__intro {
        grid-template-columns: 1fr;

        gap: 22px;
    }

    .public-applications__list {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 28px 12px;
    }

}


/* ============================================================
   RESPONSIVE — SMALL MOBILE
   ============================================================ */

@media (max-width: 449px) {

    .public-applications {
        padding: 56px 0 68px;
    }

    .public-applications__list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ============================================================
   INDUSTRIAL CHEMICAL PRODUCTS

   Slug: industrial-chemical-products

   - Full-width navy background
   - 1280px content container
   - Left description
   - Right category image carousel
   - Grayscale photography
   ============================================================ */

.public-industrial {
    width: 100%;

    padding: clamp(64px, 6vw, 94px) 0;

    background: #050f27;
    color: #ffffff;

    scroll-margin-top: 86px;
}


/* Main layout */

.public-industrial__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(0, 1fr);

    align-items: center;

    gap: clamp(42px, 6vw, 84px);
}

.public-industrial__layout--text-only {
    grid-template-columns: minmax(0, 1fr);
}


/* ============================================================
   LEFT COLUMN
   ============================================================ */

.public-industrial__intro {
    min-width: 0;
}

.public-industrial__title {
    margin: 0;

    color: #ffffff;

    font-size: clamp(30px, 3.2vw, 39px);
    font-weight: 800;

    line-height: 1.16;
    letter-spacing: -0.04em;
}

.public-industrial__rule {
    display: block;

    width: 64px;
    height: 5px;

    margin: 18px 0 29px;

    border-radius: 999px;

    background: #25a9e1;
}

.public-industrial__lead {
    margin: 0 0 16px;

    color: #c6d1ea;

    font-size: 14px;
    line-height: 1.7;
}

.public-industrial__body {
    color: #b5c4e2;

    font-size: 13px;
    line-height: 1.7;

    overflow-wrap: anywhere;
}

.public-industrial__body :where(p, ul, ol) {
    margin: 0 0 12px;
}

.public-industrial__body :where(p, ul, ol):last-child {
    margin-bottom: 0;
}

.public-industrial__body :where(ul, ol) {
    padding-left: 20px;
}

.public-industrial__body ul {
    list-style: disc;
}

.public-industrial__body ol {
    list-style: decimal;
}

.public-industrial__body a {
    color: #83d8ff;
    text-decoration: underline;
}


/* ============================================================
   RIGHT COLUMN — CATEGORY CAROUSEL
   ============================================================ */

.public-industrial__carousel {
    min-width: 0;
}


/* Image viewport */

.public-industrial__viewport {
    position: relative;

    width: 100%;

    aspect-ratio: 5 / 4;

    overflow: hidden;

    background: #142957;

    border-radius: 66px 22px 66px 22px;
}


/* Each slide */

.public-industrial__slide {
    position: absolute;
    inset: 0;

    display: block;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 650ms ease,
        visibility 650ms;
}

.public-industrial__slide.is-active {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    z-index: 1;
}


/* Category photo */

.public-industrial__photo {
    width: 100%;
    height: 100%;

    object-fit: cover;

    /* Display the original uploaded image colors */
    filter: none;

    transition: transform 5.5s linear;
}

.public-industrial__slide.is-active
.public-industrial__photo {
    transform: scale(1.035);
}


/* Image caption */

.public-industrial__caption {
    position: absolute;

    inset: auto 0 0;

    padding: 58px 30px 22px;

    background: linear-gradient(
        to top,
        rgba(3, 12, 32, 0.88),
        transparent
    );

    color: #ffffff;

    font-size: 13px;
    font-weight: 750;

    line-height: 1.4;
}


/* ============================================================
   CAROUSEL CONTROLS
   ============================================================ */

.public-industrial__controls {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding-top: 13px;
}


/* Slide indicators */

.public-industrial__dots {
    display: flex;
    flex-wrap: wrap;

    align-items: center;

    gap: 7px;
}

.public-industrial__dot {
    width: 22px;
    height: 4px;

    padding: 0;

    border: 0;
    border-radius: 99px;

    background: #56617b;

    cursor: pointer;
}

.public-industrial__dot.is-active {
    background: #25a9e1;
}


/* Previous / Next / Pause */

.public-industrial__buttons {
    display: flex;
    gap: 8px;
}

.public-industrial__control {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 43px;
    height: 43px;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;

    background: transparent;
    color: #ffffff;

    font-size: 24px;

    cursor: pointer;

    transition:
        border-color 0.2s,
        background-color 0.2s;
}

/* Smaller Pause / Play icon */

.public-industrial__control[data-category-toggle] {
    font-size: 13px;
    line-height: 1;
    letter-spacing: -2px;
}

.public-industrial__control:hover {
    border-color: #25a9e1;

    background: rgba(37, 169, 225, 0.12);
}


/* Keyboard accessibility */

.public-industrial__control:focus-visible,
.public-industrial__dot:focus-visible,
.public-industrial__slide:focus-visible {
    outline: 3px solid #25a9e1;
    outline-offset: 4px;
}


/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */

@media (max-width: 850px) {

    .public-industrial__layout {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .public-industrial__viewport {
        max-height: 510px;
    }

}


/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width: 639px) {

    .public-industrial {
        padding: 55px 0 66px;
    }

    .public-industrial__viewport {
        border-radius: 46px 18px 46px 18px;
    }

    .public-industrial__caption {
        padding: 48px 20px 19px;
    }

}


/* Accessibility: reduced motion */

@media (prefers-reduced-motion: reduce) {

    .public-industrial__slide,
    .public-industrial__photo {
        transition: none;
    }

    .public-industrial__slide.is-active
    .public-industrial__photo {
        transform: none;
    }

}

/* ==========================================================
   PRODUCT CATALOG
   Category information + Product accordion
   ========================================================== */

.public-product-catalog {
    width: 100%;
    padding: 18px 0 90px;
    background: #050f27;
    color: #ffffff;
    scroll-margin-top: 86px;
}

/* One category block */

.public-product-catalog__group {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr);
    align-items: start;
    gap: clamp(40px, 5vw, 76px);

    padding: 56px 0 68px;

    border-top: 2px solid #25a9e1;

    scroll-margin-top: 100px;
}

/* ==========================================================
   LEFT COLUMN
   ========================================================== */

/* ==========================================================
   PRODUCT CATALOG - STICKY CATEGORY INFORMATION
   ========================================================== */

.public-product-catalog__category {
    min-width: 0;

    position: sticky;

    /* Sticky below the fixed website header */
    top: 104px;

    align-self: start;
}

.public-product-catalog__icon-slot {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: 92px;
    height: 84px;

    margin-bottom: 20px;
}

.public-product-catalog__icon {
    width: 92px;
    height: 84px;

    object-fit: contain;
}

.public-product-catalog__category-title {
    margin: 0 0 14px;

    color: #f0f4ff;

    font-size: clamp(24px, 2.2vw, 29px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.035em;

    overflow-wrap: anywhere;
}

.public-product-catalog__category-excerpt {
    margin: 0 0 23px;

    max-width: 440px;

    color: #aab8d3;

    font-size: 14px;
    line-height: 1.75;
}

.public-product-catalog__category-body {
    max-width: 440px;

    margin-bottom: 23px;

    color: #c0cce0;

    font-size: 13px;
    line-height: 1.75;

    overflow-wrap: anywhere;
}

.public-product-catalog__category-body p {
    margin: 0 0 10px;
}

.public-product-catalog__category-body :is(ul, ol) {
    margin: 0 0 12px;
    padding-left: 20px;
}

.public-product-catalog__category-body ul,
.public-product-catalog__richtext ul {
    list-style: disc;
}

.public-product-catalog__category-body ol,
.public-product-catalog__richtext ol {
    list-style: decimal;
}

.public-product-catalog__category-body a,
.public-product-catalog__richtext a {
    color: #7ed9ff;
    text-decoration: underline;
}

/* Category meta information */

.public-product-catalog__meta {
    margin-bottom: 24px;
}

.public-product-catalog__meta strong {
    display: block;
    margin-bottom: 4px;

    color: #f2f5ff;

    font-size: 13px;
    font-weight: 700;
}

.public-product-catalog__meta p {
    margin: 0;

    color: #aab8d3;

    font-size: 13px;
    line-height: 1.65;
}

/* Category CTA */

.public-product-catalog__request {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 11px 20px;

    border-radius: 9px;

    background: #25a9e1;
    color: #061634;

    font-size: 12px;
    font-weight: 600;
    text-decoration: none;

    transition: background-color 0.2s ease;
}

.public-product-catalog__request:hover {
    background: #52bdeb;
}


/* ==========================================================
   RIGHT COLUMN: PRODUCT ACCORDION
   ========================================================== */

.public-product-catalog__products {
    min-width: 0;
}

.public-product-catalog__accordion {
    margin: 0;

    border-bottom: 1px solid rgba(191, 208, 239, 0.2);
}

.public-product-catalog__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    padding: 18px 8px;

    list-style: none;
    cursor: pointer;

    transition: background-color 0.2s ease;
}

.public-product-catalog__summary::-webkit-details-marker {
    display: none;
}

.public-product-catalog__summary::marker {
    content: "";
}

.public-product-catalog__summary:hover {
    background: rgba(255, 255, 255, 0.045);
}

.public-product-catalog__summary-text {
    display: flex;
    flex: 1;
    flex-direction: column;

    min-width: 0;
    gap: 4px;
}

.public-product-catalog__product-title {
    color: #ffffff;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.public-product-catalog__product-excerpt {
    color: #abc0e5;

    font-size: 13px;
    line-height: 1.55;
}

/* Plus / minus indicator */

.public-product-catalog__toggle {
    position: relative;

    display: block;
    flex: 0 0 36px;

    width: 36px;
    height: 36px;

    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.public-product-catalog__toggle::before,
.public-product-catalog__toggle::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    width: 14px;
    height: 1.5px;

    border-radius: 2px;
    background: #ffffff;

    transform: translate(-50%, -50%);
}

.public-product-catalog__toggle::after {
    transform:
        translate(-50%, -50%)
        rotate(90deg);
}

/* Active / expanded product */

.public-product-catalog__accordion[open]
> .public-product-catalog__summary {
    padding: 18px 12px;

    border-radius: 10px;

    background: #142f63;
}

.public-product-catalog__accordion[open]
.public-product-catalog__toggle {
    border-color: #25a9e1;
    background: #25a9e1;
}

.public-product-catalog__accordion[open]
.public-product-catalog__toggle::before {
    background: #061634;
}

.public-product-catalog__accordion[open]
.public-product-catalog__toggle::after {
    display: none;
}

/* Expanded details */

.public-product-catalog__details {
    padding: 14px 8px 22px;
}

.public-product-catalog__richtext {
    color: #bdcbe4;

    font-size: 13px;
    line-height: 1.75;

    overflow-wrap: anywhere;
}

.public-product-catalog__richtext :is(p, ul, ol) {
    margin: 0 0 12px;
}

.public-product-catalog__richtext :is(ul, ol) {
    padding-left: 20px;
}

.public-product-catalog__richtext :is(h2, h3, h4, strong) {
    color: #ffffff;
    font-weight: 700;
}

.public-product-catalog__richtext :is(h2, h3, h4) {
    margin: 15px 0 8px;
}

.public-product-catalog__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 12px;

    margin-top: 18px;
}

/* Product detail link */

.public-product-catalog__details-link {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: #8edbff;

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;
}

.public-product-catalog__details-link:hover {
    color: #ffffff;
}

/* Product inquiry link */

.public-product-catalog__product-request {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;
    padding: 10px 17px;

    border-radius: 9px;

    background: #262262;
    color: #ffffff;

    font-size: 12px;
    font-weight: 600;
    text-decoration: none;

    transition: background-color 0.2s ease;
}

.public-product-catalog__product-request:hover {
    background: #39358b;
}

/* Empty product state */

.public-product-catalog__empty {
    padding: 20px 8px;

    color: #9baccc;

    font-size: 13px;
    line-height: 1.65;
}

/* Focus accessibility */

.public-product-catalog__summary:focus-visible,
.public-product-catalog__request:focus-visible,
.public-product-catalog__details-link:focus-visible,
.public-product-catalog__product-request:focus-visible {
    outline: 3px solid #25a9e1;
    outline-offset: 4px;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {

    .public-product-catalog__category {
        position: static;
    }

    .public-product-catalog__group {
        grid-template-columns: 1fr;
        gap: 32px;

        padding: 44px 0 58px;
    }

    .public-product-catalog__category-excerpt,
    .public-product-catalog__category-body {
        max-width: 100%;
    }
}

@media (max-width: 639px) {

    .public-product-catalog {
        padding-bottom: 62px;
    }

    .public-product-catalog__group {
        gap: 26px;

        padding: 35px 0 48px;
    }

    .public-product-catalog__category-title {
        font-size: 24px;
    }

    .public-product-catalog__summary {
        padding: 16px 4px;
        gap: 12px;
    }

    .public-product-catalog__product-title {
        font-size: 14px;
    }

    .public-product-catalog__toggle {
        flex-basis: 33px;
        width: 33px;
        height: 33px;
    }

    .public-product-catalog__details {
        padding-left: 4px;
        padding-right: 4px;
    }
}

/* ==========================================================
   PUBLIC WEBSITE - RICH SHORT DESCRIPTION
   ========================================================== */

.public-excerpt {
    overflow-wrap: anywhere;
}

.public-excerpt p {
    margin: 0 0 10px;
}

.public-excerpt p:last-child {
    margin-bottom: 0;
}

.public-excerpt ul {
    list-style-type: disc;
    padding-left: 22px;
    margin: 10px 0;
}

.public-excerpt ol {
    list-style-type: decimal;
    padding-left: 22px;
    margin: 10px 0;
}

.public-excerpt li {
    display: list-item;
    margin-bottom: 4px;
}

.public-excerpt strong,
.public-excerpt b {
    font-weight: 700;
}

.public-excerpt em,
.public-excerpt i {
    font-style: italic;
}

.public-excerpt u {
    text-decoration: underline;
}

.public-excerpt a {
    color: #52bdeb;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ==========================================================
   PRODUCT CATALOG - STRUCTURED PRODUCT FACTS
   ========================================================== */

.public-product-facts {
    display: grid;
    gap: 14px;

    margin: 0;
    padding: 0;
}

.public-product-facts__row {
    display: grid;

    grid-template-columns: 120px minmax(0, 1fr);
    column-gap: 22px;

    align-items: start;
}

.public-product-facts__row dt {
    margin: 0;

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.7;
}

.public-product-facts__row dd {
    min-width: 0;
    margin: 0;

    color: #abc0e5;

    font-size: 13px;
    font-weight: 400;
    line-height: 1.7;

    overflow-wrap: anywhere;
}

/* Responsive */

@media (max-width: 480px) {

    .public-product-facts__row {
        grid-template-columns: 110px minmax(0, 1fr);
        column-gap: 12px;
    }

}

/* ==========================================================
   YOUR CHEMICAL SOLUTIONS PARTNER
   Sticky left / static list right
   ========================================================== */

.public-chemical-solutions {
    width: 100%;
    padding: 100px 0 110px;

    background: #0a1b40;
    color: #ffffff;

    scroll-margin-top: 86px;
}

/* Main two-column layout */

.public-chemical-solutions__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(0, 1fr);

    gap: clamp(48px, 6vw, 90px);

    align-items: start;
}

/* ==========================================================
   LEFT: STICKY INFORMATION
   ========================================================== */

.public-chemical-solutions__intro {
    position: sticky;
    top: 104px;

    align-self: start;
    min-width: 0;
}

.public-chemical-solutions__title {
    max-width: 500px;

    margin: 0;

    color: #f0f4ff;

    font-size: clamp(30px, 3.2vw, 42px);
    font-weight: 800;
    line-height: 1.08;

    letter-spacing: -0.045em;
}

.public-chemical-solutions__accent {
    display: block;

    width: 72px;
    height: 6px;

    margin-top: 22px;

    border-radius: 99px;
    background: #25a9e1;
}

.public-chemical-solutions__description {
    max-width: 470px;

    margin-top: 30px;

    color: #aab8d3;

    font-size: 15px;
    line-height: 1.8;
}

.public-chemical-solutions__description p {
    margin: 0 0 12px;
}

.public-chemical-solutions__description p:last-child {
    margin-bottom: 0;
}

.public-chemical-solutions__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    max-width: 100%;
    min-height: 50px;

    margin-top: 30px;
    padding: 14px 28px;

    border-radius: 12px;

    background: #292467;
    color: #ffffff;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;

    text-align: center;
    text-decoration: none;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.public-chemical-solutions__cta:hover {
    background: #39328b;
    transform: translateY(-2px);
}

.public-chemical-solutions__cta:focus-visible {
    outline: 3px solid #25a9e1;
    outline-offset: 4px;
}

/* ==========================================================
   RIGHT: SOLUTIONS LIST
   ========================================================== */

.public-chemical-solutions__list {
    min-width: 0;
}

.public-chemical-solutions__item {
    display: grid;

    grid-template-columns: 72px minmax(0, 1fr);

    gap: 22px;
    align-items: start;

    padding: 28px 0;

    border-top: 1px solid rgba(190, 208, 240, 0.23);
}

.public-chemical-solutions__item:last-child {
    border-bottom: 1px solid rgba(190, 208, 240, 0.23);
}

/* Image slot keeps all text aligned */

.public-chemical-solutions__icon-slot {
    display: flex;

    align-items: flex-start;
    justify-content: center;

    width: 64px;
    height: 64px;
}

.public-chemical-solutions__icon {
    display: block;

    width: 64px;
    height: 64px;

    object-fit: contain;
}

/* Item content */

.public-chemical-solutions__item-content {
    min-width: 0;
}

.public-chemical-solutions__item-title {
    margin: 0 0 5px;

    color: #ffffff;

    font-size: clamp(16px, 1.5vw, 19px);
    font-weight: 700;
    line-height: 1.4;

    letter-spacing: -0.025em;
}

.public-chemical-solutions__item-description {
    color: #b1c6eb;

    font-size: 13px;
    line-height: 1.7;

    overflow-wrap: anywhere;
}

.public-chemical-solutions__item-description p {
    margin: 0 0 8px;
}

.public-chemical-solutions__item-description p:last-child {
    margin-bottom: 0;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {

    .public-chemical-solutions {
        padding: 72px 0 85px;
    }

    .public-chemical-solutions__layout {
        grid-template-columns: 1fr;
        gap: 46px;
    }

    .public-chemical-solutions__intro {
        position: static;
    }

    .public-chemical-solutions__title {
        max-width: 650px;
    }

    .public-chemical-solutions__description {
        max-width: 650px;
    }
}

@media (max-width: 639px) {

    .public-chemical-solutions {
        padding: 58px 0 70px;
    }

    .public-chemical-solutions__layout {
        gap: 36px;
    }

    .public-chemical-solutions__title {
        font-size: clamp(28px, 8vw, 36px);
    }

    .public-chemical-solutions__description {
        font-size: 14px;
    }

    .public-chemical-solutions__item {
        grid-template-columns: 58px minmax(0, 1fr);

        gap: 16px;
        padding: 24px 0;
    }

    .public-chemical-solutions__icon-slot,
    .public-chemical-solutions__icon {
        width: 54px;
        height: 54px;
    }

    .public-chemical-solutions__item-title {
        font-size: 16px;
    }

    .public-chemical-solutions__cta {
        padding-inline: 20px;
    }
}

/* ==========================================================
   STEP A CONSULTATION
   Four-step horizontal process
   ========================================================== */

.public-consultation-steps {
    width: 100%;
    padding: 64px 0 82px;

    background: #0a1b40;
    color: #ffffff;

    scroll-margin-top: 86px;
}

/* Four equal columns */

.public-consultation-steps__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    align-items: start;
}

/* Individual step */

.public-consultation-steps__item {
    position: relative;
    min-width: 0;
}

/* Number area */

.public-consultation-steps__badge-wrap {
    position: relative;

    display: flex;
    align-items: center;

    height: 58px;
    margin-bottom: 18px;
}

/* Purple numbered hexagon */

.public-consultation-steps__badge {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 60px;

    width: 60px;
    height: 54px;

    background: #292467;
    color: #ffffff;

    clip-path: polygon(
        25% 0%,
        75% 0%,
        100% 50%,
        75% 100%,
        25% 100%,
        0% 50%
    );

    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}

/* Dashed cyan connector */

.public-consultation-steps__item:not(:last-child)
.public-consultation-steps__badge-wrap::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 76px;
    right: -16px;

    border-top: 2px dashed #25a9e1;

    transform: translateY(-50%);
}

/* Step title */

.public-consultation-steps__title {
    margin: 0 0 6px;

    color: #ffffff;

    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;

    letter-spacing: -0.025em;
}

/* Step description */

.public-consultation-steps__description {
    color: #b1c0dd;

    font-size: 13px;
    font-weight: 400;
    line-height: 1.7;

    overflow-wrap: anywhere;
}

.public-consultation-steps__description p {
    margin: 0 0 8px;
}

.public-consultation-steps__description p:last-child {
    margin-bottom: 0;
}

/* ==========================================================
   TABLET: 2 columns
   ========================================================== */

@media (max-width: 900px) {

    .public-consultation-steps {
        padding: 60px 0 74px;
    }

    .public-consultation-steps__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 40px;
        row-gap: 42px;
    }

    /* End the connector at each row */

    .public-consultation-steps__item:nth-child(2)
    .public-consultation-steps__badge-wrap::after {
        display: none;
    }
}

/* ==========================================================
   MOBILE: vertical stepper
   ========================================================== */

@media (max-width: 600px) {

    .public-consultation-steps {
        padding: 50px 0 62px;
    }

    .public-consultation-steps__grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .public-consultation-steps__item {
        display: grid;
        grid-template-columns: 60px minmax(0, 1fr);
        column-gap: 20px;

        padding-bottom: 36px;
    }

    .public-consultation-steps__item:last-child {
        padding-bottom: 0;
    }

    .public-consultation-steps__badge-wrap {
        height: 54px;
        margin-bottom: 0;
    }

    .public-consultation-steps__badge {
        width: 54px;
        height: 50px;
        flex-basis: 54px;
    }

    /* Change horizontal connector to vertical */

    .public-consultation-steps__item:not(:last-child)
    .public-consultation-steps__badge-wrap::after {
        display: block;

        top: 62px;
        bottom: auto;
        left: 27px;
        right: auto;

        width: 0;
        height: 36px;

        border-top: 0;
        border-left: 2px dashed #25a9e1;

        transform: none;
    }

    .public-consultation-steps__content {
        min-width: 0;
        padding-top: 5px;
    }

    .public-consultation-steps__title {
        font-size: 15px;
    }

    .public-consultation-steps__description {
        font-size: 13px;
    }
}

/* ==========================================================
   CONSULTATION CTA BANNER
   Static homepage section
   ========================================================== */

.public-consultation-cta {
    width: 100%;
    padding: 44px 0 70px;

    background: #0a1b40;
    color: #ffffff;

    scroll-margin-top: 86px;
}

/* Banner */

.public-consultation-cta__banner {
    position: relative;
    isolation: isolate;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 0.8fr);

    align-items: center;

    gap: 60px;

    min-height: 245px;

    padding: 54px 64px;

    overflow: hidden;

    border-radius: 42px;

    background:
        linear-gradient(
            115deg,
            #102452 0%,
            #102452 55%,
            #0c2050 100%
        );
}

/* Molecular network background */

.public-consultation-cta__pattern {
    position: absolute;
    inset: 0;

    z-index: -1;

    width: 100%;
    height: 100%;

    pointer-events: none;
}

/* ==========================================================
   LEFT CONTENT
   ========================================================== */

.public-consultation-cta__content {
    position: relative;
    min-width: 0;

    max-width: 540px;
}

.public-consultation-cta__title {
    max-width: 500px;

    margin: 0 0 12px;

    color: #ffffff;

    font-size: clamp(24px, 2.5vw, 30px);
    font-weight: 800;

    line-height: 1.15;
    letter-spacing: -0.035em;
}

.public-consultation-cta__description {
    max-width: 520px;

    margin: 0;

    color: #c0cde7;

    font-size: 14px;
    font-weight: 400;

    line-height: 1.75;
}

/* ==========================================================
   RIGHT CTA
   ========================================================== */

.public-consultation-cta__action {
    position: relative;

    display: flex;
    justify-content: flex-end;

    min-width: 0;
}

.public-consultation-cta__button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 50px;

    padding: 14px 28px;

    border-radius: 12px;

    background: #25a9e1;
    color: #061634;

    font-size: 14px;
    font-weight: 500;

    line-height: 1.5;
    text-align: center;
    text-decoration: none;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.public-consultation-cta__button:hover {
    background: #51bdef;
    transform: translateY(-2px);
}

.public-consultation-cta__button:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 4px;
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

    .public-consultation-cta {
        padding: 35px 0 60px;
    }

    .public-consultation-cta__banner {
        grid-template-columns: 1fr;

        gap: 28px;

        min-height: 0;
        padding: 44px 42px;

        border-radius: 30px;
    }

    .public-consultation-cta__action {
        justify-content: flex-start;
    }
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 639px) {

    .public-consultation-cta {
        padding: 28px 0 55px;
    }

    .public-consultation-cta__banner {
        padding: 34px 26px;

        gap: 24px;

        border-radius: 24px;
    }

    .public-consultation-cta__title {
        font-size: 25px;
    }

    .public-consultation-cta__description {
        font-size: 13px;
    }

    .public-consultation-cta__action {
        width: 100%;
    }

    .public-consultation-cta__button {
        width: 100%;

        padding: 14px 18px;

        font-size: 13px;
    }
}

/* ==========================================================
   PUBLIC GALLERY
   Responsive masonry-style grid
   ========================================================== */

.public-gallery {
    width: 100%;
    padding: 85px 0 105px;

    background: #050f27;
    color: #ffffff;

    scroll-margin-top: 86px;
}

/* ==========================================================
   HEADER
   ========================================================== */

.public-gallery__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 35px;

    margin-bottom: 34px;
}

.public-gallery__heading {
    min-width: 0;
}

.public-gallery__title {
    margin: 0;

    color: #ffffff;

    font-size: clamp(27px, 2.8vw, 34px);
    font-weight: 800;

    line-height: 1.2;
    letter-spacing: -0.035em;
}

.public-gallery__accent {
    display: block;

    width: 58px;
    height: 5px;

    margin-top: 16px;

    background: #25a9e1;
    border-radius: 5px;
}

.public-gallery__description {
    margin: 23px 0 0;

    color: #aabbd9;

    font-size: 13px;
    line-height: 1.75;
}

/* ==========================================================
   GROUP FILTERS
   ========================================================== */

.public-gallery__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;

    gap: 8px;
}

.public-gallery__filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 37px;
    padding: 9px 17px;

    border: 1px solid rgba(184, 205, 239, 0.2);
    border-radius: 999px;

    background: transparent;
    color: #c0cce4;

    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;

    cursor: pointer;
    white-space: nowrap;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.public-gallery__filter:hover {
    border-color: #25a9e1;
    color: #ffffff;
}

.public-gallery__filter.is-active {
    border-color: #292467;
    background: #292467;
    color: #ffffff;
}

/* ==========================================================
   GALLERY GRID
   Variable card heights
   ========================================================== */

.public-gallery__grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    grid-auto-rows: clamp(150px, 15vw, 195px);
    grid-auto-flow: dense;

    gap: 16px;
}

/* Each gallery image */

.public-gallery__card {
    position: relative;

    display: block;

    min-width: 0;
    min-height: 0;

    padding: 0;

    overflow: hidden;

    border: 0;
    border-radius: 18px;

    background: #142e52;

    text-align: left;
    cursor: pointer;

    grid-row: span 1;
}

/*
 * Masonry-style layout:
 *
 * Image 1: tall
 * Image 2: normal
 * Image 3: tall
 * Image 4: normal
 *
 * Repeat the pattern for more images.
 */

.public-gallery__card:nth-child(6n + 1),
.public-gallery__card:nth-child(6n + 3) {
    grid-row: span 2;
}

/* Gallery image */

.public-gallery__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.55s ease;
}

.public-gallery__card:hover .public-gallery__image {
    transform: scale(1.055);
}

/* Bottom gradient and caption */

.public-gallery__overlay {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: flex-end;

    padding: 15px;

    background: linear-gradient(
        180deg,
        transparent 45%,
        rgba(3, 10, 28, 0.78) 100%
    );

    pointer-events: none;
}

.public-gallery__caption {
    display: block;

    color: #ffffff;

    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;

    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Accessibility */

.public-gallery__card:focus-visible,
.public-gallery__filter:focus-visible,
.public-gallery__lightbox-close:focus-visible {
    outline: 3px solid #25a9e1;
    outline-offset: 4px;
}

/* ==========================================================
   LIGHTBOX
   ========================================================== */

.public-gallery [x-cloak] {
    display: none !important;
}

.public-gallery__lightbox {
    position: fixed;
    inset: 0;

    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 28px;

    background: rgba(2, 8, 24, 0.96);
}

.public-gallery__lightbox-content {
    position: relative;

    width: 100%;
    max-width: 1100px;

    text-align: center;
}

.public-gallery__lightbox-close {
    position: absolute;

    top: -44px;
    right: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;

    font-size: 17px;
    cursor: pointer;
}

.public-gallery__lightbox-image {
    display: block;

    width: auto;
    max-width: 100%;
    max-height: 78vh;

    margin-inline: auto;

    border-radius: 12px;

    object-fit: contain;
}

.public-gallery__lightbox-caption {
    margin: 16px 0 0;

    color: #c5d2ed;

    font-size: 13px;
    line-height: 1.6;
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

    .public-gallery {
        padding: 70px 0 85px;
    }

    .public-gallery__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .public-gallery__filters {
        justify-content: flex-start;
    }

    .public-gallery__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 165px;
    }

    .public-gallery__card:nth-child(n) {
        grid-row: span 1;
    }

    .public-gallery__card:nth-child(4n + 1) {
        grid-row: span 2;
    }
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 600px) {

    .public-gallery {
        padding: 55px 0 70px;
    }

    .public-gallery__title {
        font-size: 28px;
    }

    .public-gallery__header {
        gap: 25px;
    }

    .public-gallery__filters {
        gap: 7px;
    }

    .public-gallery__filter {
        font-size: 11px;
        padding: 8px 13px;
    }

    .public-gallery__grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 205px;

        gap: 14px;
    }

    .public-gallery__card:nth-child(n) {
        grid-row: span 1;
    }

    .public-gallery__card:nth-child(3n + 1) {
        grid-row: span 2;
    }

    .public-gallery__card {
        border-radius: 15px;
    }

    .public-gallery__lightbox {
        padding: 16px;
    }

    .public-gallery__lightbox-image {
        max-height: 72vh;
    }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

    .public-gallery__image {
        transition: none;
    }

    .public-gallery__card:hover .public-gallery__image {
        transform: none;
    }
}

/* ==========================================================
   GALLERY LIGHTBOX - PREVIOUS / NEXT NAVIGATION
   ========================================================== */

.public-gallery__lightbox-nav {
    position: absolute;
    z-index: 10;

    top: 50%;
    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;

    background: rgba(15, 33, 73, 0.85);
    color: #ffffff;

    font-size: 22px;
    line-height: 1;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.public-gallery__lightbox-nav--prev {
    left: 12px;
}

.public-gallery__lightbox-nav--next {
    right: 12px;
}

.public-gallery__lightbox-nav:hover {
    background: #25a9e1;
    border-color: #25a9e1;
    color: #061634;
}

.public-gallery__lightbox-nav:focus-visible {
    outline: 3px solid #25a9e1;
    outline-offset: 4px;
}

/* Title only appears inside the lightbox */

.public-gallery__lightbox-caption {
    margin: 18px 0 0;

    color: #ffffff;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;

    text-align: center;
}

/* Current image / total images */

.public-gallery__lightbox-counter {
    margin: 6px 0 0;

    color: #94a9cf;

    font-size: 12px;
    text-align: center;
}

/* Mobile */

@media (max-width: 639px) {

    .public-gallery__lightbox-nav {
        width: 38px;
        height: 38px;

        font-size: 17px;
    }

    .public-gallery__lightbox-nav--prev {
        left: 4px;
    }

    .public-gallery__lightbox-nav--next {
        right: 4px;
    }

    .public-gallery__lightbox-caption {
        font-size: 13px;
    }
}


/* ==========================================================
   CONTACT US + REQUEST A QUOTE
   ========================================================== */

#contact-us {
    position: relative;
    width: 100%;
    padding: 100px 0;

    background: #061b36;
    color: #ffffff;

    overflow: hidden;
}

/* Subtle background decoration */

#contact-us::before {
    content: "";
    position: absolute;

    width: 520px;
    height: 520px;

    top: -240px;
    left: -200px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(37, 169, 225, 0.10) 0%,
        transparent 70%
    );

    pointer-events: none;
}

/* ==========================================================
   CONTENT CONTAINER — MAX 1280PX
   ========================================================== */

#contact-us > .public-container {
    position: relative;
    z-index: 1;

    width: calc(100% - 48px);
    max-width: 1280px;

    margin-inline: auto;
}

/* ==========================================================
   TWO-COLUMN LAYOUT
   ========================================================== */

#contact-us > .public-container > .grid {
    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    align-items: start;
    gap: 64px;
}

/* ==========================================================
   LEFT COLUMN — CONTACT INFORMATION
   ========================================================== */

#contact-us > .public-container > .grid > div:first-child {
    min-width: 0;
}

/* Section eyebrow */

#contact-us > .public-container > .grid > div:first-child > span {
    display: inline-block;

    color: #25a9e1;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Section heading */

#contact-us h2 {
    margin: 20px 0 0;

    color: #ffffff;

    font-size: clamp(34px, 4vw, 52px);
    font-weight: 800;
    line-height: 1.15;

    letter-spacing: -1px;
}

/* Short Description */

#contact-us .public-excerpt {
    margin-top: 24px;

    max-width: 540px;

    color: #b9c9df;

    font-size: 15px;
    line-height: 1.9;
}

#contact-us .public-excerpt p {
    margin: 0 0 12px;
}

/* Contact details */

#contact-us > .public-container > .grid > div:first-child > .space-y-7 {
    display: flex;
    flex-direction: column;

    gap: 26px;

    margin-top: 40px;
}

#contact-us > .public-container > .grid > div:first-child > .space-y-7 > div {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

/* Contact labels */

#contact-us .space-y-7 > div > p:first-child {
    margin: 0;

    color: #25a9e1;

    font-size: 12px;
    font-weight: 700;

    line-height: 1.5;
    letter-spacing: 1.2px;

    text-transform: uppercase;
}

/* Contact links */

#contact-us .space-y-7 a {
    display: inline-block;
    align-self: flex-start;

    color: #ffffff;

    font-size: 16px;
    line-height: 1.7;

    text-decoration: none;
    overflow-wrap: anywhere;

    transition: color 0.2s ease;
}

#contact-us .space-y-7 a:hover {
    color: #25a9e1;
}

/* Office address */

#contact-us .space-y-7 > div > p:not(:first-child) {
    margin: 0;

    color: #c3d1e5;

    font-size: 15px;
    line-height: 1.8;

    white-space: pre-line;
}

/* ==========================================================
   GOOGLE MAPS BUTTON
   ========================================================== */

#contact-us > .public-container > .grid > div:first-child > .mt-10 {
    margin-top: 36px;
}

#contact-us > .public-container > .grid > div:first-child > .mt-10 a {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    padding: 14px 22px;

    border: 1px solid rgba(37, 169, 225, 0.45);
    border-radius: 10px;

    background: rgba(37, 169, 225, 0.08);

    color: #ffffff;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

#contact-us > .public-container > .grid > div:first-child > .mt-10 a:hover {
    background: #25a9e1;
    border-color: #25a9e1;
    color: #061b36;

    transform: translateY(-2px);
}

/* ==========================================================
   RIGHT COLUMN — REQUEST A QUOTE CARD
   ========================================================== */

#request-a-quote {
    position: relative;

    min-width: 0;
    width: 100%;

    padding: 40px;

    border: 1px solid #e7edf5;
    border-radius: 20px;

    background: #ffffff;
    color: #10233d;

    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);

    scroll-margin-top: 110px;
}

/* Card eyebrow */

#request-a-quote > span {
    display: inline-block;

    color: #168ac1;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Card heading */

#request-a-quote h3 {
    margin: 14px 0 0;

    color: #061b36;

    font-size: clamp(25px, 3vw, 32px);
    font-weight: 800;

    line-height: 1.3;
    letter-spacing: -0.5px;
}

/* Card description */

#request-a-quote > p {
    margin: 16px 0 0;

    color: #64748b;

    font-size: 14px;
    line-height: 1.8;
}

/* ==========================================================
   RESPONSIVE — TABLET
   ========================================================== */

@media (max-width: 1023px) {

    #contact-us {
        padding: 80px 0;
    }

    #contact-us > .public-container > .grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    #request-a-quote {
        max-width: 100%;
    }
}

/* ==========================================================
   RESPONSIVE — MOBILE
   ========================================================== */

@media (max-width: 639px) {

    #contact-us {
        padding: 64px 0;
    }

    #contact-us > .public-container {
        width: calc(100% - 32px);
    }

    #contact-us > .public-container > .grid {
        gap: 36px;
    }

    #contact-us h2 {
        font-size: 34px;
    }

    #contact-us .public-excerpt {
        font-size: 14px;
        line-height: 1.8;
    }

    #contact-us .space-y-7 a {
        font-size: 15px;
    }

    #request-a-quote {
        padding: 28px 22px;
        border-radius: 16px;
    }

    #request-a-quote h3 {
        font-size: 26px;
    }
}

/* ==========================================================
   CONTACT US — MOLECULAR NETWORK BACKGROUND
   Reference: Customer Contact Us Design
   ========================================================== */

#contact-us {
    background: #0b2050;
    isolation: isolate;
}

/* Decorative molecular network */

#contact-us::after {
    content: "";

    position: absolute;
    z-index: 0;

    inset: 0;

    width: 100%;
    height: 100%;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 760' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%234c78c5' stroke-width='1.5' opacity='.40'%3E%3Cpath d='M-80 335 L165 280 L410 360 L685 150 L970 245 L1240 90 L1520 165'/%3E%3Cpath d='M165 280 L270 35 L525 -25 L685 150 L780 460 L1050 385 L1240 90'/%3E%3Cpath d='M-80 540 L165 280 L410 360 L570 625 L780 460 L1050 385 L1380 650'/%3E%3Cpath d='M410 360 L685 150 L970 245 L1050 385 L1380 650'/%3E%3Cpath d='M-80 540 L260 715 L570 625 L780 460'/%3E%3Cpath d='M970 245 L1160 505 L1380 650 L1520 400'/%3E%3C/g%3E%3Cg fill='%236d94d5' opacity='.72'%3E%3Ccircle cx='165' cy='280' r='4'/%3E%3Ccircle cx='410' cy='360' r='4'/%3E%3Ccircle cx='685' cy='150' r='4'/%3E%3Ccircle cx='970' cy='245' r='4'/%3E%3Ccircle cx='1050' cy='385' r='4'/%3E%3Ccircle cx='1380' cy='650' r='4'/%3E%3Ccircle cx='570' cy='625' r='4'/%3E%3Ccircle cx='780' cy='460' r='4'/%3E%3Ccircle cx='1240' cy='90' r='4'/%3E%3C/g%3E%3Cg fill='%2325a9e1' opacity='.95'%3E%3Ccircle cx='165' cy='280' r='9'/%3E%3Ccircle cx='780' cy='460' r='7'/%3E%3Ccircle cx='1240' cy='90' r='8'/%3E%3C/g%3E%3Cg fill='%2325a9e1' opacity='.12'%3E%3Ccircle cx='165' cy='280' r='28'/%3E%3Ccircle cx='780' cy='460' r='25'/%3E%3Ccircle cx='1240' cy='90' r='30'/%3E%3C/g%3E%3C/svg%3E");

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    opacity: 0.65;

    pointer-events: none;
}

/* Keep all content above the ornament */

#contact-us > .public-container {
    position: relative;
    z-index: 2;
}

/* ==========================================================
   CONTACT US — TITLE
   ========================================================== */

#contact-us h2 {
    color: #25a9e1;

    font-size: clamp(32px, 3.5vw, 42px);
    font-weight: 800;

    letter-spacing: -1px;
}

/* Cyan underline below heading */

#contact-us h2::after {
    content: "";

    display: block;

    width: 58px;
    height: 4px;

    margin-top: 18px;

    border-radius: 4px;

    background: #25a9e1;
}

/* ==========================================================
   CONTACT US — DESCRIPTION
   ========================================================== */

#contact-us .public-excerpt {
    max-width: 520px;

    margin-top: 28px;

    color: #d3dff1;
}

/* ==========================================================
   REQUEST A QUOTE — KEEP CARD ABOVE BACKGROUND
   ========================================================== */

#request-a-quote {
    position: relative;
    z-index: 3;
}

/* ==========================================================
   CONTACT US — ICON CONTACT DETAILS
   Customer Design Reference
   ========================================================== */

#contact-us .public-contact__details {
    display: flex;
    flex-direction: column;

    margin-top: 30px;
}

/* Contact row */

#contact-us .public-contact__item {
    display: flex;
    align-items: center;

    gap: 20px;

    min-height: 64px;
    padding: 16px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

/* Cyan outline icons */

#contact-us .public-contact__icon {
    flex-shrink: 0;

    width: 22px;
    height: 22px;

    color: #25a9e1;
}

/* Contact text and links */

#contact-us .public-contact__item a,
#contact-us .public-contact__item span {
    color: #ffffff;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.7;

    text-decoration: none;
    overflow-wrap: anywhere;
    white-space: normal;

    transition: color 0.2s ease;
}

/* Hover */

#contact-us .public-contact__item a:hover {
    color: #25a9e1;
}

/* Responsive */

@media (max-width: 639px) {

    #contact-us .public-contact__item {
        gap: 14px;
        min-height: 58px;
        padding: 14px 0;
    }

    #contact-us .public-contact__icon {
        width: 20px;
        height: 20px;
    }

    #contact-us .public-contact__item a,
    #contact-us .public-contact__item span {
        font-size: 13px;
    }
}

/* ==========================================================
   CONTACT US — FIX ICON & TEXT VERTICAL ALIGNMENT
   ========================================================== */

#contact-us .public-contact__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    gap: 20px;
}

/* Icon */

#contact-us .public-contact__item > svg {
    display: block;

    flex: 0 0 22px;

    width: 22px;
    height: 22px;

    margin: 0;
    padding: 0;

    align-self: center;
}

/* Text and links */

#contact-us .public-contact__item > a,
#contact-us .public-contact__item > span {
    display: block;

    flex: 1;
    min-width: 0;

    margin: 0;
    padding: 0;

    align-self: center;

    font-size: 14px;
    line-height: 1.6;
    vertical-align: middle;
}

/* Mobile */

@media (max-width: 639px) {
    #contact-us .public-contact__item {
        gap: 14px;
    }

    #contact-us .public-contact__item > svg {
        flex-basis: 20px;
        width: 20px;
        height: 20px;
    }
}

/* ==========================================================
   REQUEST A QUOTE — FORM STYLING
   ========================================================== */

/* ==========================================================
   REQUEST A QUOTE — TWO COLUMN FORM
   ========================================================== */

#request-a-quote .public-quote__form {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 20px;
    row-gap: 22px;

    margin-top: 30px;

    align-items: start;
}

/* All regular inputs occupy one column */

#request-a-quote .public-quote__field {
    display: flex;
    flex-direction: column;

    gap: 8px;

    width: 100%;
    min-width: 0;
}

/* Message textarea occupies the full form width */

#request-a-quote .public-quote__field:has(.public-quote__textarea) {
    grid-column: 1 / -1;
}

/* CAPTCHA, submit button and privacy notice remain full width */

#request-a-quote .public-quote__captcha,
#request-a-quote .public-quote__submit,
#request-a-quote .public-quote__privacy,
#request-a-quote .public-quote__errors {
    grid-column: 1 / -1;
}

/* ==========================================================
   FORM FIELD
   ========================================================== */

#request-a-quote .public-quote__field {
    display: flex;
    flex-direction: column;
    gap: 8px;

    width: 100%;
}

/* Label */

#request-a-quote .public-quote__label {
    display: block;

    color: #263850;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

/* Required indicator */

#request-a-quote .public-quote__required {
    color: #ef4444;
    margin-left: 2px;
}

/* ==========================================================
   INPUT & TEXTAREA
   ========================================================== */

#request-a-quote .public-quote__input,
#request-a-quote .public-quote__textarea {
    display: block;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    padding: 13px 15px;

    border: 1px solid #dce4ef;
    border-radius: 9px;

    background: #f8fafc;

    color: #10233d;

    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;

    box-sizing: border-box;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

/* Placeholder */

#request-a-quote .public-quote__input::placeholder,
#request-a-quote .public-quote__textarea::placeholder {
    color: #94a3b8;
}

/* Focus */

#request-a-quote .public-quote__input:focus,
#request-a-quote .public-quote__textarea:focus {
    outline: none;

    border-color: #25a9e1;
    background: #ffffff;

    box-shadow: 0 0 0 3px rgba(37, 169, 225, 0.12);
}

/* Textarea */

#request-a-quote .public-quote__textarea {
    min-height: 130px;
    resize: vertical;
}

/* ==========================================================
   CAPTCHA
   ========================================================== */

#request-a-quote .public-quote__captcha {
    margin-top: 4px;
    min-height: 65px;
}

/* ==========================================================
   SUBMIT BUTTON
   ========================================================== */

#request-a-quote .public-quote__submit {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    width: 100%;

    padding: 15px 24px;

    border: none;
    border-radius: 10px;

    background: #25a9e1;
    color: #ffffff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

#request-a-quote .public-quote__submit:hover {
    background: #168ac1;

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(37, 169, 225, 0.22);
}

#request-a-quote .public-quote__submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

#request-a-quote .public-quote__submit:focus-visible {
    outline: 3px solid #25a9e1;
    outline-offset: 3px;
}

/* ==========================================================
   FORM ERRORS
   ========================================================== */

#request-a-quote .public-quote__errors,
#request-a-quote .public-quote__error {
    color: #dc2626;

    font-size: 12px;
    line-height: 1.6;
}

#request-a-quote .public-quote__errors {
    padding: 12px 15px;

    border: 1px solid #fecaca;
    border-radius: 8px;

    background: #fef2f2;
}

/* ==========================================================
   PRIVACY NOTE
   ========================================================== */

#request-a-quote .public-quote__privacy {
    margin: 0;

    color: #64748b;

    font-size: 12px;
    line-height: 1.7;

    text-align: center;
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 639px) {

    #request-a-quote .public-quote__form {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    #request-a-quote .public-quote__input,
    #request-a-quote .public-quote__textarea {
        padding: 12px 13px;
        font-size: 14px;
    }

    #request-a-quote .public-quote__submit {
        padding: 14px 20px;
    }
}

/* ==========================================================
   REQUEST A QUOTE — RESPONSIVE TABLET
   ========================================================== */

@media (min-width: 640px) and (max-width: 1199px) {

    #request-a-quote .public-quote__form {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   REQUEST A QUOTE — DARK NAVY THEME
   Customer Design Reference
   ========================================================== */

/* Main form card */

#request-a-quote {
    background: #102857;
    border: 1px solid rgba(115, 151, 207, 0.25);

    color: #ffffff;

    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}

/* Card eyebrow */

#request-a-quote > span {
    color: #25a9e1;
}

/* Card title */

#request-a-quote h3 {
    color: #ffffff;
}

/* Card description */

#request-a-quote > p {
    color: #c5d3ea;
}

/* ==========================================================
   FIELD LABELS
   ========================================================== */

#request-a-quote .public-quote__label {
    color: #e8f0ff;

    font-size: 13px;
    font-weight: 600;
}

/* Required asterisk */

#request-a-quote .public-quote__required {
    color: #25a9e1;
}

/* ==========================================================
   INPUTS, TEXTAREA & DROPDOWN
   ========================================================== */

#request-a-quote .public-quote__input,
#request-a-quote .public-quote__textarea {
    background: #091b3c;
    border: 1px solid #405b88;

    color: #ffffff;

    border-radius: 8px;

    color-scheme: dark;
}

/* Placeholder */

#request-a-quote .public-quote__input::placeholder,
#request-a-quote .public-quote__textarea::placeholder {
    color: #90a3c2;
    opacity: 1;
}

/* Focus */

#request-a-quote .public-quote__input:focus,
#request-a-quote .public-quote__textarea:focus {
    background: #0b2148;

    border-color: #25a9e1;

    outline: none;

    box-shadow: 0 0 0 3px rgba(37, 169, 225, 0.15);
}

/* Dropdown */

#request-a-quote select.public-quote__input {
    cursor: pointer;
}

#request-a-quote select.public-quote__input option {
    background: #091b3c;
    color: #ffffff;
}

/* ==========================================================
   SUBMIT BUTTON
   ========================================================== */

#request-a-quote .public-quote__submit {
    background: #25a9e1;
    color: #ffffff;
}

#request-a-quote .public-quote__submit:hover {
    background: #168ac1;
}

/* ==========================================================
   PRIVACY TEXT
   ========================================================== */

#request-a-quote .public-quote__privacy {
    color: #a9bbd7;
}

/* ==========================================================
   VALIDATION ERRORS
   ========================================================== */

#request-a-quote .public-quote__error {
    color: #ff9b9b;
}

#request-a-quote .public-quote__errors {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(248, 113, 113, 0.4);
    color: #ffb4b4;
}

/* ==========================================================
   REQUEST A QUOTE — SUBMISSION FEEDBACK
   ========================================================== */

#request-a-quote .public-quote__feedback-container {
    margin-top: 24px;
}

#request-a-quote .public-quote__feedback {
    padding: 14px 18px;

    border: 1px solid transparent;
    border-radius: 10px;

    font-size: 13px;
    line-height: 1.7;
}

/* Success */

#request-a-quote .public-quote__feedback--success {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(74, 222, 128, 0.35);
    color: #86efac;
}

/* Error */

#request-a-quote .public-quote__feedback--error {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(248, 113, 113, 0.35);
    color: #fca5a5;
}

/* ==========================================================
   PUBLIC FOOTER
   Dynamic Four-Column Footer
   ========================================================== */

.public-footer {
    width: 100%;

    background: #04102a;
    color: #a9b5d0;
}

/* ==========================================================
   FOOTER GRID
   ========================================================== */

.public-footer__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(0, 0.85fr)
        minmax(0, 1fr)
        minmax(0, 1.1fr);

    gap: 60px;

    padding-top: 80px;
    padding-bottom: 80px;
}

.public-footer__column {
    min-width: 0;
}

/* ==========================================================
   COMPANY BRANDING
   ========================================================== */

.public-footer__brand {
    display: inline-flex;

    align-items: center;
    gap: 14px;

    max-width: 100%;

    color: #ffffff;
    text-decoration: none;
}

.public-footer__logo {
    display: block;

    width: auto;
    height: 58px;
    max-width: 100px;

    object-fit: contain;
    flex-shrink: 0;
}

.public-footer__brand-fallback {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 48px;
    height: 48px;

    border-radius: 10px;

    background: #25a9e1;
    color: #04102a;

    font-size: 20px;
    font-weight: 800;
}

.public-footer__brand-name {
    color: #ffffff;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}

/* Company Description */

.public-footer__description {
    max-width: 370px;

    margin-top: 22px;

    color: #a9b5d0;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.85;
}

/* ==========================================================
   FOOTER COLUMN HEADINGS
   ========================================================== */

.public-footer__heading {
    margin: 0 0 22px;

    color: #ffffff;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

/* ==========================================================
   FOOTER LINKS
   ========================================================== */

.public-footer__links {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 15px;
}

.public-footer__links a {
    display: inline-block;

    max-width: 100%;

    color: #a9b5d0;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;

    text-decoration: none;

    overflow-wrap: anywhere;
    white-space: normal;

    transition: color 0.2s ease;
}

.public-footer__links a:hover {
    color: #25a9e1;
}

.public-footer__links a:focus-visible,
.public-footer__brand:focus-visible {
    outline: 2px solid #25a9e1;
    outline-offset: 4px;
}

/* Contact Address */

.public-footer__address {
    margin: 0;

    color: #a9b5d0;

    font-size: 14px;
    line-height: 1.7;

    white-space: pre-line;
    overflow-wrap: anywhere;
}

.public-footer__empty {
    color: #7183a6;

    font-size: 13px;
    line-height: 1.7;
}

/* ==========================================================
   COPYRIGHT
   ========================================================== */

.public-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.public-footer__bottom-inner {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 24px 0;
}

.public-footer__bottom-inner p {
    margin: 0;

    color: #8293b4;

    font-size: 12px;
    line-height: 1.7;
}

/* ==========================================================
   RESPONSIVE — TABLET
   ========================================================== */

@media (max-width: 1023px) {

    .public-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        column-gap: 48px;
        row-gap: 48px;

        padding-top: 64px;
        padding-bottom: 64px;
    }

    .public-footer__description {
        max-width: 420px;
    }
}

/* ==========================================================
   RESPONSIVE — MOBILE
   ========================================================== */

@media (max-width: 639px) {

    .public-footer__grid {
        grid-template-columns: 1fr;

        gap: 38px;

        padding-top: 52px;
        padding-bottom: 52px;
    }

    .public-footer__logo {
        height: 50px;
    }

    .public-footer__brand-name {
        font-size: 14px;
    }

    .public-footer__description {
        font-size: 13px;
    }

    .public-footer__heading {
        margin-bottom: 16px;
    }

    .public-footer__links {
        gap: 12px;
    }

    .public-footer__links a {
        font-size: 13px;
    }

    .public-footer__bottom-inner {
        flex-direction: column;

        align-items: flex-start;

        gap: 8px;

        padding: 22px 0;
    }
}

/* ==========================================================
   PUBLIC PRODUCT CATALOG
   Marketplace Style Product Listing
   ========================================================== */


/* ==========================================================
   PRODUCT CATALOG — HERO
   ========================================================== */

.public-catalog-hero {
    position: relative;

    width: 100%;

    padding: 64px 0 72px;

    background:
        radial-gradient(
            circle at 85% 30%,
            rgba(37, 169, 225, 0.12),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #071a39 0%,
            #102d5b 100%
        );

    color: #ffffff;

    overflow: hidden;
}

/* Decorative background */

.public-catalog-hero::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    top: -220px;
    right: -100px;

    border: 1px solid rgba(37, 169, 225, 0.18);
    border-radius: 50%;

    box-shadow:
        0 0 0 55px rgba(37, 169, 225, 0.025),
        0 0 0 110px rgba(37, 169, 225, 0.025);

    pointer-events: none;
}

.public-catalog-hero > .public-container {
    position: relative;
    z-index: 1;
}

/* Breadcrumb */

.public-catalog-hero__breadcrumb {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 26px;

    color: #9cb5d5;

    font-size: 13px;
}

.public-catalog-hero__breadcrumb a {
    color: #9cb5d5;

    text-decoration: none;

    transition: color 0.2s ease;
}

.public-catalog-hero__breadcrumb a:hover {
    color: #25a9e1;
}

.public-catalog-hero__breadcrumb span:last-child {
    color: #ffffff;
}

/* Hero title */

.public-catalog-hero__title {
    margin: 0;

    color: #ffffff;

    font-size: clamp(34px, 4vw, 50px);

    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -1px;
}

.public-catalog-hero__description {
    margin-top: 18px;

    max-width: 620px;

    color: #b6c8e2;

    font-size: 15px;

    line-height: 1.8;
}


/* ==========================================================
   CATALOG MAIN SECTION
   ========================================================== */

.public-catalog {
    width: 100%;

    min-height: 600px;

    padding: 60px 0 100px;

    background: #f7f9fc;
}

.public-catalog__layout {
    display: grid;

    grid-template-columns: 285px minmax(0, 1fr);

    align-items: start;

    gap: 30px;
}


/* ==========================================================
   CATEGORY SIDEBAR
   ========================================================== */

.public-catalog__sidebar {
    position: sticky;

    top: 100px;

    min-width: 0;

    padding: 24px 0;

    border: 1px solid #e2e8f0;
    border-radius: 14px;

    background: #ffffff;

    box-shadow: 0 5px 24px rgba(15, 23, 42, 0.035);
}

/* Sidebar heading */

.public-catalog__sidebar-heading {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 0 20px 20px;

    border-bottom: 1px solid #edf1f6;
}

.public-catalog__sidebar-heading h2 {
    margin: 0;

    color: #0e274a;

    font-size: 16px;
    font-weight: 750;
}

.public-catalog__sidebar-heading a {
    flex-shrink: 0;

    color: #168ac1;

    font-size: 12px;
    font-weight: 600;

    text-decoration: none;
}

.public-catalog__sidebar-heading a:hover {
    text-decoration: underline;
}

/* Category group */

.public-catalog__category {
    padding: 18px 20px;

    border-bottom: 1px solid #edf1f6;
}

.public-catalog__category:last-child {
    border-bottom: none;
}

/* Category header */

.public-catalog__category-header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 10px;
}

/* Category label */

.public-catalog__category-label {
    display: flex;

    align-items: flex-start;

    gap: 11px;

    min-width: 0;

    cursor: pointer;
}

/* Checkbox */

.public-catalog__checkbox {
    flex: 0 0 auto;

    width: 17px;
    height: 17px;

    margin: 2px 0 0;

    accent-color: #168ac1;

    cursor: pointer;
}

/* Category name */

.public-catalog__category-name {
    color: #20334f;

    font-size: 13px;
    font-weight: 650;

    line-height: 1.6;
}

/* Product count */

.public-catalog__category-count {
    color: #94a3b8;

    font-size: 12px;
    line-height: 1.7;
}

/* Accordion toggle */

.public-catalog__category-toggle {
    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 24px;

    width: 24px;
    height: 24px;

    padding: 0;

    border: none;
    border-radius: 5px;

    background: transparent;

    color: #64748b;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.public-catalog__category-toggle:hover {
    color: #168ac1;

    background: #eaf6fc;
}

.public-catalog__category-toggle svg {
    transition: transform 0.2s ease;
}

/* Rotate arrow when collapsed */

.public-catalog__category-toggle[aria-expanded="false"] svg {
    transform: rotate(180deg);
}

/* Accordion content */

.public-catalog__category-content {
    display: flex;

    flex-direction: column;

    gap: 11px;

    margin-top: 16px;
    padding-left: 28px;
}

/* Respect native hidden attribute */

.public-catalog__category-content[hidden] {
    display: none !important;
}

/* Product links inside sidebar */

.public-catalog__subcategory-link {
    display: block;

    color: #64748b;

    font-size: 12px;

    line-height: 1.6;

    text-decoration: none;

    transition: color 0.2s ease;
}

.public-catalog__subcategory-link:hover {
    color: #168ac1;
}

.public-catalog__category-empty {
    color: #94a3b8;

    font-size: 12px;

    line-height: 1.6;
}


/* ==========================================================
   PRODUCT MAIN AREA
   ========================================================== */

.public-catalog__main {
    min-width: 0;
}


/* ==========================================================
   SEARCH & TOOLBAR
   ========================================================== */

.public-catalog__toolbar {
    display: flex;

    flex-direction: column;

    gap: 16px;

    margin-bottom: 24px;
}

/* Search input wrapper */

.public-catalog__search {
    display: flex;

    align-items: center;

    gap: 12px;

    width: 100%;
    min-height: 56px;

    padding: 6px 6px 6px 18px;

    border: 1px solid #dce5ef;
    border-radius: 12px;

    background: #ffffff;

    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.035);
}

/* Search icon */

.public-catalog__search > svg {
    flex-shrink: 0;

    color: #94a3b8;
}

/* Input */

.public-catalog__search input {
    flex: 1;

    min-width: 0;
    width: 100%;

    padding: 10px 0;

    border: none;

    background: transparent;

    color: #0f2745;

    font-family: inherit;
    font-size: 14px;

    outline: none;
}

.public-catalog__search input::placeholder {
    color: #94a3b8;
}

/* Search button */

.public-catalog__search button {
    flex-shrink: 0;

    padding: 12px 25px;

    border: none;
    border-radius: 8px;

    background: #168ac1;

    color: #ffffff;

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition: background-color 0.2s ease;
}

.public-catalog__search button:hover {
    background: #0e6e9e;
}

/* Result count */

.public-catalog__result-count {
    color: #64748b;

    font-size: 13px;
    line-height: 1.6;
}

.public-catalog__result-count strong {
    color: #0f2745;

    font-weight: 700;
}


/* ==========================================================
   PRODUCT LIST
   ========================================================== */

.public-catalog__products {
    display: flex;

    flex-direction: column;

    gap: 16px;
}

/* Single product row */

.public-catalog__product {
    width: 100%;
    min-width: 0;

    border: 1px solid #e2e8f0;
    border-radius: 14px;

    background: #ffffff;

    box-shadow: 0 5px 22px rgba(15, 23, 42, 0.035);

    overflow: hidden;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.public-catalog__product:hover {
    border-color: rgba(37, 169, 225, 0.45);

    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);

    transform: translateY(-2px);
}

/* Product row layout */

.public-catalog__product-link {
    display: flex;

    align-items: center;

    gap: 22px;

    min-height: 160px;

    padding: 18px;

    color: inherit;

    text-decoration: none;
}


/* ==========================================================
   PRODUCT IMAGE
   ========================================================== */

.public-catalog__product-image {
    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 145px;

    width: 145px;
    height: 125px;

    border: 1px solid #edf1f6;
    border-radius: 10px;

    background: #f3f6fa;

    overflow: hidden;
}

.public-catalog__product-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transition: transform 0.3s ease;
}

.public-catalog__product:hover .public-catalog__product-image img {
    transform: scale(1.04);
}

/* Fallback company logo */

.public-catalog__product-image img.public-catalog__fallback-logo {
    width: 75%;
    height: 75%;

    object-fit: contain;

    opacity: 0.75;
}

/* Fallback text */

.public-catalog__image-placeholder {
    color: #168ac1;

    font-size: 22px;
    font-weight: 800;
}


/* ==========================================================
   PRODUCT INFORMATION
   ========================================================== */

.public-catalog__product-info {
    flex: 1;

    min-width: 0;
}

/* Product title */

.public-catalog__product-title {
    margin: 0;

    color: #102d50;

    font-size: 18px;
    font-weight: 750;

    line-height: 1.4;

    transition: color 0.2s ease;
}

.public-catalog__product:hover .public-catalog__product-title {
    color: #168ac1;
}

/* Short Description */

.public-catalog__product-description {
    margin-top: 10px;

    color: #64748b;

    font-size: 13px;
    line-height: 1.8;

    overflow-wrap: anywhere;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    line-clamp: 3;

    overflow: hidden;
}

.public-catalog__product-description p {
    margin: 0;
}


/* ==========================================================
   PRODUCT CATEGORY BADGE
   ========================================================== */

.public-catalog__product-category {
    flex: 0 0 145px;

    display: flex;

    align-items: center;
    justify-content: center;
}

.public-catalog__product-category span {
    display: inline-block;

    max-width: 100%;

    padding: 7px 12px;

    border: 1px solid #dceef8;
    border-radius: 7px;

    background: #edf8fd;

    color: #168ac1;

    font-size: 11px;
    font-weight: 650;

    line-height: 1.5;

    text-align: center;
}


/* ==========================================================
   PRODUCT ROW ARROW
   ========================================================== */

.public-catalog__product-arrow {
    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 32px;

    width: 32px;
    height: 32px;

    color: #168ac1;

    transition: transform 0.2s ease;
}

.public-catalog__product:hover .public-catalog__product-arrow {
    transform: translateX(4px);
}


/* ==========================================================
   EMPTY SEARCH RESULT
   ========================================================== */

.public-catalog__empty {
    padding: 70px 30px;

    border: 1px dashed #cbd5e1;
    border-radius: 14px;

    background: #ffffff;

    text-align: center;
}

.public-catalog__empty h2 {
    color: #102d50;

    font-size: 20px;
    font-weight: 750;
}

.public-catalog__empty p {
    margin-top: 12px;

    color: #64748b;

    font-size: 14px;
    line-height: 1.7;
}

.public-catalog__empty a {
    display: inline-block;

    margin-top: 24px;

    padding: 11px 22px;

    border-radius: 8px;

    background: #168ac1;

    color: #ffffff;

    font-size: 13px;
    font-weight: 650;

    text-decoration: none;
}

.public-catalog__empty a:hover {
    background: #0e6e9e;
}


/* ==========================================================
   PRODUCT PAGINATION
   ========================================================== */

.public-catalog__pagination {
    display: flex;

    align-items: center;
    justify-content: space-between;

    flex-wrap: wrap;

    gap: 20px;

    margin-top: 36px;

    padding-top: 25px;

    border-top: 1px solid #e2e8f0;
}

/* Pagination info */

.public-catalog__pagination-info {
    color: #64748b;

    font-size: 13px;
    line-height: 1.6;
}

/* Pagination buttons */

.public-catalog__pagination-buttons {
    display: flex;

    align-items: center;
    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 8px;
}

/* Page links */

.public-catalog__pagination-buttons a,
.public-catalog__pagination-buttons span {
    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 38px;
    height: 38px;

    padding: 0 11px;

    border: 1px solid #dce5ef;
    border-radius: 8px;

    background: #ffffff;

    color: #475569;

    font-size: 13px;
    font-weight: 650;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.public-catalog__pagination-buttons a:hover {
    border-color: #168ac1;

    color: #168ac1;
}

/* Current page */

.public-catalog__pagination-buttons .public-catalog__page-active {
    border-color: #168ac1;

    background: #168ac1;

    color: #ffffff;
}


/* ==========================================================
   RESPONSIVE — TABLET
   ========================================================== */

@media (max-width: 1023px) {

    .public-catalog {
        padding: 45px 0 80px;
    }

    .public-catalog__layout {
        grid-template-columns: 240px minmax(0, 1fr);

        gap: 20px;
    }

    .public-catalog__sidebar {
        top: 85px;
    }

    .public-catalog__product-link {
        flex-wrap: wrap;

        gap: 16px;
    }

    .public-catalog__product-image {
        flex-basis: 120px;

        width: 120px;
        height: 110px;
    }

    .public-catalog__product-category {
        flex: 1;

        justify-content: flex-start;
    }
}


/* ==========================================================
   RESPONSIVE — MOBILE
   ========================================================== */

@media (max-width: 767px) {

    .public-catalog-hero {
        padding: 45px 0 55px;
    }

    .public-catalog {
        padding: 30px 0 65px;
    }

    /* Sidebar above product listing */

    .public-catalog__layout {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .public-catalog__sidebar {
        position: static;

        width: 100%;
    }

    /* Product row */

    .public-catalog__product-link {
        align-items: flex-start;

        gap: 15px;

        min-height: 0;

        padding: 14px;
    }

    .public-catalog__product-image {
        flex: 0 0 105px;

        width: 105px;
        height: 105px;
    }

    .public-catalog__product-info {
        flex: 1;
    }

    .public-catalog__product-title {
        font-size: 15px;
    }

    .public-catalog__product-description {
        font-size: 12px;

        -webkit-line-clamp: 2;

        line-clamp: 2;
    }

    .public-catalog__product-category {
        flex: 1 1 100%;

        justify-content: flex-start;

        padding-left: 120px;
    }

    .public-catalog__product-arrow {
        display: none;
    }

    /* Pagination */

    .public-catalog__pagination {
        flex-direction: column;

        align-items: flex-start;
    }

    .public-catalog__pagination-buttons {
        justify-content: flex-start;
    }
}


/* ==========================================================
   EXTRA SMALL MOBILE
   ========================================================== */

@media (max-width: 420px) {

    .public-catalog__search {
        gap: 8px;

        padding-left: 12px;
    }

    .public-catalog__search button {
        padding: 12px 14px;

        font-size: 12px;
    }

    .public-catalog__product-image {
        flex-basis: 90px;

        width: 90px;
        height: 90px;
    }

    .public-catalog__product-category {
        padding-left: 105px;
    }
}

/* ==========================================================
   PUBLIC PRODUCT DETAIL
   ========================================================== */

.public-product-detail {
    min-height: 600px;
    padding: 36px 0 100px;
    background: #f7f9fc;
}


/* ==========================================================
   BREADCRUMB
   ========================================================== */

.public-product-detail__breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin-bottom: 32px;

    color: #64748b;
    font-size: 13px;
    line-height: 1.7;
}

.public-product-detail__breadcrumb a {
    color: #168ac1;
    text-decoration: none;
}

.public-product-detail__breadcrumb a:hover {
    text-decoration: underline;
}

.public-product-detail__breadcrumb-current {
    color: #1e293b;
    font-weight: 600;
}


/* ==========================================================
   TWO COLUMN LAYOUT
   ========================================================== */

.public-product-detail__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        300px;

    align-items: start;

    gap: 30px;
}

.public-product-detail__main {
    min-width: 0;
}


/* ==========================================================
   MAIN CONTENT CARD
   ========================================================== */

.public-product-detail__article {
    min-width: 0;

    padding: 38px;

    border: 1px solid #e2e8f0;
    border-radius: 16px;

    background: #ffffff;

    box-shadow: 0 5px 24px rgba(15, 23, 42, 0.035);
}


/* ==========================================================
   PRODUCT HEADER
   ========================================================== */

.public-product-detail__header {
    padding-bottom: 30px;

    border-bottom: 1px solid #e2e8f0;
}

.public-product-detail__badge {
    display: inline-block;

    padding: 7px 13px;

    border: 1px solid #dceef8;
    border-radius: 7px;

    background: #edf8fd;

    color: #168ac1;

    font-size: 12px;
    font-weight: 650;
}

.public-product-detail__title {
    margin: 18px 0 0;

    color: #102d50;

    font-size: clamp(27px, 3vw, 38px);
    font-weight: 800;
    line-height: 1.3;

    letter-spacing: -0.7px;
}

.public-product-detail__excerpt {
    margin-top: 16px;

    color: #64748b;

    font-size: 15px;
    line-height: 1.9;

    white-space: pre-line;
}


/* ==========================================================
   MAIN BODY CONTENT
   ========================================================== */

.public-product-detail__body {
    padding: 30px 0;

    color: #475569;

    font-size: 14px;
    line-height: 1.9;

    overflow-wrap: anywhere;
}

.public-product-detail__body h2,
.public-product-detail__body h3,
.public-product-detail__body h4 {
    margin: 26px 0 12px;

    color: #102d50;

    font-weight: 750;
    line-height: 1.4;
}

.public-product-detail__body h2 {
    font-size: 24px;
}

.public-product-detail__body h3 {
    font-size: 20px;
}

.public-product-detail__body h4 {
    font-size: 17px;
}

.public-product-detail__body p {
    margin: 0 0 16px;
}

.public-product-detail__body ul {
    margin: 14px 0;
    padding-left: 24px;

    list-style: disc;
}

.public-product-detail__body ol {
    margin: 14px 0;
    padding-left: 24px;

    list-style: decimal;
}

.public-product-detail__body li {
    margin-bottom: 8px;
}

.public-product-detail__body img {
    max-width: 100%;
    height: auto;
}

.public-product-detail__body table {
    display: block;

    max-width: 100%;

    border-collapse: collapse;
    overflow-x: auto;
}

.public-product-detail__body th,
.public-product-detail__body td {
    padding: 12px;

    border: 1px solid #e2e8f0;
}

.public-product-detail__body a {
    color: #168ac1;
    text-decoration: underline;
}


/* ==========================================================
   PRODUCT GALLERY
   ========================================================== */

.public-product-detail__gallery {
    padding-top: 30px;

    border-top: 1px solid #e2e8f0;
}

.public-product-detail__section-heading {
    margin-bottom: 22px;
}

.public-product-detail__section-heading h2 {
    margin: 0;

    color: #102d50;

    font-size: 21px;
    font-weight: 750;
}

.public-product-detail__section-heading p {
    margin-top: 7px;

    color: #64748b;

    font-size: 13px;
    line-height: 1.7;
}


/* ==========================================================
   MAIN IMAGE PREVIEW
   ========================================================== */

/* ==========================================================
   PRODUCT DETAIL — MAIN GALLERY IMAGE
   ========================================================== */

.public-product-detail__image-preview {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 400px;

    padding: 0;

    border: 1px solid #e2e8f0;
    border-radius: 12px;

    background: #f3f6fa;
    overflow: hidden;
}

.public-product-detail__image-preview img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: none;
    max-height: none;

    object-fit: cover;
    object-position: center;

    transition: opacity 0.25s ease;
}

.public-product-detail__image-preview--fallback img {
    max-width: 50%;
    max-height: 160px;
    opacity: 0.75;
}

.public-product-detail__image-preview--fallback span {
    color: #168ac1;

    font-size: 42px;
    font-weight: 800;
}


/* ==========================================================
   IMAGE THUMBNAILS
   ========================================================== */

.public-product-detail__thumbnails {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 18px;
}

/* ==========================================================
   PRODUCT DETAIL — GALLERY THUMBNAILS
   ========================================================== */

.public-product-detail__thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 90px;
    height: 78px;

    padding: 0;

    border: 2px solid #e2e8f0;
    border-radius: 9px;

    background: #f8fafc;
    cursor: pointer;
    overflow: hidden;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.public-product-detail__thumbnail img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.public-product-detail__thumbnail:hover {
    border-color: #76c7eb;
}

.public-product-detail__thumbnail[aria-pressed="true"] {
    border-color: #168ac1;

    box-shadow: 0 0 0 3px rgba(22, 138, 193, 0.12);
}


/* ==========================================================
   PRODUCT SIDEBAR
   ========================================================== */

.public-product-detail__sidebar {
    position: sticky;

    top: 100px;

    min-width: 0;
}

.public-product-detail__sidebar-card {
    border: 1px solid #e2e8f0;
    border-radius: 14px;

    background: #ffffff;

    box-shadow: 0 5px 24px rgba(15, 23, 42, 0.035);

    overflow: hidden;
}

.public-product-detail__sidebar-header {
    padding: 24px 22px;

    border-bottom: 1px solid #edf1f6;
}

.public-product-detail__sidebar-header h2 {
    margin: 0;

    color: #102d50;

    font-size: 17px;
    font-weight: 750;
}

.public-product-detail__sidebar-header p {
    margin-top: 8px;

    color: #64748b;

    font-size: 12px;
    line-height: 1.7;
}


/* ==========================================================
   SIDEBAR CATEGORY ACCORDION
   ========================================================== */

.public-product-detail__category {
    padding: 18px 22px;

    border-bottom: 1px solid #edf1f6;
}

.public-product-detail__category:last-child {
    border-bottom: none;
}

.public-product-detail__category-title {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    color: #20334f;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;

    cursor: pointer;

    list-style: none;
}

.public-product-detail__category-title::-webkit-details-marker {
    display: none;
}

.public-product-detail__category-title svg {
    flex-shrink: 0;

    color: #64748b;

    transition: transform 0.2s ease;
}

.public-product-detail__category:not([open])
.public-product-detail__category-title svg {
    transform: rotate(-90deg);
}

.public-product-detail__category-products {
    display: flex;
    flex-direction: column;

    gap: 7px;

    margin-top: 15px;
    padding-left: 12px;
}

.public-product-detail__sidebar-link {
    display: block;

    padding: 9px 12px;

    border-radius: 7px;

    color: #64748b;

    font-size: 12px;
    line-height: 1.6;

    text-decoration: none;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.public-product-detail__sidebar-link:hover {
    background: #edf8fd;

    color: #168ac1;
}

.public-product-detail__sidebar-link.is-active {
    background: #e6f5fc;

    color: #087cb4;

    font-weight: 750;
}

.public-product-detail__sidebar-empty {
    display: block;

    color: #94a3b8;

    font-size: 12px;
    line-height: 1.7;
}


/* ==========================================================
   BACK TO CATALOG
   ========================================================== */

.public-product-detail__back-button {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    margin-top: 18px;

    padding: 14px 20px;

    border: 1px solid #dceef8;
    border-radius: 10px;

    background: #edf8fd;

    color: #168ac1;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.public-product-detail__back-button:hover {
    background: #d9f0fa;

    color: #0e6e9e;
}


/* ==========================================================
   RESPONSIVE — TABLET
   ========================================================== */

@media (max-width: 1023px) {

    .public-product-detail__layout {
        grid-template-columns:
            minmax(0, 1fr)
            250px;

        gap: 20px;
    }

    .public-product-detail__article {
        padding: 26px;
    }

    .public-product-detail__image-preview {
        height: 320px;
    }

    .public-product-detail__sidebar {
        top: 85px;
    }
}


/* ==========================================================
   RESPONSIVE — MOBILE
   ========================================================== */

@media (max-width: 767px) {

    .public-product-detail {
        padding: 24px 0 65px;
    }

    .public-product-detail__layout {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .public-product-detail__sidebar {
        position: static;
    }

    .public-product-detail__article {
        padding: 22px;
    }

    .public-product-detail__title {
        font-size: 27px;
    }

    .public-product-detail__excerpt {
        font-size: 14px;
    }

    .public-product-detail__image-preview {
        height: 260px;
    }

    .public-product-detail__thumbnail {
        width: 75px;
        height: 68px;
    }
}

/* ==========================================================
   PUBLIC CATEGORY DETAIL
   Uses shared Product Detail layout
   ========================================================== */


/* ==========================================================
   CATEGORY HEADER
   ========================================================== */

.public-category-detail__header {
    margin-bottom: 28px;
}


/* ==========================================================
   CATEGORY IMAGE
   ========================================================== */

.public-category-detail__image-wrapper {
    width: 100%;

    margin-bottom: 30px;

    border-radius: 12px;

    background: #f3f6fa;

    overflow: hidden;
}

.public-category-detail__image {
    display: block;

    width: 100%;
    height: clamp(220px, 30vw, 380px);

    object-fit: cover;
    object-position: center;
}


/* ==========================================================
   CATEGORY SHORT DESCRIPTION
   ========================================================== */

.public-category-detail__excerpt {
    margin-bottom: 26px;

    padding-bottom: 28px;

    border-bottom: 1px solid #e2e8f0;

    color: #475569;

    font-size: 15px;
    line-height: 1.9;
}

.public-category-detail__excerpt p {
    margin: 0 0 14px;
}

.public-category-detail__excerpt p:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   CATEGORY PRODUCTS
   ========================================================== */

.public-category-detail__products {
    margin-top: 35px;

    padding-top: 30px;

    border-top: 1px solid #e2e8f0;
}

.public-category-detail__product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}


/* ==========================================================
   PRODUCT CARDS
   ========================================================== */

.public-category-detail__product-card {
    display: flex;
    flex-direction: column;

    min-width: 0;

    border: 1px solid #e2e8f0;
    border-radius: 12px;

    background: #ffffff;

    overflow: hidden;

    text-decoration: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.public-category-detail__product-card:hover {
    border-color: #25a9e1;

    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.08);
}

.public-category-detail__product-image {
    display: block;

    width: 100%;
    height: 145px;

    background: #f3f6fa;
    overflow: hidden;
}

.public-category-detail__product-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 0.3s ease;
}

.public-category-detail__product-card:hover
.public-category-detail__product-image img {
    transform: scale(1.05);
}

.public-category-detail__product-image img.public-category-detail__fallback-logo {
    width: 45%;
    height: 65%;

    margin: auto;
    object-fit: contain;

    opacity: 0.75;
}

.public-category-detail__product-image:has(.public-category-detail__fallback-logo) {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Compact cards for four-column layout */

.public-category-detail__product-info {
    padding: 15px;
}

.public-category-detail__product-info h3 {
    font-size: 14px;
    line-height: 1.5;
}

.public-category-detail__product-info p {
    font-size: 12px;
    line-height: 1.6;
}



/* ==========================================================
   SHARED SIDEBAR — CATEGORY LINKS
   ========================================================== */

.public-product-detail__category-link {
    display: block;

    flex: 1;
    min-width: 0;

    color: #20334f;

    font-weight: 700;

    line-height: 1.6;

    text-decoration: none;

    transition: color 0.2s ease;
}

.public-product-detail__category-link:hover {
    color: #168ac1;
}

.public-product-detail__category-link.is-active {
    color: #168ac1;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 767px) {

    .public-category-detail__image {
        height: 230px;
    }
}

/* ==========================================================
   CATEGORY PRODUCT GRID — RESPONSIVE
   ========================================================== */

/* Tablet */
@media (min-width: 768px) and (max-width: 1199px) {

    .public-category-detail__product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-category-detail__product-image {
        height: 165px;
    }
}

/* Mobile */
@media (max-width: 767px) {

    .public-category-detail__product-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .public-category-detail__product-image {
        height: 190px;
    }
}

/* ==========================================================
   CATEGORY DETAIL — VIEW PRODUCT LINK
   ========================================================== */

.public-category-detail__product-card
.public-category-detail__product-info > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    align-self: flex-start;

    gap: 8px;

    margin-top: auto;
    padding: 8px 12px;

    border: 1px solid #dceef8;
    border-radius: 7px;

    background: #edf8fd;
    color: #168ac1;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

/* Hover */

.public-category-detail__product-card:hover
.public-category-detail__product-info > span {
    background: #168ac1;
    border-color: #168ac1;
    color: #ffffff;
}

/* Keep action aligned across cards */

.public-category-detail__product-info {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.public-category-detail__product-info > p {
    margin-bottom: 18px;
}

/* ==========================================================
   PRODUCT DETAIL — THUMBNAIL ONLY GALLERY
   ========================================================== */

.public-product-detail__gallery-grid {
    display: grid;

    grid-template-columns: repeat(
        auto-fill,
        minmax(110px, 1fr)
    );

    gap: 14px;

    margin-top: 24px;
}


/* Thumbnail */

.public-product-detail__gallery-grid
.public-product-detail__thumbnail {
    display: block;

    width: 100%;
    height: 110px;

    padding: 0;

    border: 2px solid #e2e8f0;
    border-radius: 10px;

    background: #f3f6fa;

    overflow: hidden;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


/* Thumbnail Image */

.public-product-detail__gallery-grid
.public-product-detail__thumbnail img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* Hover */

.public-product-detail__gallery-grid
.public-product-detail__thumbnail:hover {
    border-color: #25a9e1;

    box-shadow: 0 5px 18px rgba(37, 169, 225, 0.15);

    transform: translateY(-2px);
}


/* Focus */

.public-product-detail__gallery-grid
.public-product-detail__thumbnail:focus-visible {
    outline: 3px solid #25a9e1;
    outline-offset: 3px;
}


/* Responsive */

@media (max-width: 639px) {

    .public-product-detail__gallery-grid {
        grid-template-columns: repeat(
            auto-fill,
            minmax(85px, 1fr)
        );

        gap: 10px;
    }

    .public-product-detail__gallery-grid
    .public-product-detail__thumbnail {
        height: 90px;
    }

}

/* ==========================================================
   PRODUCT DETAIL — LIGHTBOX PREVIEW
   Full image, centered, responsive
   ========================================================== */


/* ==========================================================
   LIGHTBOX OVERLAY
   ========================================================== */

.public-product-lightbox {
    position: fixed;
    inset: 0;

    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100vh;
    height: 100dvh;

    padding: 60px 24px 30px;

    box-sizing: border-box;

    background: rgba(4, 16, 42, 0.96);

    overflow-y: auto;
}

.public-product-lightbox[x-cloak] {
    display: none !important;
}


/* ==========================================================
   LIGHTBOX CONTENT
   ========================================================== */

.public-product-lightbox__content {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 16px;

    width: 100%;
    max-width: 1100px;
    max-height: 100%;

    margin: auto;

    min-width: 0;
    min-height: 0;
}


/* ==========================================================
   MAIN IMAGE — SHOW ENTIRE IMAGE
   ========================================================== */

.public-product-lightbox__image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 72vh;
    max-height: min(72dvh, calc(100dvh - 150px));

    object-fit: contain;
    object-position: center;

    border-radius: 12px;

    flex-shrink: 1;
}


/* ==========================================================
   IMAGE CAPTION
   ========================================================== */

.public-product-lightbox__caption {
    margin: 0;

    color: rgba(255, 255, 255, 0.85);

    font-size: 14px;
    line-height: 1.6;

    text-align: center;
}


/* ==========================================================
   CLOSE BUTTON
   ========================================================== */

.public-product-lightbox__close {
    position: fixed;

    top: 24px;
    right: 28px;

    z-index: 10000;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.08);

    color: #ffffff;

    font-size: 26px;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.public-product-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #ffffff;
}


/* ==========================================================
   RESPONSIVE — MOBILE
   ========================================================== */

@media (max-width: 639px) {

    .public-product-lightbox {
        padding: 65px 15px 25px;
    }

    .public-product-lightbox__image {
        max-width: 100%;
        max-height: 65vh;
        max-height: min(65dvh, calc(100dvh - 140px));

        border-radius: 8px;
    }

    .public-product-lightbox__close {
        top: 18px;
        right: 18px;
    }

    .public-product-lightbox__caption {
        font-size: 12px;
    }
}

/* ==========================================================
   REQUEST A QUOTE — SCROLL POSITION
   ========================================================== */

#request-a-quote {
    scroll-margin-top: 90px;
}