
@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/fredoka-600.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF;
}

@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/fredoka-700.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF;
}

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/figtree-400.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF;
}

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/figtree-600.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF;
}

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/figtree-700.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF;
}

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("/fonts/figtree-800.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF;
}



.inquiry-msg-card {
  --inq-icon-bg: #eef4fd;
  position: relative;
  margin-top: 0;
  padding: 28px 32px 24px;
  border: 1px solid #e6ecf4;
  border-radius: 28px;
  background:
    radial-gradient(circle at calc(100% - 70px) 92px, #ffd84d 0 18px, transparent 19px),
    radial-gradient(circle at calc(100% - 30px) 66px, #f8a5b6 0 7px, transparent 8px),
    radial-gradient(circle at calc(100% - 34px) 128px, #a9cbf5 0 9px, transparent 10px),
    radial-gradient(circle at calc(100% + 20px) -40px, #fde4ec 0 130px, transparent 131px),
    radial-gradient(circle at 18px calc(100% - 64px), #fbe8b0 0 9px, transparent 10px),
    radial-gradient(circle at 16px calc(100% - 30px), #a9cbf5 0 6px, transparent 7px),
    radial-gradient(circle at -30px calc(100% + 30px), #dbe8fb 0 70px, transparent 71px),
    #fbfcfe;
  box-shadow: 0 24px 60px -24px rgba(0, 30, 96, 0.22);
  box-sizing: border-box;
  text-align: left;
}

.inquiry-msg-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.inquiry-msg-title {
  margin: 0;
  color: var(--brand-navy, #1a4894);
  font-family: var(--font-display);
  font-size: clamp(28px, 1.2vw + 14px, 34px);
  font-weight: var(--w-display);
  line-height: 1.1;
  letter-spacing: var(--ls-h1);
}

.inquiry-msg-title::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 22px;
  margin-left: 4px;
  vertical-align: top;
  background:
    radial-gradient(ellipse 4px 7px at 7px 8px, var(--brand-yellow) 96%, transparent),
    radial-gradient(ellipse 7px 4px at 17px 15px, var(--brand-red) 96%, transparent);
}

.inquiry-msg-form {
  --inq-icon-bg: #eef4fd;
  container: inquiry-msg-form / inline-size;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  text-align: left;
}

.inquiry-msg-field {
  position: relative;
  width: 100%;
  min-width: 0;
}

.inquiry-msg-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@container inquiry-msg-form (max-width: 460px) {
  .inquiry-msg-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.inquiry-msg-form input,
.inquiry-msg-form textarea {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  padding: 11px 16px 11px 60px;
  border: 1px solid #d5dfec;
  border-radius: 12px;
  outline: none;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: 21px center, 0 0;
  background-size: 18px 18px, auto;
  color: var(--brand-ink, #27324a);
  font-family: inherit;
  font-size: 16px;
  font-weight: var(--w-body);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.inquiry-msg-form textarea {
  min-height: 100px;
  max-height: 320px;
  padding-top: 13px;
  background-position: 21px 15px, 0 0;
  line-height: 1.5;
  resize: vertical;
}

.inquiry-msg-form input[name="name"] {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a4894' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3C/svg%3E"),
    radial-gradient(circle at 30px 50%, var(--inq-icon-bg) 0 18px, transparent 19px);
}

.inquiry-msg-form input[name="email"] {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a4894' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"),
    radial-gradient(circle at 30px 50%, var(--inq-icon-bg) 0 18px, transparent 19px);
}

.inquiry-msg-form input[name="telephone"] {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a4894' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"),
    radial-gradient(circle at 30px 50%, var(--inq-icon-bg) 0 18px, transparent 19px);
}

.inquiry-msg-form input[name="country"] {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a4894' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"),
    radial-gradient(circle at 30px 50%, var(--inq-icon-bg) 0 18px, transparent 19px);
}

.inquiry-msg-form textarea[name="message"] {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a4894' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h8M8 9h2'/%3E%3C/svg%3E"),
    radial-gradient(circle at 30px 24px, var(--inq-icon-bg) 0 18px, transparent 19px);
}

.inquiry-msg-field:has(> :is(input[name="email"], input[name="telephone"]):placeholder-shown:not([placeholder^="*"]))::before {
  content: "*";
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 49px;
  color: var(--brand-red);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-40%);
  pointer-events: none;
}

.inquiry-msg-form .inquiry-msg-required {
  color: var(--brand-red);
  font-size: 1.25em;
  font-weight: 800;
  line-height: 1;
}

.inquiry-msg-form input:focus,
.inquiry-msg-form textarea:focus {
  border-color: var(--brand-sky);
  box-shadow: 0 0 0 3px rgba(50, 99, 201, 0.18);
}

.inquiry-msg-form input::placeholder,
.inquiry-msg-form textarea::placeholder {
  color: #4a5876;
  font-size: 16px;
}

.inquiry-msg-form .inquiry-msg-hint,
.inquiry-msg-form [data-captcha-status] {
  margin: 0;
  color: var(--muted, #637280);
  font-size: 13px;
  line-height: 1.6;
}

.inquiry-msg-form [data-captcha-status]:empty {
  display: none;
}

.inquiry-msg-form .inquiry-msg-captcha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
}

.inquiry-msg-form .inquiry-msg-captcha__label {
  display: contents;
  color: var(--brand-navy, #1a4894);
  font-size: 13px;
  font-weight: 700;
}

.inquiry-msg-captcha__label > span,
.inquiry-msg-form [data-captcha-status] {
  grid-column: 1 / -1;
}

.inquiry-msg-form input[name="captcha_answer"] {
  grid-column: 1;
  padding-left: 16px;
  letter-spacing: 0.08em;
}

.inquiry-msg-form input[name="captcha_answer"]::placeholder {
  letter-spacing: normal;
}

.inquiry-msg-form .inquiry-msg-captcha__controls {
  display: flex;
  grid-column: 2;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 208px;
}

.inquiry-msg-form [data-captcha-image] {
  width: auto;
  max-width: 100%;
  height: 46px;
  object-fit: contain;
  border: 1px solid #d5dfec;
  border-radius: 12px;
  background: #ffffff;
}

.inquiry-msg-form [data-captcha-refresh] {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid #d5dfec;
  border-radius: 50%;
  background: var(--inq-icon-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a4894' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.6-6.4'/%3E%3Cpath d='M21 4v5h-5'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  color: transparent;
  font-size: 0;
  cursor: pointer;
}

.inquiry-msg-form [data-captcha-refresh]:hover:not(:disabled) {
  border-color: var(--brand-sky);
}

.inquiry-msg-form [data-captcha-refresh]:focus-visible {
  outline: 2px solid #1e8ece;
  outline-offset: 3px;
}

.inquiry-msg-form button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.inquiry-msg-action {
  position: relative;
  margin-top: 4px;
}

.inquiry-msg-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  padding: 0 64px;
  border: none;
  border-radius: 9999px;
  background: var(--brand-red);
  box-shadow: 0 14px 28px -12px rgba(225, 32, 40, 0.6);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--w-display);
  cursor: pointer;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.inquiry-msg-submit:hover {
  background: var(--brand-red-hover);
  box-shadow: 0 14px 28px -12px rgba(168, 38, 43, 0.6);
}

.inquiry-msg-submit:active {
  background: var(--brand-red-active);
}

.inquiry-msg-submit__badge {
  position: absolute;
  left: 10px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 20px 20px no-repeat,
    linear-gradient(135deg, #ffd23f, #f5a623);
}

.inquiry-msg-submit__badge svg {
  display: none;
}

.inquiry-msg-status {
  min-height: 1.2em;
  margin-top: 0.4rem;
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: center;
}

.inquiry-msg-status:empty {
  display: none;
}

.inquiry-msg-status.error {
  color: #b3261e;
  font-weight: var(--w-ui);
}

.inquiry-msg-status.success {
  color: #0f7a52;
  font-weight: var(--w-ui);
}

@media (max-width: 560px) {
  .inquiry-msg-card {
    padding: 28px 20px 22px;
    border-radius: 22px;
    background:
      radial-gradient(circle at calc(100% + 20px) -40px, #fde4ec 0 100px, transparent 101px),
      radial-gradient(circle at -30px calc(100% + 30px), #dbe8fb 0 56px, transparent 57px),
      #fbfcfe;
  }

  .inquiry-msg-submit {
    height: 50px;
    font-size: 18px;
  }

  .inquiry-msg-form .inquiry-msg-captcha {
    column-gap: 8px;
  }

  .inquiry-msg-form .inquiry-msg-captcha__controls {
    gap: 8px;
    min-width: 176px;
  }

  .inquiry-msg-form [data-captcha-image] {
    height: 44px;
  }

  .inquiry-msg-form [data-captcha-refresh] {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }
}

.faq-universal-section {
  padding: clamp(3.5rem, 6vw, 5.5rem) 0;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.faq-universal-layout {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
  box-sizing: border-box;
}

.faq-universal-left {
  text-align: left;
}

.faq-universal-kicker {
  font-size: 0.82rem;
  font-weight: var(--w-strong);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #104c9e;
  margin: 0 0 0.5rem;
}

.faq-universal-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--w-display-sub);
  color: #0f172a;
  line-height: var(--lh-h2);
  margin: 0 0 0.75rem;
  letter-spacing: var(--ls-h2);
}

.faq-universal-desc {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0 0 1rem;
}

.faq-universal-list {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 0.5rem 1.5rem;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.03);
}

.faq-universal-list details {
  border-bottom: 1px solid #f1f5f9;
  transition: all 0.2s ease;
}

.faq-universal-list details:last-child {
  border-bottom: none;
}

.faq-universal-list summary {
  position: relative;
  list-style: none;
  font-size: 0.98rem;
  font-weight: var(--w-strong);
  color: #1e293b;
  padding: 1.15rem 2.25rem 1.15rem 0;
  cursor: pointer;
  transition: color 0.2s ease;
}

.faq-universal-list summary::-webkit-details-marker {
  display: none;
}

.faq-universal-list summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.35rem;
  font-weight: var(--w-ui);
  color: #104c9e;
  line-height: 1;
}

.faq-universal-list details[open] summary::after {
  content: "\2212";
}

.faq-universal-list summary:hover {
  color: #104c9e;
}

.faq-universal-list details > div,
.faq-universal-list details > p {
  margin: 0;
  padding: 0 1.25rem 1.25rem 0;
  font-size: 0.9rem;
  line-height: 1.65;
  color: #475569;
}

.faq-universal-list details p + p {
  margin-top: 0.5rem;
}

@media (max-width: 900px) {
  .faq-universal-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

:is(
  p.section-kicker,
  .sol-kicker,
  .about-kicker,
  .acc-kicker,
  .prj-kicker,
  .prod-kicker,
  .catalog-kicker,
  .cat-kicker,
  .contact-process-kicker,
  .blog-eyebrow,
  .contact-eyebrow,
  .about-hero__eyebrow
) {
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto;
  max-width: 100%;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--color-fire-engine);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--w-strong);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-align: left;
}

:is(
  p.section-kicker,
  .sol-kicker,
  .about-kicker,
  .acc-kicker,
  .prj-kicker,
  .prod-kicker,
  .catalog-kicker,
  .cat-kicker,
  .contact-process-kicker,
  .blog-eyebrow,
  .contact-eyebrow,
  .about-hero__eyebrow
)::before {
  content: "";
  flex: 0 0 28px;
  width: 28px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--brand-red);
}

:is(
  p.section-kicker,
  .sol-kicker,
  .about-kicker,
  .acc-kicker,
  .prj-kicker,
  .prod-kicker,
  .catalog-kicker,
  .cat-kicker,
  .contact-process-kicker,
  .blog-eyebrow,
  .contact-eyebrow,
  .about-hero__eyebrow
) :is(a, span) {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

:is(
  .prod-cta,
  .cat-cta,
  .cat-inquiry,
  .sol-calc-box,
  .contact-intro,
  .res-hero,
  .about-section--navy,
  .svc-cta,
  .sol-slim-cta,
  [data-theme="dark"]
) :is(
  p.section-kicker,
  .sol-kicker,
  .about-kicker,
  .acc-kicker,
  .prj-kicker,
  .prod-kicker,
  .catalog-kicker,
  .cat-kicker,
  .contact-process-kicker,
  .blog-eyebrow,
  .contact-eyebrow,
  .about-hero__eyebrow
) {
  color: var(--brand-yellow);
}

:is(
  .prod-cta,
  .cat-cta,
  .cat-inquiry,
  .sol-calc-box,
  .contact-intro,
  .res-hero,
  .about-section--navy,
  .svc-cta,
  .sol-slim-cta,
  [data-theme="dark"]
) :is(
  p.section-kicker,
  .sol-kicker,
  .about-kicker,
  .acc-kicker,
  .prj-kicker,
  .prod-kicker,
  .catalog-kicker,
  .cat-kicker,
  .contact-process-kicker,
  .blog-eyebrow,
  .contact-eyebrow,
  .about-hero__eyebrow
)::before {
  background: var(--brand-yellow);
}


:root {
  --color-fire-engine: #c23036;
  --color-fire-engine-dark: #8c1b20;

  --color-twilight: #001e60;
  --color-twilight-light: #002e8a;
  --color-twilight-rgb: 0, 30, 96;

  --color-sapphire: #005699;
  --color-sapphire-light: #3da7ff;

  --color-peach: #fbc79a;
  --color-peach-light: #fde2cd;

  --color-pearl: #f8f9fb;
  --color-pearl-dark: #edeff4;

  --color-charcoal: #343e46;
  --color-charcoal-light: #637280;

  --color-powder: #cedbe5;

  --navy: var(--color-twilight);
  --blue: var(--color-fire-engine);
  --blue-hover: var(--color-twilight);
  --blue-2: var(--color-sapphire);
  --cyan: var(--color-sapphire-light);
  --orange: var(--color-fire-engine);
  --orange-ink: var(--color-fire-engine-dark);
  --ink: var(--color-charcoal);
  --muted: var(--color-charcoal-light);
  --line: #e2e8f0;
  --paper: var(--color-pearl);
  --band: #f1f5f9;
  --warm: var(--color-peach-light);

  --radius-sm: 8px;
  --radius: 20px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --radius-pill: 9999px;
  --site-content-max: 1400px;
  --site-content-gutter: 80px;
  --site-content-width: min(var(--site-content-max), calc(100% - var(--site-content-gutter)));
  --max: var(--site-content-max);
  --gutter: clamp(20px, 5vw, 72px);
  --header: 96px;

  --font-display: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --brand-font: var(--font-body);

  --w-display: 700;
  --w-display-sub: 600;
  --w-h3: 800;
  --w-strong: 700;
  --w-ui: 600;
  --w-body: 400;

  --ls-h1: -0.02em;
  --ls-h2: -0.015em;
  --ls-stat: -0.01em;
  --ls-label: 0.12em;
  --ls-button: 0.01em;

  --lh-display: 1.07;
  --lh-h2: 1.15;
  --lh-stat: 1.1;
  --lh-head: 1.25;
  --lh-h3: 1.3;
  --lh-h4: 1.35;
  --lh-body: 1.65;
  --lh-caption: 1.6;
  --lh-tight: 1.4;

  --fs-h1: clamp(36px, 6.4vw, 64px);
  --fs-h2: 40px;
  --fs-stat: clamp(24px, 3.2vw, 32px);
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body: 16px;
  --fs-nav: 15px;
  --fs-button: 15px;
  --fs-caption: 14px;
  --fs-label: 12px;

  --measure: 68ch;
  --section-space: 76px;

  --brand-shadow: 0 8px 24px rgba(0, 30, 96, 0.06);
  --brand-shadow-lift: 0 20px 42px -8px rgba(0, 30, 96, 0.16);
  --motion: 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);

  --brand-navy: #1a4894;
  --brand-red: #e12028;
  --brand-red-hover: #a8262b;
  --brand-red-active: #932025;
  --brand-sky: #3263c9;
  --brand-yellow: #faca2b;
  --brand-pink: #f8b0be;
  --brand-ink: #27324a;
  --brand-muted: #5a6882;
  --brand-tint: #e9f3fe;

  --brand-tricolor: linear-gradient(90deg, var(--brand-sky) 0 36%, var(--brand-yellow) 36% 64%, var(--brand-red) 64%);

  --brand-deco-top-right:
    radial-gradient(circle at calc(100% + 30px) 140px, #c3d7ff 0 140px, transparent 141px),
    radial-gradient(circle at calc(100% - 210px) 56px, var(--brand-yellow) 0 10px, transparent 11px);
  --brand-deco-bottom-left:
    radial-gradient(circle at -40px calc(100% + 60px), #fde4ec 0 200px, transparent 201px);

  --fs-section: clamp(30px, 2.2vw + 18px, 50px);
  --fs-subsection: clamp(24px, 1.55vw + 18px, 40px);
  --fs-lead: clamp(16px, 0.25vw + 14px, 18px);
}

@media (width <= 900px) {
  :root {
    --site-content-gutter: 40px;
  }
}

@media (width <= 560px) {
  :root {
    --site-content-gutter: 32px;
    --brand-deco-top-right: none;
    --brand-deco-bottom-left: none;
  }
}

@media (max-width: 1023px) {
  :root {
    --fs-h2: 34px;
    --fs-h3: 21px;
  }
}

@media (max-width: 639px) {
  :root {
    --fs-h2: 28px;
    --fs-h3: 20px;
    --fs-h4: 17px;
    --fs-body: 15.5px;
    --fs-nav: 14.5px;
    --fs-caption: 13.5px;
    --fs-label: 11.5px;
    --ls-h1: -0.015em;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --w-display: 600;
    --w-h3: 700;
    --w-strong: 600;
  }
}

:root[data-theme="dark"] {
  --w-display: 600;
  --w-h3: 700;
  --w-strong: 600;
}

@keyframes softplay-blob-1 {
  0% {
    border-radius: 74% 26% 68% 32% / 45% 61% 39% 55%;
    transform: rotate(0deg) scale(1);
  }
  33% {
    border-radius: 58% 42% 47% 53% / 63% 38% 62% 37%;
    transform: rotate(120deg) scale(1.04);
  }
  66% {
    border-radius: 35% 65% 59% 41% / 49% 59% 41% 51%;
    transform: rotate(240deg) scale(0.96);
  }
  100% {
    border-radius: 74% 26% 68% 32% / 45% 61% 39% 55%;
    transform: rotate(360deg) scale(1);
  }
}

@keyframes softplay-blob-2 {
  0% {
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    transform: rotate(0deg) translate(0, 0);
  }
  50% {
    border-radius: 70% 30% 46% 54% / 30% 64% 36% 70%;
    transform: rotate(180deg) translate(20px, -15px);
  }
  100% {
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    transform: rotate(360deg) translate(0, 0);
  }
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--site-header-height, 160px);
  overflow-x: clip;
}
main section[id],
main .delivered-section { scroll-margin-top: 16px; }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--w-body);
  line-height: var(--lh-body);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, input, select, textarea, a { -webkit-tap-highlight-color: transparent; }
button, a, summary { touch-action: manipulation; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex="0"]:focus-visible {
  outline: 3px solid rgba(194, 48, 54, 0.45);
  outline-offset: 3px;
}
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 {
  color: var(--navy);
}
h1 {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-h1);
  text-wrap: balance;
}
h2 {
  font-family: var(--font-display);
  font-weight: var(--w-display-sub);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}
h3 {
  font-family: var(--font-body);
  font-weight: var(--w-h3);
  line-height: var(--lh-h3);
  letter-spacing: 0;
}
h4 {
  font-family: var(--font-body);
  font-weight: var(--w-strong);
  line-height: var(--lh-h4);
  letter-spacing: 0;
}
.stat-number,
.spec-table td,
.price { font-variant-numeric: tabular-nums; }

.spec-table th {
  font-family: var(--font-body);
  font-weight: var(--w-strong);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.spec-table td {
  font-family: var(--font-body);
  font-weight: var(--w-body);
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
}

.btn {
  font-family: var(--font-body);
  font-weight: var(--w-strong);
  font-size: var(--fs-button);
  letter-spacing: var(--ls-button);
  padding: 13px 26px;
  border-radius: 999px;
}

@media print {
  :root {
    --font-display: Georgia, serif;
    --font-body: Georgia, serif;
  }
  body {
    font-size: 11pt;
    line-height: 1.5;
  }
}
ul { margin: 0; padding: 0; list-style: none; }
.wrap,
body[data-site-design] main .cube-wrap {
  width: var(--site-content-width);
  max-width: none;
  margin-inline: auto;
}

.cta, .cta-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-button);
  font-weight: var(--w-strong);
  line-height: 1;
  letter-spacing: var(--ls-button);
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  text-decoration: none;
  transition: background var(--motion), color var(--motion), border-color var(--motion), transform var(--motion), box-shadow var(--motion);
}

.cta {
  background: var(--color-fire-engine);
  border: 1.5px solid var(--color-fire-engine);
  color: #fff;
  box-shadow: 0 4px 14px rgba(194, 48, 54, 0.25);
}
.cta:hover {
  background: var(--color-twilight);
  border-color: var(--color-twilight);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 30, 96, 0.25);
}
.cta:active {
  transform: translateY(0);
}

.cta-outline {
  background: #fff;
  color: var(--color-twilight);
  border: 1.5px solid var(--color-twilight);
  box-shadow: 0 2px 8px rgba(0, 30, 96, 0.06);
}
.cta-outline:hover {
  background: var(--color-twilight);
  color: #fff;
  border-color: var(--color-twilight);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 30, 96, 0.18);
}
.cta-outline:active {
  transform: translateY(0);
}

@media (max-width: 1180px) {
  :root { --header: 72px; --section-space: 64px; }
}
@media (max-width: 640px) {
  :root { --gutter: 20px; --section-space: 48px; --header: 72px; }
  h1, h2, h3, h4, p, li, dt, dd {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important;
  }
}
@media (max-width: 480px) {
  :root {
    --gutter: 16px;
    --section-space: 40px;
  }
  .res-actions, .cta-group, .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .res-actions > a,
  .res-actions > button,
  .cta-group > a,
  .cta-group > button {
    width: 100%;
    min-height: 46px;
  }
}
@media (max-width: 380px) {
  :root {
    --gutter: 14px;
    --section-space: 36px;
  }
  .cta, .cta-outline {
    padding: 10px 16px;
    gap: 8px;
    font-size: 12.5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta, .cta-outline { transition: none; }
}

.table-responsive, [data-table-scroll] {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block: 16px;
  scrollbar-width: thin;
}
.table-responsive table, [data-table-scroll] table {
  min-width: 540px;
}
.table-responsive::-webkit-scrollbar,
[data-table-scroll]::-webkit-scrollbar {
  height: 5px;
}
.table-responsive::-webkit-scrollbar-thumb,
[data-table-scroll]::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}


.story-wrap, #hero .hero-container {
  width: var(--site-content-width);
  max-width: none;
  margin-inline: auto;
}

main section[id], #process, #inquiry { scroll-margin-top: 16px; }

.solution-card[id], .process-steps > li[id] { scroll-margin-top: 16px; }


.equipment-all, .customer-review-fallback .story-link, #hero .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-button);
  font-weight: var(--w-strong);
  line-height: 1;
  letter-spacing: var(--ls-button);
  text-align: center;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--motion), color var(--motion), border-color var(--motion), transform var(--motion), box-shadow var(--motion);
}

#hero .btn-primary {
  background: var(--color-fire-engine);
  border: 1.5px solid var(--color-fire-engine);
  color: #fff;
  box-shadow: 0 4px 14px rgba(194, 48, 54, 0.25);
}

