/* Additions for the static build (styles.css is the original site stylesheet) */
.menu-toggle .icon-close,
.menu-toggle.is-open .icon-open { display: none; }
.menu-toggle.is-open .icon-close { display: block; }
.form-note.is-success { color: oklch(52% .14 150); font-weight: 600; }
.form-note.is-error { color: var(--destructive); font-weight: 600; }
.quote-form { position: relative; }
/* Product detail pages never rendered on the original site; give their headings the brand weight */
.product-detail-copy h1,
.specification-grid h2,
.applications-section h2,
.gallery-heading h2 { font-weight: 900; }
/* Mobile menu quote button (original CSS targeted a <button>, but it renders as a link) */
.mobile-nav > a.inline-flex { justify-content: center; margin-top: 18px; padding: 0 2rem; border-bottom: 0; font-size: 14px; }
/* Full-width hero image (home) */
.home-hero-image { position: relative; isolation: isolate; background: #0e0f11; color: #fff; }
.home-hero-image .hero-bg { position: absolute; top: 0; right: 0; bottom: 0; z-index: -2; height: 100%; width: auto; min-width: 62%; max-width: 100%; object-fit: cover; object-position: 70% 60%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%); mask-image: linear-gradient(90deg, transparent 0%, #000 30%); }
.home-hero-image::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(14 15 17 / .85) 0%, rgb(14 15 17 / .5) 38%, rgb(14 15 17 / 0) 55%); }
.home-hero-image .hero-grid { grid-template-columns: minmax(0, 640px); }
.home-hero-image .hero-copy > p:not(.eyebrow),
.home-hero-image .hero-scroll { color: oklch(78% 0 0); }
@media (width <= 760px) {
  .home-hero-image { flex-direction: column; align-items: stretch; }
  .home-hero-image::before { display: none; }
  .home-hero-image .hero-grid { grid-template-columns: 1fr; padding-bottom: 10px; }
  .home-hero-image .hero-bg { position: relative; inset: auto; z-index: 0; width: 100%; min-width: 0; height: auto; aspect-ratio: 4 / 3; object-position: 75% 60%; -webkit-mask-image: none; mask-image: none; }
}
/* Home: "Built for business" section in light colours */
.statement-section { background: var(--card); color: var(--foreground); border-bottom: 1px solid var(--border); }
.statement-section .eyebrow-light { color: var(--primary); }
.statement-inner .technical-grid { background-image: linear-gradient(90deg, oklch(17% 0 0 / .07) 1px, #0000 1px), linear-gradient(oklch(17% 0 0 / .07) 1px, #0000 1px); }
.statement-inner .product-image { mix-blend-mode: multiply; }
/* Home: lifestyle photo in "Built for business" */
.statement-photo { position: relative; margin: 0; }
.statement-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1562 / 1274; object-fit: cover; box-shadow: 0 30px 60px oklch(0% 0 0 / .12); }
.statement-photo .tech-corner { width: 56px; height: 56px; border-width: 2px 0 0 2px; top: -14px; left: -14px; bottom: auto; right: auto; }
.statement-photo .tech-corner-two { border-width: 0 2px 2px 0; top: auto; left: auto; bottom: -14px; right: -14px; }
@media (width <= 760px) { .statement-photo { margin: 20px 10px 40px; } }
.statement-inner { column-gap: clamp(32px, 5vw, 80px); }
/* Header without the quote button: keep nav centred */
@media (width > 1050px) { .header-inner { grid-template-columns: 140px minmax(0, 1fr) 140px; } }

/* Home: brand marquee (3rd section) */
.brand-marquee { padding: 80px 0; background: var(--background); border-bottom: 1px solid var(--border); overflow: hidden; }
.brand-marquee .eyebrow { text-align: center; margin-bottom: 40px; }
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; flex-shrink: 0; align-items: center; gap: 80px; padding: 0 40px; margin: 0; list-style: none; animation: marquee 35s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
.brand-item { flex-shrink: 0; display: flex; align-items: center; height: 60px; }
.brand-word { color: oklch(68% 0 0); font-size: 26px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; transition: color .25s; cursor: default; }
.brand-logo { display: block; width: 150px; height: 56px; background-color: oklch(68% 0 0); transition: background-color .25s;
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.brand-item:hover .brand-word { color: var(--primary); }
.brand-item:hover .brand-logo { background-color: var(--primary); }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation-duration: 120s; } }
@media (width <= 760px) { .brand-marquee { padding: 56px 0; } .marquee-track { gap: 48px; padding: 0 24px; } .brand-word { font-size: 20px; } }

/* Home: D4 lifestyle photo (4th section) */
.showcase-photo { margin: 0; }
.showcase-photo img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; object-position: 48% 50%; box-shadow: 0 30px 60px oklch(0% 0 0 / .1); }
/* Brand logo sizing (logos are ~1.3:1) */
.brand-item { height: 110px; }
.brand-logo { width: 150px; height: 110px; background-color: oklch(62% 0 0); }
@media (width <= 760px) { .brand-item { height: 80px; } .brand-logo { width: 110px; height: 80px; } }