:root { --navy:#002E5D; --blue:#2B6CA3; --red:#B63D32; --sky:#3D9BE9; --mist:#EFEFEF; }
html, body { overflow-x: clip; }
body { line-height: 1.7; }
h1, h2, h3, .font-display { font-family: 'Archivo', system-ui, sans-serif; }
.eyebrow { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; display: inline-flex; align-items: center; gap: .75rem; }
.eyebrow::before { content: ""; width: 2rem; height: 3px; background: var(--red); display: inline-block; }

.site-header { background: rgba(255,255,255,.82); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid rgba(0,46,93,.08); transition: box-shadow .3s; }
.site-header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(0,46,93,.45); }
.navlink { position: relative; padding: .6rem .8rem; font-weight: 600; font-size: .95rem; color: var(--navy); border-radius: .375rem; transition: color .2s; }
.navlink::after { content:""; position:absolute; left:.8rem; right:.8rem; bottom:.3rem; height:2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.navlink:hover::after, .navlink.is-active::after { transform: scaleX(1); }
.navlink.is-active { color: var(--blue); }

.btn { display:inline-flex; align-items:center; gap:.6rem; padding: .95rem 1.4rem; border-radius: .5rem; font-weight: 600; line-height: 1.2; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s; min-height: 44px; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { transition: transform .2s ease; }
.btn:hover svg:last-child { transform: translateX(3px); }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 10px 24px -12px rgba(43,108,163,.8); }
.btn-primary:hover { background: #245c8c; }
.btn-red { background: var(--red); color:#fff; box-shadow: 0 12px 28px -14px rgba(182,61,50,.9); }
.btn-red:hover { background: #9e3329; }
.btn-navy { background: var(--navy); color:#fff; }
.btn-navy:hover { background: #00264d; box-shadow: 0 12px 28px -14px rgba(0,46,93,.9); }
.btn-ghost-light { color:#fff; border: 1.5px solid rgba(255,255,255,.45); }
.btn-ghost-light:hover { background: rgba(255,255,255,.1); border-color:#fff; }
.btn-ghost { color: var(--navy); border: 1.5px solid rgba(0,46,93,.25); }
.btn-ghost:hover { border-color: var(--navy); background: #fff; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }

.phone-card { display:flex; align-items:center; gap:1rem; background:#fff; color: var(--red); padding: 1rem 1.25rem; border-radius: .6rem; transition: transform .2s, box-shadow .2s; }
.phone-card:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -18px rgba(0,46,93,.6); }

.bg-stripes { background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.25) 0 2px, transparent 2px 22px); }
.bg-grid { background-image: linear-gradient(rgba(0,46,93,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0,46,93,.06) 1px, transparent 1px); background-size: 48px 48px; }
.sheet-profile { background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 18px, rgba(255,255,255,0) 18px 40px); }

.card-lift { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.card-lift:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(0,46,93,.55); }
.zoom { overflow: hidden; }
.zoom img { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.zoom:hover img, .zoom:focus-within img { transform: scale(1.06); }

.marquee { display:flex; width:max-content; animation: marquee 40s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Reveal: content stays visible without JS */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* FAQ accordion */
.faq summary { list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq .faq-icon { transition: transform .3s ease; }
.faq[open] .faq-icon { transform: rotate(45deg); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(0,20,40,.94); display: grid; place-items: center; padding: 4rem 1rem; }
.lightbox[hidden], .mobile-menu[hidden] { display: none !important; }
.lb-figure { max-width: min(1200px, 100%); margin: 0; }
.lb-figure img { max-height: 78vh; width: auto; max-width: 100%; margin: 0 auto; border-radius: .5rem; }
.lb-figure figcaption { color: #fff; text-align: center; margin-top: 1rem; font-family: 'IBM Plex Mono', monospace; font-size: .85rem; letter-spacing: .05em; }
.lb-close, .lb-nav { position: absolute; color: #fff; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 999px; background: rgba(255,255,255,.1); font-size: 1.4rem; }
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,.22); }
.lb-close { top: 1rem; right: 1rem; }
.lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }

/* Forms */
.field label { display:block; font-weight:600; color: var(--navy); font-size:.92rem; margin-bottom:.4rem; }
.field input, .field select, .field textarea { width:100%; border:1.5px solid rgba(0,46,93,.18); background:#fff; border-radius:.5rem; padding:.8rem .95rem; font-size:1rem; color:#1d1d1d; transition: border-color .2s, box-shadow .2s; min-height: 48px; }
.field textarea { min-height: 140px; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(61,155,233,.2); }
.hp-field { position:absolute !important; left:-10000px !important; width:1px; height:1px; overflow:hidden; }
.form-status { display:none; }
.form-status.is-visible { display:flex; }
button[disabled] { opacity:.6; cursor: progress; transform:none !important; }
.grecaptcha-badge { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}