#hero .btn-primary:hover {
  background: var(--color-twilight);
  border-color: var(--color-twilight);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 30, 96, 0.25);
}

.equipment-all, .customer-review-fallback .story-link, #hero .btn-secondary {
  background: #fff;
  color: var(--color-twilight);
  border: 1.5px solid var(--color-twilight);
  box-shadow: 0 2px 8px rgba(0, 30, 96, 0.06);
}

.equipment-all:hover, .customer-review-fallback .story-link:hover, #hero .btn-secondary:hover {
  background: var(--color-twilight);
  color: #fff;
  border-color: var(--color-twilight);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 30, 96, 0.18);
}

.story-link, .text-link, .venue-inquiry {
  color: var(--color-sapphire);
  font-weight: var(--w-ui);
  line-height: 1.65;
  text-underline-offset: 4px;
  transition: color var(--motion);
}

.story-link:hover, .text-link:hover, .venue-inquiry:hover {
  color: var(--color-fire-engine);
  text-decoration: underline;
}

#hero.hero {
  --hero-blue: var(--color-fire-engine);
  --hero-ink: var(--color-twilight);
  font-family: var(--font-body);
}

#hero .hero-content h1 {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  color: var(--color-twilight);
  letter-spacing: var(--ls-h1);
}

#hero .hero-content { width: 47%; }

