@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap');
:root { --ink:#131313; --muted:#6e6e69; --paper:#f4f3ef; --line:#d7d6d0; --accent:#e8ff5b; --night:#181917; --white:#f7f7f3; --max:1600px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,Arial,sans-serif; } a { color:inherit; text-decoration:none; } img { display:block; width:100%; object-fit:cover; } .page-width { width:100%; max-width:var(--max); margin-left:auto; margin-right:auto; padding-left:clamp(24px,3vw,52px); padding-right:clamp(24px,3vw,52px); }
.announcement { background:var(--accent); color:#131313; font:500 10px/1 DM Mono,monospace; letter-spacing:.08em; text-transform:uppercase; } .announcement-inner { min-height:31px; display:flex; align-items:center; justify-content:space-between; } .announcement a { text-decoration:underline; text-underline-offset:3px; }
.site-header { position:sticky; top:0; z-index:20; background:rgba(244,243,239,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(14px); } .header-inner { height:78px; display:flex; align-items:center; gap:42px; } .brand { display:flex; align-items:center; gap:11px; min-width:200px; } .brand-mark { width:39px; height:39px; display:grid; place-items:center; background:var(--ink); color:var(--accent); font:700 14px/1 Barlow Condensed,Arial,sans-serif; letter-spacing:.04em; } .brand-logo-mark { object-fit:cover; border-radius:2px; background:#eef0f2; } .brand strong { display:block; font-size:14px; letter-spacing:.04em; } .brand small { display:block; margin-top:3px; color:var(--muted); font:500 9px/1 DM Mono,monospace; letter-spacing:.1em; } .site-nav { display:flex; align-items:center; gap:28px; flex:1; } .site-nav a { position:relative; color:#62625c; font-size:12px; } .site-nav a:hover,.site-nav a.active { color:var(--ink); } .site-nav a.active:after { content:""; position:absolute; left:0; right:0; bottom:-9px; height:2px; background:var(--ink); } .header-action { display:flex; gap:21px; align-items:center; font:500 11px DM Mono,monospace; } .button { display:inline-flex; align-items:center; gap:18px; padding:14px 18px; font-size:11px; font-weight:700; letter-spacing:.02em; transition:.2s ease; } .button span,.text-link span { font-size:15px; } .button-dark { color:var(--white); background:var(--ink); } .button-dark:hover { background:#33332f; } .button-accent { background:var(--accent); color:var(--ink); } .button-accent:hover { background:#f2ff9c; transform:translateY(-2px); } .menu-toggle { display:none; border:0; background:none; padding:8px; }
.hero { position:relative; height:640px; padding-top:0; padding-bottom:0; color:var(--white); background:#081012; overflow:hidden; } .hero-image,.hero-overlay { position:absolute; inset:0; } .hero-image img { height:100%; object-position:center; filter:saturate(.9) contrast(1.02); } .hero-overlay { background:linear-gradient(90deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.08) 48%,rgba(0,0,0,.04) 100%); } .hero-content { position:relative; z-index:1; max-width:630px; padding:145px 0 0; } .eyebrow,.section-label { font:500 10px/1 DM Mono,monospace; letter-spacing:.14em; } .eyebrow { color:var(--accent); } .hero h1 { margin:20px 0 18px; font:600 clamp(54px,7.5vw,102px)/.92 Barlow Condensed,Arial,sans-serif; letter-spacing:-.01em; text-transform:uppercase; } .hero p { max-width:430px; color:rgba(255,255,255,.74); font-size:13px; line-height:1.9; } .hero .button { margin-top:22px; } .hero-meta { position:absolute; z-index:1; right:36px; bottom:31px; display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.68); font:10px DM Mono,monospace; letter-spacing:.12em; } .hero-meta .line { width:92px; height:1px; background:rgba(255,255,255,.45); }
.intro { min-height:395px; padding-top:100px; padding-bottom:95px; display:grid; grid-template-columns:1fr 2fr 1fr; gap:30px; border-bottom:1px solid var(--line); } .section-label { color:#92928b; } .intro-copy h2,.section-heading h2,.contact-panel h2 { margin:10px 0 19px; font:600 51px/.99 Barlow Condensed,Arial,sans-serif; letter-spacing:.01em; text-transform:uppercase; } em { color:#8c8c85; font-style:normal; } .intro-copy p { max-width:470px; color:var(--muted); font-size:13px; line-height:1.9; } .text-link { display:inline-flex; align-items:center; gap:16px; margin-top:19px; padding-bottom:7px; border-bottom:1px solid currentColor; font-size:12px; font-weight:700; } .intro-stat { border-left:1px solid var(--line); padding-left:35%; align-self:center; display:flex; flex-direction:column; gap:5px; } .intro-stat strong { font:600 90px/.75 Barlow Condensed,Arial,sans-serif; } .intro-stat span { color:var(--muted); font:11px/1.45 DM Mono,monospace; }
.section { padding-top:105px; padding-bottom:110px; } .section-heading { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:39px; } .section-heading h2 { margin-bottom:0; } .section-heading > p { width:250px; margin:0; color:var(--muted); font-size:12px; line-height:1.7; } .build-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .build-card { position:relative; overflow:hidden; background:#deddd7; } .build-card img { aspect-ratio:1/1.25; transition:transform .45s ease; } .build-card:hover img { transform:scale(1.045); } .build-card:after { content:""; position:absolute; inset:35% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.84)); pointer-events:none; } .build-info { position:absolute; z-index:1; inset:auto 23px 22px; color:var(--white); } .build-tag { color:var(--accent); font:10px DM Mono,monospace; } .build-info h3 { margin:9px 0 4px; font:600 35px/1 Barlow Condensed,Arial,sans-serif; letter-spacing:.01em; } .build-info p { margin:0; color:rgba(255,255,255,.68); font-size:11px; } .build-price { display:block; margin-top:16px; font:500 11px DM Mono,monospace; }
.section-dark { color:var(--white); background:var(--night); } .light .section-label,.light-link { color:var(--accent); } .parts-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .part-card { border-top:1px solid #3a3b37; } .part-card img { aspect-ratio:1.18/1; filter:saturate(.72); } .part-meta { padding:20px 0 8px; display:flex; justify-content:space-between; gap:18px; } .part-meta h3 { margin:0; font:600 26px/1.05 Barlow Condensed,Arial,sans-serif; } .part-meta span { color:var(--accent); font:10px DM Mono,monospace; } .part-card p { margin:0 0 15px; color:#9e9f98; font-size:11px; line-height:1.7; }
.case-grid { display:grid; grid-template-columns:1.25fr 1fr; gap:18px; } .case-card { position:relative; min-height:410px; overflow:hidden; color:var(--white); } .case-card img { height:100%; position:absolute; inset:0; transition:transform .45s ease; } .case-card:hover img { transform:scale(1.04); } .case-card:after { content:""; position:absolute; inset:35% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.83)); } .case-card:first-child { min-height:500px; } .case-content { position:absolute; z-index:1; inset:auto 27px 26px; } .case-content small { color:var(--accent); font:10px DM Mono,monospace; } .case-content h3 { margin:10px 0 7px; font:600 37px/1 Barlow Condensed,Arial,sans-serif; } .case-content p { max-width:390px; margin:0; color:rgba(255,255,255,.72); font-size:11px; line-height:1.65; }
.journal-band { padding:100px 0 110px; color:var(--white); background:#30322d; } .article-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; } .article-card { border-top:1px solid #666861; padding-top:17px; } .article-card img { aspect-ratio:1.5/1; margin-bottom:20px; } .article-meta { display:flex; justify-content:space-between; color:var(--accent); font:10px DM Mono,monospace; } .article-card h3 { margin:13px 0 9px; font:600 28px/1.05 Barlow Condensed,Arial,sans-serif; } .article-card p { margin:0; color:#b2b3ac; font-size:11px; line-height:1.7; }
.contact-section { padding-top:100px; padding-bottom:100px; } .contact-panel { border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); padding:57px 0 63px; display:grid; grid-template-columns:2fr 1fr; gap:30px; } .contact-panel h2 { font-size:66px; margin:17px 0 0; } .contact-detail { padding-top:12px; } .contact-detail p { margin:0 0 24px; color:var(--muted); font-size:13px; line-height:1.8; } .contact-detail small { display:block; margin-top:17px; color:var(--muted); font:10px DM Mono,monospace; } .site-footer { border-top:1px solid var(--line); } .footer-inner { min-height:125px; display:flex; align-items:center; justify-content:space-between; gap:30px; } .footer-brand { min-width:auto; } .footer-inner > p { flex:1; margin:0; color:var(--muted); font-size:11px; } .footer-links { display:flex; gap:22px; color:var(--muted); font-size:11px; } .footer-links a:hover { color:var(--ink); } .toast { position:fixed; z-index:50; bottom:28px; left:50%; padding:11px 17px; color:var(--white); background:var(--ink); font-size:12px; transform:translate(-50%,20px); opacity:0; pointer-events:none; transition:.25s; } .toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width: 900px) { .page-width { padding-left:20px; padding-right:20px; } .header-inner { height:68px; gap:0; justify-content:space-between; } .header-action { display:none; } .menu-toggle { display:flex; flex-direction:column; gap:5px; } .menu-toggle span { width:23px; height:1px; background:var(--ink); } .site-nav { display:none; position:absolute; left:0; right:0; top:68px; flex-direction:column; align-items:flex-start; gap:0; padding:8px 20px 16px; background:var(--paper); border-bottom:1px solid var(--line); } .site-nav.open { display:flex; } .site-nav a { padding:13px 0; width:100%; } .site-nav a.active:after { display:none; } .hero { height:600px; } .hero-image img { object-position:66% center; } .hero-overlay { background:linear-gradient(90deg,rgba(0,0,0,.64),rgba(0,0,0,.16)); } .hero-content { padding:120px 0 0; } .intro { grid-template-columns:1fr; gap:25px; padding-top:75px; padding-bottom:75px; } .intro-stat { border-left:0; border-top:1px solid var(--line); padding:25px 0 0; } .intro-stat strong { font-size:70px; } .section { padding-top:75px; padding-bottom:75px; } .section-heading { align-items:flex-start; flex-direction:column; gap:18px; } .build-grid,.parts-grid,.article-grid { grid-template-columns:1fr; } .build-card img { aspect-ratio:1.2/1; } .case-grid { grid-template-columns:1fr; } .case-card,.case-card:first-child { min-height:390px; } .contact-panel { grid-template-columns:1fr; padding:42px 0; } .contact-panel h2 { font-size:54px; } .footer-inner { padding-top:28px; padding-bottom:28px; align-items:flex-start; flex-direction:column; } }
@media (max-width: 500px) { .announcement-inner span:first-child { display:none; } .announcement-inner { justify-content:flex-end; gap:14px; } .hero { height:550px; } .hero h1 { font-size:61px; } .hero-meta { right:20px; font-size:8px; } .hero-meta .line { width:45px; } .intro-copy h2,.section-heading h2 { font-size:43px; } .build-info h3 { font-size:31px; } .case-content h3 { font-size:32px; } }
.article-grid > #articleGrid { display:contents; }

.visual-story { padding-top:94px; padding-bottom:104px; }
.visual-story-head { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:34px; }
.visual-story-head h2 { max-width:720px; margin:11px 0 0; font:600 clamp(42px,5vw,72px)/.94 Barlow Condensed,Arial,sans-serif; letter-spacing:.01em; }
.visual-story-head p { max-width:260px; margin:0 0 4px; color:var(--muted); font-size:12px; line-height:1.8; }
.visual-gallery { display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:250px 190px; gap:14px; }
.visual-tile { position:relative; min-height:0; overflow:hidden; background:#242722; color:var(--white); }
.visual-tile img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease, filter .5s ease; }
.visual-tile:hover img { transform:scale(1.045); filter:saturate(1.08); }
.visual-tile:after { content:""; position:absolute; inset:32% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.72)); pointer-events:none; }
.tile-1 { grid-column:1 / span 2; grid-row:1 / span 2; }
.tile-2 { grid-column:3 / span 2; grid-row:1; }
.tile-3 { grid-column:5; grid-row:1; }
.tile-4 { grid-column:3; grid-row:2; }
.tile-5 { grid-column:4; grid-row:2; }
.tile-6 { grid-column:5; grid-row:2; }
.visual-tile-overlay { position:absolute; z-index:1; right:18px; bottom:16px; left:18px; display:flex; flex-direction:column; gap:6px; }
.visual-tile-overlay span { color:var(--accent); font:10px DM Mono,monospace; letter-spacing:.08em; text-transform:uppercase; }
.visual-tile-overlay strong { font:600 25px/1 Barlow Condensed,Arial,sans-serif; }

/* Keep the hero broad without making every foreground element edge-to-edge. */
.hero { width:calc(100% - clamp(24px,3vw,56px)); max-width:1800px; height:clamp(600px,38vw,680px); padding-left:clamp(32px,4vw,72px); padding-right:clamp(32px,4vw,72px); }
.hero-image img { object-position:50% 48%; }
.hero-overlay { background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.42) 37%,rgba(0,0,0,.08) 72%,rgba(0,0,0,.02) 100%); }
.hero-content { padding-top:125px; }
.hero h1 { max-width:580px; font-size:clamp(54px,6vw,88px); overflow-wrap:anywhere; }
.hero p { max-width:min(430px,100%); }

.contact-person { display:flex; flex-direction:column; gap:4px; margin-bottom:22px; }
.contact-person strong, .contact-hotline > strong { font:600 28px/1 Barlow Condensed,Arial,sans-serif; }
.contact-hotline { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.contact-person span { color:var(--muted); font-size:11px; line-height:1.45; }
.contact-person span:last-child { color:var(--ink); }
.build-card img, .part-card img, .article-card img { object-fit:contain; background:#eef1f3; }
.build-card img { aspect-ratio:1.1/1; }
.part-card img { aspect-ratio:1.18/1; padding:12px; }
.article-card img { padding:10px; }
.case-card img { object-fit:cover; }
.build-specs, .part-specs { margin-top:8px !important; color:rgba(255,255,255,.84) !important; line-height:1.55 !important; }
.build-specs b, .part-specs b { color:var(--accent); font:10px/1.2 DM Mono,monospace; letter-spacing:.08em; margin-right:5px; }
.build-specs { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.part-specs { color:#c5c7c0 !important; border-left:2px solid var(--accent); padding-left:10px; }
.part-specs b { display:block; margin:0 0 4px; }
.build-description b, .part-description b { color:var(--accent); font:10px/1.2 DM Mono,monospace; letter-spacing:.08em; margin-right:5px; }
.part-description { color:#d0d1cb !important; }
.product-directory { background:#f4f3ef; }
.model-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
.model-card { min-width:0; background:#fff; border:1px solid #deded8; overflow:hidden; }
.model-card img { aspect-ratio:1.25/1; object-fit:contain; background:#eef1f3; }
.model-card-body { padding:16px 16px 18px; }
.model-card h3 { margin:9px 0; font:600 25px/1.05 Barlow Condensed,Arial,sans-serif; overflow-wrap:anywhere; }
.model-card p { margin:0 0 9px; color:#62645d; font-size:11px; line-height:1.65; overflow-wrap:anywhere; }
.model-card p b { color:#566000; font:10px DM Mono,monospace; }
.catalog-card-meta { display:flex; justify-content:space-between; gap:12px; color:#7c7e76; font:10px DM Mono,monospace; }
.catalog-card-meta span { color:#728600; }

.product-taxonomy { display:grid; gap:10px; margin:-8px 0 34px; padding:16px 18px; background:#e9e9e3; border:1px solid #d8d8d0; }
.taxonomy-level { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.taxonomy-level-two { padding-top:10px; border-top:1px solid #d7d7cf; }
.taxonomy-label { flex:0 0 76px; color:#74766e; font:10px DM Mono,monospace; letter-spacing:.08em; }
.taxonomy-button { border:1px solid transparent; padding:8px 11px; color:#575952; background:transparent; font-size:12px; line-height:1.2; cursor:pointer; }
.taxonomy-button:hover,.taxonomy-button.active { border-color:var(--ink); color:var(--white); background:var(--ink); }
.model-card-body { display:flex; flex-direction:column; align-items:stretch; }
.model-card .model-intro { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; min-height:74px; }
.product-detail-button { align-self:flex-start; margin-top:6px; padding:8px 0 5px; border:0; border-bottom:1px solid currentColor; color:#4f5900; background:none; font-size:11px; font-weight:700; cursor:pointer; }
.product-detail-button span { margin-left:7px; font-size:14px; }
.product-detail-button:hover { color:var(--ink); }
.directory-empty { grid-column:1 / -1; padding:40px 0; color:var(--muted); }
.product-modal { position:fixed; inset:0; z-index:110; display:grid; place-items:center; padding:30px; background:rgba(10,11,10,.84); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease,visibility .2s ease; }
.product-modal.open { opacity:1; visibility:visible; pointer-events:auto; }
.product-modal-panel { position:relative; display:grid; grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr); width:min(1080px,100%); max-height:min(760px,calc(100vh - 60px)); overflow:auto; background:#f6f6f2; box-shadow:0 24px 80px rgba(0,0,0,.35); }
.product-modal-media { min-height:360px; background:#edf0f1; }
.product-modal-media img { width:100%; height:100%; min-height:360px; object-fit:contain; }
.product-modal-copy { padding:38px 42px 42px; }
.product-directory-path { display:grid; gap:7px; margin:0 48px 20px 0; }
.product-directory-path > div { display:grid; grid-template-columns:62px minmax(0,1fr); align-items:start; gap:10px; }
.product-directory-path span { color:#81837b; font:10px/1.45 DM Mono,monospace; letter-spacing:.08em; }
.product-directory-path strong { color:#41433d; font-size:12px; line-height:1.45; overflow-wrap:anywhere; }
.product-directory-path > div:last-child strong { color:#5d6600; }
.product-modal-copy h2 { margin:0 0 26px; font:600 42px/.98 Barlow Condensed,Arial,sans-serif; overflow-wrap:anywhere; }
.product-modal-copy section { padding:16px 0 0; border-top:1px solid #dcdcd5; }
.product-modal-copy section + section { margin-top:18px; }
.product-modal-copy h3 { margin:0 0 8px; color:#5d6600; font:10px DM Mono,monospace; letter-spacing:.08em; }
.product-modal-copy p { margin:0; color:#565850; font-size:12px; line-height:1.8; white-space:pre-line; overflow-wrap:anywhere; }
.product-modal-close { position:absolute; z-index:1; top:14px; right:16px; width:40px; height:40px; border:1px solid #cfd0c8; color:#34362f; background:#f6f6f2; font-size:26px; cursor:pointer; }
.product-modal-close:hover,.product-modal-close:focus-visible { color:#fff; background:#20221e; outline:0; }

@media (max-width: 900px) {
  .hero { width:100%; max-width:none; margin-left:0; margin-right:0; padding-left:20px; padding-right:20px; }
  .hero-content { padding-top:120px; }
  .visual-story { padding-top:75px; padding-bottom:78px; }
  .visual-story-head { align-items:flex-start; flex-direction:column; gap:18px; }
  .visual-story-head h2 { font-size:52px; }
  .visual-story-head p { max-width:400px; }
  .hero-image img { object-position:54% center; }
  .visual-gallery { grid-template-columns:1fr 1fr; grid-template-rows:260px 180px 180px 190px; }
  .tile-1 { grid-column:1 / span 2; grid-row:1; }
  .tile-2 { grid-column:1; grid-row:2; }
  .tile-3 { grid-column:2; grid-row:2; }
  .tile-4 { grid-column:1; grid-row:3; }
  .tile-5 { grid-column:2; grid-row:3; }
  .tile-6 { grid-column:1 / span 2; grid-row:4; }
}

@media (max-width: 500px) {
  .announcement-inner { justify-content:center; }
  .announcement-inner a { display:none; }
  .hero { height:550px; }
  .hero h1 { font-size:48px; line-height:.95; }
  .hero p { max-width:330px; font-size:12px; line-height:1.75; overflow-wrap:anywhere; }
  .hero-meta { display:none; }
  .visual-story-head h2 { font-size:43px; }
  .hero-image img { object-position:57% center; }
  .visual-gallery { grid-template-rows:220px 150px 150px 165px; gap:10px; }
  .visual-tile-overlay { right:13px; bottom:12px; left:13px; }
  .visual-tile-overlay strong { font-size:21px; }
}

@media (max-width: 900px) {
  .build-card { display:flex; flex-direction:column; }
  .build-card:after { display:none; }
  .build-card img { flex:0 0 auto; }
  .build-info { position:relative; inset:auto; padding:18px 18px 20px; background:var(--night); }
  .build-info p { line-height:1.65; }
  .build-specs { display:block; -webkit-line-clamp:unset; overflow:visible; }
  .model-grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
  .product-modal { padding:16px; }
  .product-modal-panel { grid-template-columns:1fr; max-height:calc(100vh - 32px); }
  .product-modal-media,.product-modal-media img { min-height:240px; height:240px; }
  .product-modal-copy { padding:28px 22px 30px; }
  .product-modal-copy h2 { font-size:35px; }
  .product-directory-path { margin-right:42px; }
}

@media (max-width: 500px) {
  .model-grid { grid-template-columns:1fr; }
  .product-taxonomy { margin-left:-4px; margin-right:-4px; padding:13px 12px; }
  .taxonomy-label { flex-basis:100%; }
  .taxonomy-button { padding:7px 8px; font-size:11px; }
}

main img { cursor:zoom-in; }
.hero-overlay,.visual-tile-overlay,.case-card:after { pointer-events:none; }
body.lightbox-open { overflow:hidden; }
.image-lightbox { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:54px 82px 28px; color:var(--white); background:rgba(10,11,10,.96); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease,visibility .2s ease; }
.image-lightbox.open { opacity:1; visibility:visible; pointer-events:auto; }
.lightbox-figure { width:100%; height:100%; margin:0; display:grid; grid-template-rows:minmax(0,1fr) 38px; place-items:center; }
.lightbox-image { width:auto; max-width:100%; height:auto; max-height:calc(100vh - 124px); object-fit:contain; cursor:zoom-out; box-shadow:0 18px 70px rgba(0,0,0,.35); }
.lightbox-figure figcaption { width:min(100%,1100px); min-height:38px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; color:rgba(255,255,255,.82); font-size:12px; }
.lightbox-caption { flex:1 1 auto; max-height:32vh; overflow:auto; white-space:pre-line; line-height:1.55; overflow-wrap:anywhere; }
.lightbox-count { color:var(--accent); font:10px DM Mono,monospace; white-space:nowrap; }
.lightbox-control { position:absolute; z-index:1; width:46px; height:46px; padding:0; border:1px solid rgba(255,255,255,.28); color:var(--white); background:rgba(10,11,10,.54); font:300 32px/1 Arial,sans-serif; }
.lightbox-control:hover,.lightbox-control:focus-visible { border-color:var(--accent); color:var(--accent); outline:0; }
.lightbox-close { top:24px; right:28px; font-size:29px; }
.lightbox-prev { left:24px; top:50%; transform:translateY(-50%); }
.lightbox-next { right:24px; top:50%; transform:translateY(-50%); }

@media (max-width: 600px) {
  .image-lightbox { padding:64px 16px 84px; }
  .lightbox-figure { grid-template-rows:minmax(0,1fr) 52px; }
  .lightbox-image { max-height:calc(100vh - 150px); }
  .lightbox-figure figcaption { align-items:flex-start; gap:10px; font-size:11px; }
  .lightbox-caption { max-height:118px; }
  .lightbox-control { width:42px; height:42px; }
  .lightbox-close { top:15px; right:16px; }
  .lightbox-prev { left:16px; top:auto; bottom:18px; transform:none; }
  .lightbox-next { right:16px; top:auto; bottom:18px; transform:none; }
}

/* Mobile overflow guard: long model names and imported Chinese copy must wrap inside the viewport. */
@media (max-width: 900px) {
  html, body { width:100%; max-width:100%; overflow-x:hidden; }
  .page-width, .header-inner, .section-heading, .section-heading > div, .intro-copy,
  .build-card, .part-card, .case-card, .article-card { min-width:0; }
  .brand, .brand > span { min-width:0; }
  .brand strong, .brand small { overflow-wrap:anywhere; }
  .section-heading h2, .intro-copy h2, .contact-panel h2,
  .build-info h3, .part-meta h3, .case-content h3, .article-card h3,
  .section-heading > p, .intro-copy p, .part-card p, .build-info p,
  .contact-detail p, .contact-detail small { max-width:100%; overflow-wrap:anywhere; word-break:break-word; }
  .section-heading h2 { width:100%; }
  .part-meta { align-items:flex-start; }
  .part-meta h3 { flex:1 1 auto; }
  .part-meta span { flex:0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .image-lightbox { transition:none; }
}

/* Product centre: category > series > model, with the same path in details. */
.directory-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:0 0 26px; color:#74766f; font-size:12px; line-height:1.8; overflow-wrap:anywhere; }
.directory-breadcrumb a { color:inherit; text-decoration:none; }
.directory-breadcrumb a:hover { color:#596600; text-decoration:underline; }
.directory-breadcrumb strong { color:#333830; font-weight:600; }
.directory-layout { display:grid; grid-template-columns:250px minmax(0,1fr); gap:30px; align-items:start; }
.directory-sidebar { position:sticky; top:100px; min-width:0; background:#fff; border:1px solid #deded8; }
.directory-sidebar summary { padding:19px; color:#2e352a; cursor:pointer; font-size:15px; font-weight:600; border-bottom:1px solid #e5e6df; list-style:none; }
.directory-sidebar summary span { display:none; }
.directory-sidebar nav { padding:9px 0 16px; max-height:calc(100vh - 190px); overflow:auto; }
.directory-sidebar:not([open]) > nav { display:block; }
.directory-sidebar a,.modal-directory a { display:block; padding:12px 18px; font-size:13px; line-height:1.55; overflow-wrap:anywhere; color:#565b51; text-decoration:none; }
.directory-sidebar a:hover,.modal-directory a:hover { background:#f1f3e9; color:#4e5c00; }
.directory-sidebar a.active,.modal-directory a.active { background:#eaf0d7; color:#465700; font-weight:700; box-shadow:inset 3px 0 #8caa2a; }
.directory-branch { position:relative; }
.directory-branch > a { padding-right:42px; }
.directory-branch > small { position:absolute; top:15px; right:16px; color:#92998a; font:10px monospace; pointer-events:none; }
.directory-series { margin-left:12px; border-left:1px solid #d9e0cb; }
.directory-series > a { padding:10px 12px; font-size:12px; }
.directory-models { margin:0 6px 9px 12px; border-left:1px solid #d9e0cb; }
.directory-models a { padding:8px 12px; font-size:11px; }
.directory-content { min-width:0; }
.directory-heading { display:flex; justify-content:space-between; align-items:end; gap:14px; padding-bottom:20px; margin-bottom:22px; border-bottom:1px solid #d7dbce; }
.directory-heading h3 { margin:6px 0 0; color:#282d24; font-size:25px; line-height:1.4; overflow-wrap:anywhere; }
.directory-heading > div > span { color:#7c866d; font-size:11px; letter-spacing:.14em; }
.directory-heading > span { flex-shrink:0; color:#7b8171; font-size:11px; }
.directory-content .model-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.directory-content .category-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.directory-category-card { min-width:0; background:#fff; border:1px solid #e0e3d8; text-decoration:none; color:inherit; transition:box-shadow .2s,border-color .2s; }
.directory-category-card:hover { border-color:#8b9f56; box-shadow:0 8px 22px #23330d12; }
.directory-category-visual { display:grid; place-items:center; aspect-ratio:1.4; padding:22px; background:#fbfcfa; }
.directory-category-visual img { width:100%; height:100%; min-height:0; object-fit:contain; mix-blend-mode:multiply; cursor:pointer; }
.directory-category-card > div:last-child { padding:18px; }
.directory-category-card small { font-size:10px; color:#869275; }
.directory-category-card h4 { min-height:44px; margin:10px 0; font-size:16px; line-height:1.5; overflow-wrap:anywhere; }
.directory-category-card p { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; margin:0; color:#8b9084; font-size:11px; }
.directory-category-card p span { color:#526800; }
.model-image-link { display:block; }
.model-card .model-intro { min-height:0; -webkit-line-clamp:3; font-size:12px; }
.model-card h3 { font-size:20px; line-height:1.35; }
.model-card .catalog-card-meta { line-height:1.6; }
.model-card img { padding:16px; background:#fbfcfa; box-sizing:border-box; }
.model-card-body .product-detail-button { margin-top:auto; text-decoration:none; }
.product-modal { padding:24px; }
.product-modal-panel { display:grid; grid-template-columns:235px minmax(0,1fr); align-items:start; width:min(1280px,100%); max-height:calc(100dvh - 48px); background:#fff; }
.modal-breadcrumb { grid-column:1/-1; position:relative; margin:0; padding:22px 74px 20px 26px; border-bottom:1px solid #e2e6da; background:#f6f8f0; }
.product-modal-close { position:sticky; float:right; grid-column:1/-1; justify-self:end; top:0; right:0; margin:8px 14px -49px 0; z-index:4; border-radius:50%; }
.modal-directory { position:sticky; top:0; align-self:start; max-height:calc(100dvh - 140px); overflow:auto; padding:20px 0; border-right:1px solid #e2e6da; }
.modal-directory > h3 { margin:0 18px 12px; color:#38452a; font-size:15px; }
.product-modal-main { min-width:0; }
.product-modal-overview { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:26px; padding:30px; }
.product-modal-media { min-height:0; background:#f8faf5; }
.product-modal-media img { width:100%; height:270px; min-height:0; object-fit:contain; padding:14px; box-sizing:border-box; }
.product-modal-overview h2 { margin:14px 0; font-size:28px; line-height:1.35; overflow-wrap:anywhere; }
.product-modal-overview p { margin:0 0 18px; color:#6f7567; font-size:12px; line-height:1.9; overflow-wrap:anywhere; }
.product-modal-overview .section-label { line-height:1.7; font-size:10px; }
.product-modal-overview .text-link { font-size:12px; }
.product-section-nav { display:flex; position:sticky; top:0; z-index:2; flex-wrap:wrap; gap:20px; padding:16px 30px; border-top:1px solid #e4e8da; border-bottom:1px solid #e4e8da; background:#f5f7ee; }
.product-section-nav a { color:#536139; font-size:13px; text-decoration:none; }
.product-section-nav a:hover { text-decoration:underline; }
.product-modal-copy { padding:26px 30px 40px; }
.product-modal-copy > section { scroll-margin-top:66px; padding:0; border:0; }
.product-modal-copy > section + section { margin-top:36px; }
.product-modal-copy > section > h3 { padding:0 0 12px; margin:0 0 18px; color:#3f5128; border-bottom:1px solid #e0e5d5; font:600 19px/1.5 Arial,sans-serif; letter-spacing:0; }
.product-rich-content { color:#555e4c; font:13px/1.9 Arial,sans-serif; overflow-wrap:anywhere; }
.product-rich-content p { margin:10px 0; color:inherit; font:inherit; white-space:pre-line; }
.product-rich-content h4,.product-rich-content h5 { margin:24px 0 12px; font-size:15px; color:#354629; }
.product-rich-content img { display:block; width:auto; max-width:100%; height:auto; max-height:580px; margin:18px auto; object-fit:contain; }
.product-rich-content ul,.product-rich-content ol { padding-left:22px; }
.spec-table-scroll { max-width:100%; overflow-x:auto; margin:12px 0; border:1px solid #dfe5d4; }
.product-rich-content table { width:100%; min-width:420px; border-collapse:collapse; font-size:12px; line-height:1.7; }
.product-rich-content td,.product-rich-content th { padding:12px; text-align:left; border:1px solid #dfe5d4; vertical-align:top; min-width:80px; }
.product-rich-content th,.product-rich-content tr:first-child { background:#edf2e3; color:#354629; }
.product-rich-content td p,.product-rich-content th p { margin:0; }
.product-rich-content tbody tr:nth-child(even) { background:#f9fbf5; }
@media(max-width:1150px) { .directory-layout { grid-template-columns:220px minmax(0,1fr); gap:20px; } .directory-content .model-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:900px) {
 .directory-layout { grid-template-columns:1fr; gap:22px; }
 .directory-sidebar { position:static; }
 .directory-sidebar summary { display:flex; justify-content:space-between; align-items:center; }
 .directory-sidebar summary span { display:block; font-size:10px; color:#83906f; font-weight:400; }
 .directory-sidebar:not([open]) > nav { display:none; }
 .directory-sidebar nav { max-height:50vh; }
 .directory-content .category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .product-modal { padding:12px; }
 .product-modal-panel { grid-template-columns:1fr; max-height:calc(100dvh - 24px); }
 .modal-directory { position:static; max-height:none; padding:8px 14px; border:0; border-bottom:1px solid #e2e6da; }
 .modal-directory > h3 { font-size:12px; margin:6px 0 8px; }
 .modal-directory > nav > a,.modal-directory .directory-branch > a,.modal-directory .directory-branch > small { display:none; }
 .modal-directory .directory-series { display:flex; flex-wrap:wrap; gap:6px; margin:0; border:0; }
 .modal-directory .directory-series > a { padding:6px 9px; border:1px solid #e0e6d6; font-size:11px; }
 .modal-directory .directory-models { display:none; }
 .modal-breadcrumb { padding:18px 54px 18px 18px; font-size:11px; gap:5px 8px; }
 .product-modal-overview { padding:20px; gap:18px; }
 .product-modal-media img { height:210px; }
 .product-modal-overview h2 { font-size:24px; }
 .product-modal-copy { padding:22px 20px 30px; }
 .product-section-nav { padding:14px 20px; gap:22px; }
}
@media(max-width:500px) {
 .directory-heading { align-items:start; flex-direction:column; gap:8px; }
 .directory-heading h3 { font-size:23px; }
 .directory-content .model-grid { grid-template-columns:1fr; }
 .directory-content .category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .directory-category-visual { padding:12px; }
 .directory-category-card > div:last-child { padding:12px; }
 .directory-category-card h4 { font-size:13px; min-height:40px; }
 .directory-category-card small { font-size:9px; }
 .product-modal-overview { grid-template-columns:1fr; gap:14px; }
 .product-modal-media img { height:230px; }
 .product-modal-overview h2 { font-size:25px; }
 .product-modal-copy { padding:20px 16px 30px; }
 .product-rich-content { font-size:12px; }
 .product-modal-close { margin-right:8px; width:36px; height:36px; }
}