/* ===========================================================================
   C&S Industrial -- Variation 2 ("Worky" layout) -- base.css
   Structural + visual rules shared by all 3 templates. This file IS the
   "Worky Classic" look; templates/template-2.css and template-3.css only
   override identity details (radius, header/hero/banner tone, color
   blocking). Colors/fonts/sizes come from CSS custom properties that site.js
   sets at runtime from content.js -> theme.templates[N], with the fallbacks
   below. Keep class names in sync with DEPLOY/site.js.
   ========================================================================= */

:root {
  --csi-color-primary: #E2222E;
  --csi-color-primary-dark: #B3121E;
  --csi-color-ink: #242424;
  --csi-color-muted: #5B6066;
  --csi-color-tint: #FBE0E2;
  --csi-color-success: #3E9E4F;
  --csi-color-background: #FFFFFF;
  --csi-color-surface: #F7F7F8;
  --csi-color-border: #E5E5E7;
  --csi-color-header-bg: #FFFFFF;
  --csi-color-header-text: #242424;
  --csi-color-footer-bg: #242424;
  --csi-color-footer-text: #F2F2F2;
  --csi-color-dark: #242424;
  --csi-color-dark-text: #F2F2F2;
  --csi-color-highlight: #FF5A63;

  --csi-font-heading: 'Oswald', 'Arial Narrow', Arial, sans-serif;
  --csi-font-body: 'Inter', Arial, Helvetica, sans-serif;
  --csi-size-base-size: 17px;
  --csi-size-h1: 58px;
  --csi-size-h2: 38px;
  --csi-size-h3: 21px;
  --csi-size-body: 17px;
  --csi-size-small: 15px;
  --csi-size-button: 14px;
  --csi-weight-heading: 700;
  --csi-weight-body: 400;

  --csi-radius: 12px;
  --csi-radius-lg: 18px;
  --csi-radius-btn: 8px;
  --csi-max-width: 1280px;
  --csi-tracking-heading: .015em;
  --csi-label-transform: uppercase;
  --csi-label-tracking: .08em;

  --csi-shadow-sm: 0 1px 2px rgba(15, 15, 20, .05);
  --csi-shadow-premium: 0 10px 30px -10px rgba(226, 34, 46, .16), 0 1px 1px rgba(226, 34, 46, .05);
  --csi-shadow-premium-hover: 0 20px 40px -15px rgba(226, 34, 46, .26), 0 1px 2px rgba(226, 34, 46, .06);

  /* Home hero + inner-page banner tone. Templates flip these. */
  --csi-hero-bg: linear-gradient(135deg, var(--csi-color-surface) 0%, var(--csi-color-background) 50%, var(--csi-color-surface) 100%);
  --csi-hero-text: var(--csi-color-ink);
  --csi-banner-bg: var(--csi-color-dark);
  --csi-banner-text: #FFFFFF;
  --csi-banner-muted: rgba(255, 255, 255, .62);
  --csi-banner-eyebrow: var(--csi-color-highlight);
  --csi-banner-img-opacity: .22;

  /* Set by site.js from measured sizes. */
  --csi-topbar-h: 0px;
  --csi-header-top: 0px;
  --csi-header-h: 80px;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --csi-shadow-premium: 0 10px 30px -10px color-mix(in srgb, var(--csi-color-primary) 16%, transparent), 0 1px 1px color-mix(in srgb, var(--csi-color-primary) 5%, transparent);
    --csi-shadow-premium-hover: 0 20px 40px -15px color-mix(in srgb, var(--csi-color-primary) 26%, transparent), 0 1px 2px color-mix(in srgb, var(--csi-color-primary) 6%, transparent);
  }
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--csi-font-body);
  font-size: var(--csi-size-body);
  font-weight: var(--csi-weight-body);
  line-height: 1.65;
  color: var(--csi-color-ink);
  background: var(--csi-color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.csi-no-scroll { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, h5 {
  font-family: var(--csi-font-heading);
  font-weight: var(--csi-weight-heading);
  letter-spacing: var(--csi-tracking-heading);
  line-height: 1.2;
  margin: 0;
  color: var(--csi-color-ink);
}
p { margin: 0; }
ul { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--csi-color-primary); outline-offset: 3px; }
::selection { background: var(--csi-color-primary); color: #fff; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--csi-color-surface); }
::-webkit-scrollbar-thumb { background: #cbd0d6; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--csi-color-primary); }

.csi-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.csi-skip {
  position: fixed; left: 12px; top: -60px; z-index: 300; background: var(--csi-color-ink); color: #fff;
  padding: 10px 16px; border-radius: 8px; font-weight: 600; transition: top .2s;
}
.csi-skip:focus { top: 12px; }

/* --------------------------------------------------------------- layout */
.csi-container { width: 100%; max-width: var(--csi-max-width); margin: 0 auto; padding-left: 16px; padding-right: 16px; }
@media (min-width: 640px) { .csi-container { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1024px) { .csi-container { padding-left: 32px; padding-right: 32px; } }
.csi-container--narrow { max-width: 896px; }

.csi-stack > * + * { margin-top: 24px; }
.csi-stack-sm > * + * { margin-top: 12px; }

/* Pages without a hero/banner at the top need room under the fixed header. */
body[data-hero="none"] #csi-main { padding-top: var(--csi-header-h); }

/* Dot grid + soft blobs -- the Worky hero backdrop. */
.csi-dots {
  position: absolute; inset: 0; pointer-events: none; opacity: .25;
  background-image: radial-gradient(#c5cad1 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}
.csi-blob { position: absolute; width: 384px; height: 384px; border-radius: 50%; filter: blur(64px); opacity: .5; pointer-events: none; }
.csi-blob--a { top: -160px; right: -160px; background: var(--csi-color-tint); }
.csi-blob--b { bottom: -160px; left: -160px; background: #F1E6D6; }

/* ------------------------------------------------------------- type bits */
.csi-eyebrow {
  display: block;
  font-family: var(--csi-font-heading);
  font-size: calc(var(--csi-size-small) * .84);
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--csi-color-primary);
}
.csi-eyebrow--on-dark { color: var(--csi-color-highlight); }
.csi-eyebrow a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.csi-eyebrow a:hover { color: #fff; }

.csi-bar { display: block; width: 64px; height: 4px; background: var(--csi-color-primary); border-radius: 2px; }
.csi-bar--sm { width: 48px; }

.csi-lead { font-size: calc(var(--csi-size-body) * 1.08); font-weight: calc(var(--csi-weight-body) - 100); line-height: 1.75; color: var(--csi-color-muted); }
.csi-text { font-weight: calc(var(--csi-weight-body) - 100); line-height: 1.75; color: var(--csi-color-muted); }
.csi-accent-text {
  color: var(--csi-color-primary);
  background: linear-gradient(90deg, var(--csi-color-primary), var(--csi-color-highlight));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
@media (min-width: 640px) { .csi-accent-text { white-space: nowrap; } }

.csi-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--csi-color-tint);
  border: 1px solid rgba(226, 34, 46, .14);
  color: var(--csi-color-primary);
  font-family: var(--csi-font-body);
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 16px; border-radius: 999px; line-height: 1.4;
}
.csi-ping { position: relative; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.csi-ping::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: csi-ping 1.4s cubic-bezier(0, 0, .2, 1) infinite; }
.csi-pulse-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22C55E; animation: csi-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; flex-shrink: 0; }

@keyframes csi-ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes csi-pulse { 50% { opacity: .45; } }
@keyframes csi-fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ----------------------------------------------------------------- buttons */
.csi-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--csi-font-heading);
  font-size: var(--csi-size-button);
  font-weight: 600;
  letter-spacing: var(--csi-label-tracking);
  text-transform: var(--csi-label-transform);
  line-height: 1.2;
  padding: 15px 32px;
  min-height: 48px;
  border-radius: var(--csi-radius-btn);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.csi-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.csi-btn--primary { background: var(--csi-color-primary); color: #fff; box-shadow: var(--csi-shadow-premium); }
.csi-btn--primary:hover { background: var(--csi-color-primary-dark); box-shadow: var(--csi-shadow-premium-hover); }
.csi-btn--outline { background: var(--csi-color-background); color: var(--csi-color-ink); border-color: var(--csi-color-border); box-shadow: var(--csi-shadow-sm); }
.csi-btn--outline:hover { border-color: var(--csi-color-primary); color: var(--csi-color-primary); box-shadow: 0 4px 12px rgba(0, 0, 0, .06); }
.csi-btn--dark { background: var(--csi-color-ink); color: #fff; }
.csi-btn--dark:hover { background: var(--csi-color-primary); }
.csi-btn--on-dark { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .28); }
.csi-btn--on-dark:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
.csi-btn--whatsapp { background: #25D366; color: #fff; }
.csi-btn--whatsapp:hover { background: #1DA851; }
.csi-btn--sm { padding: 10px 20px; min-height: 40px; font-size: calc(var(--csi-size-button) * .9); }
.csi-btn--block { width: 100%; }
.csi-btn--disabled, .csi-btn[disabled] { pointer-events: none; opacity: .45; box-shadow: none; }

.csi-link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--csi-font-heading);
  font-size: var(--csi-size-button);
  font-weight: 600;
  letter-spacing: var(--csi-label-tracking);
  text-transform: var(--csi-label-transform);
  color: var(--csi-color-primary);
  background: none; border: 0; padding: 0; cursor: pointer;
  transition: color .2s ease;
}
.csi-link-arrow svg { width: 16px; height: 16px; transition: transform .25s ease; }
.csi-link-arrow:hover { color: var(--csi-color-primary-dark); }
.csi-link-arrow:hover svg { transform: translateX(4px); }
.csi-link-arrow--back:hover svg { transform: translateX(-4px); }

/* ----------------------------------------------------------------- top bar */
.csi-topbar {
  position: relative; z-index: 50;
  background: var(--csi-color-dark);
  color: rgba(242, 242, 242, .66);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-size: 13px; line-height: 1.4;
}
.csi-topbar__inner { display: flex; align-items: center; justify-content: center; gap: 8px 24px; padding: 8px 16px; flex-wrap: wrap; }
@media (min-width: 640px) { .csi-topbar__inner { justify-content: space-between; padding: 8px 24px; } }
@media (min-width: 768px) { .csi-topbar__inner { padding: 8px 48px; } }
.csi-topbar__msg { display: none; align-items: center; gap: 10px; }
@media (min-width: 640px) { .csi-topbar__msg { display: flex; } }
.csi-topbar__links { display: flex; align-items: center; gap: 8px 22px; flex-wrap: wrap; justify-content: center; }
.csi-topbar__links a { display: inline-flex; align-items: center; gap: 6px; transition: color .2s; }
.csi-topbar__links a:hover { color: var(--csi-color-highlight); }
.csi-topbar__links svg { width: 14px; height: 14px; }
@media (max-width: 639px) { .csi-topbar__links a.csi-topbar__email:not(:only-child) { display: none; } }

/* ------------------------------------------------------------------ header */
#csi-header { position: relative; z-index: 45; }
.csi-header {
  --csi-h-text: var(--csi-color-header-text);
  --csi-h-accent: var(--csi-color-primary);
  --csi-h-cta-bg: var(--csi-color-ink);
  /* The logo file has an opaque white background, so it always sits on a
     white rounded chip (lifted with a soft shadow while the header floats
     over a hero/banner) instead of showing as a hard-edged white box. */
  --csi-logo-chip-bg: #FFFFFF;
  --csi-logo-chip-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
  position: fixed; left: 0; right: 0; top: var(--csi-header-top);
  padding: 16px 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease, padding .3s ease;
}
body[data-hero="home"] .csi-header:not(.csi-header--solid) { --csi-h-text: var(--csi-hero-text); }
body[data-hero="banner"] .csi-header:not(.csi-header--solid) {
  --csi-h-text: var(--csi-banner-text);
  --csi-h-accent: var(--csi-banner-eyebrow);
  --csi-h-cta-bg: var(--csi-color-primary);
}
body[data-hero="none"] .csi-header { background: var(--csi-color-header-bg); border-bottom-color: var(--csi-color-border); }
body[data-hero="none"] .csi-header, .csi-header--solid { --csi-logo-chip-shadow: none; }
.csi-header--solid {
  padding: 10px 0;
  background: rgba(255, 255, 255, .93);
  border-bottom-color: rgba(229, 229, 231, .8);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .csi-header--solid {
    background: color-mix(in srgb, var(--csi-color-header-bg) 93%, transparent);
    border-bottom-color: color-mix(in srgb, var(--csi-color-border) 80%, transparent);
  }
}
.csi-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.csi-brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.csi-brand__chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 10px; background: var(--csi-logo-chip-bg); box-shadow: var(--csi-logo-chip-shadow); transition: background-color .3s ease, box-shadow .3s ease; }
.csi-brand__logo { height: 44px; width: auto; max-width: 190px; object-fit: contain; }
.csi-brand__name { font-family: var(--csi-font-heading); font-weight: 700; font-size: 24px; letter-spacing: .06em; color: var(--csi-h-text); }
@media (min-width: 1024px) { .csi-brand__logo { height: 50px; max-width: 210px; } }

.csi-nav { display: none; align-items: center; gap: 28px; }
@media (min-width: 1100px) { .csi-nav { display: flex; } }
.csi-nav__link {
  position: relative; padding: 4px 0;
  font-family: var(--csi-font-heading);
  font-size: var(--csi-size-button);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: var(--csi-label-transform);
  color: var(--csi-h-text); opacity: .72;
  transition: opacity .3s ease, color .3s ease;
  white-space: nowrap;
}
.csi-nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px;
  background: var(--csi-h-accent); transition: width .3s ease;
}
.csi-nav__link:hover, .csi-nav__link--active { opacity: 1; }
.csi-nav__link:hover::after, .csi-nav__link--active::after { width: 100%; }

.csi-header__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.csi-lang-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; cursor: pointer;
  border: 1px solid rgba(128, 128, 128, .35); border-radius: 999px;
  padding: 6px 12px;
  font-family: var(--csi-font-heading); font-size: 12px; font-weight: 600; letter-spacing: .08em;
  color: var(--csi-h-text);
}
.csi-lang-toggle span { opacity: .6; }
.csi-lang-toggle .csi-lang-toggle__on { opacity: 1; color: var(--csi-h-accent); }
.csi-icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 8px; border: 0; background: none; cursor: pointer;
  color: var(--csi-h-text); transition: background-color .2s ease;
}
.csi-icon-btn:hover { background: rgba(128, 128, 128, .12); }
.csi-icon-btn svg { width: 24px; height: 24px; }
.csi-cart-btn__badge {
  position: absolute; top: 2px; right: 0;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--csi-color-primary); color: #fff;
  font-family: var(--csi-font-body); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.csi-btn--header {
  display: none;
  padding: 11px 22px; min-height: 42px;
  font-size: calc(var(--csi-size-button) * .88);
  background: var(--csi-h-cta-bg); color: #fff; box-shadow: var(--csi-shadow-sm);
}
.csi-btn--header:hover { background: var(--csi-color-primary); }
@media (min-width: 1280px) { .csi-btn--header { display: inline-flex; } }
.csi-menu-btn { display: inline-flex; }
@media (min-width: 1100px) { .csi-menu-btn { display: none; } }

.csi-mobile-menu {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: var(--csi-color-header-bg); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .12);
  border-bottom: 1px solid var(--csi-color-border);
  padding: 8px 0 24px; max-height: calc(100vh - 90px); overflow-y: auto;
}
.csi-mobile-menu.is-open { display: block; }
@media (min-width: 1100px) { .csi-mobile-menu.is-open { display: none; } }
.csi-mobile-menu a:not(.csi-btn) {
  display: block; padding: 12px 4px; border-bottom: 1px solid var(--csi-color-border);
  font-family: var(--csi-font-heading); font-size: 15px; font-weight: 600; letter-spacing: .06em;
  text-transform: var(--csi-label-transform); color: var(--csi-color-header-text);
}
.csi-mobile-menu a.is-active, .csi-mobile-menu a:not(.csi-btn):hover { color: var(--csi-color-primary); }
.csi-mobile-menu .csi-btn { margin-top: 16px; }