#hero .hero-brand-promise {
  font-weight: var(--w-strong);
  letter-spacing: var(--ls-label);
  color: var(--color-fire-engine);
  text-transform: uppercase;
  font-size: var(--fs-label);
}

#hero .hero-actions { gap: 14px; }

.section, .story-section, .manufacturer-section { margin-top: 0; padding-block: var(--section-space); }

.delivered-section, .customer-section, .inquiry-section { background: #fff; }
.equipment-section { background: var(--color-pearl); }
.venue-section, .manufacturer-section { background: var(--color-pearl); }

.equipment-section .equipment-header h2, .story-title, .section-heading h2, .manufacturer-heading h2, .section h2 {
  color: var(--color-twilight);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--w-display-sub);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  text-wrap: balance;
}
.section-heading h2, .manufacturer-heading h2 { max-width: 640px; text-align: left; }
.story-title { max-width: 640px; }

.equipment-eyebrow, .story-eyebrow, .customer-heading .story-eyebrow, .manufacturer-eyebrow, .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--color-fire-engine);
  font-size: var(--fs-label);
  font-weight: var(--w-strong);
  letter-spacing: var(--ls-label);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}

.equipment-eyebrow::before, .story-eyebrow::before, .manufacturer-eyebrow::before, .eyebrow::before {
  content: "";
  width: 28px;
  height: 3px;
  flex: 0 0 28px;
  background: var(--color-fire-engine);
  border-radius: 9999px;
}

