.reveal-motion { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms), transform .7s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms); }
.reveal-motion.is-visible { opacity: 1; transform: none; }
.product-tabs { border: 1px solid var(--line); border-radius: 20px; background: #fff; overflow: hidden; box-shadow: 0 20px 60px rgba(5,31,21,.07); }
.tabs-nav { display: flex; gap: 4px; padding: 9px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs-nav::-webkit-scrollbar { display: none; }
.tabs-nav button { flex: 1; min-width: 145px; padding: 14px 18px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font: 700 13px/1 Inter,sans-serif; cursor: pointer; transition: .2s; }
.tabs-nav button:hover { color: var(--ink); background: #f3f7f4; }
.tabs-nav button[aria-selected=true] { color: #fff; background: var(--accent,var(--green)); box-shadow: 0 7px 20px color-mix(in srgb,var(--accent,var(--green)) 28%,transparent); }
.tab-panel[hidden] { display: none; }
.tab-panel.is-active { animation: tab-in .42s ease both; }
@keyframes tab-in { from { opacity: 0; transform: translateY(12px); } }
.tab-feature { display: grid; grid-template-columns: .9fr 1.1fr; gap: 55px; align-items: center; padding: 50px; min-height: 490px; }
.tab-feature.reverse .tab-copy { order: 2; }
.tab-feature h3 { font-size: clamp(28px,3vw,40px); line-height: 1.08; letter-spacing: -.035em; margin: 0 0 18px; }
.tab-feature .lead { color: var(--muted); line-height: 1.7; font-size: 16px; }
.tab-feature ul { list-style: none; padding: 0; margin: 26px 0 0; }
.tab-feature li { display: flex; gap: 10px; margin: 13px 0; color: #36473f; font-size: 14px; line-height: 1.45; }
.tab-feature li::before { content: '✓'; display: grid; place-items: center; width: 21px; height: 21px; flex: none; border-radius: 50%; color: var(--accent,var(--green)); background: color-mix(in srgb,var(--accent,var(--green)) 13%,white); font-weight: 900; font-size: 11px; }
.tab-media { padding: 12px; border-radius: 17px; background: color-mix(in srgb,var(--accent,var(--green)) 10%,#f6f8f7); box-shadow: 0 20px 50px rgba(6,30,21,.12); }
.tab-media img { width: 100%; max-height: 390px; object-fit: cover; object-position: top; border-radius: 10px; }
.clients-marquee { width: 100%; overflow-x: auto; scrollbar-width: none; cursor: grab; user-select: none; }
.clients-marquee::-webkit-scrollbar { display: none; }
.clients-marquee.is-dragging { cursor: grabbing; }
.clients-track { display: flex; gap: 18px; width: max-content; padding: 8px 0 28px; }
.client-tile { width: 220px; height: 190px; border: 1px solid var(--line); border-radius: 17px; background: #fff; display: grid; place-items: center; padding: 25px; flex: none; box-shadow: 0 12px 35px rgba(5,31,21,.06); }
.client-tile img { width: 140px; height: 140px; object-fit: contain; pointer-events: none; }
.client-tile b { font-size: 19px; }
.hero-shot { animation: hero-float 6s ease-in-out infinite; }
@keyframes hero-float { 50% { transform: translateY(-9px) rotate(-.4deg); } }
@media (prefers-reduced-motion:reduce) { .reveal-motion { opacity: 1; transform: none; transition: none; } .hero-shot { animation: none; } }
@media(max-width:800px) { .tab-feature { grid-template-columns: 1fr; padding: 28px; gap: 28px; } .tab-feature.reverse .tab-copy { order: initial; } .tab-media { order: -1; } }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.menu-toggle { display:none; position:absolute; z-index:80; top:22px; right:20px; width:46px; height:46px; padding:12px; border:1px solid rgba(255,255,255,.22); border-radius:11px; background:#fff; box-shadow:0 8px 25px rgba(0,0,0,.13); cursor:pointer; }
.menu-toggle>span:not(.sr-only) { display:block; height:2px; background:#123228; margin:4px 0; border-radius:2px; }
.mobile-menu { position:fixed; inset:0; z-index:100; padding:22px; color:#fff; background:rgba(5,25,18,.98); opacity:0; transform:translateY(-12px); transition:.25s ease; }
.mobile-menu.is-open { opacity:1; transform:none; }
.mobile-menu-head { display:flex; align-items:center; justify-content:space-between; }
.mobile-menu-head button { border:0; background:transparent; color:#fff; font-size:40px; cursor:pointer; }
.mobile-menu nav { display:flex; flex-direction:column; margin-top:60px; }
.mobile-menu nav a { padding:18px 4px; border-bottom:1px solid rgba(255,255,255,.13); font-size:clamp(23px,7vw,35px); font-weight:800; letter-spacing:-.03em; }
body.menu-open { overflow:hidden; }
@media(max-width:900px) { .menu-toggle { display:block; } }

/* Make wide source logos readable while keeping their white logo surfaces. */
.nav .brand-mark,
.footer .brand-mark {
    width: 138px;
    height: 58px;
    padding: 5px;
    border-radius: 10px;
    flex: none;
}

.nav .brand-mark img,
.footer .brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-icon {
    width: 182px;
    height: 92px;
    padding: 7px;
}

.product-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-brand { gap: 12px; }
.product-brand-mark { width: 130px!important; height: 54px!important; }
.product-brand-emoji { width:46px; height:46px; display:grid; place-items:center; border-radius:11px; background:#fff4eb; font-size:25px; }

@media(max-width:560px) {
    .nav .brand-mark { width: 112px; height: 48px; }
    .nav .brand > span:last-child { font-size: 15px; }
    .product-icon { width: 160px; height: 82px; }
}