/* ------------------------------------------------------------- home hero */
.csi-hero {
  position: relative; overflow: hidden; display: flex; align-items: center;
  padding: calc(var(--csi-header-h) + 56px) 0 80px;
  background: var(--csi-hero-bg);
}
@media (min-width: 768px) { .csi-hero { padding-bottom: 120px; } }
@media (min-width: 1024px) { .csi-hero { min-height: calc(100vh - var(--csi-topbar-h)); } }
.csi-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; width: 100%; }
@media (min-width: 1024px) { .csi-hero__grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
.csi-hero--inline { padding-top: 96px; min-height: 0 !important; }
@media (min-width: 1024px) { .csi-hero__grid.csi-hero__grid--solo { grid-template-columns: minmax(0, 760px); } }
.csi-hero__text > * + * { margin-top: 24px; }
.csi-hero__logo { height: 84px; width: auto; max-width: 100%; object-fit: contain; background: #fff; padding: 8px 14px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.csi-hero h1 {
  color: var(--csi-hero-text);
  font-size: clamp(calc(var(--csi-size-h1) * .62), 7vw, var(--csi-size-h1));
  font-weight: calc(var(--csi-weight-heading) + 100);
  line-height: 1.12;
}
.csi-hero__sub { max-width: 36rem; }
.csi-hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 8px; }