.equipment-intro, .story-intro, .manufacturer-intro, .section-intro, .section-heading > p {
  color: var(--color-charcoal-light);
  font-size: 15px;
  font-weight: var(--w-body);
  line-height: 1.8;
}

.equipment-header, .story-header, .section-heading { gap: 32px; }
.story-header, .section-heading { margin-bottom: 32px; }
.section-footer {
  margin-top: 28px;
  padding-top: 20px;
  border-color: var(--line);
  color: var(--color-charcoal-light);
  font-size: 13px;
}

.case-location { color: var(--color-twilight); font-weight: var(--w-strong); }
.case-location span { color: var(--color-charcoal-light); }
.manufacturer-visual { border-color: var(--line); border-radius: var(--radius); box-shadow: var(--brand-shadow); }

.customer-source, .customer-review-source { color: var(--color-charcoal-light); }
.customer-source svg { color: var(--color-sapphire); }
.customer-review-shell {
  border: 1.5px solid #e2e8f0;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 30, 96, 0.06);
  padding: clamp(28px, 4vw, 44px);
}
.customer-review-fallback p { color: var(--color-charcoal-light); }
.customer-review-fallback h3 { color: var(--color-twilight); font-weight: var(--w-h3); }

.inquiry-box {
  max-width: 820px;
  padding: clamp(28px, 3.5vw, 44px);
  border: 1.5px solid #fff;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 20px 50px rgba(0, 12, 46, 0.28);
}

