:root {
    --bg: #F8FAFC;
    --surface: #FFFFFF;
    --ink: #1E293B;
    --muted: #546274;
    --line: #E2E8F0;
    --brand: #1F5FA8;
    --brand-deep: #EAF2FB;
    --brand-soft: #EAF2FB;
    --link: #1F5FA8;
    --accent: #F5A524;
    --accent-ink: #1B1300;
    --footer: #EEF3F9;
    color-scheme: light;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 84px); -webkit-text-size-adjust: 100%; }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
  body { background: var(--bg); color: var(--ink); font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
  h1, h2, h3, h4 { font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif; }

  .h2 { font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }

  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

  /* Buttons */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.35rem; font-weight: 600; font-size: .95rem; line-height: 1.2; border-radius: .375rem; transition: background-color .15s, border-color .15s, color .15s; text-align: center; }
  .btn-primary { background: var(--accent); color: var(--accent-ink); }
  .btn-primary:hover { background: #FFB93D; }
  .btn-ghost { border: 1px solid #9DB8DC; color: var(--brand); background: #fff; }
  .btn-ghost:hover { background: var(--brand-soft); border-color: var(--brand); }

  /* Icons (from the sprite) */
  .ico { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

  /* Blueprint grid used for hero + closing CTA */

  /* Dimension line (Commitment heading) */
  .dim-line { height: 1px; background: var(--line); position: relative; }
  .dim-line::before, .dim-line::after { content: ""; position: absolute; top: -6px; width: 1px; height: 13px; background: var(--muted); }
  .dim-line::before { left: 0; }
  .dim-line::after { right: 0; }


  /* Hero: a single background image, softened on the left so the text stays readable.
     Replace the value of --hero-image with your photo, e.g. url("data:image/jpeg;base64,...") */
  :root { --hero-image: none; }
  .hero-bg {
    background-color: #EEF3F9;
    background-image:
      linear-gradient(90deg, rgba(248,250,252,.96) 0%, rgba(248,250,252,.86) 45%, rgba(248,250,252,.35) 100%),
      var(--hero-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .hero-bg--banner {
    background-image: url(../hero-banner.png);
  }

  /* Mega menu */
  .mega-in { animation: megain .16s ease-out; }
  @keyframes megain { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .mega-in { animation: none; } }
  .mega-link { display: block; margin: 0 -.5rem; padding: .4rem .5rem; border-radius: .25rem; font-size: .875rem; color: var(--muted); transition: background-color .12s, color .12s; }
  .mega-link:hover { background: var(--brand-soft); color: var(--ink); }

  /* FAQ */
  details > summary { list-style: none; cursor: pointer; }
  details > summary::-webkit-details-marker { display: none; }
  details[open] .chev { transform: rotate(180deg); }
  .chev { transition: transform .2s ease; }

  .bp-grid {
    background-color: #F1F6FC;
    background-image:
      linear-gradient(rgba(31,95,168,.09) 1px, transparent 1px),
      linear-gradient(90deg, rgba(31,95,168,.09) 1px, transparent 1px),
      linear-gradient(rgba(31,95,168,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(31,95,168,.04) 1px, transparent 1px);
    background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  }

  .bp-grid--photo-ind {
    background-image: url(../industries.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .bp-grid--photo-prod {
    background-image: url(../product.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }