*{box-sizing:border-box;margin:0;padding:0}
:root{--ink:#171717;--muted:#6f6f6b;--paper:#f5f4f0;--white:#fff;--line:#dcdad3;--soft:#e9e7e1}
html{scroll-behavior:smooth}
body{font-family:Inter,Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.55}
a{color:inherit;text-decoration:none}
.container{width:min(1160px,calc(100% - 48px));margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(245,244,240,.9);backdrop-filter:blur(14px);border-bottom:1px solid rgba(220,218,211,.8)}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  line-height:0;
  padding:5px 11px;
  border-radius:10px;
  background:linear-gradient(145deg,#111312,#252827);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 5px 18px rgba(20,20,20,.12);
}
.brand-logo{
  display:block;
  width:142px;
  height:52px;
  object-fit:contain;
  object-position:center;
}
.instagram-link{display:inline-flex!important;align-items:center;gap:7px}.instagram-link svg,.instagram-footer svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}.instagram-link svg circle:last-child,.instagram-footer svg circle:last-child{fill:currentColor;stroke:none}
.brand-mark{display:grid;place-items:center;width:31px;height:31px;background:var(--ink);color:white;border-radius:7px;font-size:14px;letter-spacing:0}
.nav-links{display:flex;gap:32px;margin-left:auto}
.nav-links a{font-size:13px;color:#555;transition:.2s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{background:var(--ink);color:white;border-radius:100px;padding:11px 18px;font-size:12px;font-weight:600}
.menu-toggle{display:none;border:0;background:none}
.hero{min-height:680px;display:flex;align-items:center;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:50px;align-items:center;padding:86px 0 100px}
.eyebrow,.kicker{font-size:10px;letter-spacing:.18em;font-weight:700;color:#777}
.eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:25px}
.eyebrow span{width:7px;height:7px;border-radius:50%;background:#171717}
h1,h2,h3{font-family:Manrope,Inter,sans-serif;letter-spacing:-.055em;line-height:1.05}
h1{font-size:clamp(48px,6.2vw,82px);max-width:760px}
h1 em,h2 em{font-style:normal;color:#777}
.hero-text{max-width:560px;margin-top:27px;color:#666;font-size:15px}
.hero-actions{display:flex;gap:10px;margin-top:31px}
.button{display:inline-flex;align-items:center;gap:18px;padding:14px 18px;border-radius:8px;font-size:12px;font-weight:600}
.button-dark{background:var(--ink);color:white}.button-light{border:1px solid var(--line)}
.hero-note{margin-top:32px;color:#777;font-size:11px;display:flex;gap:8px;align-items:center}
.dot{width:6px;height:6px;border-radius:50%;background:#777}
.hero-visual{height:480px;position:relative;display:grid;place-items:center}
.main-card{width:min(390px,78%);height:440px;background:#deddd8;border-radius:18px;position:relative;overflow:hidden;box-shadow:0 25px 70px rgba(20,20,20,.12)}
.card-top,.card-bottom{position:absolute;left:22px;right:22px;display:flex;justify-content:space-between;z-index:2}
.card-top{top:20px;font-size:8px;letter-spacing:.15em;color:#666}.card-bottom{bottom:20px;align-items:end}.card-bottom strong{font:700 20px Manrope}.card-bottom span{font-size:9px;color:#777}
.part-illustration{position:absolute;inset:55px 0 58px;background:linear-gradient(145deg,#cfcfc9,#efeee9);overflow:hidden}
.spring{position:absolute;width:110px;height:245px;border:9px solid #454545;border-left-color:transparent;border-right-color:transparent;border-radius:50%;transform:rotate(7deg)}
.spring-a{left:45px;top:62px}.spring-b{left:120px;top:75px;transform:rotate(7deg) scale(.86)}
.shock{position:absolute;width:21px;height:285px;background:#222;right:73px;top:35px;border-radius:12px;transform:rotate(7deg)}
.shock:before,.shock:after{content:"";position:absolute;left:-13px;width:47px;height:16px;background:#444;border-radius:50%}.shock:before{top:0}.shock:after{bottom:0}
.mount{position:absolute;right:50px;top:20px;width:67px;height:27px;background:#777;border-radius:9px;transform:rotate(7deg)}
.floating-tag{position:absolute;background:#171717;color:#fff;padding:9px 12px;border-radius:5px;font-size:8px;letter-spacing:.12em;box-shadow:0 12px 30px rgba(0,0,0,.15)}
.tag-one{top:88px;right:0}.tag-two{bottom:95px;left:0;background:#fff;color:#333}
.grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.035) 1px,transparent 1px);background-size:32px 32px;pointer-events:none}
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap}
.ticker-track{display:flex;gap:28px;align-items:center;justify-content:center;min-height:58px;font:700 10px Manrope;letter-spacing:.15em}.ticker i{font-style:normal;color:#aaa}
.section{padding:115px 0}.services-section{background:#fff}
.section-heading,.catalogue-intro{display:flex;justify-content:space-between;gap:60px;align-items:end;margin-bottom:55px}
h2{font-size:clamp(36px,4.2vw,56px);margin-top:13px}
.section-heading>p{max-width:410px;color:#70706c;font-size:13px}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.service-card{min-height:245px;border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;justify-content:space-between;position:relative;transition:.25s}
.service-card:hover{transform:translateY(-4px);box-shadow:0 18px 35px rgba(0,0,0,.06)}
.service-card.featured{background:var(--ink);color:#fff;border-color:var(--ink)}
.service-number{font:600 10px Manrope;color:#999}.featured .service-number{color:#aaa}
.service-card h3{font-size:30px;margin-bottom:10px}.service-card p{font-size:12px;color:#777;max-width:280px}.featured p{color:#aaa}
.arrow{position:absolute;right:23px;top:23px;font-size:18px}
.trust-row{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:70px;padding-top:24px}
.trust-row div{padding-right:20px;border-right:1px solid var(--line)}.trust-row div+div{padding-left:24px}.trust-row div:last-child{border:0}
.trust-row strong,.trust-row span{display:block}.trust-row strong{font:700 13px Manrope}.trust-row span{font-size:10px;color:#888;margin-top:4px}
.catalogue-section{background:var(--paper)}
.text-link{font-size:11px;font-weight:600;border-bottom:1px solid #aaa;padding-bottom:4px}.text-link span{margin-left:12px}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.product-card{background:#fff;border:1px solid var(--line);overflow:hidden}
.product-image{height:290px;position:relative;overflow:hidden}
.suspension{background:#d8d7d2}.lowering{background:#ecebe7}.custom{background:#deddd8}
.product-label{position:absolute;left:18px;top:18px;font-size:8px;letter-spacing:.13em;color:#666;z-index:2}
.product-shape{position:absolute;inset:50px;transform:rotate(-12deg)}
.coil{position:absolute;left:38px;top:5px;width:110px;height:230px;border:12px solid #3e3e3e;border-left-color:transparent;border-right-color:transparent;border-radius:50%}
.damper{position:absolute;right:32px;top:0;width:25px;height:250px;background:#222;border-radius:15px}
.lowering-shape{position:absolute;inset:55px;transform:rotate(-10deg)}
.coil.small{left:20px;top:20px;width:115px;height:185px;border:12px solid #444;border-left-color:transparent;border-right-color:transparent;border-radius:50%;position:absolute}
.plate{width:120px;height:25px;background:#555;position:absolute;right:8px;bottom:45px;border-radius:4px}
.request-shape{position:absolute;inset:0;display:grid;place-items:center}.request-shape span{width:90px;height:90px;border:1px solid #aaa;border-radius:50%;display:grid;place-items:center;font:300 50px Inter;color:#888}
.product-info{padding:19px;display:flex;justify-content:space-between;align-items:center}.product-info h3{font-size:17px}.product-info p{font-size:10px;color:#888;margin-top:5px}.round-arrow{width:32px;height:32px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center}
.about-section{background:#fff}.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;align-items:center}.about-stamp{width:310px;height:310px;border:1px solid #bbb;border-radius:50%;display:grid;place-items:center;transform:rotate(-8deg);margin:auto}
.stamp-inner{width:245px;height:245px;border:1px dashed #999;border-radius:50%;display:grid;place-items:center;align-content:center;text-align:center}.stamp-inner span{font:800 48px Manrope;letter-spacing:-.1em}.stamp-inner strong{font:700 28px Manrope;margin-top:-4px}.stamp-inner small{font-size:8px;letter-spacing:.25em;color:#777;margin-top:3px}
.about-copy>p:not(.kicker){max-width:560px;color:#666;font-size:14px;margin-top:22px}.about-copy strong{color:#222}.location-line{margin-top:27px;font-size:11px;font-weight:600}.location-line span{margin-right:8px}
.process-section{padding:110px 0;background:#ecebe7}.process-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px}.process-list{border-top:1px solid #c8c6bf}.process-item{display:grid;grid-template-columns:50px 1fr;gap:18px;padding:27px 0;border-bottom:1px solid #c8c6bf}.process-item>span{font:600 10px Manrope;color:#888}.process-item h3{font-size:18px}.process-item p{font-size:11px;color:#777;margin-top:7px}
.contact-section{background:var(--ink);color:#fff;padding:85px 0}.contact-box{display:flex;align-items:center;justify-content:space-between;gap:60px}.contact-section .kicker{color:#999}.contact-section h2{font-size:clamp(38px,5vw,62px)}.contact-box p:not(.kicker){color:#aaa;max-width:500px;font-size:13px;margin-top:18px}
.contact-button{min-width:310px;border:1px solid #444;border-radius:10px;padding:20px;display:grid;grid-template-columns:1fr auto;gap:3px 18px}.contact-button span{font-size:10px;color:#999}.contact-button strong{font:600 19px Manrope}.contact-button b{grid-row:1/3;grid-column:2;align-self:center;font-size:22px;font-weight:400}
.footer{background:var(--ink);border-top:1px solid #333;color:#aaa}.footer-inner{min-height:86px;display:flex;align-items:center;justify-content:space-between;font-size:10px}.footer-brand{
  color:#fff;
  background:#222524;
  border-color:rgba(255,255,255,.08);
  box-shadow:none;
}
.footer-brand .brand-logo{width:142px;height:52px}.footer-links{display:flex;align-items:center;gap:24px}.footer-links>a{color:#fff}.instagram-footer{display:inline-flex;align-items:center;gap:7px}.instagram-footer svg{color:#fff}
@media(max-width:800px){
 .container{width:min(100% - 32px,600px)}.nav{height:68px}.nav .brand{padding:4px 8px;border-radius:8px}.nav .brand-logo{width:124px;height:46px}.nav-links,.nav-cta{display:none}.menu-toggle{display:flex;flex-direction:column;gap:5px}.menu-toggle span{display:block;width:23px;height:1px;background:#111}.nav.open .nav-links{display:flex;position:absolute;top:68px;left:0;right:0;background:var(--paper);padding:20px 16px;border-bottom:1px solid var(--line);flex-direction:column;gap:18px}.nav.open .nav-cta{display:block;position:absolute;top:235px;left:16px;right:16px;text-align:center}.hero-grid,.about-grid,.process-grid{grid-template-columns:1fr;gap:45px}.hero{min-height:auto}.hero-grid{padding:70px 0 75px}.hero-visual{height:430px}.main-card{height:390px}.section{padding:80px 0}.section-heading,.catalogue-intro,.contact-box{display:block}.section-heading>p,.catalogue-intro .text-link{margin-top:24px}.service-grid,.product-grid{grid-template-columns:1fr}.service-card{min-height:220px}.trust-row{grid-template-columns:1fr 1fr;gap:22px}.trust-row div{border:0!important;padding:0!important}.product-image{height:260px}.about-stamp{width:250px;height:250px}.stamp-inner{width:195px;height:195px}.stamp-inner span{font-size:38px}.process-grid{gap:45px}.contact-button{margin-top:35px;min-width:0}.footer-inner{padding:20px 0;display:grid;gap:15px}.footer-inner p{order:3}.footer-links{justify-content:space-between;width:100%;gap:16px}}
@media(max-width:430px){h1{font-size:46px}.hero-visual{height:390px}.main-card{width:82%;height:360px}.tag-one{right:-2px}.tag-two{left:-2px}.section-heading{margin-bottom:38px}.contact-section{padding:70px 0}}

/* Refined interaction and motion */
.site-header{transition:background .35s ease,box-shadow .35s ease}.site-header.is-scrolled{background:rgba(245,244,240,.97);box-shadow:0 8px 28px rgba(20,20,20,.05)}
.nav-links a:not(.instagram-link){position:relative}.nav-links a:not(.instagram-link):after{content:"";position:absolute;right:0;bottom:-5px;left:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .25s ease}.nav-links a:not(.instagram-link):hover:after{transform:scaleX(1);transform-origin:left}
.nav-cta{transition:transform .25s ease,box-shadow .25s ease}.nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.18)}
.main-card{animation:card-float 7s ease-in-out infinite}.tag-one{animation:tag-drift-one 6s ease-in-out infinite}.tag-two{animation:tag-drift-two 6.5s ease-in-out infinite}
.ticker-track{width:max-content;justify-content:flex-start;animation:ticker-scroll 28s linear infinite}.ticker:hover .ticker-track{animation-play-state:paused}
.service-card{transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}.service-card:hover{transform:translateY(-6px);border-color:#bcbab3}.service-card .arrow{transition:transform .3s ease}.service-card:hover .arrow{transform:translate(3px,-3px)}
.product-card{transition:transform .35s ease,box-shadow .35s ease}.product-card:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(0,0,0,.07)}.product-shape,.lowering-shape{transition:transform .45s cubic-bezier(.2,.75,.25,1)}.product-card:hover .product-shape{transform:rotate(-7deg) scale(1.05)}.product-card:hover .lowering-shape{transform:rotate(-5deg) scale(1.05)}.request-shape span{transition:transform .35s ease,background .35s ease,color .35s ease}.product-card:hover .request-shape span{transform:rotate(90deg) scale(1.08);background:#171717;color:#fff}
.about-stamp{transition:transform .55s ease}.about-stamp:hover{transform:rotate(0deg) scale(1.03)}
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}.js .reveal.is-visible{opacity:1;transform:none}.js .reveal-delay-1{transition-delay:.1s}.js .reveal-delay-2{transition-delay:.2s}.js .reveal-delay-3{transition-delay:.3s}
.js .hero-copy .eyebrow,.js .hero-copy h1,.js .hero-copy .hero-text,.js .hero-copy .hero-actions,.js .hero-copy .hero-note{animation:hero-in .75s cubic-bezier(.2,.7,.2,1) both}.js .hero-copy h1{animation-delay:.08s}.js .hero-copy .hero-text{animation-delay:.16s}.js .hero-copy .hero-actions{animation-delay:.24s}.js .hero-copy .hero-note{animation-delay:.32s}.js .hero-visual{animation:hero-in .9s .14s cubic-bezier(.2,.7,.2,1) both}
@keyframes hero-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}@keyframes card-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(-.5deg)}}@keyframes tag-drift-one{0%,100%{transform:translate(0,0)}50%{transform:translate(7px,-7px)}}@keyframes tag-drift-two{0%,100%{transform:translate(0,0)}50%{transform:translate(-6px,7px)}}@keyframes ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-25%)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.js .reveal{opacity:1;transform:none}}

/* Content refinements */
.hero-highlights{display:flex;gap:0;margin-top:38px;max-width:480px;border-top:1px solid var(--line)}.hero-highlights div{flex:1;padding:12px 12px 0 0;display:grid;gap:3px}.hero-highlights div+div{padding-left:14px;border-left:1px solid var(--line)}.hero-highlights span{font:700 8px Manrope;letter-spacing:.12em;color:#999}.hero-highlights strong{font:600 10px Inter;color:#555}
.catalogue-note{display:flex;align-items:center;gap:9px;min-height:45px;margin:-21px 0 30px;padding:11px 13px;border:1px solid var(--line);background:rgba(255,255,255,.45);font-size:10px;color:#72716d}.catalogue-note .dot{flex:0 0 auto;width:5px;height:5px}.catalogue-note p{margin-right:auto}.catalogue-note a{font-weight:700;color:#333;white-space:nowrap}.catalogue-note a span{margin-left:6px;transition:transform .25s ease;display:inline-block}.catalogue-note a:hover span{transform:translate(3px,3px)}
.round-arrow{transition:background .25s ease,color .25s ease,transform .25s ease}.product-card:hover .round-arrow{background:var(--ink);color:#fff;transform:rotate(45deg)}
.round-arrow:focus-visible{outline:2px solid #171717;outline-offset:3px}
.product-image.suspension,.product-image.lowering,.product-image.wheels{background:#383b39}.product-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:center 55%;filter:saturate(.8) contrast(1.04);transition:transform .55s cubic-bezier(.2,.75,.25,1),filter .4s ease}.product-image.suspension:after,.product-image.lowering:after,.product-image.wheels:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 38%,rgba(0,0,0,.08));pointer-events:none}.suspension .product-label,.lowering .product-label,.wheels .product-label{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.4)}.product-card:hover .product-photo{transform:scale(1.06);filter:saturate(1) contrast(1.06)}
.part-illustration{background:#d3d2cd}.hero-product-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:center 58%;filter:saturate(.72) contrast(1.05);transition:transform .7s cubic-bezier(.2,.75,.25,1),filter .4s ease}.main-card:hover .hero-product-photo{transform:scale(1.04);filter:saturate(.88) contrast(1.08)}
.about-points{display:grid;gap:9px;margin-top:24px;list-style:none;font-size:11px;font-weight:600;color:#4d4d4a}.about-points li{display:flex;align-items:center;gap:8px}.about-points span{display:grid;place-items:center;width:15px;height:15px;border:1px solid #b9b7b0;border-radius:50%;font-size:8px;color:#555}
.process-intro{max-width:310px;margin-top:20px;color:#777;font-size:12px}.contact-assurance{display:flex;align-items:center;gap:8px;margin-top:22px;color:#aaa;font-size:10px}.contact-assurance span{width:6px;height:6px;border-radius:50%;background:#ddd;box-shadow:0 0 0 4px rgba(255,255,255,.08)}
.about-stamp .stamp-inner{background:linear-gradient(145deg,#111312,#252827);border-style:solid;border-color:rgba(23,23,23,.45);padding:30px}.about-stamp .stamp-inner img{display:block;width:100%;height:auto;object-fit:contain;filter:none}
.about-logo-card{width:min(100%,350px);min-height:220px;margin:auto;padding:24px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(145deg,#111312,#252827);border:1px solid rgba(255,255,255,.08);border-radius:12px;box-shadow:0 22px 48px rgba(20,20,20,.13);transition:transform .55s ease,box-shadow .55s ease}.about-logo-card:hover{transform:translateY(-6px);box-shadow:0 28px 54px rgba(20,20,20,.2)}.about-logo-card img{display:block;width:100%;height:130px;object-fit:contain}.about-logo-card span{padding-top:17px;border-top:1px solid rgba(255,255,255,.16);font:700 9px Manrope;letter-spacing:.17em;color:#aaa}
@media(max-width:800px){.about-logo-card{max-width:330px;min-height:200px}.about-logo-card img{height:112px}}

/* One shared surface keeps the HNLPARTS mark visually consistent everywhere. */
:root{--logo-surface:#171717}
.brand,.footer-brand,.about-logo-card{background:var(--logo-surface)}

.tiktok-link,.tiktok-footer{display:inline-flex!important;align-items:center;gap:7px}.tiktok-link svg,.tiktok-footer svg{width:15px;height:15px;fill:currentColor}.tiktok-link:after{display:none!important}.nav-links a:not(.instagram-link):not(.tiktok-link):after{content:"";position:absolute;right:0;bottom:-5px;left:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .25s ease}.nav.open .nav-cta{top:280px}

/* Additional motion — intentionally subtle to retain the restrained visual language. */
.site-header:after{content:"";position:absolute;bottom:-1px;left:0;width:var(--scroll-progress,0%);height:1px;background:#171717;transition:width .1s linear}
.button,.contact-button{position:relative;overflow:hidden;isolation:isolate;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}.button:before,.contact-button:before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-120%;width:70%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-20deg);transition:left .55s ease}.button-dark:hover:before,.contact-button:hover:before{left:140%}.button:hover{transform:translateY(-2px)}.button-light:hover{background:#fff;border-color:#c9c7c0;box-shadow:0 10px 22px rgba(0,0,0,.05)}.contact-button:hover{transform:translateY(-4px);border-color:#777}
.eyebrow .dot,.hero-note .dot,.catalogue-note .dot,.contact-assurance span{animation:soft-pulse 2.8s ease-in-out infinite}
.grid-lines{animation:grid-drift 15s linear infinite}.main-card:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.18) 48%,transparent 60%);transform:translateX(-125%);animation:card-sheen 8s ease-in-out infinite;pointer-events:none;z-index:3}
.service-card:before{content:"";position:absolute;top:0;right:0;left:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.2,1);opacity:.65}.service-card:hover:before{transform:scaleX(1)}.service-card:not(.featured):hover .service-number{color:#333;transform:translateX(3px)}.service-number{transition:color .25s ease,transform .25s ease}
.trust-row strong{transition:transform .3s ease,color .3s ease}.trust-row div:hover strong{transform:translateX(4px);color:#555}.trust-row div{transition:background .25s ease}.trust-row div:hover{background:linear-gradient(90deg,rgba(23,23,23,.03),transparent)}
.text-link span,.round-arrow{transition:transform .3s ease,background .25s ease,color .25s ease}.text-link:hover span{display:inline-block;transform:translate(3px,-3px)}.catalogue-note{transition:border-color .3s ease,box-shadow .3s ease}.catalogue-note:hover{border-color:#b9b7b0;box-shadow:0 9px 20px rgba(0,0,0,.035)}
.process-item{transition:padding .35s ease,background .35s ease}.process-item:hover{padding-left:13px;background:rgba(255,255,255,.28)}.process-item>span{transition:color .25s ease,transform .25s ease}.process-item:hover>span{color:#222;transform:translateX(4px)}.process-item h3{transition:transform .3s ease}.process-item:hover h3{transform:translateX(3px)}
.footer-links a{transition:color .25s ease,transform .25s ease}.footer-links a:hover{color:#fff;transform:translateY(-2px)}
@keyframes soft-pulse{0%,100%{opacity:.7;box-shadow:0 0 0 0 rgba(23,23,23,.12)}50%{opacity:1;box-shadow:0 0 0 5px rgba(23,23,23,0)}}@keyframes grid-drift{from{background-position:0 0}to{background-position:32px 32px}}@keyframes card-sheen{0%,65%,100%{transform:translateX(-125%)}82%{transform:translateX(135%)}}

/* Accent colour: used sparingly to keep the monochrome base calm and premium. */
:root{--ink:#151514;--paper:#f7f6f3;--line:#dfddd7;--soft:#eceae5;--accent:#aaa79f;--accent-ink:#1d1d1b;--accent-soft:#efeeea}
.site-header:after{background:var(--accent)}
.eyebrow span,.hero-note .dot,.catalogue-note .dot{background:var(--accent)}.hero-note .dot{box-shadow:0 0 0 4px rgba(170,167,159,.2)}
.ticker i{color:#8d8a82}.tag-one{background:#e8e6e0;color:var(--accent-ink);font-weight:700}
.nav-cta:hover,.button-dark:hover{background:#2a2a28;color:#fff;box-shadow:0 10px 22px rgba(0,0,0,.2)}
.service-card.featured .arrow{color:#d5d2ca}.service-card.featured:before{background:#d5d2ca;opacity:1}.service-number{color:#89867f}.featured .service-number{color:#d5d2ca}
.trust-row div:hover strong{color:#42413d}.catalogue-note{background:var(--accent-soft);border-color:#d9d7d1}.catalogue-note a{color:#3e3d39}
.wheels .product-label,.lowering .product-label{color:#f4f2ed}.product-card:hover .round-arrow{background:#272725;color:#fff;border-color:#272725}
.about-points span{border-color:#c6c3bb;color:#5e5c56;background:#f2f1ed}.contact-assurance span{background:#d1cec6;box-shadow:0 0 0 4px rgba(255,255,255,.1)}
.contact-button:hover{border-color:#bbb8b0;box-shadow:0 14px 30px rgba(0,0,0,.14)}.contact-button b{color:#d5d2ca}

/* New catalogue imagery — restrained motion that keeps the grid calm and premium. */
.catalogue-photo{background:#242624}.catalogue-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(12,13,12,.28),transparent 45%,rgba(255,255,255,.06));pointer-events:none}.catalogue-photo .product-label{color:#f7f6f3;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.bride-seat .product-photo{object-position:center 47%}.bmw-wheel .product-photo{object-position:center 50%}.turanza-tires .product-photo{object-position:center 48%}
.product-card--featured .catalogue-photo:before{content:"";position:absolute;z-index:1;top:0;bottom:0;width:38%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.2),transparent);transform:translateX(-180%) skewX(-18deg);pointer-events:none}.product-card--featured:hover .catalogue-photo:before{animation:catalogue-sheen .85s cubic-bezier(.2,.7,.2,1) both}.product-card--featured:hover .product-photo{transform:scale(1.075);filter:saturate(1.05) contrast(1.08)}
.product-card--featured .round-arrow{transition:transform .3s ease,background .3s ease,color .3s ease,box-shadow .3s ease}.product-card--featured:hover .round-arrow{box-shadow:0 6px 15px rgba(0,0,0,.16)}
@keyframes catalogue-sheen{from{transform:translateX(-180%) skewX(-18deg)}to{transform:translateX(430%) skewX(-18deg)}}

/* Catalogue rhythm: a minimal system of labels, motion, and depth. */
.catalogue-legend{display:flex;justify-content:space-between;gap:16px;margin:-11px 0 16px;padding:0 1px;color:#89867f;font:500 8px "DM Mono",monospace;letter-spacing:.12em}.catalogue-legend span:last-child{text-align:right}
.product-card--featured{position:relative}.product-detail{position:absolute;right:15px;bottom:14px;z-index:3;max-width:120px;padding:6px 8px;border:1px solid rgba(255,255,255,.35);background:rgba(18,20,19,.38);backdrop-filter:blur(5px);color:#fff;font:500 7px "DM Mono",monospace;letter-spacing:.13em;opacity:0;transform:translateY(8px);transition:opacity .32s ease,transform .42s cubic-bezier(.2,.7,.2,1),background .3s ease}.product-scan{position:absolute;z-index:3;left:18px;bottom:17px;width:0;height:1px;background:rgba(255,255,255,.85);box-shadow:0 0 10px rgba(255,255,255,.32);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.product-card--featured:hover .product-detail{opacity:1;transform:translateY(0);background:rgba(18,20,19,.66)}.product-card--featured:hover .product-scan{width:52px}.product-card--featured .catalogue-photo{isolation:isolate}.product-card--featured .catalogue-photo .product-photo{animation:catalogue-breathe 9s ease-in-out infinite}.product-card--featured:hover .catalogue-photo .product-photo{animation-play-state:paused}
.contact-email{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.38);color:#eee;font:500 11px "DM Mono",monospace;letter-spacing:.04em;transition:color .25s ease,border-color .25s ease}.contact-email span{transition:transform .25s ease}.contact-email:hover{color:#fff;border-color:#fff}.contact-email:hover span{transform:translate(3px,-3px)}
@keyframes catalogue-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@media(max-width:800px){.catalogue-legend{display:grid;grid-template-columns:1fr 1fr;row-gap:7px;margin:0 0 15px}.catalogue-legend span:last-child{grid-column:1 / -1;text-align:left}.product-detail{opacity:1;transform:none;background:rgba(18,20,19,.5)}.product-scan{width:34px}}

/* Premium typography and quieter material palette. */
body{font-family:"DM Sans",Inter,Arial,sans-serif;letter-spacing:-.012em}h1,h2,h3{font-family:Manrope,"DM Sans",sans-serif;font-weight:700;letter-spacing:-.06em}.eyebrow,.kicker,.card-top,.product-label,.service-number,.ticker-track,.about-logo-card span{font-family:"DM Mono",monospace;letter-spacing:.13em}.brand{background:#161615;border-color:rgba(255,255,255,.12);box-shadow:0 7px 22px rgba(0,0,0,.14)}.footer-brand,.about-logo-card{background:#161615}.about-logo-card{border-color:rgba(255,255,255,.11)}.site-header{background:rgba(247,246,243,.92)}.site-header.is-scrolled{background:rgba(247,246,243,.98)}
@media(max-width:800px){.hero-highlights{margin-top:32px}.catalogue-note{margin:-8px 0 26px;align-items:flex-start;flex-wrap:wrap}.catalogue-note p{flex:1;min-width:190px}.catalogue-note a{width:100%;padding-left:14px}.about-points{margin-top:21px}}

/* Unified dark surface and a quiet logo backdrop for the opening section. */
:root{--ink:#1c2120;--logo-surface:#1c2120}
.brand,.footer-brand,.about-logo-card{background:#1c2120}
.hero{position:relative;isolation:isolate;background:#1c2120;color:#fff}
.hero:before{content:"";position:absolute;z-index:-2;inset:0;background-image:url("assets/hnlparts-logo.png");background-repeat:no-repeat;background-position:78% 50%;background-size:min(74vw,920px) auto;opacity:.18;filter:grayscale(1) contrast(1.05)}
.hero:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#1c2120 0%,rgba(28,33,32,.97) 37%,rgba(28,33,32,.72) 66%,rgba(28,33,32,.85) 100%)}
.hero .eyebrow,.hero .kicker,.hero h1 em,.hero-text,.hero-note{color:rgba(255,255,255,.72)}
.hero .eyebrow span{background:#fff}.hero .hero-highlights{border-color:rgba(255,255,255,.23)}
.hero .hero-highlights div+div{border-color:rgba(255,255,255,.23)}
.hero .hero-highlights span{color:rgba(255,255,255,.58)}.hero .hero-highlights strong{color:#fff}
.hero .button-dark{background:#fff;color:#1c2120}.hero .button-light{color:#fff;border-color:rgba(255,255,255,.45)}.hero .button-light:hover{background:rgba(255,255,255,.12);border-color:#fff}
.hero .grid-lines{background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px)}
.hero .main-card{box-shadow:0 25px 70px rgba(0,0,0,.35)}
.contact-section,.footer{background:#1c2120}.footer{border-top-color:rgba(255,255,255,.14)}
@media(max-width:800px){.hero:before{background-position:50% 74%;background-size:125vw auto;opacity:.13}.hero:after{background:linear-gradient(180deg,#1c2120 0%,rgba(28,33,32,.94) 52%,#1c2120 100%)}}

/* Lucide-style SVG icons: consistent strokes on every browser and device. */
.icon{display:inline-block;width:1em;height:1em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.13em}.button .icon{width:15px;height:15px;margin-left:1px}.text-link .icon{width:14px;height:14px;margin-left:12px;transition:transform .3s ease}.text-link:hover .icon{transform:translate(3px,-3px)}.catalogue-note a .icon{width:13px;height:13px;margin-left:6px;transition:transform .25s ease}.catalogue-note a:hover .icon{transform:translate(3px,3px)}
.arrow.icon{width:18px;height:18px;font-size:unset}.round-arrow .icon{width:15px;height:15px;vertical-align:middle}.contact-email .icon{width:14px;height:14px;transition:transform .25s ease}.contact-email:hover .icon{transform:translate(3px,-3px)}.contact-button b{display:grid;place-items:center}.contact-button b .icon{width:21px;height:21px}.footer-links a{display:inline-flex;align-items:center;gap:6px}.footer-links .icon{width:14px;height:14px}

/* Unified motion language — restrained, responsive, and consistent. */
:root{--motion-ease:cubic-bezier(.2,.72,.24,1);--motion-fast:220ms;--motion-base:420ms;--motion-slow:700ms}
.brand,.nav-links a,.nav-cta,.button,.text-link,.catalogue-note a,.contact-email,.footer-links a{will-change:transform}.brand{transition:transform var(--motion-base) var(--motion-ease),box-shadow var(--motion-base) ease}.brand:hover{transform:translateY(-2px) scale(1.012);box-shadow:0 12px 26px rgba(0,0,0,.18)}
.nav-links a,.footer-links a{transition:color var(--motion-fast) ease,transform var(--motion-fast) var(--motion-ease)}.instagram-link svg,.tiktok-link svg,.instagram-footer svg,.tiktok-footer svg{transition:transform var(--motion-base) var(--motion-ease)}.instagram-link:hover svg,.tiktok-link:hover svg,.instagram-footer:hover svg,.tiktok-footer:hover svg{transform:translateY(-2px) rotate(-5deg)}
.button .icon,.nav-cta .icon,.round-arrow .icon,.contact-button .icon{transition:transform var(--motion-fast) var(--motion-ease)}.button:hover .icon{transform:translate(3px,-3px)}.contact-button:hover .icon{transform:translate(3px,-3px)}
.kicker,.eyebrow,.service-number,.product-label,.catalogue-legend span{transition:color var(--motion-fast) ease,letter-spacing var(--motion-base) var(--motion-ease),transform var(--motion-base) var(--motion-ease)}.section-heading:hover .kicker,.catalogue-intro:hover .kicker{color:#3e3d39;letter-spacing:.22em}.service-card:hover .service-number{letter-spacing:.18em;transform:translateX(3px)}.product-card:hover .product-label{letter-spacing:.18em;transform:translateY(-2px)}.product-card:hover .product-detail{letter-spacing:.16em}.catalogue-legend:hover span{color:#56544f}.catalogue-legend:hover span:nth-child(2){transform:translateY(-2px)}
.service-card h3,.service-card p,.product-info h3,.product-info p,.process-item h3,.process-item p,.about-copy>p,.contact-box h2,.contact-box p{transition:transform var(--motion-base) var(--motion-ease),color var(--motion-fast) ease}.service-card:hover h3,.product-card:hover .product-info h3{transform:translateX(3px)}.service-card:hover p,.product-card:hover .product-info p{transform:translateX(3px);color:#666}.featured:hover p{color:#d0cfca}.process-item:hover p{transform:translateX(3px)}.about-copy:hover>p:not(.kicker){transform:translateX(3px)}
.product-card--featured:hover .catalogue-photo .product-photo{transform:scale(1.075) translateY(-2px)}.product-card--featured:hover .product-label{transform:translateY(-2px)}.product-card--featured:hover .product-scan{box-shadow:0 0 14px rgba(255,255,255,.5)}.product-card--featured .round-arrow:hover .icon{transform:translate(2px,-2px)}
.about-points li,.location-line,.contact-assurance{transition:transform var(--motion-base) var(--motion-ease),color var(--motion-fast) ease}.about-points li:hover,.location-line:hover{transform:translateX(4px);color:#222}.about-points li span{transition:transform var(--motion-base) var(--motion-ease),background var(--motion-fast) ease}.about-points li:hover span{transform:rotate(12deg) scale(1.08);background:#fff}.contact-assurance:hover{transform:translateX(3px);color:#eee}
@media(hover:none){.brand:hover,.button:hover,.service-card:hover h3,.product-card:hover .product-info h3,.service-card:hover p,.product-card:hover .product-info p,.about-copy:hover>p:not(.kicker),.process-item:hover p,.about-points li:hover,.location-line:hover,.contact-assurance:hover{transform:none}.product-detail{transition:none}.product-card--featured .product-detail{opacity:1;transform:none;background:rgba(18,20,19,.5)}}

/* Keep image transforms reserved for deliberate hover interaction. */
.product-card--featured .catalogue-photo .product-photo{animation:none}.product-card--featured .product-label{animation:label-breathe 5.5s ease-in-out infinite}@keyframes label-breathe{0%,100%{opacity:.82}50%{opacity:1}}
