/* ============================================================
   Karlead brand system — SKY / COBALT edition
   Reference: AC1203B.png (sky blue field + deep navy frame + coral accent)
              Layout still follows the CM-9 / AC-018 white-card poster system
   Shared language: one bright sky accent, wide-tracked wordmark
   with a small square, a serif headline, a circular product frame,
   a bottom data row and a bottom contact strip. Generous white space.
   Pure override layer: original layout / responsive / JS untouched.
   ============================================================ */

:root {
  /* Retarget the page-level tokens so inner pages follow along */
  --ink: #102C42 !important;
  --paper: #F4F9FC !important;
  --sand: #EAF5FC !important;
  --accent: #1B7FB5 !important;
  --accent-dark: #12608C !important;
  --muted: #5A7183 !important;
  --line: #E1EAF0 !important;
  --navy: #0B2A40 !important;
  --navy-2: #123B55 !important;
  --gold: #8FD3F4 !important;
  --gold-soft: #DFF1FB !important;
  --white: #FFFFFF !important;

  --e-cream: #F4F9FC;
  --e-card: #FFFFFF;
  --e-deep: #0B2A40;
  --e-deep-2: #123B55;
  --e-ink: #102C42;
  --e-sky: #8FD3F4;
  --e-sky-pale: #CBE9FA;
  --e-sky-soft: #EFF8FE;
  --e-sky-ink: #1B7FB5;
  --e-coral: #F4484B;
  --e-muted: #5A7183;
  --e-line: #E1EAF0;
  --e-on-dark: #E6F2FA;
  --e-on-dark-dim: #9CBDD0;
  --e-radius: 20px;
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif !important;
  color: var(--e-ink) !important;
  background: var(--e-cream) !important;
}

/* Serif display headlines (AC-018) + clean geometric sub-heads */
h1, h2 {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -.018em !important;
  line-height: 1.1 !important;
  color: var(--e-ink) !important;
}
h3, h4, h5, h6 {
  font-family: 'Manrope', 'Space Grotesk', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -.022em !important;
  color: var(--e-ink) !important;
}
a { text-decoration: none; }

/* ---------- Top banner ---------- */
.top-banner {
  background: #071E2E !important;
  color: var(--e-on-dark-dim) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  font-size: .78rem !important;
  letter-spacing: .04em;
}
.top-banner a { color: var(--e-sky) !important; text-decoration: none !important; font-weight: 700; }

