/* Design: variance 7 / motion 3 / density 3. Native CSS, inspired by product-led presentation.
   Shape scale: 18px panels, 12px fields, pill controls. Layers: header 10, native modal top layer. */
:root {
  color-scheme: light;
  --page: #fdfdfd;
  --surface: #f3f4f5;
  --surface-hover: #e9ecf0;
  --text: #202326;
  --muted: #63686e;
  --brand: #0073b4;
  --brand-hover: #005f96;
  --line: #dfe2e5;
  --nav: rgb(253 253 253 / 93%);
  --hero: #f1f3f5;
  --photo-surface: #f3f4f5;
  --radius: 18px;
  --ease: cubic-bezier(.2,.7,.2,1);
  font: 100%/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; --page:#17191c; --surface:#22262b; --surface-hover:#30363c; --text:#f4f5f6; --muted:#b5bdc6; --brand:#74c6f6; --brand-hover:#a0dcff; --line:#3b424a; --nav:rgb(23 25 28 / 94%); --hero:#20262c; }
}
:root[data-theme="dark"] { color-scheme:dark; --page:#17191c; --surface:#22262b; --surface-hover:#30363c; --text:#f4f5f6; --muted:#b5bdc6; --brand:#74c6f6; --brand-hover:#a0dcff; --line:#3b424a; --nav:rgb(23 25 28 / 94%); --hero:#20262c; }
* { box-sizing: border-box; }
html { scroll-behavior:smooth; scroll-padding-top:105px; }
body { margin:0; color:var(--text); background:var(--page); -webkit-font-smoothing:antialiased; }
body.modal-open { overflow:hidden; }
button, input { font:inherit; }
button, a, input { -webkit-tap-highlight-color:transparent; }
button { color:inherit; border:0; padding:0; background:none; cursor:pointer; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; height:auto; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { text-wrap:balance; }
:focus-visible { outline:3px solid var(--brand); outline-offset:5px; }
[hidden] { display:none !important; }
.container { width:min(1280px, calc(100% - 112px)); margin-inline:auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:10px; left:16px; padding:12px 20px; background:var(--page); color:var(--text); transform:translateY(-150%); z-index:20; }
.skip-link:focus { transform:translateY(0); }
.icon { display:inline-block; flex:none; width:20px; height:20px; background:currentColor; mask:var(--icon) center/contain no-repeat; -webkit-mask:var(--icon) center/contain no-repeat; }
.icon-search { --icon:url('assets/icons/magnifying-glass.svg'); }
.icon-menu { --icon:url('assets/icons/list.svg'); }
.icon-arrow-right { --icon:url('assets/icons/arrow-right.svg'); }
.icon-chevron-right { --icon:url('assets/icons/caret-right.svg'); }
.icon-external { --icon:url('assets/icons/arrow-up-right.svg'); }
.icon-x { --icon:url('assets/icons/x.svg'); }
.icon-plus { --icon:url('assets/icons/plus.svg'); }
.icon-moon { --icon:url('assets/icons/moon.svg'); }
.icon-sun { --icon:url('assets/icons/sun.svg'); }
.reverse { transform:rotate(180deg); }
.site-header { position:sticky; top:0; background:var(--nav); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); z-index:10; border-bottom:1px solid var(--line); }
.header-inner { min-height:78px; display:flex; align-items:center; gap:44px; }
.brand { display:flex; align-items:center; width:174px; flex-shrink:0; }
.brand img { width:100%; filter:brightness(0) saturate(100%); }
.desktop-nav { display:flex; gap:28px; align-items:center; margin-left:10px; font-size:14px; font-weight:500; }
.desktop-nav a { padding-block:25px; white-space:nowrap; }
.desktop-nav a:hover { color:var(--brand); }
.header-actions { display:flex; align-items:center; gap:16px; margin-left:auto; }
.search-trigger { display:flex; align-items:center; gap:12px; padding:10px 13px; min-height:42px; width:228px; background:var(--surface); border:1px solid transparent; border-radius:9px; color:var(--muted); font-size:13px; text-align:left; }
.search-trigger:hover { border-color:var(--line); }
kbd { font:12px/1.3 inherit; border:1px solid var(--line); border-radius:3px; width:20px; text-align:center; margin-left:auto; }
.menu-trigger { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; }
.menu-trigger .icon { width:23px; height:23px; }
.menu-trigger:hover { background:var(--surface); }
.hero { background:var(--hero); overflow:hidden; }
.hero-inner { display:grid; grid-template-columns:1.05fr 1fr; min-height:650px; position:relative; align-items:center; }
.hero-copy { padding-block:84px; position:relative; z-index:1; }
.eyebrow { font-size:12px; font-weight:650; letter-spacing:.1em; text-transform:uppercase; color:var(--brand); margin-bottom:23px; }
h1 { font-size:clamp(48px,4.6vw,68px); font-weight:650; letter-spacing:-.055em; line-height:1.04; }
h1 span { color:var(--brand); }
.hero-description { font-size:19px; color:var(--muted); line-height:1.55; max-width:385px; margin-top:25px; }
.hero-actions { margin-top:34px; display:flex; align-items:flex-start; flex-direction:column; gap:14px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:15px; min-height:49px; border-radius:50px; padding:13px 23px; font-size:14px; font-weight:550; white-space:nowrap; transition:background-color 180ms, transform 180ms var(--ease); }
.button-primary { background:var(--brand); color:#fdfdfd; }
.button-primary:hover { background:var(--brand-hover); }
.button:active,.circle-button:active { transform:scale(.97); }
.text-link { display:inline-flex; align-items:center; gap:9px; min-height:44px; color:var(--brand); font-size:14px; font-weight:500; }
.text-link:hover { text-decoration:underline; text-underline-offset:4px; }
.text-link .icon { width:17px; height:17px; }
.hero-visual { height:650px; position:relative; display:grid; place-items:center; }
.hero-visual::after { content:""; position:absolute; bottom:58px; left:19%; width:65%; height:24px; background:rgb(37 50 64 / 15%); border-radius:50%; filter:blur(19px); transform:rotate(-9deg); }
.hero-product { width:auto; height:535px; max-width:none; transform:rotate(28deg) translate(-3px,-5px); filter:drop-shadow(20px 20px 12px rgb(41 50 60 / 10%)); position:relative; z-index:1; }
.section { padding-block:88px; }
.section-header { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:32px; }
.section-header h2 { font-size:39px; line-height:1.14; letter-spacing:-.045em; font-weight:650; }
.section-header p { color:var(--muted); font-size:16px; margin-top:12px; }
.section-header>.text-link { margin-bottom:-9px; white-space:nowrap; }
.category-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:23px; }
.category { display:flex; flex-direction:column; align-items:stretch; text-align:left; min-width:0; }
.category-image { display:block; border-radius:var(--radius); overflow:hidden; aspect-ratio:1.52; background:var(--surface); }
.category-image img { width:100%; height:100%; object-fit:cover; transition:transform 350ms var(--ease); }
.category-name { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:16px; font-weight:600; padding:16px 2px 0; }
.category-name .icon { width:18px; height:18px; color:var(--muted); }
.category[aria-pressed="true"] .category-name { color:var(--brand); }
.category[aria-pressed="true"] .category-image { outline:3px solid var(--brand); outline-offset:4px; }
@media (hover:hover) { .category:hover img { transform:scale(1.04); } .category:hover .category-name { color:var(--brand); } }
.featured { background:var(--surface); padding-top:75px; padding-bottom:66px; }
.featured-header { margin-bottom:35px; }
.carousel-controls { display:flex; gap:10px; padding-bottom:2px; }
.circle-button { display:grid; place-items:center; border-radius:50%; width:44px; height:44px; background:var(--surface-hover); color:var(--text); flex:none; transition:background-color 160ms,transform 160ms var(--ease); }
.circle-button:hover { background:var(--line); }
.circle-button:disabled { opacity:.38; cursor:default; }
.product-track { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 54px)/3.55); gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:var(--line) transparent; padding:5px 3px 24px; margin-inline:-3px; overscroll-behavior-inline:contain; }
.product-card { scroll-snap-align:start; background:var(--page); border-radius:var(--radius); overflow:hidden; min-width:0; }
.product-card>button { text-align:left; width:100%; height:100%; display:flex; flex-direction:column; position:relative; padding:24px; }
.product-card>button:focus-visible { outline-offset:-4px; border-radius:var(--radius); }
.product-card-image { display:flex; align-items:center; justify-content:center; height:230px; width:100%; margin-bottom:27px; }
.product-card-image img { object-fit:contain; height:100%; width:100%; max-width:240px; transition:transform 300ms var(--ease); }
.product-card[data-code="2752-45G"] .product-card-image img { transform:rotate(23deg); height:205px; }
.product-card[data-code="2539MR"] .product-card-image img { width:100%; height:auto; }
.product-card[data-code="6214-05"] .product-card-image img { height:195px; mix-blend-mode:multiply; }
.product-card[data-code="34417-1A"] .product-card-image img { height:213px; }
.product-card[data-code="87B36-7BA-R"] .product-card-image img { height:213px; }
.product-code { color:var(--muted); font-size:12px; font-weight:550; letter-spacing:.06em; }
.product-card h3 { margin-top:8px; font-size:20px; letter-spacing:-.025em; line-height:1.3; font-weight:600; text-wrap:initial; }
.product-meta { font-size:13px; color:var(--muted); margin-top:9px; }
.product-card-bottom { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:26px; margin-top:auto; width:100%; color:var(--brand); font-size:13px; font-weight:500; }
.product-card-bottom .icon { width:17px; height:17px; }
@media(hover:hover) { .product-card>button:hover .product-card-image img { transform:translateY(-5px); } .product-card[data-code="2752-45G"]>button:hover .product-card-image img { transform:rotate(23deg) translateY(-5px); } }
.filter-status { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:-15px; margin-bottom:20px; }
.filter-status p { color:var(--muted); font-size:14px; }
.organization { padding-block:84px; }
.organization-panel { display:grid; grid-template-columns:1fr 1fr; background:var(--surface); border-radius:var(--radius); min-height:500px; overflow:hidden; }
.organization-copy { padding:76px 0 64px 65px; align-self:center; }
.organization h2 { font-size:48px; line-height:1.07; letter-spacing:-.045em; font-weight:650; }
.organization-copy>p:not(.eyebrow) { max-width:335px; font-size:16px; line-height:1.6; color:var(--muted); margin-top:24px; }
.organization-copy>.text-link { margin-top:20px; }
.organization .eyebrow { font-size:11px; }
.organization-image { display:grid; place-items:center; padding:40px 35px; background:var(--photo-surface); }
.organization-image img { max-height:405px; width:auto; mix-blend-mode:multiply; }
.site-footer { padding-top:15px; }
.footer-main { display:grid; grid-template-columns:2fr 1fr 1.2fr; gap:50px; border-top:1px solid var(--line); padding-block:44px 46px; }
.brand-footer { width:178px; }
.footer-brand p { font-size:14px; margin-top:17px; color:var(--muted); }
.footer-main nav { display:flex; flex-direction:column; align-items:flex-start; }
.footer-main h2 { font-size:13px; font-weight:600; margin-bottom:11px; }
.footer-main nav a { display:inline-flex; align-items:center; gap:5px; color:var(--muted); font-size:13px; min-height:36px; }
.footer-main nav a:hover { color:var(--brand); }
.footer-main nav .icon { width:13px; height:13px; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:20px; border-top:1px solid var(--line); padding-block:16px; color:var(--muted); font-size:12px; }
.theme-toggle { display:flex; align-items:center; gap:8px; min-height:44px; font-size:12px; }
.theme-toggle .icon { width:15px; height:15px; }
dialog { border:1px solid var(--line); color:var(--text); background:var(--page); border-radius:24px; padding:32px; max-height:calc(100dvh - 60px); overscroll-behavior:contain; box-shadow:0 24px 90px rgb(16 32 48 / 17%); }
dialog::backdrop { background:rgb(16 24 32 / 42%); backdrop-filter:blur(8px); }
dialog[open] { animation:dialog-in 180ms var(--ease); }
.dialog-top { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:26px; }
.dialog-top h2 { font-size:25px; line-height:1.2; letter-spacing:-.035em; }
.dialog-kicker { color:var(--muted); font-size:13px; }
.menu-dialog { width:min(950px,calc(100% - 40px)); padding:32px 44px 36px; }
.menu-dialog>h2 { font-size:40px; font-weight:600; letter-spacing:-.04em; margin-bottom:28px; }
.menu-primary { display:flex; flex-wrap:wrap; gap:10px 26px; padding-bottom:25px; border-bottom:1px solid var(--line); }
.menu-primary a,.menu-primary button { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14px; min-height:44px; }
.menu-primary .icon { width:16px; height:16px; }
.menu-categories { padding-top:28px; }
.menu-categories h3 { font-size:15px; }
.menu-categories p { color:var(--muted); font-size:13px; margin-top:5px; }
.menu-categories nav { margin-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:2px 36px; }
.menu-categories a { display:flex; justify-content:space-between; align-items:center; gap:14px; padding-block:11px; font-size:14px; }
.menu-categories a .icon { width:15px; height:15px; color:var(--muted); }
.menu-categories a:hover,.menu-primary a:hover,.menu-primary button:hover { color:var(--brand); }
.menu-distributor { margin-top:24px; }
.search-dialog { width:min(720px,calc(100% - 40px)); }
.search-dialog label { font-size:13px; font-weight:500; display:block; margin-bottom:9px; }
.search-field { display:flex; align-items:center; gap:14px; padding:5px 8px 5px 17px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.search-field:focus-within { outline:2px solid var(--brand); outline-offset:2px; }
.search-field input { min-width:0; width:100%; height:44px; border:0; outline:none; background:transparent; color:var(--text); font-size:17px; }
.search-field input::placeholder { color:var(--muted); }
.search-field input::-webkit-search-cancel-button { display:none; }
#search-help { font-size:12px; color:var(--muted); margin-top:12px; }
.results-label { margin:27px 0 10px; font-size:12px; color:var(--muted); }
.search-results { list-style:none; padding:0; margin:0; }
.search-results li+li { border-top:1px solid var(--line); }
.search-result { display:grid; grid-template-columns:58px 1fr 20px; width:100%; gap:20px; align-items:center; text-align:left; padding:13px 4px; border-radius:8px; }
.search-result:hover { background:var(--surface); }
.search-thumb { display:grid; place-items:center; width:58px; height:58px; border-radius:8px; background:var(--photo-surface); }
.search-thumb img { width:45px; height:45px; object-fit:contain; mix-blend-mode:multiply; }
.search-result .result-title { display:block; font-size:15px; font-weight:550; line-height:1.3; }
.search-result .product-code { display:block; margin-top:5px; font-size:11px; }
.search-empty { padding:22px 0 12px; }
.search-empty h3 { font-size:21px; }
.search-empty p { font-size:14px; color:var(--muted); margin-block:10px; }
.product-dialog { width:min(940px,calc(100% - 40px)); padding:0; overflow:auto; }
.product-dialog[open] { display:grid; grid-template-columns:1fr 1fr; }
.product-close { position:absolute; top:16px; right:16px; z-index:1; }
.detail-image { background:var(--photo-surface); min-height:480px; padding:60px 35px; display:grid; place-items:center; border-radius:23px 0 0 23px; }
.detail-image img { object-fit:contain; max-height:340px; width:100%; mix-blend-mode:multiply; }
.detail-copy { padding:72px 38px 36px; }
.detail-copy h2 { font-size:32px; letter-spacing:-.04em; line-height:1.12; margin-top:12px; font-weight:600; }
#detail-description { margin-top:18px; color:var(--muted); font-size:15px; }
.detail-copy dl { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-block:28px; }
.detail-copy dt { font-size:12px; color:var(--muted); }
.detail-copy dd { margin:5px 0 0; font-size:17px; font-weight:500; }
.detail-note { color:var(--muted); font-size:11px; margin-top:12px; }
@keyframes dialog-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .brand img { filter:none; } :root:not([data-theme="light"]) .button-primary { color:#14212b; } :root:not([data-theme="light"]) .product-card-image { background:var(--photo-surface); border-radius:12px; padding:15px; } }
:root[data-theme="dark"] .brand img { filter:none; }
:root[data-theme="dark"] .button-primary { color:#14212b; }
:root[data-theme="dark"] .product-card-image { background:var(--photo-surface); border-radius:12px; padding:15px; }
@media (min-width:1450px) { .hero-inner,.hero-visual { min-height:700px; } .hero-product { height:575px; } }
@media (max-width:1150px) { .container { width:calc(100% - 72px); } .header-inner { gap:25px; } .desktop-nav { gap:21px; margin-left:0; } .search-trigger { width:44px; height:44px; background:transparent; justify-content:center; padding:0; } .search-trigger-label,kbd { display:none; } .hero-inner { min-height:610px; } .hero-visual { height:610px; } .hero-product { height:480px; } .hero-copy { padding-block:65px; } h1 { font-size:56px; } .product-track { grid-auto-columns:calc((100% - 36px)/2.8); } .category-name { font-size:14px; } .organization-copy { padding-left:45px; } }
@media (max-width:767px) {
  html { scroll-padding-top:85px; }
  .container { width:calc(100% - 40px); }
  .header-inner { min-height:67px; gap:16px; }
  .brand { width:153px; }
  .desktop-nav { display:none; }
  .header-actions { gap:5px; }
  .hero-inner { grid-template-columns:1fr; min-height:0; }
  .hero-copy { padding:49px 0 0; }
  .eyebrow { font-size:10px; margin-bottom:19px; }
  h1 { font-size:clamp(40px,9.9vw,62px); letter-spacing:-.05em; line-height:1.06; }
  .hero-description { font-size:16px; max-width:330px; margin-top:20px; }
  .hero-actions { margin-top:23px; gap:8px; flex-direction:row; align-items:center; flex-wrap:wrap; column-gap:17px; }
  .button { min-height:47px; font-size:13px; padding:12px 18px; gap:9px; }
  .button .icon { width:17px; height:17px; }
  .hero-actions .text-link { font-size:12px; gap:3px; }
  .hero-visual { height:370px; margin-top:0; }
  .hero-product { height:340px; transform:rotate(35deg) translate(4px,-5px); }
  .hero-visual::after { bottom:24px; height:14px; width:65%; left:19%; filter:blur(16px); }
  .section { padding-block:53px; }
  .section-header { gap:18px; margin-bottom:25px; align-items:flex-start; flex-wrap:wrap; }
  .section-header h2 { font-size:30px; letter-spacing:-.04em; }
  .section-header p { font-size:14px; margin-top:10px; max-width:315px; }
  .section-header>.text-link { min-height:32px; margin:0; font-size:12px; }
  .category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:25px 16px; }
  .category-image { border-radius:12px; aspect-ratio:1.2; }
  .category-name { font-size:13px; padding-top:11px; gap:4px; line-height:1.4; }
  .category-name .icon { width:15px; height:15px; }
  .featured-header { flex-wrap:nowrap; }
  .carousel-controls { gap:7px; align-self:flex-end; }
  .circle-button { width:42px; height:42px; }
  .carousel-controls .circle-button { width:44px; height:44px; background:transparent; }
  .product-track { grid-auto-columns:82%; gap:14px; padding-bottom:21px; }
  .product-card>button { padding:23px; }
  .product-card-image { height:205px; margin-bottom:23px; }
  .product-card h3 { font-size:20px; }
  .filter-status { align-items:flex-start; flex-direction:column; gap:3px; margin-top:0; }
  .filter-status .text-link { font-size:12px; }
  .organization { padding-block:50px; }
  .organization-panel { grid-template-columns:1fr; }
  .organization-copy { padding:35px 28px 0; }
  .organization .eyebrow { font-size:9px; }
  .organization h2 { font-size:36px; }
  .organization-copy>p:not(.eyebrow) { font-size:14px; margin-top:18px; }
  .organization-copy>.text-link { margin-top:12px; }
  .organization-image { padding:30px 30px 35px; }
  .organization-image img { max-height:295px; }
  .site-footer { padding-top:0; }
  .footer-main { grid-template-columns:1fr 1fr; gap:33px 20px; padding-block:34px; }
  .footer-brand { grid-column:1/-1; }
  .brand-footer { width:161px; }
  .footer-brand p { margin-top:12px; font-size:13px; }
  .footer-main nav a { min-height:42px; }
  .footer-main h2 { margin-bottom:6px; font-size:12px; }
  .footer-bottom { align-items:flex-start; gap:8px; padding-block:20px; font-size:11px; }
  .footer-bottom>p { padding-top:13px; }
  .theme-toggle { font-size:11px; gap:5px; }
  dialog { max-height:calc(100dvh - 30px); border-radius:20px; padding:23px; }
  .dialog-top { gap:16px; margin-bottom:25px; }
  .dialog-top h2 { font-size:23px; }
  .menu-dialog,.search-dialog { width:calc(100% - 24px); padding:23px; }
  .menu-dialog>h2 { font-size:30px; margin-bottom:20px; }
  .menu-primary { display:flex; flex-direction:column; align-items:stretch; gap:0; }
  .menu-categories nav { grid-template-columns:1fr; gap:1px; }
  .search-field { gap:10px; padding-left:12px; }
  .search-field input { font-size:16px; }
  .search-result { gap:13px; grid-template-columns:49px 1fr 18px; padding-block:12px; }
  .search-thumb { width:49px; height:49px; }
  .search-result .result-title { font-size:14px; }
  .product-dialog { width:calc(100% - 24px); }
  .product-dialog[open] { grid-template-columns:1fr; }
  .detail-image { min-height:285px; height:285px; padding:38px; border-radius:19px 19px 0 0; }
  .detail-image img { max-height:215px; }
  .detail-copy { padding:28px 25px; }
  .detail-copy h2 { font-size:29px; }
  .detail-copy dl { margin-block:24px; }
}
@media (max-width:360px) { .container { width:calc(100% - 32px); } .hero-actions { column-gap:10px; } .hero-actions .button { font-size:12px; padding-inline:14px; } .hero-actions .text-link { font-size:11px; } .category-name { font-size:12px; } .brand { width:139px; } .header-actions { gap:0; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none !important; transition:none !important; } }
@media (prefers-reduced-transparency:reduce) { .site-header { background:var(--page); backdrop-filter:none; } dialog::backdrop { backdrop-filter:none; background:rgb(16 24 32 / 65%); } }
@media (prefers-contrast:more) { :root { --muted:var(--text); } .site-header { background:var(--page); } button:focus-visible,a:focus-visible { outline-width:4px; } }