.row2 { gap: 16px; }
.row2 > div { min-width: 0; }

.send {
  min-height: 50px;
  margin-top: 22px;
  padding: 13px 28px;
  border-radius: var(--radius-pill);
  background: var(--color-fire-engine);
  border: 1.5px solid var(--color-fire-engine);
  color: #fff;
  font-size: 14px;
  font-weight: var(--w-ui);
  line-height: 1.6;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(194, 48, 54, 0.25);
  transition: background var(--motion), border-color var(--motion), transform var(--motion), box-shadow var(--motion);
}

.send:hover {
  background: var(--color-twilight);
  border-color: var(--color-twilight);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 30, 96, 0.25);
}

.drawer { border-left: 1px solid var(--line); box-shadow: -12px 0 40px rgba(0, 30, 96, 0.14); }
.drawer-head { color: var(--color-twilight); font-weight: var(--w-strong); }
.drawer .close { color: var(--color-twilight); }

@media (max-width: 1180px) {
  .customer-heading { gap: 28px; }
}

@media (min-width: 981px) and (max-width: 1180px) {
  #hero .hero-content { width: 46%; }
  #hero .btn { padding-inline: 20px; gap: 12px; }
}

@media (max-width: 980px) {
  #hero .hero-content { width: 100%; }
  .manufacturer-section { margin-top: 0; }
}

