/* Homepage layout and motion. Loaded on the homepage only; main.css keeps the shared styles. */
:root{--topbar-height:34px;--ease-out:cubic-bezier(.2,.7,.1,1)}

/* Header sits over the hero, then turns solid once the page scrolls. */
.has-overlay-header .topbar{position:absolute;top:var(--admin-bar-height);left:0;right:0;z-index:101;background:linear-gradient(#05172db3,#05172d00)}
.has-overlay-header .site-header{position:fixed;left:0;right:0;top:calc(var(--admin-bar-height) + var(--topbar-height));background:transparent;border-bottom-color:#ffffff1c;transition:top .4s var(--ease-out),background-color .4s,box-shadow .4s,border-color .4s}
.has-overlay-header.is-scrolled .site-header{top:var(--admin-bar-height);background:#071f3df2;border-bottom-color:transparent;box-shadow:0 14px 34px #0413292e;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.has-overlay-header .site-header.menu-open{background:var(--navy)}

/* Hero: full screen, title rises out of a mask, rule draws in, rotating scroll badge. */
.landing .hero,.landing .hero-inner{min-height:max(640px,100vh);min-height:max(640px,100svh)}
.landing .hero-inner{padding-top:calc(var(--topbar-height) + var(--header-height));padding-bottom:150px}
.landing .hero-content{max-width:none;width:100%}
.landing .hero-slide.is-active img{animation:hero-zoom 16s var(--ease-out) both}
.hero-title{max-width:920px;overflow:hidden;padding-bottom:.06em}
.hero-title-text{display:block;animation:hero-title-rise 1.2s var(--ease-out) .25s both}
.hero-rule{display:block;height:1px;margin-top:38px;background:linear-gradient(90deg,var(--gold),#ffffff4d 55%,#ffffff00);transform-origin:left;animation:hero-rule 1.4s var(--ease-out) .6s both}
.landing .hero-description{margin-top:30px}
.hero-rise{animation:hero-fade-up 1s var(--ease-out) both}
.hero-content>.eyebrow{animation-delay:.05s}
.hero-content>.hero-description{animation-delay:.75s}
.hero-content>.hero-actions{animation-delay:.9s}
.scroll-badge{position:absolute;left:50%;bottom:-18px;width:118px;height:118px;margin-left:-59px;display:grid;place-items:center;color:#d8e5f3;transition:color .3s}
.scroll-badge:hover{color:var(--gold)}
.scroll-badge svg{position:absolute;inset:0;width:100%;height:100%;fill:currentColor;font-size:10px;font-weight:600;letter-spacing:3.2px;animation:badge-spin 16s linear infinite}
.scroll-badge-arrow{position:relative;width:1px;height:30px;background:linear-gradient(#e8c47e00,var(--gold));animation:badge-drop 2.2s ease-in-out infinite}
.scroll-badge-arrow::after{content:"";position:absolute;left:-4px;bottom:0;width:7px;height:7px;border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);transform:rotate(45deg)}
@keyframes hero-zoom{from{transform:scale(1.12)}}
@keyframes hero-title-rise{from{transform:translateY(105%)}}
@keyframes hero-rule{from{transform:scaleX(0)}}
@keyframes hero-fade-up{from{opacity:0;transform:translateY(26px)}}
@keyframes badge-spin{to{transform:rotate(360deg)}}
@keyframes badge-drop{0%,100%{transform:translateY(-4px)}50%{transform:translateY(4px)}}

/* Content fades up as it scrolls into view (home.js adds .reveal-ready and .is-visible). */
.reveal-ready [data-reveal]{opacity:0;transform:translateY(38px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);transition-delay:var(--reveal-delay,0s)}
.reveal-ready [data-reveal].is-visible{opacity:1;transform:none}

/* Shared homepage headings. */
.landing .section h2{font-size:clamp(32px,3.3vw,48px);font-weight:600;letter-spacing:.06em;line-height:1.35}
:lang(en) .landing .section h2{letter-spacing:0;line-height:1.2}

/* About: copy and stats on the left, overlapping images with parallax on the right. */
.landing .about-section{background:#fff;padding-block:130px;overflow:hidden}
.landing .about-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:80px}
.landing .about-copy{padding:0}
.landing .about-description{font-size:15px}
.about-stats{display:flex;gap:64px;margin:40px 0 0;padding-top:30px;border-top:1px solid var(--line)}
.about-stats>div{display:flex;flex-direction:column-reverse;gap:4px}
.about-stats dt{color:var(--muted);font-size:13px;letter-spacing:1px}
.about-stats dd{margin:0;color:var(--navy);font-size:58px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.about-stats small{color:var(--gold-dark);font-size:30px;margin-left:4px;vertical-align:top}
.landing .about-copy>.button,.landing .about-copy>.text-link{margin-top:34px}
.about-stage{position:relative;padding:0 0 120px 110px}
.landing .about-visual{aspect-ratio:.92;will-change:transform}
.landing .about-visual-label{top:34px;bottom:auto}
.about-float{position:absolute;left:0;bottom:0;width:36%;aspect-ratio:3/4;overflow:hidden;background:var(--navy);box-shadow:0 30px 60px #0413292e;will-change:transform}
.about-float img{width:100%;height:100%;object-fit:cover}

/* Product range: horizontally scrolling category cards. */
.range-section{--range-pad:max(56px,calc((100% - 1240px) / 2));background:var(--pale);padding-block:120px;overflow:hidden}
.range-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:48px}
.range-arrows{display:flex;gap:12px}
.range-arrow{width:54px;height:54px;display:grid;place-items:center;border:1px solid #c5d1df;border-radius:50%;background:transparent;color:var(--navy);cursor:pointer;transition:background .25s,color .25s,border-color .25s,opacity .25s}
.range-arrow:hover:not([disabled]){background:var(--navy);border-color:var(--navy);color:#fff}
.range-arrow[disabled]{opacity:.3;cursor:default}
.range-arrow .icon{width:20px;height:20px}
.icon.is-flipped{transform:scaleX(-1)}
.range-track{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(250px,23vw,330px);gap:30px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--range-pad);padding:0 var(--range-pad) 6px;scrollbar-width:none;overscroll-behavior-x:contain}
.range-track::-webkit-scrollbar{display:none}
.range-track{cursor:grab}.range-track.is-dragging{cursor:grabbing}.range-track.is-dragging .range-card{pointer-events:none}
.range-card{display:block;scroll-snap-align:start;color:inherit}
.range-image{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--navy)}
.range-image>img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.range-card:hover .range-image>img{transform:scale(1.07)}
.range-placeholder{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 28% 18%,#16447a,var(--navy) 68%)}
.range-placeholder::before{content:"";position:absolute;inset:18px;border:1px solid #ffffff14}
.range-placeholder img{width:44%;opacity:.85;transition:transform 1s var(--ease-out)}
.range-card:hover .range-placeholder img{transform:scale(1.07)}
.range-index{position:absolute;top:18px;left:20px;color:#fff;font-size:12px;letter-spacing:2px;font-family:Georgia,serif;text-shadow:0 1px 8px #0006}
.range-card h3{margin-top:22px;font-size:20px;font-weight:600;letter-spacing:.04em;line-height:1.4;transition:color .25s}
.range-card:hover h3{color:var(--blue)}
.range-card p{margin-top:6px;color:var(--muted);font-size:13px}

/* Marquees. Each track holds its text twice, so sliding by half loops seamlessly. */
.marquee{overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-flex;animation:marquee 40s linear infinite;will-change:transform}
.marquee.is-reverse .marquee-track{animation-direction:reverse}
.marquee-track span{padding-right:.55em}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee-outline{padding-block:110px 20px;font-size:clamp(68px,11vw,168px);font-weight:700;line-height:1.05;letter-spacing:.01em;color:transparent;-webkit-text-stroke:1.4px #0753a38c}
.marquee-band{position:relative;isolation:isolate;padding-block:100px;overflow:hidden;background:var(--navy) url('../images/hero-grid.svg') center/cover;color:#fff;font-size:clamp(54px,8vw,118px);font-weight:600;line-height:1.2}
.marquee-band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#071f3d33,#071f3de6)}
.marquee-band .marquee+.marquee{margin-top:8px}
.marquee-band .is-reverse{color:transparent;-webkit-text-stroke:1.4px var(--gold)}
.marquee-band .marquee-track{animation-duration:55s}

/* Statement: words light up from grey to navy as the section scrolls past. */
.statement-section{padding-block:40px 70px;background:#fff}
.statement-text{max-width:1020px;margin-inline:auto;text-align:center;color:var(--navy);font-size:clamp(26px,3.3vw,46px);font-weight:600;line-height:1.6;letter-spacing:.05em;text-wrap:balance}
:lang(en) .statement-text{letter-spacing:0;line-height:1.35}
.statement-text .fill-unit{color:#c3cedb;transition:color .35s}
.statement-text .fill-unit.is-on{color:var(--navy)}

/* Featured products: sticky introduction beside a two-column grid. */
.landing .products-section{padding-block:130px;background:#fff}
.products-layout{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:80px;align-items:start}
.products-intro{align-self:stretch}
.products-sticky{position:sticky;top:calc(var(--admin-bar-height) + var(--header-height) + 56px)}
.products-sticky .section-description{margin-top:22px}
.button-outline{margin-top:36px;gap:22px;border:1px solid #c5d1df;border-radius:999px;color:var(--navy);background:#fff}
.button-outline:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.products-list .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
/* Keep a whole card (photo and text) within one screen; photos shrink inside the black frame. */
.landing .products-list .card-image{max-height:max(200px,calc(100svh - var(--header-height) - var(--admin-bar-height) - 280px))}

.landing .news-section{padding-block:120px}

@media(max-width:1180px){
.landing .about-grid,.products-layout{gap:50px}
.about-stage{padding-left:60px}
.range-section{--range-pad:36px}
}
@media(max-width:960px){
.landing .about-grid{grid-template-columns:1fr}
.about-stage{max-width:640px;width:100%;padding-left:80px}
.products-layout{grid-template-columns:1fr;gap:40px}
.products-sticky{position:static}
.range-section{--range-pad:24px;padding-block:90px}
.landing .about-section,.landing .products-section{padding-block:90px}
.marquee-outline{padding-top:80px}
.statement-section{padding-bottom:40px}
}
@media(max-width:600px){
:root{--topbar-height:29px}
.landing .hero-inner{padding-bottom:140px}
.scroll-badge{width:96px;height:96px;margin-left:-48px;bottom:-12px}
.scroll-badge svg{font-size:11px}
.scroll-badge{left:auto;right:0;margin-left:0}
.landing .about-section,.landing .products-section,.landing .news-section{padding-block:70px}
.about-stats{gap:40px}
.about-stats dd{font-size:44px}
.about-stage{padding:0 0 80px 44px}
.range-section{--range-pad:20px;padding-block:70px}
.range-head{margin-bottom:30px}
.range-arrow{width:44px;height:44px}
.range-track{grid-auto-columns:76%;gap:18px}
.products-list .product-grid{grid-template-columns:1fr;gap:25px}
.marquee-outline{padding-block:60px 10px;-webkit-text-stroke-width:1px}
.marquee-band{padding-block:64px}
.statement-section{padding-bottom:20px}
}
@media(prefers-reduced-motion:reduce){
.hero-title-text,.hero-rule,.hero-rise,.landing .hero-slide.is-active img,.scroll-badge svg,.scroll-badge-arrow,.marquee-track{animation:none}
.reveal-ready [data-reveal]{opacity:1;transform:none;transition:none}
.statement-text .fill-unit{color:var(--navy);transition:none}
}