:root { --ink:#08090a; --paper:#f3f1ec; --muted:#9a9b9d; --yellow:#ffe500; --line:rgba(255,255,255,.16); --hero-height:100svh; --hero-title-scale:1; --product-photo-height:290px; --section-space:1; --site-type-scale:1; --story-photo-width:30%; --editor-preview-scale:1; --header-logo-width:132px; --header-logo-y:0px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:#fff; font-family:Inter,Arial,sans-serif; }
a { color:inherit; }
.site-header { position:absolute; inset:0 0 auto; height:92px; z-index:10; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:32px; padding:0 4vw; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; width:max-content; text-decoration:none; font-family:"Barlow Condensed",sans-serif; font-weight:900; letter-spacing:.03em; transform:translateY(var(--header-logo-y)); }
.brand-logo-crop { position:relative; display:flex; align-items:center; width:var(--header-logo-width); height:64px; overflow:visible; flex:none; }
.brand-logo-crop img { display:block; width:var(--header-logo-width); max-height:64px; object-fit:contain; object-position:left center; }
.brand-country { margin-left:8px; padding-left:8px; border-left:1px solid rgba(255,255,255,.4); font:600 10px/1 Inter,sans-serif; letter-spacing:.22em; }
nav { display:flex; gap:38px; }
nav a { text-decoration:none; text-transform:uppercase; font:600 12px/1 Inter,sans-serif; letter-spacing:.14em; }
.mobile-shop-link { display:none; }
.mobile-menu-contact-actions { display:none; }
.header-cta { justify-self:end; text-decoration:none; text-transform:uppercase; font:700 11px/1 Inter,sans-serif; letter-spacing:.14em; padding:14px 18px; border:1px solid rgba(255,255,255,.48); }
.header-cta span { color:var(--yellow); margin-left:8px; }
.menu-toggle { display:none; background:transparent; border:0; }
.hero { min-height:720px; height:var(--hero-height); position:relative; overflow:hidden; display:flex; align-items:center; padding:130px 6vw 100px; }
.hero-media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-media.hero-slide { opacity:0; transform:scale(1.015); transition:opacity 1.35s cubic-bezier(.4,0,.2,1),transform 7s ease-out; }
.hero-media.hero-slide.is-active { opacity:1; transform:scale(1.055); }
.hero-dots { position:absolute; z-index:3; right:4vw; top:50%; display:flex; flex-direction:column; gap:10px; transform:translateY(-50%); }
.hero-dot { width:5px; height:22px; padding:0; border:0; background:rgba(255,255,255,.34); cursor:pointer; transition:height .3s ease,background .3s ease; }
.hero-dot.is-active { height:42px; background:var(--yellow); }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,6,7,.96) 0%,rgba(5,6,7,.76) 37%,rgba(5,6,7,.08) 73%),linear-gradient(0deg,rgba(5,6,7,.65),transparent 45%); }
.hero-grid { position:absolute; inset:92px 0 0; opacity:.18; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:7.4vw 7.4vw; mask-image:linear-gradient(90deg,#000,transparent 62%); }
.hero-content { position:relative; z-index:2; width:min(780px,60vw); }
.mobile-hero-content { display:none; }
.eyebrow { display:flex; align-items:center; gap:12px; margin:0 0 24px; text-transform:uppercase; color:#c7c7c7; font-size:11px; font-weight:700; letter-spacing:.24em; }
.eyebrow span { width:36px; height:2px; background:var(--yellow); }
.eyebrow b { font:inherit; letter-spacing:inherit; }
h1,h2 { margin:0; font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; font-weight:900; letter-spacing:-.035em; line-height:.82; }
h1 { font-size:calc(clamp(82px,10.5vw,174px) * var(--hero-title-scale)); }
h1 em,h2 em { color:transparent; -webkit-text-stroke:1.5px #fff; font-style:italic; }
[data-outline-mode="filled"],[data-outline-mode="filled"] * { color:inherit!important; -webkit-text-stroke:0 transparent!important; }
[data-outline-mode="outlined"],[data-outline-mode="outlined"] * { color:transparent!important; -webkit-text-stroke:inherit!important; }
.hero-copy { width:min(520px,90%); margin:30px 0 0 5px; color:#c5c6c7; font-size:16px; line-height:1.75; }
.hero-actions { display:flex; align-items:center; gap:34px; margin-top:34px; }
.btn { display:inline-flex; align-items:center; gap:42px; padding:18px 22px; text-decoration:none; text-transform:uppercase; font:700 12px/1 Inter,sans-serif; letter-spacing:.13em; }
.btn-primary { background:var(--yellow); color:var(--ink); }
.btn-primary span { font-size:18px; }
.text-link { text-decoration:none; text-transform:uppercase; font-size:11px; font-weight:700; letter-spacing:.15em; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.45); }
.text-link span { color:var(--yellow); margin-left:10px; }
.header-cta span,.btn span,.text-link span,.product-body a span,.dark-link span,.story-gallery-link span,.shop-primary-cta span,.catalog-action-button i { display:inline-block; flex:none; width:16px; height:16px; overflow:hidden; background:currentColor; font-size:0; line-height:0; vertical-align:middle; -webkit-mask:center/contain no-repeat; mask:center/contain no-repeat; }
.btn span,.dark-link span,.story-gallery-link span { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='white' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='white' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E"); }
.header-cta span,.product-body a span,.shop-primary-cta span,.catalog-action-button i { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 18 18 6M9 6h9v9' fill='none' stroke='white' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 18 18 6M9 6h9v9' fill='none' stroke='white' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E"); }
.text-link span { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 6 12 12M18 9v9H9' fill='none' stroke='white' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 6 12 12M18 9v9H9' fill='none' stroke='white' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E"); }
.hero-specs { position:absolute; z-index:2; right:4vw; bottom:38px; display:flex; border-top:1px solid var(--line); }
.hero-specs div { display:flex; align-items:flex-start; gap:11px; padding:18px 28px 0 0; margin-left:28px; border-right:1px solid var(--line); min-width:145px; }
.hero-specs strong { color:var(--yellow); font:700 10px/1 Inter,sans-serif; }
.hero-specs span { text-transform:uppercase; font:700 10px/1.4 Inter,sans-serif; letter-spacing:.13em; }
.scroll-cue { position:absolute; z-index:2; left:4vw; bottom:34px; display:flex; align-items:center; gap:16px; text-decoration:none; text-transform:uppercase; color:#aaa; font-size:9px; letter-spacing:.2em; }
.scroll-cue i { width:31px; height:31px; border:1px solid rgba(255,255,255,.3); border-radius:50%; display:grid; place-items:center; color:var(--yellow); font-style:normal; }
.section-light { background:var(--paper); color:var(--ink); }
.section-dark { background:#0b0c0d; color:#fff; }
.section-light .eyebrow { color:#666; }
.section-light h2 em { -webkit-text-stroke-color:var(--ink); }
.products { position:relative; padding:calc(120px * var(--section-space)) 4vw calc(130px * var(--section-space)); }
.section-brand { position:absolute; z-index:2; pointer-events:none; }
.section-brand img { display:block; width:var(--header-logo-width); max-width:18vw; max-height:72px; object-fit:contain; }
.section-brand-products { top:42px; right:4vw; }
.section-brand-contact { left:7vw; bottom:34px; }
.contact-quick-actions { position:absolute; z-index:3; right:7vw; bottom:34px; display:flex; align-items:center; gap:12px; }
.contact-quick-actions :is(a,button) { display:grid; place-items:center; width:46px; height:46px; padding:0; border:1px solid rgba(255,255,255,.26); border-radius:50%; background:#171819; color:#b7b8ba; cursor:pointer; transition:color .18s ease,border-color .18s ease,transform .18s ease; }
.contact-quick-actions :is(a,button):hover,.contact-quick-actions :is(a,button):focus-visible { color:#fff; border-color:var(--yellow); transform:translateY(-2px); outline:none; }
.contact-quick-actions :is(a,button)[aria-disabled="true"] { display:none; }
.contact-quick-actions svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.contact-quick-actions [data-contact-action="whatsapp"] svg { fill:currentColor; stroke:none; }
.contact-quick-actions .contact-icon-dot { fill:currentColor; stroke:none; }
.contact-copy-toast { position:absolute; left:0; right:0; bottom:calc(100% + 11px); display:flex; align-items:center; justify-content:center; gap:9px; min-height:40px; border:1px solid rgba(255,255,255,.26); background:#171819; color:#b7b8ba; text-transform:uppercase; font:700 9px/1 Inter,sans-serif; letter-spacing:.14em; opacity:0; visibility:hidden; translate:0 5px; transition:opacity .18s ease,translate .18s ease,visibility .18s ease; pointer-events:none; }
.contact-copy-toast span { color:#fff; font-size:13px; }
.contact-copy-toast.is-visible { opacity:1; visibility:visible; translate:0 0; }
.section-heading { display:grid; grid-template-columns:1.7fr .7fr; gap:80px; align-items:end; margin-bottom:72px; }
.section-heading h2,.engineering h2,.story h2,.contact h2 { font-size:clamp(66px,8vw,120px); }
.section-heading > p { max-width:440px; margin:0 0 8px; color:#656668; line-height:1.8; font-size:14px; }
.mobile-products-heading,.mobile-product-body { display:none; }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:#d6d3cd; border:1px solid #d6d3cd; }
.product-card { position:relative; overflow:hidden; background:#e8e5df; min-height:650px; display:flex; flex-direction:column; }
.product-card[data-library-url] { cursor:pointer; }
.product-card[data-library-url]:focus-visible { outline:3px solid var(--yellow); outline-offset:4px; }
.product-photo { height:var(--product-photo-height); background:#151617; overflow:hidden; }
.product-photo img { width:100%; height:100%; object-fit:cover; filter:saturate(.7) contrast(1.1); transform:scale(1.08); transition:transform .65s cubic-bezier(.2,.7,.2,1); }
.product-card:hover .product-photo img,.product-card:focus-within .product-photo img { transform:scale(1.16); }
.photo-rear img { object-position:77% 53%; }
.photo-front img { object-position:58% 50%; }
.photo-chain img { object-position:72% 13%; }
.product-number { position:absolute; top:18px; right:18px; z-index:2; width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.55); color:#fff; font-size:10px; font-weight:700; }
.product-body { padding:34px 34px 30px; display:flex; flex:1; flex-direction:column; align-items:flex-start; }
.product-kicker { margin:0 0 18px; color:#888; text-transform:uppercase; font-size:9px!important; letter-spacing:.2em; }
.product-body h3 { margin:0; font:900 clamp(48px,4.4vw,72px)/.82 "Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:-.02em; }
.product-body p { color:#5f6061; font-size:13px; line-height:1.7; }
.product-body a { margin-top:auto; text-decoration:none; text-transform:uppercase; border-bottom:1px solid #aaa; padding-bottom:8px; font-size:10px; font-weight:800; letter-spacing:.14em; }
.product-body a span,.dark-link span { margin-left:12px; color:var(--yellow); }
.catalog-action { display:flex; flex-direction:column; align-items:center; gap:18px; margin-top:42px; }
.catalog-action-button { display:flex; align-items:center; justify-content:space-between; gap:42px; width:min(350px,100%); padding:15px 18px; border:1px solid #111; background:#111; color:#fff; text-decoration:none; transition:background .25s ease,color .25s ease,transform .25s ease; }
.catalog-action-button[hidden] { display:none; }
.catalog-action-button:not(.is-pending):hover { background:var(--yellow); color:#08090a; transform:translateY(-3px); }
.catalog-action-button strong,.catalog-action-button small { display:block; }
.catalog-action-button strong { text-transform:uppercase; font:900 22px/1 "Barlow Condensed",sans-serif; letter-spacing:.04em; }
.catalog-action-button small { margin-top:5px; color:#8e8f91; text-transform:uppercase; font-size:7px; font-weight:700; letter-spacing:.16em; }
.catalog-action-button:not(.is-pending):hover small { color:#403a00; }
.catalog-action-button i { color:var(--yellow); font-style:normal; font-size:16px; }
.catalog-action-button:not(.is-pending):hover i { color:#08090a; }
.catalog-action-button.is-pending { cursor:not-allowed; opacity:.58; }
.marquee { overflow:hidden; background:var(--yellow); color:#090a0b; padding:20px 0; white-space:nowrap; }
.marquee-track { display:flex; width:max-content; animation:ticker 30s linear infinite; text-transform:uppercase; font:900 italic 30px/1 "Barlow Condensed",sans-serif; letter-spacing:.02em; }
.marquee-set { display:flex; flex:none; align-items:center; gap:50px; padding-right:50px; }
.marquee-set span { min-width:max-content; }
.marquee i { display:inline-block; flex:none; width:54px; height:11px; overflow:hidden; background:#090a0b; font-size:0; font-style:normal; line-height:0; -webkit-mask:url("assets/durag-logo.webp") center top/54px auto no-repeat; mask:url("assets/durag-logo.webp") center top/54px auto no-repeat; }
.is-customizing .marquee-track { animation-play-state:paused; }
@keyframes ticker { to { transform:translateX(-50%); } }
.engineering { display:grid; grid-template-columns:1.15fr .93fr; min-height:950px; }
.engineering-photo { min-height:760px; position:relative; overflow:hidden; }
.engineering-photo > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:72% center; filter:saturate(.52) contrast(1.15); transform:scale(1.15); }
.engineering-photo::after { content:none; }
.image-label { position:absolute; z-index:2; left:28px; right:28px; bottom:26px; display:flex; justify-content:space-between; text-transform:uppercase; color:#ddd; font-size:9px; letter-spacing:.15em; }
.engineering-copy { position:relative; padding:calc(130px * var(--section-space)) 7vw calc(90px * var(--section-space)); background:#18191b; }
.engineering-image-seam { position:absolute; z-index:0; inset:0 auto 0 0; width:clamp(62px,10%,92px); overflow:hidden; pointer-events:none; -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.94) 0%,rgba(0,0,0,.6) 42%,rgba(0,0,0,.2) 76%,transparent 100%); mask-image:linear-gradient(to right,rgba(0,0,0,.94) 0%,rgba(0,0,0,.6) 42%,rgba(0,0,0,.2) 76%,transparent 100%); }
.engineering-image-seam img { display:block; width:100%; height:100%; object-fit:cover; object-position:100% center; filter:saturate(.52) contrast(1.15); transform:scale(1.15); }
.engineering-copy > :not(.engineering-image-seam) { position:relative; z-index:1; }
.engineering-copy .lead { max-width:590px; margin:38px 0 56px; color:#a5a6a8; font-size:16px; line-height:1.8; }
.principles { border-top:1px solid #2a2b2d; }
.principles > div { display:grid; grid-template-columns:40px 150px 1fr; gap:18px; align-items:start; padding:25px 0; border-bottom:1px solid #2a2b2d; }
.principles strong { color:var(--yellow); font-size:10px; }
.principles h4 { margin:0; text-transform:uppercase; font:800 20px/1 "Barlow Condensed",sans-serif; }
.principles p { margin:0; color:#858688; font-size:12px; line-height:1.6; }
.story { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr) var(--story-photo-width); min-height:900px; overflow:hidden; }
.story::before,.story::after { content:""; position:absolute; z-index:3; left:0; right:0; height:92px; pointer-events:none; }
.story::before { top:0; background:linear-gradient(to bottom,rgba(8,9,10,.24),rgba(8,9,10,.07) 34%,transparent); }
.story::after { bottom:0; background:linear-gradient(to top,rgba(8,9,10,.22),rgba(8,9,10,.06) 36%,transparent); }
.story-copy { position:relative; z-index:2; padding:calc(115px * var(--section-space)) 7vw 150px 6vw; }
.story-title { align-self:start; }
.story-content { width:min(620px,92%); padding-top:54px; color:#5d5e60; font-size:14px; line-height:1.8; }
.story-content .story-lead { color:#171819; font:600 22px/1.5 "Barlow Condensed",sans-serif; }
.dark-link { display:inline-block; margin-top:24px; color:#111; text-decoration:none; text-transform:uppercase; border-bottom:1px solid #aaa; padding-bottom:8px; font-size:10px; font-weight:800; letter-spacing:.14em; }
.story-gallery-link { display:flex; align-items:center; justify-content:space-between; width:min(310px,100%); margin-top:22px; padding:17px 19px; border:2px solid #111; background:var(--yellow); color:#090a0b; text-decoration:none; text-transform:uppercase; font:900 24px/1 "Barlow Condensed",sans-serif; letter-spacing:.05em; transition:transform .2s ease,background .2s ease; }
.story-gallery-link:hover { transform:translateY(-3px); background:#111; color:#fff; }
.story-photo-panel { position:relative; min-height:900px; overflow:hidden; background:var(--paper); }
.story-photo-panel::before { content:""; position:absolute; z-index:2; inset:0 auto 0 0; width:clamp(90px,30%,190px); pointer-events:none; background:linear-gradient(to right,var(--paper) 0%,rgba(243,241,236,.88) 18%,rgba(243,241,236,.46) 55%,transparent 100%); }
.story-background-layer { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.story-photo-resize { display:none; position:absolute; z-index:5; inset:0 auto 0 0; width:18px; padding:0; border:0; border-left:3px solid var(--yellow); background:transparent; cursor:ew-resize; touch-action:none; }
.story-photo-resize::after { content:"↔"; position:absolute; left:-17px; top:50%; width:32px; height:32px; display:grid; place-items:center; border:2px solid #08090a; border-radius:50%; background:var(--yellow); color:#08090a; font:900 14px/1 Inter,sans-serif; transform:translateY(-50%); box-shadow:0 4px 14px rgba(0,0,0,.35); }
.is-customizing .story-photo-resize { display:block; }
.contact { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:8vw; padding:calc(72px * var(--section-space)) 7vw; background:#171819; overflow:hidden; }
.contact::before { content:""; position:absolute; width:600px; height:600px; border:1px solid rgba(255,255,255,.08); border-radius:50%; left:-260px; top:-80px; box-shadow:0 0 0 90px rgba(255,255,255,.025),0 0 0 180px rgba(255,255,255,.018); pointer-events:none; }
.contact-content,.fitment-form { position:relative; z-index:1; }
.mobile-contact-title { display:none; }
.contact-content > p:not(.eyebrow) { max-width:520px; color:#929396; line-height:1.8; font-size:14px; }
.company-contact-lines { display:grid; gap:0; width:min(480px,100%); margin-top:42px; border-top:1px solid #3b3c3e; }
.company-contact-lines > div { display:grid; grid-template-columns:90px 1fr; align-items:center; gap:20px; padding:17px 0; border-bottom:1px solid #3b3c3e; }
.company-contact-lines small { color:var(--yellow); text-transform:uppercase; font-size:8px; font-weight:800; letter-spacing:.18em; }
.company-contact-lines strong { color:#fff; font:700 16px/1.2 "Barlow Condensed",sans-serif; letter-spacing:.03em; }
.shop-primary-cta { display:inline-flex; align-items:center; gap:14px; padding:17px 26px; border:1px solid var(--yellow); background:var(--yellow); color:var(--ink); text-decoration:none; text-transform:uppercase; font:700 12px/1 Inter,sans-serif; letter-spacing:.14em; }
.shop-primary-cta span { color:var(--ink); font-size:14px; }
.shop-primary-cta[aria-disabled="true"] { cursor:default; }
.contact-shop-cta { position:relative; left:calc(50vw - 7vw); display:flex; width:max-content; margin:32px 0 0; transform:translate(-50%,16px); }
.catalog-shop-cta { justify-content:space-between; border:2px solid #111; background:var(--yellow); }
.fitment-form { display:grid; grid-template-columns:1fr 1fr; grid-template-areas:"name email" "message message" "category submit" "status status"; gap:28px 22px; align-self:center; }
.fitment-form label { display:flex; flex-direction:column; gap:10px; color:#a8a9aa; text-transform:uppercase; font-size:9px; font-weight:700; letter-spacing:.16em; }
.fitment-form .name-field { grid-area:name; }
.fitment-form .email-field { grid-area:email; }
.fitment-form input,.fitment-form select,.fitment-form textarea { width:100%; padding:14px 0; border:0; border-bottom:1px solid #535456; border-radius:0; background:transparent; color:#fff; font:500 14px Inter,sans-serif; }
.fitment-form .service-field { position:relative; grid-area:category; }
.fitment-form select { appearance:none; padding:14px 58px 14px 16px; border:1px solid #a8a9aa; background:#171819; color:#a8a9aa; cursor:pointer; font-weight:800; }
.fitment-form .service-field::after { content:"↓"; position:absolute; right:28px; bottom:15px; color:#a8a9aa; font:900 13px/1 Inter,sans-serif; pointer-events:none; }
.fitment-form select option { background:#252628; color:#a8a9aa; }
.fitment-form textarea { min-height:150px; resize:vertical; line-height:1.55; }
.fitment-form input::placeholder,.fitment-form textarea::placeholder { color:#737477; }
.fitment-form input:focus,.fitment-form select:focus,.fitment-form textarea:focus { outline:none; border-color:var(--yellow); }
.fitment-form select:focus { border-color:#a8a9aa; }
.fitment-form .message-field { grid-area:message; }
.fitment-form .btn { width:max-content; border:0; cursor:pointer; grid-area:submit; justify-self:end; align-self:end; margin:0; }
.fitment-form .btn:disabled { opacity:.55; cursor:wait; }
.fitment-form .company-field { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.fitment-status { grid-area:status; min-height:18px; margin:-10px 0 0; color:#a8a9aa; font-size:11px; line-height:1.5; }
.fitment-status.is-success { color:var(--yellow); }
.fitment-status.is-error { color:#ff8585; }
.gallery { padding:15px 6vw calc(120px * var(--section-space)); background:#0d0e0f; color:#fff; }
.gallery-heading { display:grid; grid-template-columns:1fr minmax(240px,420px); align-items:end; gap:45px; margin-bottom:30px; transform:translateY(-25px); }
.gallery-heading .eyebrow { grid-column:1/-1; transform:translateY(108px); }
.gallery-heading h2 { font-size:clamp(66px,8vw,120px); }
.gallery-heading-side { display:grid; align-content:end; justify-items:end; gap:26px; text-align:right; }
.gallery-heading-side h3 { text-transform:uppercase; font:900 clamp(36px,4.5vw,68px)/.84 "Barlow Condensed",sans-serif; letter-spacing:-.04em; }
.gallery-heading-side h3 span { color:transparent; -webkit-text-stroke:1.25px #fff; }
.gallery-heading-side h3 em { color:var(--yellow); font-style:italic; }
.gallery-heading-side p { max-width:420px; color:#929396; font-size:14px; line-height:1.8; }
.gallery-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.gallery-item { position:relative; aspect-ratio:16/10; overflow:hidden; background:#1b1c1e; opacity:0; transform:translate(12px,12px) scale(.96); transition:opacity .42s ease,transform .42s cubic-bezier(.2,.75,.25,1); }
.gallery-item.is-media-ready { opacity:1; transform:none; }
.gallery-item img,.gallery-item video { display:block; width:100%; height:100%; object-fit:cover; transition:none; }
.gallery-item:hover img,.gallery-item:hover video { transform:scale(1.035); }
.gallery-item-type { position:absolute; right:12px; top:12px; z-index:2; padding:7px 9px; background:rgba(9,10,11,.82); color:var(--yellow); text-transform:uppercase; font-size:8px; font-weight:800; letter-spacing:.13em; pointer-events:none; }
.gallery-more { cursor:pointer; }
.gallery-more::after { content:""; position:absolute; inset:0; background:rgba(7,8,9,.62); transition:background .25s ease; }
.gallery-more:hover::after { background:rgba(7,8,9,.45); }
.gallery-more-label { position:absolute; z-index:3; inset:0; display:grid; place-content:center; justify-items:center; color:#fff; text-transform:uppercase; pointer-events:none; }
.gallery-more-label b { color:var(--yellow); font:500 70px/.7 "Barlow Condensed",sans-serif; }
.gallery-more-label small { margin-top:13px; font-size:9px; font-weight:900; letter-spacing:.18em; }
body.is-customizing .gallery-item { cursor:pointer; outline:1px dashed rgba(255,229,0,.72); outline-offset:-3px; }
.gallery-item.is-editing-preview { z-index:4; outline:3px solid var(--yellow)!important; cursor:grab!important; touch-action:none; }
.gallery-item.is-editing-preview::before { content:"Drag image to recenter"; position:absolute; z-index:5; left:8px; bottom:8px; padding:6px 8px; background:#ffe500; color:#090a0b; text-transform:uppercase; font-size:7px; font-weight:900; letter-spacing:.1em; pointer-events:none; }
.gallery-preview-menu { position:fixed; z-index:210; display:none; width:190px; padding:7px; background:#101112; border:1px solid #444547; box-shadow:0 16px 45px rgba(0,0,0,.5); }
.gallery-preview-menu.is-visible { display:grid; gap:6px; }
.gallery-preview-menu button { padding:11px 12px; border:1px solid #363739; background:#191a1c; color:#fff; cursor:pointer; text-align:left; text-transform:uppercase; font-size:9px; font-weight:800; letter-spacing:.1em; }
.gallery-preview-menu button:hover { border-color:var(--yellow); color:var(--yellow); }
.gallery-picker { position:fixed; z-index:220; inset:0; display:none; place-items:center; padding:28px; background:rgba(4,5,6,.88); backdrop-filter:blur(8px); }
.gallery-picker.is-open { display:grid; }
.gallery-picker-panel { width:min(1050px,96vw); max-height:88vh; overflow:auto; padding:24px; background:#0d0e0f; border:1px solid #363739; box-shadow:0 30px 90px rgba(0,0,0,.7); }
.gallery-picker-head { position:sticky; z-index:2; top:-24px; display:flex; align-items:center; justify-content:space-between; margin:-24px -24px 20px; padding:20px 24px; background:#0d0e0f; border-bottom:1px solid #303133; }
.gallery-picker-head span { color:var(--yellow); text-transform:uppercase; font-size:8px; font-weight:900; letter-spacing:.16em; }
.gallery-picker-head h3 { margin:4px 0 0; text-transform:uppercase; font:900 30px/1 "Barlow Condensed",sans-serif; }
.gallery-picker-head button { width:40px; height:40px; border:1px solid #444547; background:#161719; color:#fff; cursor:pointer; font-size:24px; }
.gallery-picker-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.gallery-picker-item { min-width:0; padding:0; overflow:hidden; border:1px solid #303133; background:#151617; color:#fff; cursor:pointer; }
.gallery-picker-item:hover { border-color:var(--yellow); }
.gallery-picker-item img,.gallery-picker-item video { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; }
.gallery-picker-item span { display:block; overflow:hidden; padding:9px; color:#b7b8ba; text-align:left; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.gallery-empty { grid-column:1/-1; display:grid; place-items:center; align-content:center; min-height:300px; border:1px dashed #424345; color:#797a7c; text-align:center; }
.gallery-empty strong { color:#fff; text-transform:uppercase; font:800 27px/1 "Barlow Condensed",sans-serif; }
.gallery-empty span { margin-top:10px; font-size:11px; }
footer { padding:70px 5vw 28px; background:#08090a; color:#fff; display:grid; grid-template-columns:1fr auto; gap:50px; }
.footer-links { display:flex; gap:34px; align-items:center; }
.footer-links a { text-decoration:none; text-transform:uppercase; font-size:10px; font-weight:700; letter-spacing:.15em; }
footer > p { color:#747577; font-size:12px; }
.footer-bottom { grid-column:1/-1; border-top:1px solid #252627; padding-top:25px; display:flex; justify-content:space-between; color:#666; text-transform:uppercase; font-size:8px; letter-spacing:.16em; }
.footer-bottom a { text-decoration:none; }
@media (max-width:900px) {
  footer > p { max-width:100%; white-space:nowrap; font-size:clamp(8px,2.25vw,10px); letter-spacing:-.015em; }
  body.menu-open nav > a.mobile-shop-link {
    display:block;
    margin-top:0;
    padding:14px 4px;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.13);
    background:transparent;
    color:#fff;
    text-align:left;
    font-size:0!important;
    letter-spacing:0!important;
    text-shadow:none;
  }
  body.menu-open nav > a.mobile-shop-link::before {
    content:"SHOP DURAG";
    font:800 19px/1 "Barlow Condensed",sans-serif;
    letter-spacing:.12em;
    text-shadow:0 1px 8px rgba(0,0,0,.7);
  }
  .catalog-action-button i { background:#ffe500!important; color:#ffe500!important; -webkit-text-fill-color:transparent; }
  .catalog-shop-cta span { background:#08090a!important; color:#08090a!important; -webkit-text-fill-color:transparent; }
  html,body { width:100%; max-width:100%; overflow-x:hidden; }
  .site-header { grid-template-columns:1fr auto; height:60px; padding:0 16px; } .site-header .brand-logo-crop { width:min(var(--header-logo-width),96px); height:48px; } .site-header .brand-logo-crop img { width:min(var(--header-logo-width),96px); max-height:48px; } .site-header .brand-country { margin-left:6px; padding-left:6px; font-size:8px; letter-spacing:.16em; } nav,.header-cta { display:none; } .menu-toggle { display:flex; flex-direction:column; gap:5px; padding:8px 0 8px 8px; cursor:pointer; } .menu-toggle span { width:22px; height:2px; background:#fff; }
  body.menu-open nav { display:flex; position:absolute; inset:60px 12px auto auto; width:max-content; min-width:210px; max-width:calc(100vw - 24px); max-height:calc(100svh - 72px); overflow:auto; padding:10px 14px 17px; border:1px solid rgba(255,255,255,.2); background:rgba(96,98,100,.2); box-shadow:0 18px 42px rgba(0,0,0,.28); -webkit-backdrop-filter:blur(18px) saturate(1.2); backdrop-filter:blur(18px) saturate(1.2); flex-direction:column; align-items:stretch; gap:0; } body.menu-open nav > a { padding:14px 4px; border-bottom:1px solid rgba(255,255,255,.13); font:800 19px/1 "Barlow Condensed",sans-serif; letter-spacing:.12em; white-space:nowrap; text-shadow:0 1px 8px rgba(0,0,0,.7); } body.menu-open nav .mobile-shop-link { display:flex; align-items:center; justify-content:center; margin-top:10px; padding:13px 12px; border:1px solid rgba(255,229,0,.9); background:rgba(8,9,10,.28); color:#fff; } body.menu-open nav .mobile-menu-contact-actions { position:relative; display:flex; align-items:center; justify-content:center; gap:11px; padding:16px 4px 2px; } body.menu-open nav .mobile-menu-contact-actions :is(a,button) { display:grid; place-items:center; width:31px; height:31px; padding:0; border:1px solid rgba(255,255,255,.26); border-radius:50%; background:rgba(8,9,10,.22); color:#d0d1d2; cursor:pointer; text-decoration:none; } body.menu-open nav .mobile-menu-contact-actions :is(a,button)[aria-disabled="true"] { display:none; } body.menu-open nav .mobile-menu-contact-actions svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } body.menu-open nav .mobile-menu-contact-actions [data-contact-action="whatsapp"] svg { fill:currentColor; stroke:none; } body.menu-open nav .mobile-menu-contact-actions .contact-icon-dot { fill:currentColor; stroke:none; } body.menu-open nav .mobile-menu-contact-actions .contact-copy-toast { bottom:calc(100% + 1px); min-height:31px; font-size:6.5px; }
  .hero { height:clamp(560px,150vw,620px); min-height:0; max-height:none; padding:clamp(76px,11vw,92px) clamp(18px,6vw,28px) clamp(24px,6vw,38px); align-items:flex-end; background:#08090a; }
  .hero-grid { inset:60px 0 0; }
  .hero-shade { background:linear-gradient(0deg,rgba(5,6,7,.95) 3%,rgba(5,6,7,.48) 58%,rgba(5,6,7,.16) 100%); }
  .hero-media { object-fit:cover; object-position:center!important; translate:0 0!important; scale:1!important; }
  .hero-content { display:none; }
  .hero-slide-clone,.hero-dots { display:none!important; }
  .mobile-hero-content { position:absolute; z-index:4; top:clamp(108px,29vw,132px); right:clamp(18px,6vw,28px); bottom:0; left:clamp(18px,6vw,28px); display:block; }
  .mobile-hero-eyebrow { display:flex; align-items:center; gap:11px; margin:0 0 22px; color:#d4d5d6; text-transform:uppercase; font-size:clamp(8px,2.25vw,10px); font-weight:800; letter-spacing:.2em; }
  .mobile-hero-eyebrow span { width:32px; height:2px; flex:none; background:var(--yellow); }
  .mobile-hero-eyebrow b { font:inherit; }
  .mobile-hero-content h1 { display:grid; justify-items:start; width:min-content; max-width:none; font-size:clamp(53px,15.5vw,69px); line-height:.78; overflow:visible; }
  .mobile-hero-content h1 strong { color:var(--yellow); font:inherit; }
  .mobile-hero-content h1 em { color:transparent; -webkit-text-stroke:1.3px #fff; font:inherit; font-style:italic; white-space:nowrap; }
  .mobile-hero-copy { width:min(68vw,292px); margin:26px 0 0 3px; color:#d0d1d2; font-size:clamp(12px,3.35vw,14px); line-height:1.56; }
  .mobile-hero-actions { position:absolute; right:0; bottom:clamp(92px,15vw,112px); left:3px; display:flex; align-items:center; gap:24px; margin:0; }
  .mobile-hero-actions .btn { gap:28px; padding:16px 18px; font-size:10px; white-space:nowrap; }
  .mobile-hero-actions .text-link { white-space:nowrap; }
  h1 { max-width:100%; font-size:calc(clamp(46px,13vw,62px) * var(--hero-title-scale)); overflow-wrap:anywhere; }
  .hero h1.is-long-title { max-width:100%; font-family:Inter,Arial,sans-serif; font-size:clamp(18px,5.3vw,23px)!important; font-weight:600; line-height:1.34; letter-spacing:-.02em; text-transform:none; }
  .hero-copy { font-size:13px; margin-top:18px; line-height:1.58; }
  .hero-specs,.scroll-cue { display:none; }
  .products { padding:82px 24px 90px; } .section-brand-products { top:22px; right:24px; } .section-brand-contact { left:24px; bottom:20px; } .section-brand img { max-width:110px; max-height:52px; } .products > .section-heading { display:none; } .mobile-products-heading { display:block; margin:0 0 44px; } .mobile-products-label { display:flex; align-items:center; gap:12px; margin:0 0 20px; color:#666; text-transform:uppercase; font-size:9px; font-weight:800; letter-spacing:.22em; } .mobile-products-label span { width:34px; height:2px; background:var(--yellow); } .mobile-products-heading h2 { display:grid; width:min-content; font-size:clamp(55px,15.5vw,70px); line-height:.8; } .mobile-products-heading h2 strong { color:var(--yellow); font:inherit; white-space:nowrap; } .mobile-products-heading h2 em { color:transparent; -webkit-text-stroke:1.5px #111; font:inherit; font-style:italic; white-space:nowrap; } .mobile-products-heading > p:last-child { max-width:310px; margin:25px 0 0; color:#656668; font-size:13px; line-height:1.65; } .product-grid { grid-template-columns:1fr; gap:18px; background:transparent; border:0; } .product-card { min-height:0; border:1px solid #d6d3cd; } .product-photo { height:clamp(230px,68vw,292px); } .product-body { min-height:285px; padding:30px 28px 26px; } .product-body > :not(.mobile-product-body) { display:none; } .mobile-product-body { display:flex; width:100%; flex:1; flex-direction:column; align-items:flex-start; } .mobile-product-body h3 { margin:0; font:900 clamp(48px,13vw,62px)/.82 "Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:-.02em; } .mobile-product-body p:not(.product-kicker) { margin:18px 0 26px; color:#5f6061; font-size:13px; line-height:1.65; } .mobile-product-body a { margin-top:auto; } .product-number { top:18px; right:18px; }
  .products { padding:58px 12px 68px; }
  .products .section-brand-products { top:16px; right:12px; }
  .products .section-brand-products img { max-width:82px; max-height:38px; }
  .mobile-products-heading { margin-bottom:30px; }
  .mobile-products-label { gap:10px; margin-bottom:18px; font-size:8px; line-height:1.35; letter-spacing:.16em; }
  .mobile-products-label span { width:28px; }
  .mobile-products-heading h2 { font-size:clamp(43px,12.5vw,56px); line-height:.82; }
  .mobile-products-heading > p:last-child { max-width:300px; margin-top:20px; font-size:12px; line-height:1.55; }
  .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; background:#d6d3cd; border:1px solid #d6d3cd; }
  .product-card { min-width:0; min-height:0; border:0; }
  .product-photo { height:clamp(78px,22vw,96px); background:#fff; }
  .product-photo img { display:block; object-fit:cover; background:#fff; transform:scale(1.08); }
  .product-card:hover .product-photo img,.product-card:focus-within .product-photo img { transform:scale(1.08); }
  .photo-rear img,.product-card:hover .photo-rear img,.product-card:focus-within .photo-rear img { transform:scale(1.08); }
  .photo-rear img { scale:1.02!important; translate:0 -1px!important; }
  .product-number { display:none; }
  .product-body { min-height:158px; padding:12px 8px 10px; }
  .mobile-product-body { min-width:0; align-items:stretch; }
  .mobile-product-body .product-kicker { margin-bottom:9px; font-size:5.5px!important; line-height:1.25; letter-spacing:.12em; }
  .mobile-product-body h3 { text-align:center; font-size:clamp(16px,4.8vw,21px); line-height:.86; }
  .mobile-product-body p:not(.product-kicker) { margin:11px 0 13px; text-align:center; font-size:6.8px; line-height:1.42; }
  .mobile-product-body a { width:88%; align-self:center; padding-bottom:5px; text-align:center; font-size:5.8px; line-height:1.25; letter-spacing:.07em; }
  .mobile-product-body a span { width:8px; height:8px; margin-left:2px; }
  .catalog-action { gap:12px; margin-top:30px; }
  .catalog-action-button { width:min(270px,82%); padding:11px 14px; gap:24px; }
  .catalog-action-button strong { font-size:18px; }
  .catalog-action-button small { margin-top:3px; font-size:6px; }
  .catalog-action-button i { width:12px; height:12px; }
  .catalog-shop-cta { justify-content:center; width:min(210px,68%); padding:12px 17px; gap:11px; font-size:9px; }
  .catalog-shop-cta span { width:12px; height:12px; }
  .section-heading h2,.engineering h2,.story h2,.contact h2 { max-width:100%; font-size:clamp(52px,15vw,82px); overflow-wrap:anywhere; }
  .engineering { position:relative; display:block; min-height:0; overflow:hidden; background:#18191b; } .engineering > * { min-width:0; } .engineering-photo { position:absolute; z-index:0; inset:0; min-height:100%; } .engineering-photo > img { width:100%; left:0; object-position:62% center; filter:saturate(.52) contrast(1.1) brightness(.82); transform:scale(1.04); } .engineering-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(12,13,14,.12) 0%,rgba(24,25,27,.34) 52%,rgba(24,25,27,.68) 100%),linear-gradient(0deg,rgba(24,25,27,.7) 0%,transparent 52%,rgba(10,11,12,.2) 100%); } .engineering-photo .image-label { display:none; } .engineering-copy { position:relative; z-index:1; width:100%; margin:0; padding:68px 24px 58px; border:0; background:rgba(24,25,27,.5); box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; } .engineering-copy::before { content:""; position:absolute; z-index:0; inset:0; background:linear-gradient(90deg,rgba(24,25,27,.18),rgba(24,25,27,.58)); pointer-events:none; } .engineering-copy > :not(.engineering-image-seam) { max-width:100%; } .engineering-copy .eyebrow { gap:10px; font-size:8px; line-height:1.4; letter-spacing:.15em; } .engineering-copy .eyebrow span { width:28px; } .engineering h2 { margin-top:22px; max-width:290px; font-size:clamp(43px,12.5vw,56px); line-height:.82; overflow:visible; overflow-wrap:normal; word-break:normal; } .engineering-copy .lead { max-width:300px; margin:25px 0 32px; font-size:12px; line-height:1.58; } .engineering-image-seam { display:none; } .principles > div { grid-template-columns:28px minmax(0,1fr); gap:10px 12px; padding:18px 0; } .principles strong { font-size:8px; } .principles h4 { font-size:17px; line-height:1.05; } .principles p { grid-column:2; margin-top:0; font-size:10px; line-height:1.48; }
  .story { position:relative; display:block; min-height:0; background:var(--paper); } .story > * { min-width:0; width:100%; max-width:100%; } .story-photo-panel { position:absolute; z-index:0; inset:0; min-height:100%; } .story-background-layer { object-position:center; filter:saturate(.82) contrast(1.04) brightness(.96); } .story-photo-panel::before { z-index:1; inset:0; width:auto; height:auto; background:linear-gradient(90deg,rgba(243,241,236,.64) 0%,rgba(243,241,236,.46) 58%,rgba(243,241,236,.3) 100%),linear-gradient(0deg,rgba(243,241,236,.68),transparent 45%,rgba(243,241,236,.48)); } .story-photo-resize { display:none!important; } .story-copy { position:relative; z-index:2; padding:62px 24px 72px; background:rgba(243,241,236,.2); } .story-title,.story-content { width:100%; max-width:100%; } .story h2 { max-width:320px; margin-top:20px; font-size:clamp(43px,12.5vw,56px); line-height:.84; overflow-wrap:normal; word-break:normal; } .story-content { max-width:320px; padding-top:24px; color:#393a3c; font-size:12px; line-height:1.58; text-shadow:0 1px 8px rgba(243,241,236,.45); } .story-content .story-lead { font-size:17px; line-height:1.34; } .story-content > * { width:auto!important; max-width:100%!important; } .story-content .story-gallery-link { width:min(310px,100%)!important; }
  .engineering h2 { font-size:clamp(43px,12.5vw,56px)!important; line-height:.82!important; } .engineering h2 * { font-size:inherit!important; line-height:inherit!important; }
  .story-copy { padding:58px 24px 66px; } .story .eyebrow,.story .eyebrow * { font-size:8px!important; line-height:1.35!important; letter-spacing:.16em!important; } .story .eyebrow span { width:28px; } .story h2 { margin:18px auto 0; font-size:clamp(42px,12vw,54px)!important; line-height:.82!important; text-align:center; } .story h2 * { font-size:inherit!important; line-height:inherit!important; } .story-content { padding-top:22px; font-size:11.5px!important; line-height:1.52!important; } .story-content > p { text-align:center; } .story-content p:not(.story-lead),.story-content p:not(.story-lead) * { font-size:inherit!important; line-height:inherit!important; } .story-content .story-lead,.story-content .story-lead * { font-size:16px!important; line-height:1.32!important; } .story-content .story-gallery-link { width:min(165px,58%)!important; padding:10px 12px; font-size:16px; }
  .contact { display:flex; grid-template-columns:none; flex-direction:column; gap:0; padding:64px 24px 96px; } .contact > * { min-width:0; } .contact-quick-actions { right:24px; bottom:20px; gap:8px; } .contact-quick-actions :is(a,button) { width:36px; height:36px; } .contact-quick-actions svg { width:15px; height:15px; } .contact-copy-toast { bottom:calc(100% + 8px); min-height:34px; font-size:7px; } .contact-content,.fitment-form { display:contents; } .contact-content .eyebrow { order:1; margin-bottom:16px; font-size:8px; line-height:1.35; letter-spacing:.16em; } .contact-content .eyebrow span { width:28px; } .contact h2 { order:2; max-width:300px; margin:0; font-size:clamp(43px,12vw,54px); line-height:.82; overflow-wrap:normal; word-break:normal; } .company-contact-lines { order:3; width:100%; margin-top:28px; } .company-contact-lines > div { grid-template-columns:76px minmax(0,1fr); gap:14px; padding:13px 0; } .company-contact-lines strong { font-size:15px; overflow-wrap:anywhere; } .contact-content > p:not(.eyebrow) { order:4; max-width:310px; margin:30px 0 24px; font-size:12px; line-height:1.55; } .fitment-form .name-field { order:5; } .fitment-form .email-field { order:6; } .fitment-form .message-field { order:7; } .fitment-form .service-field { order:8; } .fitment-form label { width:100%; margin-bottom:17px; } .fitment-form textarea { min-height:112px; } .fitment-form .btn { order:9; justify-self:auto; align-self:flex-start; margin-top:3px; } .fitment-status { order:10; width:100%; min-height:0; margin:12px 0 0; } .contact-shop-cta { position:relative; order:11; left:0; width:max-content; margin:28px 0 76px; transform:none; } .contact-shop-cta span { background:#08090a!important; color:#08090a!important; -webkit-text-fill-color:transparent; } .section-brand-contact { order:12; bottom:20px; } footer { grid-template-columns:1fr; gap:30px; padding:60px 24px 25px; } .footer-links { width:100%; flex-wrap:nowrap; justify-content:space-between; gap:10px; } .footer-links a { flex:none; white-space:nowrap; font-size:7px; letter-spacing:.08em; }
  .gallery { padding:58px 24px 82px; } .gallery-heading { grid-template-columns:minmax(0,1fr); gap:0; margin-bottom:18px; transform:none; } .gallery-heading > * { min-width:0; max-width:100%; } .gallery-heading .eyebrow { transform:none; margin-bottom:18px; font-size:8px; line-height:1.35; letter-spacing:.16em; } .gallery-heading .eyebrow span { width:28px; } .gallery-heading h2 { max-width:320px; font-size:clamp(42px,12vw,54px); line-height:.82; overflow-wrap:normal; word-break:normal; } .gallery-heading-side { justify-items:start; gap:10px; margin-top:20px; text-align:left; } .gallery-heading-side h3 { width:min(100%,310px)!important; max-width:310px!important; translate:none!important; scale:1!important; transform:none!important; text-align:left!important; font-size:clamp(22px,6.6vw,28px)!important; line-height:.8!important; overflow-wrap:normal; } .gallery-heading-side h3 span,.gallery-heading-side h3 em { display:block; } .gallery-heading-side h3 br { display:none; } .gallery-heading-side p { width:100%!important; max-width:none!important; margin:0!important; translate:none!important; scale:1!important; transform:none!important; text-align:left!important; white-space:nowrap; font-size:clamp(7px,2.2vw,9px)!important; line-height:1.35!important; letter-spacing:-.015em; } .gallery-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .gallery-item-type { top:5px; right:5px; padding:4px 5px; font-size:5.5px; line-height:1; letter-spacing:.09em; } .gallery > .contact-shop-cta.is-gallery-mobile-cta { left:auto; width:46%; max-width:160px; margin:24px auto 0; padding:11px 14px; transform:none; justify-content:center; gap:10px; text-align:center; font-size:8px; line-height:1; }
}
@media (max-width:520px) { .mobile-hero-actions { align-items:flex-start; flex-direction:column; gap:17px; } .fitment-form { grid-template-columns:1fr; grid-template-areas:"name" "email" "message" "category" "submit"; } .fitment-form .btn { justify-self:start; } .gallery-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; } }
@media (max-width:900px) {
  .contact { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); grid-template-rows:auto auto auto 56px auto auto auto 84px auto; column-gap:14px; row-gap:0; min-height:0; padding:58px 20px 28px; align-content:start; }
  .contact-content,.fitment-form { display:contents; }
  .contact-content .eyebrow { grid-column:1/-1; grid-row:1; order:1; margin:0 0 34px; }
  .contact h2:not(.mobile-contact-title) { display:none; }
  .contact .mobile-contact-title { display:block; grid-column:1/-1; grid-row:2; order:2; align-self:start; justify-self:center; width:100%; max-width:330px; margin:0; text-align:center; font-size:clamp(35px,10.2vw,46px); line-height:.82; }
  .contact .mobile-contact-title span { color:transparent; -webkit-text-stroke:1.5px #fff; }
  .contact .mobile-contact-title em { color:var(--yellow); -webkit-text-stroke:0 transparent; white-space:nowrap; }
  .company-contact-lines { display:none; }
  .company-contact-lines > div { grid-template-columns:max-content max-content; justify-content:center; gap:8px; padding:9px 0; }
  .company-contact-lines small { font-size:6px; letter-spacing:.13em; }
  .company-contact-lines strong { font-size:10px; line-height:1.08; letter-spacing:.01em; overflow-wrap:anywhere; -webkit-user-select:all; user-select:all; -webkit-touch-callout:default; cursor:text; }
  .contact-content > p:not(.eyebrow) { display:none; }
  .fitment-form .name-field { grid-column:1; grid-row:5; order:5; }
  .fitment-form .email-field { grid-column:2; grid-row:5; order:6; }
  .fitment-form .message-field { grid-column:1/-1; grid-row:6; order:7; }
  .fitment-form .service-field { grid-column:1; grid-row:7; order:8; align-self:end; }
  .fitment-form label { width:100%; gap:4px; margin:0 0 13px; font-size:6.5px; letter-spacing:.13em; }
  .fitment-form input,.fitment-form textarea { padding:7px 0; font-size:10px; }
  .fitment-form :is(input,textarea,select,button) { position:relative; z-index:3; pointer-events:auto; }
  .fitment-form textarea { min-height:52px; height:52px; resize:none; }
  .fitment-form select { min-height:38px; padding:9px 32px 9px 10px; font-size:9px; }
  .fitment-form .service-field::after { right:12px; bottom:13px; font-size:10px; }
  .fitment-form .btn { grid-column:2; grid-row:7; order:9; align-self:end; justify-self:stretch; justify-content:space-between; min-height:38px; margin:0 0 13px; padding:10px 12px; font-size:8px; }
  .fitment-status { grid-column:1/-1; grid-row:8; order:10; width:100%; min-height:0; margin:0; font-size:8px; }
  .contact-shop-cta { order:11; }
  .section-brand-contact { position:relative; grid-column:1; grid-row:9; order:12; left:auto; right:auto; bottom:auto; top:auto; align-self:end; margin-top:0; }
  .section-brand-contact img { max-width:96px; max-height:44px; }
  .contact-quick-actions { position:relative; grid-column:1/-1; grid-row:3; order:3; right:auto; bottom:auto; align-self:start; justify-self:center; gap:10px; margin-top:34px; }
  .contact-quick-actions :is(a,button) { width:38px; height:38px; }
  .contact-quick-actions svg { width:16px; height:16px; }
  .contact-quick-actions .contact-copy-toast { top:calc(100% + 8px); bottom:auto; min-height:28px; font-size:6px; }
}
@media (max-width:900px) and (max-height:720px) { .hero { padding-top:72px; padding-bottom:20px; } .mobile-hero-content { top:108px; } .mobile-hero-eyebrow { margin-bottom:20px; } .mobile-hero-content h1 { font-size:clamp(49px,14.5vw,60px); } .mobile-hero-copy { margin-top:23px; font-size:12px; line-height:1.48; } .mobile-hero-actions { bottom:48px; gap:17px; } .mobile-hero-actions .btn { padding:14px 16px; } }
@media (max-width:700px) { .gallery-picker { padding:12px; } .gallery-picker-panel { padding:16px; } .gallery-picker-head { top:-16px; margin:-16px -16px 14px; padding:16px; } .gallery-picker-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .marquee-track { animation:none; } * { transition:none!important; } .hero-media.hero-slide { transform:none!important; } }

/* Owner customization mode */
.customize-launcher { position:fixed; right:18px; bottom:18px; z-index:60; display:flex; align-items:center; gap:9px; border:1px solid #ffe500; background:#0a0b0c; color:#fff; padding:12px 16px; box-shadow:0 12px 36px rgba(0,0,0,.32); cursor:pointer; text-transform:uppercase; font:800 10px/1 Inter,sans-serif; letter-spacing:.14em; }
.customize-launcher::before { content:"✦"; color:var(--yellow); font-size:14px; }
.customizer { position:fixed; z-index:100; top:0; right:0; bottom:0; width:min(390px,100vw); display:flex; flex-direction:column; background:#101112; color:#fff; box-shadow:-24px 0 60px rgba(0,0,0,.48); transform:translateX(105%); transition:transform .28s ease; }
.customizer.is-open { transform:translateX(0); }
.customizer-head { display:flex; align-items:center; justify-content:space-between; padding:18px 16px 16px 18px; border-bottom:1px solid #2d2e30; }
.customizer-head h2 { margin:0; font-size:30px; letter-spacing:0; }
.customizer-title { display:flex; align-items:center; gap:12px; }
.history-buttons { display:flex; gap:6px; }
.history-buttons button { display:flex; align-items:center; justify-content:center; gap:4px; min-width:58px; height:34px; padding:0 7px; border:1px solid #55575a; background:#202123; color:#fff; cursor:pointer; line-height:1; }
.history-buttons button b { color:var(--yellow); font-size:17px; }
.history-buttons button span { text-transform:uppercase; font-size:8px; font-weight:800; letter-spacing:.08em; }
.history-buttons button:hover:not(:disabled) { border-color:var(--yellow); color:var(--yellow); }
.history-buttons button:disabled { opacity:.28; cursor:not-allowed; }
.customizer-close { width:36px; height:36px; border:1px solid #414244; background:transparent; color:#fff; cursor:pointer; font-size:20px; }
.customizer-scroll { overflow:auto; padding:20px 22px 110px; }
.customizer-note { margin:0 0 20px; padding:13px 14px; background:#1b1c1e; color:#aeb0b2; font-size:11px; line-height:1.55; border-left:3px solid var(--yellow); }
.customizer-group { padding:20px 0; border-top:1px solid #2d2e30; }
.customizer-group:first-of-type { border-top:0; }
.customizer-group h3 { margin:0 0 15px; text-transform:uppercase; font:800 17px/1 "Barlow Condensed",sans-serif; letter-spacing:.06em; }
.customizer-group.is-collapsed { padding:14px 0; }
.customizer-group.is-collapsed h3 { margin-bottom:0; }
.customizer-group.is-collapsed > :not(h3) { display:none!important; }
.customizer-group-toggle { display:flex; width:100%; align-items:center; justify-content:space-between; padding:0; border:0; background:transparent; color:#fff; cursor:pointer; text-align:left; text-transform:uppercase; font:800 17px/1 "Barlow Condensed",sans-serif; letter-spacing:.06em; }
.customizer-group-toggle b { display:grid; width:24px; height:24px; place-items:center; color:var(--yellow); font:800 19px/1 Inter,sans-serif; transition:transform .2s ease; }
.customizer-group-toggle[aria-expanded="true"] b { transform:rotate(180deg); }
.customizer-group-toggle:hover span { color:var(--yellow); }
.customizer-group label { display:block; margin:13px 0; color:#c5c6c7; font-size:11px; }
.customizer-group label span { display:flex; justify-content:space-between; margin-bottom:8px; }
.customizer-group select,.customizer-group input[type="range"],.customizer-group input[type="url"] { width:100%; }
.customizer-group select { padding:11px; border:1px solid #3b3c3e; background:#191a1c; color:#fff; }
.customizer-group input[type="url"] { padding:11px; border:1px solid #3b3c3e; background:#191a1c; color:#fff; font:11px/1.3 Inter,sans-serif; }
.customizer-group input[type="url"]::placeholder { color:#747577; }
.customizer-group input[type="text"],.customizer-group textarea { width:100%; padding:10px 11px; border:1px solid #3b3c3e; border-radius:0; background:#191a1c; color:#fff; font:11px/1.45 Inter,sans-serif; resize:vertical; }
.product-information-fields { display:grid; gap:12px; }
.product-information-card { margin:0; padding:13px; border:1px solid #343537; background:#151618; }
.product-information-card legend { padding:0 7px; color:var(--yellow); text-transform:uppercase; font:800 12px/1 "Barlow Condensed",sans-serif; letter-spacing:.1em; }
.product-information-card label:last-child { margin-bottom:0; }
.customizer-group input[type="range"] { accent-color:var(--yellow); }
.customizer-group [hidden] { display:none!important; }
.color-picker { width:100%; height:42px; padding:4px; border:1px solid #3b3c3e; background:#191a1c; cursor:pointer; }
.catalog-file-status { margin:12px 0 0; color:#8f9092; font-size:10px; line-height:1.5; word-break:break-word; }
.gallery-media-list { display:grid; gap:7px; margin:0 0 12px; }
.gallery-media-row { display:grid; grid-template-columns:minmax(0,1fr) 108px 30px; align-items:center; gap:8px; min-height:38px; padding-left:11px; border:1px solid #343537; background:#18191b; }
.gallery-media-row span { overflow:hidden; color:#c6c7c9; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.gallery-media-row select { width:108px; padding:7px 5px; border:1px solid #3b3c3e; background:#101112; color:#d2d3d4; font-size:9px; }
.gallery-order-link { display:block; margin-bottom:9px; text-align:center; text-decoration:none; }
.gallery-media-row button { align-self:stretch; border:0; border-left:1px solid #343537; background:transparent; color:#fff; cursor:pointer; font-size:18px; }
.slideshow-manager { margin:14px 0 18px; padding:14px; background:#18191b; border:1px solid #343537; }
.slideshow-manager[hidden],.slideshow-manager.is-hidden { display:none!important; }
.photo-context { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:14px 0; padding:12px 13px; background:var(--yellow); color:#08090a; }
.photo-context small { text-transform:uppercase; font-size:8px; font-weight:800; letter-spacing:.15em; }
.photo-context strong { text-transform:uppercase; font:800 18px/1 "Barlow Condensed",sans-serif; text-align:right; }
.slide-list { display:grid; gap:8px; margin:12px 0; }
.slide-item { display:grid; grid-template-columns:22px 1fr auto; gap:8px; align-items:center; padding:6px; background:#0f1011; border:1px solid transparent; transition:opacity .18s ease,border-color .18s ease,transform .18s ease; }
.slide-item.is-current { border-color:var(--yellow); }
.slide-item.is-dragging { opacity:.42; }
.slide-item.is-drop-target { border-color:var(--yellow); transform:translateY(2px); }
.slide-drag { display:grid; place-items:center; align-self:stretch; color:#7b7c7e!important; cursor:grab; touch-action:none; user-select:none; font-size:15px!important; letter-spacing:-4px; }
.slide-drag:active { cursor:grabbing; color:var(--yellow)!important; }
.slide-show { display:grid; grid-template-columns:48px 1fr; gap:10px; align-items:center; padding:0; border:0; background:transparent; color:#fff; text-align:left; cursor:pointer; }
.slide-thumb { width:48px; height:34px; object-fit:cover; }
.slide-item span { color:#c7c8ca; font-size:10px; }
.slide-remove { width:26px; height:26px; border:1px solid #444; background:transparent; color:#fff; cursor:pointer; }
.slide-limit { margin:8px 0 0; color:#777; font-size:9px; text-transform:uppercase; letter-spacing:.12em; }
.logo-library { display:grid; gap:8px; margin:0 0 12px; }
.logo-option { display:grid; grid-template-columns:72px minmax(0,1fr); gap:11px; align-items:center; width:100%; min-height:58px; padding:7px; border:1px solid #343537; background:#18191b; color:#fff; cursor:pointer; text-align:left; }
.logo-option.is-active { border-color:var(--yellow); }
.logo-option img { width:72px; height:42px; object-fit:contain; background:#08090a; }
.logo-option strong,.logo-option small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.logo-option strong { font-size:10px; }
.logo-option small { margin-top:5px; color:#898a8c; font-size:9px; text-transform:uppercase; }
.logo-option.is-active small { color:var(--yellow); }
.is-customizing [data-editor-layout="header-logo"] { outline:2px dashed var(--yellow); outline-offset:5px; cursor:ns-resize; touch-action:none; }
.section-order-list { display:grid; gap:8px; margin:12px 0 18px; }
.section-order-item { display:grid; grid-template-columns:34px 1fr; align-items:center; min-height:44px; border:1px solid #343537; background:#18191b; transition:border-color .18s ease,opacity .18s ease,transform .18s ease; }
.section-order-item.is-selected { border-color:var(--yellow); }
.section-order-item.is-dragging { opacity:.42; }
.section-order-item.is-drop-target { border-color:var(--yellow); transform:translateY(2px); }
.section-order-drag { display:grid; place-items:center; align-self:stretch; border-right:1px solid #343537; color:#898a8c; cursor:grab; user-select:none; font-size:17px; }
.section-order-drag:active { cursor:grabbing; color:var(--yellow); }
.section-order-item button { height:100%; padding:0 12px; border:0; background:transparent; color:#fff; cursor:pointer; text-align:left; text-transform:uppercase; font:700 10px/1 Inter,sans-serif; letter-spacing:.11em; }
.editor-button { width:100%; margin-top:8px; padding:12px 14px; border:1px solid #454648; background:#1a1b1d; color:#fff; cursor:pointer; text-transform:uppercase; font:700 10px/1 Inter,sans-serif; letter-spacing:.12em; }
.editor-button.primary { background:var(--yellow); border-color:var(--yellow); color:#08090a; }
.editor-button.danger { color:#ffb5a7; }
.editor-button-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.customizer-footer { position:absolute; inset:auto 0 0; display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:14px 22px 18px; background:linear-gradient(transparent,#101112 20%); }
.is-customizing [data-editor-text] { outline:1px dashed rgba(255,229,0,.65); outline-offset:4px; cursor:text; }
.is-customizing [data-editor-text]:focus { outline:2px solid var(--yellow); background:rgba(255,229,0,.08); }
.is-customizing [data-editor-text]::selection,.is-customizing [data-editor-text] *::selection { background:var(--yellow); color:#08090a; }
.is-customizing [data-editor-image] { outline:2px dashed var(--yellow); outline-offset:-5px; cursor:grab; touch-action:none; user-select:none; }
.is-customizing [data-editor-image]:active { cursor:grabbing; }
.is-customizing [data-editor-image]:hover { filter:brightness(.72) saturate(.7); }
.direct-controls { position:fixed; z-index:98; display:none; pointer-events:none; border:2px solid var(--yellow); box-shadow:0 0 0 1px rgba(0,0,0,.45); }
.direct-controls.is-visible { display:block; }
.direct-handle { position:absolute; display:grid; place-items:center; width:30px; height:30px; border:2px solid #08090a; border-radius:50%; background:var(--yellow); color:#08090a; pointer-events:auto; touch-action:none; cursor:grab; box-shadow:0 4px 14px rgba(0,0,0,.35); font:900 14px/1 Inter,sans-serif; user-select:none; }
.direct-handle:active { cursor:grabbing; }
.direct-move { left:-16px; top:-16px; }
.direct-width { display:none; right:-16px; top:50%; transform:translateY(-50%); cursor:ew-resize; }
.direct-controls.can-resize-width .direct-width { display:grid; }
.direct-resize { right:-16px; bottom:-16px; cursor:nwse-resize; }
.direct-tip { position:absolute; left:22px; top:-31px; width:max-content; padding:6px 8px; background:#08090a; color:#fff; text-transform:uppercase; font:700 8px/1 Inter,sans-serif; letter-spacing:.12em; }
.alignment-guide { position:fixed; z-index:97; display:none; pointer-events:none; background:var(--yellow); box-shadow:0 0 0 1px rgba(0,0,0,.35); }
.alignment-guide.is-visible { display:block; }
.alignment-guide-horizontal { left:0; right:min(390px,100vw); height:1px; }
.alignment-guide-vertical { top:0; bottom:0; width:1px; }
.editor-image-badge { position:fixed; z-index:90; pointer-events:none; display:none; padding:7px 9px; background:var(--yellow); color:#08090a; text-transform:uppercase; font:800 9px/1 Inter,sans-serif; letter-spacing:.12em; }
.editor-toast { position:fixed; z-index:120; left:50%; bottom:24px; transform:translate(-50%,20px); opacity:0; background:#fff; color:#111; padding:11px 16px; box-shadow:0 8px 30px rgba(0,0,0,.3); font-size:12px; transition:.2s ease; pointer-events:none; }
.editor-toast.show { opacity:1; transform:translate(-50%,0); }
body.is-customizing { padding-right:0; overflow-x:hidden; }
.site-editor-canvas { position:relative; transform-origin:top left; transition:transform .28s ease; }
body.is-customizing .site-editor-canvas { transform:scale(var(--editor-preview-scale)); }
@media (max-width:760px) { body.is-customizing { padding-right:0; } .customizer { width:100vw; } .customize-launcher { right:12px; bottom:12px; } }