@media (max-width: 820px) {
  .equipment-header, .story-header, .section-heading { align-items: flex-start; flex-direction: column; gap: 20px; }
  .customer-heading { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 640px) {
  #hero .btn { padding-inline: 18px; gap: 10px; }
  .equipment-intro, .story-intro, .manufacturer-intro, .section-intro, .section-heading > p { font-size: 14px; }
  .venue-help, .section-footer { flex-direction: column; align-items: flex-start; gap: 12px; }
  .customer-review-shell { padding: 16px; }
  .customer-review-fallback .story-link { white-space: normal; }
  .inquiry-box { padding: 24px 20px; }
}

@media (max-width: 380px) {
  #hero .hero-actions { flex-direction: column; }
  #hero .btn { flex: auto; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta, .cta-outline, .equipment-all, .customer-review-fallback .story-link, #hero .btn, .send, .story-link, .text-link, .venue-inquiry, .equipment-card { transition: none; }
}

.cat-checklist{counter-reset:site-requirement}.cat-checklist>li{counter-increment:site-requirement}.cat-checklist>li>span:empty::before{content:counter(site-requirement)}
.catalog-empty{grid-column:1/-1;padding:32px;text-align:center} [hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

:root {
  --site-motion-fast: 180ms;
  --site-motion-normal: 240ms;
  --site-motion-ease: cubic-bezier(.2, .7, .3, 1);
}
@media (prefers-reduced-motion: no-preference) {
  body :is(a, button, summary, input, select, textarea, [role="button"]) {
    transition-property: color, background-color, border-color, box-shadow, opacity;
    transition-duration: var(--site-motion-fast);
    transition-timing-function: var(--site-motion-ease);
  }
  body main :is(.cta, .cta-outline, .btn, .send, .res-btn-ghost, .contact-submit) {
    transition: color var(--site-motion-fast), background-color var(--site-motion-fast),
      border-color var(--site-motion-fast), box-shadow var(--site-motion-normal),
      transform var(--site-motion-normal) var(--site-motion-ease),
      translate var(--site-motion-normal) var(--site-motion-ease);
  }
  body main :is(.equipment-card, .product-card, .project-card, .blog-topic,
    .blog-article, .res-guide, .res-card, .res-task, .res-download-card, .guide-related) {
    transition: border-color var(--site-motion-fast), background-color var(--site-motion-fast),
      box-shadow var(--site-motion-normal) var(--site-motion-ease),
      transform var(--site-motion-normal) var(--site-motion-ease),
      translate var(--site-motion-normal) var(--site-motion-ease);
  }
  body main { animation: site-content-enter 240ms ease-out; }
  body .dropdown:not([hidden]), body details[open] > :not(summary) {
    animation: site-content-enter 180ms ease-out;
  }
  @media (hover: hover) and (pointer: fine) {
    body main :is(.cta, .cta-outline, .btn, .send, .res-btn-ghost, .contact-submit):not(:disabled):hover {
      translate: 0 -2px;
    }
    body main :is(.equipment-card, .product-card, .project-card, .blog-topic,
      .blog-article, .res-guide, .res-card, .res-task, .res-download-card, .guide-related):hover {
      translate: 0 -3px;
      box-shadow: 0 12px 28px rgb(0 30 96 / 12%);
    }
  }
}
@keyframes site-content-enter { from { opacity: .85; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  body *, body *::before, body *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}