/* ---------- Header ---------- */
.site-header {
  background: var(--e-deep) !important;
  border-bottom: 3px solid var(--e-sky) !important;
  box-shadow: 0 6px 24px rgba(7,30,46,.18);
}
.site-logo { color: #fff !important; }
.site-logo-name {
  font-family: 'Manrope', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  letter-spacing: .28em !important;
  text-transform: uppercase;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center;
  gap: .45rem !important;
}
.site-logo-name::after {
  content: ""; display: inline-block;
  width: 11px; height: 11px;
  background: var(--e-coral); border-radius: 2px;
}
.site-logo-tag {
  color: var(--e-on-dark-dim) !important;
  font-size: .54rem !important;
  letter-spacing: .18em !important;
  font-weight: 600 !important;
}
.nav-links a { color: #C7DFEE !important; font-weight: 600 !important; font-size: .9rem !important; }
.nav-links a:hover, .nav-links a.active { color: #fff !important; border-color: var(--e-sky) !important; }
.site-search-input {
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(255,255,255,.22) !important;
  color: #fff !important;
}
.site-search-input::placeholder { color: var(--e-on-dark-dim); }
.site-search-input:focus {
  border-color: var(--e-sky) !important;
  box-shadow: 0 0 0 3px rgba(143,211,244,.20) !important;
}
.site-search-icon { filter: grayscale(1) brightness(2.2); opacity: .7; }
.site-search-results { background: var(--e-deep-2) !important; border: 1px solid rgba(255,255,255,.16) !important; color: #fff !important; }
.site-search-results a, .site-search-results li, .site-search-results span { color: var(--e-on-dark) !important; }
.site-search-results a:hover { background: rgba(143,211,244,.14) !important; color: var(--e-sky) !important; }
.lang-button { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.24) !important; color: #fff !important; }
.lang-button:hover { background: rgba(255,255,255,.16) !important; border-color: var(--e-sky) !important; }
.lang-menu { background: var(--e-deep-2) !important; border: 1px solid rgba(255,255,255,.16) !important; }
.lang-menu a { color: #C7DFEE !important; }
.lang-menu a:hover { background: rgba(143,211,244,.14) !important; color: var(--e-sky) !important; }
.menu-toggle { background: rgba(255,255,255,.09) !important; border-color: rgba(255,255,255,.26) !important; }
.menu-toggle-bar { background: #fff !important; }
.menu-toggle:hover { background: var(--e-sky) !important; border-color: var(--e-sky) !important; }
.menu-toggle:hover .menu-toggle-bar { background: var(--e-deep) !important; }
.mobile-drawer__panel, .mobile-drawer__nav, .mobile-drawer__categories { background: var(--e-deep) !important; }
.mobile-drawer__title, .mobile-drawer__nav a, .mobile-drawer__cat-title,
.mobile-drawer__categories a, .mobile-drawer__close { color: var(--e-on-dark) !important; }
.mobile-drawer__nav a:hover, .mobile-drawer__categories a:hover,
.mobile-drawer__nav a.active { color: var(--e-sky) !important; }
.mobile-drawer__cat-title { color: var(--e-sky) !important; letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; }

/* ---------- Type accents ---------- */
.eyebrow {
  color: var(--e-coral) !important;
  font-weight: 800 !important;
  letter-spacing: .2em !important;
  font-size: .7rem !important;
}
.section-title { font-size: clamp(1.9rem, 3.8vw, 2.7rem) !important; letter-spacing: -.02em !important; }
.section-subtitle { color: var(--e-muted) !important; font-size: 1.05rem !important; }
.section-subtitle a { color: var(--e-sky-ink) !important; font-weight: 700; text-decoration: underline; }

/* ---------- Buttons ---------- */
.btn, .newsletter-form button, .custom-cta {
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-family: 'Manrope', sans-serif !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-primary {
  background: var(--e-sky) !important;
  color: var(--e-deep) !important;
  box-shadow: 0 6px 16px rgba(143,211,244,.30);
}
.btn-primary:hover { background: #B4E6FA !important; transform: translateY(-2px); }
.btn-secondary { border: 1px solid var(--e-deep) !important; color: var(--e-deep) !important; background: transparent !important; }
.btn-secondary:hover { background: var(--e-deep) !important; color: #fff !important; }

/* ---------- Cards: soft white, generous radius ---------- */
.category-card, .product-card, .feature-card, .steps-list li, .steps li,
.faq-list details, .about-card, .evidence-card, .line-card,
.feature-item, .guide-card {
  border-radius: var(--e-radius) !important;
  border-color: var(--e-line) !important;
  box-shadow: 0 6px 20px rgba(11,42,64,.05) !important;
  background: #fff !important;
}
.category-card:hover, .product-card:hover, .feature-card:hover,
.line-card:hover, .guide-card:hover {
  border-color: var(--e-sky) !important;
  box-shadow: 0 16px 36px rgba(11,42,64,.12) !important;
}
.category-card-name, .product-name, .feature-card h3, .steps-list h3, .steps h3 { color: var(--e-ink) !important; }
.category-card-desc, .product-description, .feature-card p, .steps-list p, .steps p { color: var(--e-muted) !important; }
.product-link { color: var(--e-sky-ink) !important; font-weight: 700 !important; }

/* Feature icons -> dark numbered circles (AC-018) */
.feature-icon {
  font-size: 0 !important;
  width: 44px; height: 44px;
  margin: 0 auto 1.1rem !important;
  border-radius: 50% !important;
  background: var(--e-deep) !important;
  display: flex; align-items: center; justify-content: center;
}
.feature-icon::before {
  content: "1"; font-size: 1.05rem; line-height: 1;
  color: #fff; font-family: 'Manrope', sans-serif; font-weight: 800;
}
.feature-card:nth-child(2) .feature-icon::before { content: "2"; }
.feature-card:nth-child(3) .feature-icon::before { content: "3"; }
.feature-card:nth-child(4) .feature-icon::before { content: "4"; }

.steps-num, .num { background: var(--e-deep) !important; color: #fff !important; font-weight: 800 !important; }
.faq-list summary::after { color: var(--e-sky-ink) !important; }
.faq-list details[open] { border-color: var(--e-sky) !important; }

/* ============================================================
   HERO — HOME: deep green field + one big white poster card (CM-9)
   Only the homepage carries .hero--home. All other pages keep the
   plain .hero class and get the cream AC-018 treatment below.
   ============================================================ */
.hero--home {
  background: linear-gradient(135deg, #7CC7EE 0%, #A6DFF8 52%, #6FBFE9 100%) !important;
  padding: 2.6rem 1.2rem 2.8rem !important;
  position: relative;
  overflow: hidden;
}
.hero--home::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--e-coral);
}

/* ---------- INNER PAGES: cream editorial header (AC-018) ---------- */
.hero:not(.hero--home) {
  background: var(--e-cream) !important;
  background-image: radial-gradient(ellipse at 84% 10%, rgba(143,211,244,.20), transparent 50%) !important;
  padding: 3rem 1.2rem 3.1rem !important;
  border-bottom: 3px solid var(--e-sky) !important;
}
.hero:not(.hero--home) h1 {
  color: var(--e-ink) !important;
  font-size: clamp(2rem, 3.9vw, 3.05rem) !important;
  margin-bottom: .8rem !important;
  max-width: 940px;
}
.hero:not(.hero--home) .hero-text p,
.hero:not(.hero--home) .container > p {
  color: var(--e-muted) !important;
  font-size: 1.02rem !important;
  line-height: 1.7 !important;
  max-width: 700px;
}
.hero:not(.hero--home) .eyebrow { color: var(--e-coral) !important; }
.hero-container { align-items: center !important; gap: 1.5rem !important; }
.hero-images {
  display: flex !important; flex-wrap: wrap !important;
  justify-content: center !important; align-items: center !important;
  gap: .65rem !important;
}
.hero-images img {
  width: 88px !important; height: 88px !important;
  border-radius: 50% !important;
  border: 4px solid var(--e-deep) !important;
  background: #fff !important;
  object-fit: contain !important;
  padding: .4rem !important;
  box-shadow: 0 8px 18px rgba(11,42,64,.13) !important;
}

/* ---------- HOME card ---------- */
.hero-card {
  max-width: 1160px;
  margin: 0 auto !important;
  background: #FFFFFF;
  border-radius: 38px;
  padding: 2.6rem 3rem 1.7rem !important;
  box-shadow: 0 30px 70px rgba(4,26,40,.22);
}
.hero-brandline { text-align: center; }
.hero-wordmark {
  display: inline-flex; align-items: center; gap: .5rem !important;
  font-family: 'Manrope', sans-serif;
  font-size: 1.02rem; font-weight: 800;
  letter-spacing: .34em; color: #2E7FAE;
}
.brand-square { display: inline-block; width: 13px; height: 13px; background: var(--e-coral); border-radius: 2px; }
.hero-kicker {
  display: block; margin-top: .55rem !important;
  font-size: .66rem; font-weight: 800; letter-spacing: .22em;
  color: var(--e-sky-ink); text-transform: uppercase;
}
.hero-main {
  display: grid; grid-template-columns: 1.2fr .8fr;
  gap: 2rem !important; align-items: center;
  padding: 1.9rem 0 1.4rem !important;
}
.hero-overline {
  font-size: .68rem; font-weight: 800; letter-spacing: .2em;
  color: var(--e-coral); text-transform: uppercase; margin-bottom: .8rem !important;
}
.hero--home h1 {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-size: clamp(1.9rem, 3.5vw, 3rem) !important;
  font-weight: 400 !important;
  letter-spacing: -.02em !important;
  line-height: 1.08 !important;
  color: var(--e-ink) !important;
  margin-bottom: 1rem !important;
}
.hero--home h1 em {
  font-style: italic; color: var(--e-coral);
  display: block; white-space: nowrap;
}
.hero-pill {
  display: inline-block;
  background: var(--e-sky);
  color: var(--e-deep);
  border-radius: 14px;
  padding: .48rem 1.05rem !important;
  font-family: 'Manrope', sans-serif;
  font-weight: 800; font-size: 1rem;
  margin-bottom: 1.1rem !important;
}
.hero-sub {
  color: var(--e-muted) !important;
  font-size: .98rem !important; line-height: 1.75 !important;
  max-width: 520px; margin-bottom: 1.2rem !important;
}
.hero-actions { display: flex; gap: .8rem !important; flex-wrap: wrap; }
.hero--home .btn-secondary { border-color: var(--e-deep) !important; color: var(--e-deep) !important; }
.hero--home .btn-secondary:hover { background: var(--e-deep) !important; color: #fff !important; }

/* Circular product frames — the page template puts .hero-image in an
   equal-column grid with overflow:hidden on each figure. Without these
   overrides the 250px circle is clipped to 223px and loses its right
   border, so force content-sized columns and visible overflow. */
.hero-image {
  display: grid !important;
  grid-template-columns: auto auto !important;
  justify-content: center !important;
  align-items: start !important;
  gap: .5rem !important;
}
.hero-tile {
  margin: 0 !important; background: transparent !important;
  border: 0 !important; box-shadow: none !important;
  text-align: center; border-radius: 0 !important;
  overflow: visible !important; width: auto !important;
}
.hero-tile img {
  border-radius: 50% !important;
  border: 6px solid var(--e-deep) !important;
  background: #fff !important;
  object-fit: contain !important;
  box-shadow: 0 14px 32px rgba(11,42,64,.18) !important;
}
.hero-tile--lg img { width: 236px !important; height: 236px !important; padding: .65rem !important; }
.hero-tile--sm img { width: 138px !important; height: 138px !important; padding: .4rem !important; }
.hero-tile figcaption {
  border: 0 !important; background: transparent !important;
  color: var(--e-muted) !important; font-size: .62rem !important;
  font-weight: 800 !important; letter-spacing: .16em !important;
  text-transform: uppercase; padding: .55rem 0 0 !important;
}

/* Data row inside the white card */
.stat-bar { background: transparent !important; border-top: 1px solid var(--e-line) !important; border-bottom: 0 !important; }
.stat-bar-inner { max-width: none; padding: 1.5rem 0 .8rem !important; display: grid; grid-template-columns: repeat(4, 1fr); }
.stat-item { border-right: 1px solid var(--e-line); padding: .2rem 1rem !important; }
.stat-item:last-child { border-right: 0; }
.stat-num {
  display: block; font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(1.8rem, 3vw, 2.3rem); font-weight: 400;
  color: #1B7FB5; letter-spacing: -.02em; line-height: 1.1;
}
.stat-label {
  display: block; margin-top: .3rem !important; font-size: .66rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--e-sky-ink);
}
.hero-foot {
  border-top: 0 !important;
  background: var(--e-deep) !important;
  border-radius: 14px;
  padding: .85rem 1.1rem .8rem !important;
  margin-top: 1.1rem !important;
  text-align: center;
  font-size: .8rem; color: #FFFFFF; font-weight: 700; letter-spacing: .02em;
}
.hero-foot-sep { margin: 0 .5rem !important; color: var(--e-sky); }
.hero-foot-note { display: block; margin-top: .35rem !important; font-size: .7rem; font-weight: 600; color: #9CBDD0; letter-spacing: .04em; }

/* ---------- Section rhythm: cool white / soft sky / white ---------- */
.categories-section { background: #FFFFFF !important; }
.hot-section { background: var(--e-cream) !important; }
.features-section { background: var(--e-sky-soft) !important; }
.custom-section { background: #FAFDFF !important; }
.factory-section { background: var(--e-cream) !important; }
.faq-section { background: #FFFFFF !important; }
.cta-section { background: var(--e-deep) !important; color: #fff !important; }
.cta-section h2 { color: #fff !important; font-size: clamp(1.9rem, 3.6vw, 2.7rem) !important; }
.cta-section p { color: var(--e-on-dark-dim) !important; }
.custom-section .steps-list li, .custom-section .steps li { border-left: 3px solid var(--e-sky) !important; }
.features-section .feature-card { border-top: 3px solid var(--e-sky) !important; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--e-deep) !important;
  color: var(--e-on-dark) !important;
  border-top: 4px solid var(--e-sky) !important;
}
.footer-grid h3, .footer-grid h4 { color: #fff !important; letter-spacing: .02em !important; }
.footer-grid h4 { color: var(--e-sky) !important; font-size: .76rem !important; letter-spacing: .16em !important; text-transform: uppercase; }
.footer-grid p, .footer-grid a { color: #B7D5E8 !important; }
.footer-grid a:hover { color: var(--e-sky) !important; text-decoration: none !important; }
.footer-grid .footer-tagline { color: var(--e-sky) !important; letter-spacing: .14em !important; }
.footer-grid .footer-address a { color: var(--e-sky) !important; }
.qr-item img { background: #fff !important; border: 3px solid #fff !important; border-radius: 12px !important; padding: 2px !important; }
.qr-item span, .footer-social, .footer-social span, .copyright { color: var(--e-on-dark-dim) !important; }
.footer-social, .copyright { border-top-color: rgba(255,255,255,.14) !important; }
.footer-social a { color: #B7D5E8 !important; }
.footer-social a:hover { color: var(--e-deep) !important; background: var(--e-sky) !important; }
.copyright a { color: var(--e-sky) !important; }

/* ---------- Clickable model numbers -> product detail pages ---------- */
.model-link {
  display: inline-block;
  color: var(--e-sky-ink) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border-bottom: 1px dashed var(--e-sky-ink) !important;
  padding: 0 .12rem !important;
  margin: 0 .04rem !important;
  border-radius: 3px;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.model-link:hover, .model-link:focus-visible {
  color: #FFFFFF !important;
  background: var(--e-deep) !important;
  border-bottom-color: transparent !important;
  text-decoration: none !important;
}
.model-link:focus-visible { box-shadow: 0 0 0 3px var(--e-sky) !important; outline: none; }
.model-sep { color: var(--e-muted); padding: 0 .32rem !important; font-weight: 500; }
.brazil-model-list .model-link { font-size: .93rem; }
.table-wrap .model-link { white-space: nowrap; }

/* ---------- Product / category FAQ block ---------- */
.pf-section {
  background: var(--e-cream) !important;
  border-top: 1px solid var(--e-line) !important;
  padding: 3rem 1.2rem 3.4rem !important;
}
.pf-inner { max-width: 900px; margin: 0 auto !important; }
.pf-eyebrow {
  font-size: .7rem !important; font-weight: 800 !important;
  letter-spacing: .18em !important; text-transform: uppercase;
  color: var(--e-coral) !important; margin-bottom: .6rem !important;
}
.pf-title {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-size: clamp(1.6rem, 3vw, 2.15rem) !important;
  color: var(--e-ink) !important; margin-bottom: .6rem !important;
}
.pf-intro {
  color: var(--e-muted) !important; font-size: .95rem !important;
  line-height: 1.7 !important; margin-bottom: 1.4rem !important; max-width: 720px;
}
.pf-list { display: grid; gap: .7rem !important; }
.pf-item {
  background: #FFFFFF !important;
  border: 1px solid var(--e-line) !important;
  border-radius: 14px !important;
  padding: .95rem 1.2rem !important;
}
.pf-q {
  cursor: pointer; font-weight: 700 !important; font-size: .98rem !important;
  color: var(--e-ink) !important; list-style: none;
  position: relative; padding-right: 1.8rem !important;
}
.pf-q::-webkit-details-marker { display: none; }
.pf-q::after {
  content: '+'; position: absolute; right: 0; top: -.1rem;
  color: var(--e-sky-ink) !important; font-size: 1.2rem; font-weight: 400;
}
.pf-item[open] .pf-q::after { content: '\2013'; }
.pf-a {
  color: var(--e-muted) !important; font-size: .93rem !important;
  line-height: 1.72 !important; margin: .7rem 0 0 !important;
}
@media (max-width: 620px) {
  .pf-section { padding: 2.2rem .9rem 2.6rem !important; }
  .pf-item { padding: .85rem .95rem !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-main { grid-template-columns: 1fr; gap: 1.4rem !important; text-align: center; }
  .hero-copy { text-align: center; }
  .hero-sub { margin-left: auto !important; margin-right: auto !important; }
  .hero-actions { justify-content: center; }
  .hero-tile--lg img { width: 190px !important; height: 190px !important; }
  .hero-tile--sm img { width: 110px !important; height: 110px !important; }
  .hero-card { padding: 2rem 1.5rem 1.4rem !important; border-radius: 28px; }
  .hero-images img { width: 74px !important; height: 74px !important; }
  .hero-container { grid-template-columns: 1fr !important; text-align: center; }
  .hero-text p { margin-left: auto !important; margin-right: auto !important; }
}
@media (max-width: 620px) {
  .hero--home { padding: 1.8rem .8rem 2.2rem !important; }
  .hero-card { padding: 1.6rem 1.1rem 1.2rem !important; border-radius: 22px; }
  .hero--home h1 { font-size: clamp(1.7rem, 8vw, 2.3rem) !important; }
  .hero--home h1 em { white-space: normal; }
  .stat-bar-inner { grid-template-columns: repeat(2, 1fr); gap: 1rem 0 !important; }
  .stat-item:nth-child(2) { border-right: 0; }
  .stat-item:nth-child(3) { border-right: 0; }
  .hero-kicker { font-size: .56rem; letter-spacing: .14em; }
  .site-logo-name { font-size: .95rem !important; letter-spacing: .2em !important; }
  .hero-images img { width: 64px !important; height: 64px !important; }
  .hero:not(.hero--home) { padding: 2.2rem 1rem 2.4rem !important; }
}