.csi-hero__visual { position: relative; display: flex; justify-content: center; user-select: none; }
.csi-hero__stage { position: relative; width: 100%; max-width: 520px; }
.csi-frame {
  position: relative; background: var(--csi-color-dark); border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--csi-radius-lg); padding: 14px; transform: rotate(1deg);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .35);
}
.csi-frame__bar { display: flex; align-items: center; gap: 6px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.csi-frame__dot { width: 10px; height: 10px; border-radius: 50%; }
.csi-frame__dot--r { background: #F43F5E; }
.csi-frame__dot--a { background: #F59E0B; }
.csi-frame__dot--g { background: #10B981; }
.csi-frame__url {
  margin-left: 14px; padding: 0 24px; height: 18px; border-radius: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .45);
  font: 10px/18px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.csi-frame__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: #111; }
.csi-float {
  display: none; position: absolute; left: -32px; bottom: -32px; width: 256px;
  background: #151517; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px;
  padding: 16px; transform: rotate(-2deg);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .3), 0 8px 10px -6px rgba(0, 0, 0, .25);
}
@media (min-width: 640px) { .csi-float { display: block; } }
.csi-float__title {
  font-family: var(--csi-font-heading); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--csi-color-highlight); padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.csi-float__row { display: flex; align-items: center; gap: 10px; padding: 5px 0; color: #fff; font-size: 12.5px; font-weight: 500; line-height: 1.3; }
.csi-float__row img { width: 28px; height: 28px; padding: 4px; background: #fff; border-radius: 6px; object-fit: contain; flex-shrink: 0; }
.csi-float__more { display: inline-block; margin-top: 6px; color: var(--csi-color-highlight); font-size: 12px; font-weight: 600; }

.csi-anim-up { animation: csi-fade-up .8s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--d, 0s); }

/* --------------------------------------------------------------- stats bar */
.csi-stats { position: relative; z-index: 1; background: var(--csi-color-dark); padding: 48px 0; }
.csi-stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 16px; text-align: center; }
@media (min-width: 768px) { .csi-stats__grid { grid-template-columns: repeat(var(--csi-cols, 4), 1fr); } }
.csi-stat__value { font-family: var(--csi-font-heading); font-weight: var(--csi-weight-heading); font-size: clamp(30px, 4vw, var(--csi-size-h2)); line-height: 1.1; color: #fff; }
.csi-stat__label {
  margin-top: 6px; font-size: calc(var(--csi-size-small) * .84); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(242, 242, 242, .6);
}

/* --------------------------------------------------------------- sections */
.csi-section { position: relative; padding: 80px 0; background: var(--csi-color-background); }
@media (min-width: 768px) { .csi-section { padding: 112px 0; } }
.csi-section--tight { padding: 80px 0; }
.csi-section--light { background: var(--csi-color-surface); }
.csi-section--flush-top { padding-top: 0; }

.csi-head { max-width: 768px; margin: 0 auto 64px; text-align: center; }
.csi-head > * + * { margin-top: 16px; }
.csi-head .csi-bar { margin-left: auto; margin-right: auto; }
.csi-head h2, .csi-h2 { font-size: clamp(calc(var(--csi-size-h2) * .78), 5vw, var(--csi-size-h2)); line-height: 1.18; }
.csi-head p { color: var(--csi-color-muted); font-weight: calc(var(--csi-weight-body) - 100); }
.csi-head p.csi-head__quote { color: var(--csi-color-ink); font-style: italic; font-weight: calc(var(--csi-weight-body) - 100); font-size: calc(var(--csi-size-body) * 1.12); line-height: 1.7; }
.csi-head-split { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.csi-head-split > div > * + * { margin-top: 16px; }
@media (min-width: 768px) { .csi-head-split { flex-direction: row; align-items: flex-end; } }

/* Split: dark feature card + copy (Home "About" teaser) */
.csi-split { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; }
@media (min-width: 1024px) { .csi-split { grid-template-columns: 5fr 7fr; gap: 48px; } }
.csi-split--even { gap: 56px; }
@media (min-width: 1024px) { .csi-split--even { grid-template-columns: 1fr 1fr; } }
.csi-split__copy > * + * { margin-top: 24px; }

.csi-feature { position: relative; margin: 16px 0 0 16px; }
.csi-feature::before {
  content: ""; position: absolute; top: -16px; left: -16px; width: 100%; height: 100%;
  border: 2px solid var(--csi-color-primary); border-radius: var(--csi-radius-lg); transform: rotate(-2deg);
}
.csi-feature__card {
  position: relative; padding: 32px; border-radius: var(--csi-radius-lg); color: #fff;
  background: linear-gradient(135deg, var(--csi-color-dark) 0%, #3a1417 140%);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .2), 0 8px 10px -6px rgba(0, 0, 0, .15);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .csi-feature__card { background: linear-gradient(135deg, var(--csi-color-dark) 0%, color-mix(in srgb, var(--csi-color-dark) 62%, var(--csi-color-primary-dark)) 100%); }
}
.csi-feature__card > * + * { margin-top: 22px; }
.csi-feature__card h3 { color: #fff; font-size: calc(var(--csi-size-h3) * 1.15); letter-spacing: .03em; }
.csi-checklist { list-style: none; }
.csi-checklist li { display: flex; align-items: flex-start; gap: 12px; font-size: calc(var(--csi-size-small) * .95); font-weight: 600; line-height: 1.45; color: rgba(255, 255, 255, .9); }
.csi-checklist li + li { margin-top: 14px; }
.csi-checklist small { display: block; margin-top: 2px; font-weight: 300; color: rgba(255, 255, 255, .62); font-size: .92em; }
.csi-check {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 90, 99, .18); color: var(--csi-color-highlight);
}
.csi-check svg { width: 14px; height: 14px; }

/* Photo with offset outline (About intro) */
.csi-photo { position: relative; margin: 16px 0 0 16px; }
.csi-photo::before {
  content: ""; position: absolute; top: -16px; left: -16px; width: 100%; height: 100%;
  border: 2px solid var(--csi-color-primary); border-radius: var(--csi-radius-lg); transform: rotate(-2deg);
}
.csi-photo img { position: relative; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--csi-radius-lg); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .18); }

/* ------------------------------------------------------------ card grids */
.csi-grid-3 { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 768px) { .csi-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .csi-grid-3 { grid-template-columns: repeat(3, 1fr); } }

.csi-card {
  display: flex; flex-direction: column;
  background: var(--csi-color-background);
  border: 1px solid var(--csi-color-border);
  border-radius: var(--csi-radius); padding: 32px;
  box-shadow: var(--csi-shadow-sm);
  transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.csi-card:hover { box-shadow: var(--csi-shadow-premium); }
.csi-card > * + * { margin-top: 22px; }
.csi-card h3 { font-size: var(--csi-size-h3); }
.csi-card p { font-size: var(--csi-size-small); color: var(--csi-color-muted); font-weight: calc(var(--csi-weight-body) - 100); line-height: 1.7; }
.csi-icon-box { width: 56px; height: 56px; border-radius: 10px; background: var(--csi-color-tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.csi-icon-box img { width: 30px; height: 30px; object-fit: contain; }
.csi-card__num { font-family: var(--csi-font-heading); font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--csi-color-muted); opacity: .7; }

/* Showcase (dark photo cards) -- Our Solutions teaser */
.csi-showcase-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 768px) { .csi-showcase-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .csi-showcase-grid { grid-template-columns: repeat(3, 1fr); } }
.csi-showcase {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  height: 384px; padding: 24px;
  border-radius: var(--csi-radius); background: var(--csi-color-dark);
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .18), 0 4px 6px -4px rgba(0, 0, 0, .12);
}
.csi-showcase__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.csi-showcase:hover .csi-showcase__img { transform: scale(1.06); }
.csi-showcase__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(12, 12, 14, .97) 10%, rgba(20, 20, 22, .72) 48%, rgba(20, 20, 22, .08) 100%); }
.csi-showcase__ghost { position: absolute; inset: 0; z-index: -1; display: flex; align-items: center; justify-content: center; opacity: .16; }
.csi-showcase__ghost img { width: 180px; height: 180px; object-fit: contain; filter: brightness(0) invert(1); }
.csi-showcase__icon { position: absolute; top: 24px; left: 24px; width: 48px; height: 48px; padding: 9px; border-radius: 10px; background: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.csi-showcase__icon img { width: 100%; height: 100%; object-fit: contain; }
.csi-badge {
  display: inline-flex; align-items: center;
  font-family: var(--csi-font-heading); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px; background: var(--csi-color-primary); color: #fff; line-height: 1.5;
}
.csi-badge--dark { background: rgba(20, 20, 22, .88); }
.csi-badge--tint { background: var(--csi-color-tint); color: var(--csi-color-primary); }
.csi-showcase .csi-badge { position: absolute; top: 24px; right: 24px; }
.csi-showcase__body > * + * { margin-top: 8px; }
.csi-showcase h3 { color: #fff; font-size: var(--csi-size-h3); }
.csi-showcase p {
  color: rgba(255, 255, 255, .72); font-size: calc(var(--csi-size-small) * .94); font-weight: calc(var(--csi-weight-body) - 100); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.csi-showcase__link {
  display: inline-flex; align-items: center; gap: 6px; padding-top: 6px;
  font-family: var(--csi-font-heading); font-size: calc(var(--csi-size-button) * .9); font-weight: 600; letter-spacing: .08em; text-transform: var(--csi-label-transform);
  color: var(--csi-color-highlight);
}
.csi-showcase__link svg { width: 18px; height: 18px; transition: transform .25s ease; }
.csi-showcase:hover .csi-showcase__link { color: #fff; }
.csi-showcase:hover .csi-showcase__link svg { transform: translateX(4px); }

/* ----------------------------------------------- brand slider (Home) */
.csi-slider-wrap { max-width: 896px; margin: 0 auto; }
.csi-slider {
  position: relative; background: var(--csi-color-background);
  border: 1px solid var(--csi-color-border); border-radius: var(--csi-radius-lg);
  padding: 32px; box-shadow: var(--csi-shadow-premium);
}
@media (min-width: 640px) { .csi-slider { padding: 48px; } }
.csi-slides { position: relative; min-height: 200px; display: flex; align-items: center; justify-content: center; }
.csi-slide { display: none; width: 100%; text-align: center; }
.csi-slide.is-active { display: block; animation: csi-fade-up .5s ease-in-out both; }
.csi-slide > * + * { margin-top: 20px; }
.csi-slide__logo { height: 64px; width: auto; max-width: 280px; margin: 0 auto; object-fit: contain; }
.csi-slide__text { max-width: 640px; margin-left: auto; margin-right: auto; color: var(--csi-color-muted); font-style: italic; font-weight: calc(var(--csi-weight-body) - 100); font-size: calc(var(--csi-size-body) * 1.06); line-height: 1.75; }
.csi-slide__name { font-size: calc(var(--csi-size-h3) * .9); }
.csi-slide__role { margin-top: 4px !important; font-family: var(--csi-font-heading); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--csi-color-primary); }
.csi-slide__role a:hover { text-decoration: underline; }
.csi-slider__controls { display: flex; align-items: center; justify-content: space-between; margin-top: 40px; }
.csi-slider__arrow {
  display: inline-flex; padding: 8px; border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px solid var(--csi-color-border); color: #9AA0A8;
  transition: all .2s ease;
}
.csi-slider__arrow svg { width: 20px; height: 20px; }
.csi-slider__arrow:hover { border-color: var(--csi-color-primary); color: var(--csi-color-primary); background: var(--csi-color-tint); }
.csi-slider__dots { display: flex; gap: 8px; }
.csi-slider__dot { width: 12px; height: 12px; padding: 0; border: 0; border-radius: 999px; background: #CDD1D6; cursor: pointer; transition: all .3s ease; }
.csi-slider__dot:hover { background: #AEB3BA; }
.csi-slider__dot.is-active { width: 24px; background: var(--csi-color-primary); }
.csi-logo-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; margin-top: 32px; }
.csi-logo-chip {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--csi-color-background); border: 1px solid var(--csi-color-border); border-radius: 10px;
  padding: 10px 18px; cursor: pointer; opacity: .55; filter: grayscale(1); transition: all .25s ease;
}
.csi-logo-chip img { height: 26px; width: auto; max-width: 130px; object-fit: contain; }
.csi-logo-chip span { font-family: var(--csi-font-heading); font-weight: 600; font-size: 14px; }
.csi-logo-chip:hover, .csi-logo-chip.is-active { opacity: 1; filter: none; border-color: var(--csi-color-primary); }

/* --------------------------------------------------------- dark CTA band */
.csi-cta-dark { position: relative; overflow: hidden; background: var(--csi-color-dark); padding: 64px 0; text-align: center; }
@media (min-width: 768px) { .csi-cta-dark { padding: 96px 0; } }
.csi-ring { position: absolute; width: 384px; height: 384px; border-radius: 50%; border: 1px solid rgba(226, 34, 46, .28); opacity: .6; pointer-events: none; }
.csi-ring--a { top: -192px; right: -192px; }
.csi-ring--b { bottom: -192px; left: -192px; }
.csi-cta-dark__inner { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; }
.csi-cta-dark__inner > * + * { margin-top: 14px; }
.csi-cta-dark h2 { color: #fff; font-size: clamp(calc(var(--csi-size-h2) * .78), 5vw, var(--csi-size-h2)); }
.csi-cta-dark p { color: rgba(255, 255, 255, .64); font-weight: calc(var(--csi-weight-body) - 100); }
.csi-cta-dark__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px !important; }

/* Light CTA block (About / Solutions) */
.csi-cta-light { background: var(--csi-color-surface); padding: 80px 0; text-align: center; }
.csi-cta-light__inner { max-width: 896px; margin: 0 auto; }
.csi-cta-light__inner > * + * { margin-top: 20px; }
.csi-cta-light h2 { font-size: clamp(calc(var(--csi-size-h2) * .78), 5vw, var(--csi-size-h2)); }
.csi-cta-light p { max-width: 672px; margin-left: auto; margin-right: auto; color: var(--csi-color-muted); font-weight: calc(var(--csi-weight-body) - 100); }
.csi-cta-light .csi-btn { margin-top: 32px; }

/* ---------------------------------------------------- contact strip (Home) */
.csi-strip { background: #1A1A1C; color: rgba(255, 255, 255, .6); padding: 48px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
@supports (color: color-mix(in srgb, red 50%, blue)) { .csi-strip { background: color-mix(in srgb, var(--csi-color-dark) 72%, #000); } }
.csi-strip__inner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 24px; }
@media (min-width: 768px) { .csi-strip__inner { flex-direction: row; } }
.csi-strip__lead { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
@media (min-width: 768px) { .csi-strip__lead { flex-direction: row; text-align: left; } }
.csi-strip__icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(255, 90, 99, .15); color: var(--csi-color-highlight); }
.csi-strip__icon svg { width: 22px; height: 22px; }
.csi-strip h4 { color: #fff; font-size: calc(var(--csi-size-h3) * .86); font-weight: 600; }
.csi-strip p { margin-top: 2px; font-size: calc(var(--csi-size-small) * .9); font-weight: calc(var(--csi-weight-body) - 100); color: rgba(255, 255, 255, .55); }

/* ------------------------------------------------------------------ footer */
.csi-footer { background: var(--csi-color-footer-bg); color: rgba(242, 242, 242, .64); padding: 64px 0 32px; }
.csi-footer__grid { display: grid; grid-template-columns: 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
@media (min-width: 640px) { .csi-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .csi-footer__grid { grid-template-columns: 4fr 2fr 3fr 3fr; gap: 48px; } }
.csi-footer__brand > * + * { margin-top: 22px; }
.csi-footer__logo { display: inline-flex; background: #fff; border-radius: 10px; padding: 6px 12px; }
.csi-footer__logo img { height: 46px; width: auto; max-width: 220px; object-fit: contain; }
.csi-footer__name { font-family: var(--csi-font-heading); font-size: 24px; font-weight: 700; letter-spacing: .06em; color: var(--csi-color-footer-text); }
.csi-footer__blurb { font-size: calc(var(--csi-size-small) * .93); font-weight: calc(var(--csi-weight-body) - 100); line-height: 1.75; max-width: 380px; }
.csi-social { display: flex; gap: 12px; }
.csi-social a { display: inline-flex; padding: 9px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .14); transition: border-color .2s ease, color .2s ease; }
.csi-social a:hover { border-color: var(--csi-color-primary); color: #fff; }
.csi-social svg { width: 18px; height: 18px; }
.csi-footer h4 { color: var(--csi-color-footer-text); font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 18px; }
.csi-footer ul { list-style: none; }
.csi-footer li { font-size: calc(var(--csi-size-small) * .93); font-weight: calc(var(--csi-weight-body) - 100); line-height: 1.55; }
.csi-footer li + li { margin-top: 11px; }
.csi-footer li a { transition: color .2s ease; }
.csi-footer li a:hover { color: var(--csi-color-highlight); }
.csi-footer__contact li { display: flex; align-items: flex-start; gap: 10px; }
.csi-footer__contact svg { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; color: var(--csi-color-primary); }
.csi-footer__bottom { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 14px; padding-top: 32px; font-size: 13px; color: rgba(242, 242, 242, .48); text-align: center; }
@media (min-width: 768px) { .csi-footer__bottom { flex-direction: row; text-align: left; } }
.csi-footer__bottom-links { display: flex; align-items: center; gap: 14px; }
.csi-footer__bottom-links button, .csi-footer__bottom-links a { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font-size: 13px; transition: color .2s ease; }
.csi-footer__bottom-links button:hover, .csi-footer__bottom-links a:hover { color: #fff; }
.csi-footer__bottom-links .is-on { color: #fff; font-weight: 600; }

/* --------------------------------------------------- inner page banner */
.csi-banner { position: relative; overflow: hidden; background: var(--csi-banner-bg); color: var(--csi-banner-text); text-align: center; padding: calc(var(--csi-header-h) + 64px) 0 72px; }
@media (min-width: 768px) { .csi-banner { padding-bottom: 88px; } }
.csi-banner .csi-dots { opacity: .06; }
.csi-banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: var(--csi-banner-img-opacity); }
.csi-banner__inner { position: relative; z-index: 1; max-width: 896px; margin: 0 auto; }
.csi-banner__inner > * + * { margin-top: 16px; }
.csi-banner .csi-eyebrow { color: var(--csi-banner-eyebrow); }
.csi-banner h1 {
  color: var(--csi-banner-text);
  font-size: clamp(calc(var(--csi-size-h1) * .6), 6vw, calc(var(--csi-size-h1) * .86));
  font-weight: calc(var(--csi-weight-heading) + 100);
  letter-spacing: .02em; line-height: 1.15;
}
.csi-banner p { max-width: 672px; margin-left: auto; margin-right: auto; color: var(--csi-banner-muted); font-weight: calc(var(--csi-weight-body) - 100); line-height: 1.75; }
.csi-banner--inline { padding-top: 88px; }
.csi-btn--banner { background: transparent; color: var(--csi-banner-text); border-color: rgba(128, 128, 128, .45); }
.csi-btn--banner:hover { border-color: var(--csi-banner-eyebrow); color: var(--csi-banner-text); }
.csi-banner--article h1 { font-size: clamp(calc(var(--csi-size-h1) * .52), 5vw, calc(var(--csi-size-h1) * .7)); }
.csi-banner__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; font-size: 13.5px; color: var(--csi-banner-muted); }
.csi-banner__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-top: 8px; }

/* --------------------------------------------------- timeline (About) */
.csi-timeline { position: relative; max-width: 768px; margin: 0 auto; padding-left: 32px; border-left: 1px solid var(--csi-color-border); }
.csi-timeline__item { position: relative; }
.csi-timeline__item + .csi-timeline__item { margin-top: 48px; }
.csi-timeline__item > * + * { margin-top: 8px; }
.csi-timeline__dot { position: absolute; left: -44.5px; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--csi-color-background); border: 4px solid var(--csi-color-primary); }
.csi-timeline__label { font-family: var(--csi-font-heading); font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--csi-color-primary); }
.csi-timeline__item:nth-child(3n+2) .csi-timeline__dot { border-color: var(--csi-color-ink); }
.csi-timeline__item:nth-child(3n+2) .csi-timeline__label { color: var(--csi-color-ink); }
.csi-timeline__item:nth-child(3n+3) .csi-timeline__dot { border-color: var(--csi-color-primary-dark); }
.csi-timeline__item:nth-child(3n+3) .csi-timeline__label { color: var(--csi-color-primary-dark); }
.csi-timeline h3 { font-size: calc(var(--csi-size-h3) * 1.02); }
.csi-timeline p { color: var(--csi-color-muted); font-size: var(--csi-size-small); font-weight: calc(var(--csi-weight-body) - 100); line-height: 1.7; }

/* ------------------------------------------ partner cards (About brands) */
.csi-team {
  display: block; background: var(--csi-color-dark); color: #fff; text-align: center;
  border: 1px solid rgba(255, 255, 255, .06); border-radius: var(--csi-radius); padding: 32px 24px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .15); transition: transform .3s ease, box-shadow .3s ease;
}
a.csi-team:hover { transform: translateY(-4px); box-shadow: 0 20px 30px -10px rgba(0, 0, 0, .3); }
.csi-team > * + * { margin-top: 16px; }
.csi-team__plate {
  display: flex; align-items: center; justify-content: center; margin: 0 auto;
  width: 200px; max-width: 100%; height: 100px; padding: 16px 20px; border-radius: 14px;
  background: #fff; border: 3px solid var(--csi-color-primary);
}
.csi-team:nth-child(2n) .csi-team__plate { border-color: var(--csi-color-highlight); }
.csi-team__plate img { max-width: 100%; max-height: 100%; object-fit: contain; }
.csi-team__plate span { font-family: var(--csi-font-heading); font-size: 30px; font-weight: 700; color: var(--csi-color-primary); }
.csi-team h3 { color: #fff; font-size: calc(var(--csi-size-h3) * .92); }
.csi-team__role { margin-top: 4px !important; font-family: var(--csi-font-heading); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--csi-color-highlight); }
.csi-team p { font-size: calc(var(--csi-size-small) * .94); font-weight: calc(var(--csi-weight-body) - 100); line-height: 1.7; color: rgba(255, 255, 255, .64); }

/* ------------------------------------------- zig-zag rows (Solutions) */
.csi-zz__row { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; padding: 80px 0; border-bottom: 1px solid var(--csi-color-border); }
.csi-zz__row:first-child { padding-top: 0; }
.csi-zz__row:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 1024px) {
  .csi-zz__row { grid-template-columns: 1fr 1fr; gap: 64px; }
  .csi-zz__row--flip .csi-zz__copy { order: 2; }
}
.csi-zz__copy > * + * { margin-top: 22px; }
.csi-zz__copy h2 { font-size: clamp(calc(var(--csi-size-h2) * .7), 4vw, calc(var(--csi-size-h2) * .86)); line-height: 1.2; }
.csi-zz__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding-top: 6px; }
.csi-bullets { list-style: none; display: grid; grid-template-columns: 1fr; gap: 12px 20px; }
@media (min-width: 640px) { .csi-bullets { grid-template-columns: 1fr 1fr; } }
.csi-bullets li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--csi-size-small); font-weight: 500; line-height: 1.45; color: var(--csi-color-ink); }
.csi-bullets li::before { content: ""; width: 8px; height: 8px; margin-top: .45em; border-radius: 50%; background: var(--csi-color-primary); flex-shrink: 0; }
.csi-bullets li.csi-bullets__more { color: var(--csi-color-muted); font-weight: 400; }
.csi-bullets li.csi-bullets__more::before { background: var(--csi-color-border); }
.csi-zz__visual { display: flex; justify-content: center; }

.csi-panel {
  display: block; width: 100%; max-width: 500px; transition: transform .35s ease, box-shadow .35s ease; background: var(--csi-color-dark); color: #fff;
  border: 1px solid rgba(255, 255, 255, .06); border-radius: var(--csi-radius-lg); padding: 22px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .2), 0 8px 10px -6px rgba(0, 0, 0, .15);
}
a.csi-panel:hover { transform: translateY(-4px); box-shadow: 0 30px 40px -15px rgba(0, 0, 0, .3); }
.csi-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.csi-panel__title { display: flex; align-items: center; gap: 12px; min-width: 0; font-family: var(--csi-font-heading); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.csi-panel__title img { width: 34px; height: 34px; padding: 5px; background: #fff; border-radius: 8px; object-fit: contain; flex-shrink: 0; }
.csi-panel__title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csi-panel__tag { flex-shrink: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: rgba(255, 90, 99, .14); color: var(--csi-color-highlight); }
.csi-panel__media { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 10; background: #fff; }
.csi-panel__media img { width: 100%; height: 100%; object-fit: cover; }
.csi-panel__media.is-contain img { object-fit: contain; padding: 12px; }
.csi-panel__media--icon { display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .04); }
.csi-panel__media--icon img { width: 40%; height: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .25; }

/* ----------------------------------------------- category page filters */
.csi-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 48px; }
.csi-filter {
  display: inline-flex; align-items: center; padding: 9px 22px; border-radius: 999px; border: 0; cursor: pointer;
  font-family: var(--csi-font-heading); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: var(--csi-label-transform);
  background: #EEEFF1; color: var(--csi-color-muted); transition: all .3s ease; white-space: nowrap;
}
.csi-filter:hover { background: #E2E4E7; color: var(--csi-color-ink); }
.csi-filter.is-active { background: var(--csi-color-primary); color: #fff; box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .18); }
@media (max-width: 767px) {
  .csi-filters {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-left: -16px; margin-right: -16px;
    padding: 4px 16px 10px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .csi-filters::-webkit-scrollbar { display: none; }
  .csi-filter { scroll-snap-align: start; flex-shrink: 0; }
}
.csi-subfilters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -24px 0 36px; justify-content: center; }
.csi-subfilters__label { font-size: 13px; font-weight: 600; color: var(--csi-color-muted); margin-right: 4px; }
.csi-subfilters .csi-filter { padding: 6px 16px; font-size: 11.5px; background: transparent; border: 1px solid var(--csi-color-border); }
.csi-subfilters .csi-filter.is-active { background: var(--csi-color-ink); border-color: var(--csi-color-ink); color: #fff; box-shadow: none; }

/* ------------------------------------------------------------ products */
.csi-products { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 768px) { .csi-products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .csi-products { grid-template-columns: repeat(3, 1fr); } }
.csi-product {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--csi-color-background); border: 1px solid var(--csi-color-border); border-radius: var(--csi-radius);
  box-shadow: var(--csi-shadow-sm); transition: box-shadow .3s ease, transform .3s ease;
}
.csi-product:hover { box-shadow: var(--csi-shadow-premium-hover); transform: translateY(-3px); }
.csi-product[hidden] { display: none; }
.csi-products--after { margin-top: 80px; padding-top: 80px; border-top: 1px solid var(--csi-color-border); }
.csi-feature-product + .csi-feature-product { margin-top: 80px; padding-top: 80px; border-top: 1px solid var(--csi-color-border); }
.csi-product__media { position: relative; display: block; width: 100%; height: 230px; padding: 0; border: 0; cursor: zoom-in; background: #fff; overflow: hidden; }
.csi-product__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 18px; transition: transform .5s ease; }
.csi-product__media--cover img { object-fit: cover; padding: 0; }
.csi-product:hover .csi-product__media img { transform: scale(1.04); }
.csi-product__media .csi-badge { position: absolute; top: 16px; right: 16px; z-index: 1; }
.csi-product__body { flex: 1; display: flex; flex-direction: column; padding: 24px; border-top: 1px solid var(--csi-color-border); }
.csi-product__body > * + * { margin-top: 10px; }
.csi-product h3 { font-size: var(--csi-size-h3); line-height: 1.25; }
.csi-product p { font-size: var(--csi-size-small); color: var(--csi-color-muted); font-weight: calc(var(--csi-weight-body) - 100); line-height: 1.65; }
.csi-product__actions { margin-top: auto !important; padding-top: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }

/* Single product with a feature list: wide showcase row */
.csi-feature-product { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .csi-feature-product { grid-template-columns: 5fr 7fr; gap: 64px; } }
.csi-feature-product__media {
  position: relative; background: #fff; border: 1px solid var(--csi-color-border); border-radius: var(--csi-radius-lg);
  height: 460px; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: var(--csi-shadow-premium);
}
.csi-feature-product__media img { width: 100%; height: 100%; object-fit: contain; padding: 20px; }
.csi-feature-product__media .csi-badge { position: absolute; top: 18px; left: 18px; }
.csi-feature-product__copy > * + * { margin-top: 22px; }
.csi-feature-product__copy h2 { font-size: clamp(calc(var(--csi-size-h2) * .7), 4vw, calc(var(--csi-size-h2) * .86)); }
@media (max-width: 640px) { .csi-feature-product__media { height: 320px; } }

.csi-features { list-style: none; display: grid; grid-template-columns: 1fr; gap: 18px 28px; }
@media (min-width: 640px) { .csi-features--2 { grid-template-columns: 1fr 1fr; } }
.csi-features li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--csi-size-small); line-height: 1.6; color: var(--csi-color-muted); font-weight: calc(var(--csi-weight-body) - 100); }
.csi-features strong { display: block; color: var(--csi-color-ink); font-weight: 600; }
.csi-features .csi-check { background: var(--csi-color-tint); color: var(--csi-color-primary); margin-top: 1px; }

/* ------------------------------------------------------------------ modal */
.csi-modal {
  position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center; padding: 16px;
  background: rgba(20, 20, 22, .8); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.csi-modal.is-open { display: flex; }
.csi-modal__panel {
  position: relative; width: 100%; max-width: 720px; max-height: 90vh; overflow-y: auto;
  background: var(--csi-color-background); border: 1px solid var(--csi-color-border); border-radius: var(--csi-radius-lg);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .4); animation: csi-fade-up .3s ease both;
}
.csi-modal__close {
  position: absolute; top: 16px; right: 16px; z-index: 2; display: inline-flex; padding: 6px; border-radius: 8px;
  background: var(--csi-color-background); border: 0; cursor: pointer; color: #9AA0A8; transition: color .2s ease;
}
.csi-modal__close:hover { color: var(--csi-color-ink); }
.csi-modal__close svg { width: 24px; height: 24px; }
.csi-modal__body { padding: 32px; }
.csi-modal__body > * + * { margin-top: 22px; }
.csi-modal__body h2 { font-size: calc(var(--csi-size-h2) * .68); padding-right: 32px; }
.csi-modal__media { height: 290px; border-radius: var(--csi-radius); border: 1px solid var(--csi-color-border); background: #fff; overflow: hidden; }
.csi-modal__media img { width: 100%; height: 100%; object-fit: contain; padding: 18px; }
.csi-modal__media--cover img { object-fit: cover; padding: 0; }
.csi-modal h4 { font-size: calc(var(--csi-size-h3) * .82); }
.csi-modal p { color: var(--csi-color-muted); font-size: var(--csi-size-small); font-weight: calc(var(--csi-weight-body) - 100); line-height: 1.7; }
.csi-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 18px; border-top: 1px solid var(--csi-color-border); }
.csi-meta-grid span { display: block; font-size: 12px; color: #8E949B; }
.csi-meta-grid strong { font-size: 14px; font-weight: 600; color: var(--csi-color-ink); }
.csi-modal__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* -------------------------------------------------------------------- blog */
.csi-blog-layout { display: grid; grid-template-columns: 1fr; gap: 56px; }
@media (min-width: 1024px) { .csi-blog-layout { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 48px; } }
.csi-blog-layout--solo { grid-template-columns: minmax(0, 1fr) !important; max-width: 900px; margin: 0 auto; }
.csi-post-row { padding-bottom: 44px; margin-bottom: 44px; border-bottom: 1px solid var(--csi-color-border); }
.csi-post-row[hidden] { display: none; }
.csi-post-row__grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 640px) { .csi-post-row__grid { grid-template-columns: 250px minmax(0, 1fr); } }
.csi-post-row--featured .csi-post-row__grid { grid-template-columns: 1fr; }
.csi-post-thumb { display: block; overflow: hidden; border-radius: var(--csi-radius); aspect-ratio: 4 / 3; background: var(--csi-color-surface); }
.csi-post-row--featured .csi-post-thumb { aspect-ratio: 2 / 1; }
.csi-post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.csi-post-row:hover .csi-post-thumb img { transform: scale(1.05); }
.csi-post-thumb--emoji { display: flex; align-items: center; justify-content: center; font-size: 52px; }
.csi-post-copy > * + * { margin-top: 14px; }
.csi-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; font-weight: 600; color: #8E949B; }
.csi-tag { display: inline-block; padding: 2px 9px; border-radius: 4px; background: var(--csi-color-tint); color: var(--csi-color-primary); font-family: var(--csi-font-heading); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.csi-post-row h2 { font-size: clamp(calc(var(--csi-size-h3) * 1.1), 3vw, calc(var(--csi-size-h3) * 1.38)); line-height: 1.25; }
.csi-post-row h2 a { transition: color .2s ease; }
.csi-post-row h2 a:hover { color: var(--csi-color-primary); }
.csi-post-row p { color: var(--csi-color-muted); font-size: var(--csi-size-small); font-weight: calc(var(--csi-weight-body) - 100); line-height: 1.7; }
.csi-no-results { display: none; padding: 40px 24px; text-align: center; border: 1px dashed var(--csi-color-border); border-radius: var(--csi-radius); color: var(--csi-color-muted); }
.csi-no-results.is-shown { display: block; }

.csi-sidebar > * + * { margin-top: 32px; }
@media (min-width: 1024px) { .csi-sidebar { position: sticky; top: calc(var(--csi-header-h) + 24px); align-self: start; } }
.csi-widget { background: var(--csi-color-background); border: 1px solid var(--csi-color-border); border-radius: var(--csi-radius); padding: 24px; }
.csi-widget--light { background: var(--csi-color-surface); }
.csi-widget > * + * { margin-top: 16px; }
.csi-widget h3 { font-size: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.csi-search { position: relative; }
.csi-search input {
  width: 100%; padding: 11px 42px 11px 16px; border-radius: 8px; border: 1px solid var(--csi-color-border);
  background: var(--csi-color-background); font-size: 15px; transition: box-shadow .2s ease, border-color .2s ease;
}
.csi-search input:focus { outline: none; border-color: transparent; box-shadow: 0 0 0 2px var(--csi-color-primary); }
.csi-search svg { position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: #9AA0A8; pointer-events: none; }
.csi-cat-list { list-style: none; }
.csi-cat-list li + li { margin-top: 6px; }
.csi-cat-list button, .csi-cat-list__link {
  display: flex; width: 100%; justify-content: space-between; gap: 12px; padding: 5px 0; border: 0; background: none; cursor: pointer;
  text-align: left; font-size: 15px; font-weight: calc(var(--csi-weight-body) - 100); color: var(--csi-color-muted); transition: color .2s ease;
}
.csi-cat-list button:hover, .csi-cat-list button.is-active, .csi-cat-list__link:hover { color: var(--csi-color-primary); }
.csi-cat-list button.is-active { font-weight: 600; }
.csi-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.csi-chip { display: inline-block; padding: 5px 12px; border-radius: 4px; background: #EEEFF1; color: var(--csi-color-muted); font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; transition: all .2s ease; }
.csi-chip:hover { background: var(--csi-color-primary); color: #fff; }
.csi-recent { list-style: none; }
.csi-recent li + li { margin-top: 14px; }
.csi-recent a { display: flex; align-items: center; gap: 12px; }
.csi-recent img, .csi-recent__emoji { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--csi-color-surface); }
.csi-recent__emoji { display: flex; align-items: center; justify-content: center; font-size: 26px; }
.csi-recent strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--csi-color-ink); transition: color .2s ease; }
.csi-recent a:hover strong { color: var(--csi-color-primary); }
.csi-recent span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--csi-color-muted); }

.csi-article { min-width: 0; }
.csi-article > * + * { margin-top: 28px; }
.csi-article__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--csi-radius-lg); box-shadow: 0 20px 25px -10px rgba(0, 0, 0, .18); }
.csi-article__lead { border-left: 4px solid var(--csi-color-primary); padding-left: 18px; font-style: italic; font-weight: 500; color: var(--csi-color-ink); font-size: calc(var(--csi-size-body) * 1.06); line-height: 1.7; }
.csi-article__body > p + p { margin-top: 1.3em; }
.csi-article__body p { color: var(--csi-color-muted); font-weight: calc(var(--csi-weight-body) - 100); line-height: 1.85; }
.csi-article__body strong { color: var(--csi-color-ink); font-weight: 600; }
.csi-article__back { padding-top: 32px; margin-top: 48px !important; border-top: 1px solid var(--csi-color-border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }

/* ---------------------------------------------------------------- contact */
.csi-quick { background: var(--csi-color-surface); padding: 48px 0; border-bottom: 1px solid var(--csi-color-border); }
.csi-quick__grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .csi-quick__grid { grid-template-columns: repeat(3, 1fr); } }
.csi-quick-card {
  display: flex; align-items: center; gap: 16px; min-width: 0;
  background: var(--csi-color-background); border: 1px solid var(--csi-color-border); border-radius: var(--csi-radius);
  padding: 22px; box-shadow: var(--csi-shadow-sm); transition: border-color .25s ease, box-shadow .25s ease;
}
a.csi-quick-card:hover { border-color: var(--csi-color-primary); box-shadow: var(--csi-shadow-premium); }
.csi-quick-card__icon { width: 46px; height: 46px; border-radius: 10px; background: var(--csi-color-tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.csi-quick-card__icon img { width: 26px; height: 26px; object-fit: contain; }
.csi-quick-card__icon--wa { background: #E6F8EC; color: #1FAF55; }
.csi-quick-card__icon svg { width: 26px; height: 26px; }
.csi-quick-card__icon .csi-quick-card__svg { width: 22px; height: 22px; color: var(--csi-color-primary); }
.csi-quick-card > div { min-width: 0; }
.csi-quick-card h4 { font-size: 15px; font-weight: 700; letter-spacing: .03em; }
.csi-quick-card p { margin-top: 2px; font-size: 14.5px; color: var(--csi-color-muted); overflow-wrap: anywhere; }

.csi-contact-layout { display: grid; grid-template-columns: 1fr; gap: 56px; }
@media (min-width: 1024px) { .csi-contact-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; } }
.csi-contact-details > * + * { margin-top: 32px; }
.csi-contact-details__head > * + * { margin-top: 16px; }
.csi-contact-items > * + * { margin-top: 20px; }
.csi-contact-item { display: flex; align-items: flex-start; gap: 16px; }
.csi-contact-item__icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 10px; background: #EEEFF1; flex-shrink: 0; }
.csi-contact-item__icon img { width: 24px; height: 24px; object-fit: contain; }
.csi-contact-item__icon--wa { background: #E6F8EC; color: #1FAF55; }
.csi-contact-item__icon--wa svg { width: 26px; height: 26px; }
.csi-contact-item h4 { font-size: 15px; font-weight: 700; letter-spacing: .03em; }
.csi-contact-item p { margin-top: 2px; font-size: var(--csi-size-small); color: var(--csi-color-muted); line-height: 1.6; overflow-wrap: anywhere; }
.csi-contact-item a:hover { color: var(--csi-color-primary); }

.csi-map { position: relative; height: 230px; border-radius: var(--csi-radius-lg); overflow: hidden; background: var(--csi-color-dark); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0, 0, 0, .12); }
.csi-map .csi-dots { opacity: .12; }
.csi-map svg.csi-map__streets { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .4; }
.csi-map__label {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 8px; background: rgba(12, 12, 14, .78); border: 1px solid rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #E5E7EB; font-family: var(--csi-font-heading); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .3); margin-top: 124px;
}
.csi-map__pin {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: rgba(226, 34, 46, .16);
}
.csi-map__pin::before { content: ""; position: absolute; width: 28px; height: 28px; border-radius: 50%; background: rgba(226, 34, 46, .34); animation: csi-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }
.csi-map__pin i { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--csi-color-highlight); box-shadow: 0 0 0 3px rgba(0, 0, 0, .25); }
.csi-map__label i { width: 7px; height: 7px; border-radius: 50%; background: var(--csi-color-highlight); }
.csi-map__open {
  position: absolute; right: 12px; bottom: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 6px; background: rgba(255, 255, 255, .92); color: var(--csi-color-ink);
  font-size: 12.5px; font-weight: 600; transition: background-color .2s ease;
}
.csi-map__open:hover { background: #fff; color: var(--csi-color-primary); }
.csi-map__open svg { width: 14px; height: 14px; }

.csi-form-panel { background: var(--csi-color-surface); border: 1px solid var(--csi-color-border); border-radius: var(--csi-radius-lg); padding: 28px; box-shadow: var(--csi-shadow-sm); }
@media (min-width: 640px) { .csi-form-panel { padding: 40px; } }
.csi-form-panel > * + * { margin-top: 24px; }
.csi-form-panel h2, .csi-form-panel h3 { font-size: calc(var(--csi-size-h2) * .66); }
.csi-form > * + * { margin-top: 24px; }
.csi-form__row { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .csi-form__row { grid-template-columns: 1fr 1fr; } }
.csi-field { position: relative; display: block; }
.csi-field__label { display: block; margin-bottom: 7px; font-family: var(--csi-font-heading); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--csi-color-ink); }
.csi-field__label em { font-style: normal; color: var(--csi-color-primary); }
.csi-input {
  display: block; width: 100%; padding: 13px 16px; border-radius: 8px;
  border: 1px solid var(--csi-color-border); background: var(--csi-color-background);
  font-family: var(--csi-font-body); font-size: 16px; line-height: 1.5; color: var(--csi-color-ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.csi-input::placeholder { color: #A1A6AD; }
.csi-input:focus { outline: none; border-color: transparent; box-shadow: 0 0 0 2px var(--csi-color-primary); }
textarea.csi-input { resize: vertical; min-height: 140px; }
.csi-field__counter { position: absolute; right: 0; bottom: -22px; font-size: 12px; color: var(--csi-color-muted); }
.csi-honey { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* ------------------------------------------------------------------ quote */
.csi-quote-layout { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; }
@media (min-width: 1024px) { .csi-quote-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.csi-summary { background: var(--csi-color-background); border: 1px solid var(--csi-color-border); border-radius: var(--csi-radius-lg); padding: 26px; box-shadow: var(--csi-shadow-premium); }
@media (min-width: 1024px) { .csi-summary { position: sticky; top: calc(var(--csi-header-h) + 24px); } }
.csi-summary > * + * { margin-top: 16px; }
.csi-summary__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--csi-color-border); }
.csi-summary__head h2 { font-size: calc(var(--csi-size-h3) * 1.05); }
.csi-state { max-width: 620px; margin: 0 auto; text-align: center; background: var(--csi-color-surface); border: 1px solid var(--csi-color-border); border-radius: var(--csi-radius-lg); padding: 48px 28px; }
.csi-state > * + * { margin-top: 16px; }
.csi-state h2 { font-size: calc(var(--csi-size-h2) * .72); }
.csi-state p { color: var(--csi-color-muted); }
.csi-state .csi-btn { margin-top: 24px; }
.csi-state__icon { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--csi-color-tint); color: var(--csi-color-primary); }
.csi-state__icon svg { width: 30px; height: 30px; }
.csi-state--success .csi-state__icon { background: rgba(62, 158, 79, .14); color: var(--csi-color-success); }
.csi-state--success h2 { color: var(--csi-color-success); }

/* ------------------------------------------------------------------- cart */
.csi-cart-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--csi-color-border); }
.csi-cart-row:last-child { border-bottom: 0; }
.csi-cart-row__img { width: 64px; height: 64px; border-radius: 10px; border: 1px solid var(--csi-color-border); background: #fff; object-fit: contain; padding: 4px; flex-shrink: 0; }
.csi-cart-row__img--empty { background: var(--csi-color-surface); }
.csi-cart-row__info { flex: 1; min-width: 0; }
.csi-cart-row__name { font-family: var(--csi-font-heading); font-size: 15.5px; font-weight: 600; line-height: 1.3; color: var(--csi-color-ink); letter-spacing: .01em; }
.csi-cart-row__cat { margin: 2px 0 8px; font-size: 12.5px; color: var(--csi-color-muted); }
.csi-qty { display: inline-flex; align-items: center; border: 1px solid var(--csi-color-border); border-radius: 8px; overflow: hidden; background: var(--csi-color-background); }
.csi-qty button { width: 32px; height: 32px; border: 0; background: var(--csi-color-surface); cursor: pointer; font-size: 17px; line-height: 1; color: var(--csi-color-ink); transition: all .2s ease; }
.csi-qty button:hover { background: var(--csi-color-tint); color: var(--csi-color-primary); }
.csi-qty input { width: 46px; height: 32px; border: 0; border-left: 1px solid var(--csi-color-border); border-right: 1px solid var(--csi-color-border); text-align: center; font-size: 15px; background: var(--csi-color-background); -moz-appearance: textfield; appearance: textfield; }
.csi-qty input::-webkit-outer-spin-button, .csi-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.csi-cart-row__remove { display: inline-flex; padding: 7px; border-radius: 8px; border: 0; background: none; cursor: pointer; color: #9AA0A8; transition: all .2s ease; }
.csi-cart-row__remove:hover { color: var(--csi-color-primary); background: var(--csi-color-tint); }
.csi-cart-row__remove svg { width: 18px; height: 18px; }

.csi-cart-drawer { position: fixed; inset: 0; z-index: 100; visibility: hidden; }
.csi-cart-drawer--open { visibility: visible; }
.csi-drawer__overlay { position: absolute; inset: 0; background: rgba(20, 20, 22, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s ease; }
.csi-cart-drawer--open .csi-drawer__overlay { opacity: 1; }
.csi-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); display: flex; flex-direction: column;
  background: var(--csi-color-background); box-shadow: -12px 0 30px rgba(0, 0, 0, .18);
  transform: translateX(100%); transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.csi-cart-drawer--open .csi-drawer__panel { transform: translateX(0); }
.csi-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--csi-color-border); }
.csi-drawer__head h3 { font-size: 20px; letter-spacing: .06em; text-transform: uppercase; }
.csi-drawer__head .csi-eyebrow { margin-bottom: 2px; }
.csi-drawer__close { display: inline-flex; padding: 6px; border-radius: 8px; border: 0; background: none; cursor: pointer; color: #9AA0A8; }
.csi-drawer__close:hover { color: var(--csi-color-ink); background: var(--csi-color-surface); }
.csi-drawer__close svg { width: 24px; height: 24px; }
.csi-drawer__body { flex: 1; overflow-y: auto; padding: 6px 24px; }
.csi-drawer__empty { padding: 48px 8px; text-align: center; color: var(--csi-color-muted); }
.csi-drawer__empty svg { width: 52px; height: 52px; margin: 0 auto 14px; color: #C9CDD2; }
.csi-drawer__empty p + p { margin-top: 6px; font-size: 14.5px; }
.csi-drawer__empty strong { color: var(--csi-color-ink); font-weight: 600; }
.csi-drawer__foot { display: flex; flex-direction: column; gap: 10px; padding: 20px 24px; border-top: 1px solid var(--csi-color-border); background: var(--csi-color-surface); }

/* --------------------------------------------------------------- whatsapp */
.csi-whatsapp {
  position: fixed; right: 24px; bottom: 24px; z-index: 90; width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: #25D366; color: #fff;
  box-shadow: 0 10px 25px -5px rgba(37, 211, 102, .55); transition: transform .2s ease;
}
.csi-whatsapp::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: #25D366; opacity: .35; animation: csi-ping 2.6s cubic-bezier(0, 0, .2, 1) infinite; }
.csi-whatsapp:hover { transform: scale(1.07); }
.csi-whatsapp svg { width: 30px; height: 30px; }

/* ------------------------------------------------------------------ toast */
.csi-toast {
  position: fixed; right: 20px; bottom: 98px; z-index: 200; display: flex; align-items: center; gap: 12px;
  max-width: min(380px, calc(100vw - 40px)); padding: 14px 16px; border-radius: 10px;
  background: var(--csi-color-ink); color: #fff; font-size: 15px; font-weight: 500;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, .3); opacity: 0; transform: translateY(40px); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.csi-toast--show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.csi-toast svg { width: 20px; height: 20px; flex-shrink: 0; color: #4ADE80; }
.csi-toast__action { margin-left: 8px; background: none; border: 0; cursor: pointer; padding: 2px 0; font-family: var(--csi-font-heading); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--csi-color-highlight); white-space: nowrap; }
.csi-toast__action:hover { color: #fff; }

/* ------------------------------------------------------------ reveal on scroll */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--d, 0s); }
.reveal.is-visible { opacity: 1; transform: none; }
html.csi-static .reveal { opacity: 1; transform: none; transition: none; }
html.csi-static .csi-anim-up { animation: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .csi-anim-up, .csi-slide.is-active, .csi-modal__panel { animation: none; }
  .csi-ping::after, .csi-pulse-dot, .csi-whatsapp::before { animation: none; }
}

/* ------------------------------------------------- theme text on dark areas */
/* Fixed fallbacks above; where color-mix() is supported, the translucent
   light text on dark sections and in the footer follows the admin's
   "Text on Dark Sections" / "Footer Text" colors. */
.csi-stat__value, .csi-cta-dark h2, .csi-strip h4, .csi-feature__card h3, .csi-team h3, .csi-showcase h3 { color: var(--csi-color-dark-text); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .csi-topbar { color: color-mix(in srgb, var(--csi-color-dark-text) 66%, transparent); }
  .csi-stat__label { color: color-mix(in srgb, var(--csi-color-dark-text) 62%, transparent); }
  .csi-cta-dark p { color: color-mix(in srgb, var(--csi-color-dark-text) 66%, transparent); }
  .csi-strip p { color: color-mix(in srgb, var(--csi-color-dark-text) 56%, transparent); }
  .csi-team p { color: color-mix(in srgb, var(--csi-color-dark-text) 66%, transparent); }
  .csi-checklist li { color: color-mix(in srgb, var(--csi-color-dark-text) 92%, transparent); }
  .csi-checklist small { color: color-mix(in srgb, var(--csi-color-dark-text) 64%, transparent); }
  .csi-footer { color: color-mix(in srgb, var(--csi-color-footer-text) 66%, transparent); }
  .csi-footer__bottom { color: color-mix(in srgb, var(--csi-color-footer-text) 50%, transparent); }
  .csi-footer__bottom-links button:hover, .csi-footer__bottom-links a:hover, .csi-footer__bottom-links .is-on, .csi-social a:hover { color: var(--csi-color-footer-text); }
}

@media print {
  .csi-topbar, #csi-header, .csi-whatsapp, .csi-cart-drawer, .csi-toast { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}