/* SupplySino additions layered onto the original Conicorn/Webflow CSS.
 * Keep this file scoped to the RFQ and directory components so the original
 * page geometry, IX3 targets, transitions, sliders and dropdowns stay intact.
 */
.cta-form-card-top > .circle-text { border-radius: 50%; }

/* Keep the existing hero video and reveal motion while matching SupplySino's
   restrained charcoal/lime palette and cropping its empty left edge. */
.hero-heading {
  background-image: none;
  background-clip: initial;
  -webkit-background-clip: initial;
  color: #fffefa;
  -webkit-text-fill-color: #fffefa;
  mix-blend-mode: normal;
  text-shadow: 0 2px 24px rgba(0,0,0,.28);
}
.hero-bg-video > video {
  object-position: 82% center;
  background-position: 82% center;
}

/* The logistics section follows the hero inside the same outer section. Make
   the 100vh hero wrapper the containing block for its background, so the video
   and mobile fades stay anchored to the first screen instead of the full
   hero-plus-logistics block. */
.section.hero > .hero-section-wrap {
  position: relative;
}

.supply-category-directory {
  margin-top: 3rem;
  padding: 2.25rem;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 1.5rem;
  background: color-mix(in srgb, currentColor 4%, transparent);
}
.supply-category-directory-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.5rem; }
.supply-category-directory-heading h3 { margin: 0; max-width: 34rem; }
.supply-category-directory-heading p { margin: 0; max-width: 27rem; opacity: .72; font-size: .9rem; }
.supply-category-grid, .ss-category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
}
.supply-category-card, .ss-category-card {
  min-width: 0;
  color: inherit;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 1rem;
  background: color-mix(in srgb, #fff 7%, transparent);
  overflow: hidden;
  transition: transform .35s ease, border-color .35s ease, background-color .35s ease;
}
.supply-category-card:hover, .supply-category-card:focus-within, .ss-category-card:hover, .ss-category-card:focus-within { transform: translateY(-.25rem); border-color: color-mix(in srgb, currentColor 38%, transparent); background: color-mix(in srgb, #fff 13%, transparent); }
.supply-category-image, .ss-category-image { display: block; aspect-ratio: 1.45; overflow: hidden; }
.supply-category-image img, .ss-category-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.supply-category-card:hover img, .supply-category-card:focus-within img, .ss-category-card:hover img, .ss-category-card:focus-within img { transform: scale(1.055); }
.supply-category-copy, .ss-category-copy { display: block; padding: .8rem .85rem .9rem; }
.supply-category-copy strong, .ss-category-copy strong { display: block; font-size: .88rem; line-height: 1.25; }
.supply-category-copy span, .ss-category-copy span { display: block; margin-top: .35rem; font-size: .7rem; opacity: .66; line-height: 1.4; }

/* The English directory uses one linked card rather than the article/image/copy
   structure used by the localized directory. Keep both variants visually
   consistent without changing the original page markup or motion hooks. */
.supply-category-card {
  display: flex;
  flex-direction: column;
  position: relative;
  text-decoration: none;
}
.supply-category-card > img {
  display: block;
  width: 100%;
  aspect-ratio: 1.45;
  object-fit: cover;
  flex: none;
}
.supply-category-card > .supply-category-number {
  position: absolute;
  z-index: 1;
  top: .7rem;
  left: .7rem;
  margin: 0;
  padding: .25rem .4rem;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  background: rgba(20,24,22,.62);
  color: #fff;
  font: 9px/1.2 var(--mono, monospace);
  letter-spacing: .08em;
}
.supply-category-card > .supply-category-title,
.supply-category-card > .supply-category-description,
.supply-category-card > .supply-category-link {
  display: block;
  margin-left: .85rem;
  margin-right: .85rem;
}
.supply-category-card > .supply-category-title {
  margin-top: .85rem;
  color: inherit;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
}
.supply-category-card > .supply-category-description {
  margin-top: .4rem;
  color: inherit;
  opacity: .68;
  font-size: .72rem;
  line-height: 1.45;
  text-decoration: none;
}
.supply-category-card > .supply-category-link {
  margin-top: auto;
  padding-top: .75rem;
  padding-bottom: .9rem;
  color: inherit;
  font-size: .72rem;
  line-height: 1.35;
  text-decoration: none;
}
.supply-category-card:hover > .supply-category-link,
.supply-category-card:focus-visible > .supply-category-link { text-decoration: underline; text-underline-offset: .2em; }

/* The original CTA card and its Webflow form remain the animation surface. */
.ss-rfq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.ss-rfq-fields { display: flex; flex-direction: column; gap: .65rem; }
.ss-rfq-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.ss-rfq-intro { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: .5rem; border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.ss-rfq-intro span { color: #d8fa6b; font-size: .72rem; letter-spacing: .08em; }
.ss-rfq-intro p, .ss-rfq-privacy { margin: 0; opacity: .65; font-size: .68rem; }
.ss-rfq-field, .ss-rfq-fields label { min-width: 0; display: flex; flex-direction: column; gap: .35rem; color: var(--_color---white--03, rgba(255,255,255,.75)); font-size: .72rem; line-height: 1.35; }
.ss-rfq-field-wide, .ss-rfq-fields .ss-rfq-field-wide { grid-column: 1 / -1; }
.ss-rfq-grid .form_input, .ss-rfq-fields .form_input { width: 100%; }
.ss-rfq-consent { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: .5rem; margin-top: .15rem; font-size: .68rem; opacity: .8; }
.ss-rfq-consent input { width: 1rem; min-height: 1rem; margin-top: .1rem; flex: 0 0 auto; accent-color: #d8fa6b; }
.ss-rfq-honeypot, .ss-rfq-fields .ss-rfq-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; }
.ss-rfq-field .field-hint, .ss-rfq-hint { display: block; opacity: .68; font-size: .64rem; }
#rfq-form[aria-busy="true"] { opacity: .82; }
#form-status { display: block; min-height: 1.35rem; margin: .75rem 0 0; color: #d8fa6b; font-size: .78rem; }
#form-status.error { color: #ff9b84; }
@media screen and (max-width: 991px) {
  .supply-category-grid, .ss-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .supply-category-directory { padding: 1.5rem; }
}
@media screen and (max-width: 767px) {
  .supply-category-directory-heading { display: block; }
  .supply-category-directory-heading p { margin-top: .65rem; }
  .supply-category-grid, .ss-category-grid, .ss-rfq-grid, .ss-rfq-row { grid-template-columns: 1fr 1fr; }
  .supply-category-directory { margin-top: 2rem; padding: 1.1rem; border-radius: 1rem; }
  .supply-category-copy, .ss-category-copy { padding: .65rem; }
  .supply-category-copy strong, .ss-category-copy strong { font-size: .76rem; }
  .supply-category-copy span, .ss-category-copy span { font-size: .62rem; }
}
@media screen and (max-width: 479px) {
  .supply-category-grid, .ss-category-grid, .ss-rfq-grid, .ss-rfq-row { grid-template-columns: 1fr; }
  .ss-rfq-field-wide, .ss-rfq-fields .ss-rfq-field-wide { grid-column: auto; }
}


/* Route planning sits between the cinematic hero and the existing directory.
   The original Conicorn IX3/Webflow animation rules remain untouched. */
.section.hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: 31%;
  pointer-events: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(26,26,26,0) 0%, rgba(92,99,91,.24) 36%, #b8b8b8 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
}
.ss-logistics-overview {
  position: relative;
  z-index: 3;
  padding: clamp(3.25rem, 7vw, 6.75rem) 24px clamp(3.5rem, 7vw, 6.5rem);
  color: #f5f4ee;
  background: linear-gradient(180deg, #b8b8b8 0%, #1a1f1c 19%, #1a1f1c 100%);
}
.ss-logistics-wrap { width: min(1120px, 100%); margin: 0 auto; }
.ss-logistics-heading { display: grid; grid-template-columns: 1.1fr .9fr; gap: 4vw; align-items: end; margin-bottom: 2rem; }
.ss-logistics-kicker, .ss-logistics-form-heading > span { margin: 0 0 .8rem; color: #d7fa6b; font: 10px/1.4 var(--mono, monospace); letter-spacing: .1em; }
.ss-logistics-heading h2 { margin: 0; color: #fffefa; font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: .98; letter-spacing: -.065em; }
.ss-logistics-heading h2 em { color: #d7fa6b; font-family: Georgia, serif; font-weight: 400; }
.ss-logistics-heading > p { max-width: 440px; margin: 0 0 .3rem; color: rgba(255,255,255,.64); font-size: .88rem; line-height: 1.7; }
.ss-logistics-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.ss-logistics-card { min-width: 0; overflow: hidden; background: #232c28; border: 1px solid rgba(255,255,255,.14); transition: border-color .35s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
.ss-logistics-card:hover, .ss-logistics-card:focus-within { transform: translateY(-4px); border-color: rgba(215,250,107,.65); }
.ss-logistics-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 220px; overflow: hidden; background: radial-gradient(circle at 74% 20%,rgba(215,250,107,.12),transparent 36%),linear-gradient(145deg,#34423b,#1c2521 72%); }
.ss-logistics-visual::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(180deg,transparent,rgba(15,22,19,.52)); pointer-events: none; }
.ss-logistics-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.ss-logistics-index { position: absolute; z-index: 1; left: 1rem; bottom: .75rem; color: rgba(255,255,255,.68); font: 9px/1.3 var(--mono,monospace); letter-spacing: .12em; }
.ss-logistics-copy { padding: 1.15rem 1.25rem 1.25rem; }
.ss-logistics-title-row { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.ss-logistics-title-row h3 { margin: 0; color: #fffefa; font-size: 1.5rem; letter-spacing: -.04em; }
.ss-logistics-title-row > span { color: #d7fa6b; font: 8px/1.3 var(--mono,monospace); letter-spacing: .08em; text-align: right; }
.ss-logistics-copy p { max-width: 570px; min-height: 3.5em; margin: .65rem 0 .85rem; color: rgba(255,255,255,.7); font-size: .84rem; line-height: 1.65; }
.ss-logistics-copy a, .ss-logistics-footer a { display: inline-flex; align-items: center; gap: .7rem; color: #d7fa6b; font-size: .72rem; }
.ss-logistics-copy a span, .ss-logistics-footer a span { transition: transform .25s ease; }
.ss-logistics-copy a:hover span, .ss-logistics-footer a:hover span { transform: translate(3px,-3px); }
.ss-logistics-footer { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 1rem 1.5rem; align-items: center; margin-top: 1.2rem; padding: 1rem 1.15rem; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.035); }
.ss-logistics-footer > span { color: rgba(255,255,255,.78); font: 9px/1.45 var(--mono,monospace); letter-spacing: .08em; }
.ss-logistics-footer p { margin: 0; color: rgba(255,255,255,.64); font-size: .75rem; line-height: 1.55; }
.ss-logistics-form-group { margin-top: .3rem; padding-top: 1.05rem; border-top: 1px solid rgba(255,255,255,.15); }
.ss-logistics-form-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .75rem; }
.ss-logistics-form-heading > span { margin: 0; }
.ss-logistics-form-heading p, .ss-logistics-form-note { margin: 0; color: rgba(255,255,255,.64); font-size: .72rem; }
.ss-logistics-form-group .ss-rfq-grid { row-gap: .75rem; }
.ss-logistics-form-group textarea { min-height: 72px; }
.ss-logistics-form-note { margin-top: .7rem; }
@media screen and (max-width: 767px) {
  .section.hero::after { height: 31%; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
  .ss-logistics-overview { padding: 3rem 19px 3.5rem; }
  .ss-logistics-heading { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.25rem; }
  .ss-logistics-heading > p { max-width: 600px; font-size: .8rem; }
  .ss-logistics-options { grid-template-columns: 1fr; gap: .75rem; }
  .ss-logistics-visual { min-height: 170px; }
  .ss-logistics-art { height: 100%; }
  .ss-logistics-copy { padding: .95rem; }
  .ss-logistics-copy p { min-height: 0; }
  .ss-logistics-footer { grid-template-columns: 1fr; gap: .5rem; padding: .85rem .95rem; }
  .ss-logistics-footer a { margin-top: .25rem; }
  .ss-logistics-form-heading { display: block; }
  .ss-logistics-form-heading p { margin-top: .35rem; }
}
@media screen and (max-width: 479px) {
  .navbar-brand-link {
    display: flex;
    width: 2.9rem;
    height: 2.9rem;
  }
  .navbar-brand-logo { width: 1.45rem; }
  .navbar-actions { column-gap: .55rem; }
}

.ss-logistics-art { object-fit: cover; }
.ss-logistics-air .ss-logistics-art { object-position: center 56%; }
.ss-logistics-sea .ss-logistics-art { object-position: center 53%; }
.ss-logistics-photo-credit { position: absolute; z-index: 2; right: 1rem; bottom: .7rem; color: rgba(255,255,255,.78); font-size: 9px; line-height: 1.3; }
.ss-logistics-photo-credit a { text-decoration: underline; text-underline-offset: 2px; }
.ss-logistics-index { bottom: 1.8rem; }

.ss-logistics-form-group { grid-column: 1 / -1; }

/* Keep fixed navigation from covering the heading reached by an in-page link. */
html { scroll-padding-top: 5.5rem; }
#about-section, #values-section, #service-section, #logistics-overview,
#category-directory, #process-section, #project-section, #integrations-section,
#testimonials-section, #pricing-section, #team-section, #FAQ-section, #CTA-Form {
  scroll-margin-top: 5.5rem;
}

/* On narrow screens the original translucent menu lets the page show through
   the link grid. Preserve the glass treatment while giving the menu an opaque
   reading surface. */
@media screen and (max-width: 767px) {
  .nav-menu-link-wrap {
    background-color: rgba(20,24,22,.96);
    border: 1px solid rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }
  .supply-category-card > .supply-category-title { font-size: .82rem; }
  .supply-category-card > .supply-category-description,
  .supply-category-card > .supply-category-link { font-size: .68rem; }
  .ss-logistics-copy p { font-size: .8rem; }
  .ss-logistics-footer p { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .section.hero::after { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.team-card-category-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .35rem;
  color: #627345;
  font-size: .75rem;
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease, gap .2s ease;
}
.team-card-category-link:hover { color: #263528; gap: .7rem; }
.team-card-category-link span { font-size: 1rem; }

/* Keep the template's slide-up hover interaction while making the single product CTA legible. */
#team-section .team-social-icon {
  width: auto;
  min-height: 3rem;
  aspect-ratio: auto;
  gap: .5rem;
  padding: 0 .9rem;
  border-radius: 999px;
  background-color: rgba(255,255,255,.1);
  text-decoration: none;
}
#team-section .team-social-link {
  display: block;
  color: currentColor;
  font-size: .68rem;
  line-height: 1.25;
  white-space: nowrap;
}
#team-section .team-social-icon-icon { width: 1rem; height: 1rem; }


/* Small, accessible Hero background-video controls. The template's video wrapper,
   overlay and reveal animations remain in place; controls sit above that layer. */
.hero-video-controls {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: block;
  pointer-events: none;
}
.hero-video-controls button {
  position: absolute;
  top: 50%;
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 50%;
  color: inherit;
  background: rgba(20,24,22,.52);
  font: 1.15rem/1 Georgia, serif;
  cursor: pointer;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background-color .2s ease, transform .2s ease;
}
.hero-video-controls [data-video-prev] { left: clamp(1rem, 3vw, 2.5rem); transform: translateY(-50%); }
.hero-video-controls [data-video-next] { right: clamp(1rem, 3vw, 2.5rem); transform: translateY(-50%); }
.hero-video-controls [data-video-prev]:hover,
.hero-video-controls [data-video-next]:hover { background: rgba(20,24,22,.78); }
.hero-video-controls [data-video-prev]:hover { transform: translateY(-50%) scale(1.06); }
.hero-video-controls [data-video-next]:hover { transform: translateY(-50%) scale(1.06); }
.hero-video-controls button:focus-visible { outline: 2px solid #d7fa6b; outline-offset: 2px; }
.hero-video-counter {
  position: absolute;
  right: clamp(1rem, 4vw, 3.5rem);
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  min-width: 3.25rem;
  padding: .45rem .6rem;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 999px;
  color: rgba(255,255,255,.9);
  background: rgba(20,24,22,.45);
  font: 9px/1.2 var(--mono, monospace);
  letter-spacing: .08em;
  text-align: center;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.hero-video-counter i { margin: 0 .25rem; color: rgba(255,255,255,.45); font-style: normal; }
@media (prefers-reduced-motion: reduce) {
  .hero-video-controls button { transition: none; }
}
@media screen and (max-width: 767px) {
  .hero-video-controls [data-video-prev],
  .hero-video-controls [data-video-next] { top: auto; bottom: max(1rem, env(safe-area-inset-bottom)); transform: none; }
  .hero-video-controls [data-video-prev] { left: .8rem; }
  .hero-video-controls [data-video-next] { right: .8rem; }
  .hero-video-controls [data-video-prev]:hover,
  .hero-video-controls [data-video-next]:hover { transform: scale(1.05); }
  .hero-video-counter { right: 50%; bottom: calc(max(1rem, env(safe-area-inset-bottom)) + .5rem); transform: translateX(50%); }
}

/* The first conversation needs only a name, email and a short request. */
.ss-rfq-simple-intro { margin-bottom: 1.4rem; }
.ss-rfq-simple-intro p { margin-bottom: .65rem; }
.ss-contact-choice { color: inherit; text-decoration: underline; text-underline-offset: .25em; }
.ss-rfq-optional { margin: .2rem 0 1rem; }
.ss-rfq-optional summary { cursor: pointer; padding: .7rem 0; font-size: .95rem; }
.ss-rfq-optional .ss-rfq-grid { padding-top: .75rem; }
.ss-rfq-privacy { font-size: .85rem; opacity: .75; margin: .65rem 0 1rem; }
.ss-product-category-group { display: flex; flex-direction: column; min-width: 0; }
.ss-product-category-group > .supply-category-card { flex: 1; }
.ss-category-service-link { display: inline-block; color: inherit; font-size: .8rem; line-height: 1.5; opacity: .75; padding: .65rem .15rem; text-underline-offset: .22em; }
.ss-category-service-link:hover, .ss-category-service-link:focus-visible { opacity: 1; text-decoration: underline; }