:root { --blue:#285d9b; --deep-blue:#194a82; --ink:#2d2d2d; --footer:#202020; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#fff; color:var(--ink); font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:1.6; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.skip-link { position:fixed; left:16px; top:-60px; z-index:1000; background:#fff; padding:10px 14px; box-shadow:0 3px 16px #0003; }
.skip-link:focus { top:12px; }
.section, .topbar-inner, .header-inner, .footer-inner { width:min(1120px, calc(100% - 40px)); margin-inline:auto; }
.topbar { border-bottom:1px solid #ececec; background:#fff; color:#626262; font-size:12px; }
.topbar-inner { min-height:34px; display:flex; align-items:center; gap:34px; }
.topbar-social { margin-left:auto; display:flex; gap:12px; }
.topbar-social a { display:grid; width:23px; height:23px; place-items:center; color:#8c8c8c; border:1px solid #d8d8d8; border-radius:50%; }
.site-header { position:relative; z-index:20; height:92px; background:#fff; box-shadow:0 1px 7px #00000012; }
.header-inner { height:100%; display:flex; align-items:center; justify-content:space-between; }
.brand img { width:240px; height:auto; }
.desktop-nav { display:flex; align-items:center; gap:34px; text-transform:uppercase; font-size:12px; letter-spacing:.04em; }
.desktop-nav>a, .nav-dropdown>a { padding:35px 0; border-top:3px solid transparent; }
.desktop-nav>a:hover, .nav-dropdown:hover>a { color:var(--blue); border-color:var(--blue); }
.nav-dropdown { position:relative; }
.nav-dropdown>div { display:none; position:absolute; top:77px; left:-18px; min-width:150px; background:#fff; padding:8px 0; box-shadow:0 9px 24px #0002; }
.nav-dropdown:hover>div, .nav-dropdown:focus-within>div { display:grid; }
.nav-dropdown>div a { padding:8px 18px; }
.nav-dropdown>div a:hover { background:#f4f7fb; color:var(--blue); }
.mobile-nav { display:none; position:relative; }
.mobile-nav summary { cursor:pointer; font-size:27px; list-style:none; }
.mobile-nav nav { position:absolute; right:0; top:45px; width:250px; display:grid; background:#fff; box-shadow:0 10px 28px #0003; }
.mobile-nav nav a { padding:11px 16px; border-bottom:1px solid #eee; }
.hero { position:relative; height:550px; overflow:hidden; background:#f5f3fa; }
.hero-slide { position:absolute; inset:0; opacity:0; animation:hero-fade 18s infinite; }
.hero-slide-2 { animation-delay:6s; } .hero-slide-3 { animation-delay:12s; }
.hero-slide img { width:100%; height:100%; object-fit:cover; }
.hero-copy { position:absolute; left:max(7%, calc((100% - 1120px)/2)); top:50%; width:min(440px, 46vw); transform:translateY(-50%); padding:24px 28px; background:#ffffffd9; border-left:5px solid var(--blue); box-shadow:0 8px 28px #0002; }
.hero-copy h1 { margin:0; color:var(--deep-blue); font-size:clamp(26px, 3.4vw, 48px); line-height:1.08; }
.hero-copy p { margin:12px 0 0; font-size:18px; }
@keyframes hero-fade { 0%, 30% { opacity:1; } 34%, 96% { opacity:0; } 100% { opacity:1; } }
.product-highlights, .recent-products { padding:62px 0 72px; }
.recent-products { padding-top:0; }
.section-heading { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:28px; margin-bottom:38px; }
.section-heading span { height:1px; background:#e4e4e4; }
.section-heading h1, .section-heading h2 { margin:0; color:var(--blue); text-transform:uppercase; font-size:25px; letter-spacing:.03em; }
.section-heading.compact h2 { font-size:20px; }
.highlight-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:25px; }
.highlight-card { position:relative; min-height:170px; display:grid; place-items:center; overflow:hidden; background:#fff; border:1px solid #eee; }
.highlight-card img { width:100%; height:170px; object-fit:contain; padding:10px; transition:transform .25s ease; }
.highlight-card span { position:absolute; inset:auto 0 0; padding:8px 10px; background:#1f4f88e6; color:#fff; text-align:center; font-size:12px; opacity:0; transform:translateY(100%); transition:.25s ease; }
.highlight-card:hover img { transform:scale(1.04); } .highlight-card:hover span { opacity:1; transform:none; }
.more-products { min-height:170px; display:flex; flex-direction:column; justify-content:center; align-items:center; background:#fafafa; border:1px solid #e7e7e7; color:#454545; text-transform:uppercase; font-size:21px; line-height:1.15; }
.more-products span { margin-top:8px; color:var(--blue); font-size:30px; }
.product-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:34px 24px; }
.product-card { text-align:center; }
.product-image-wrap { display:grid; place-items:center; height:235px; padding:8px; background:#fff; border:1px solid #e8e8e8; overflow:hidden; }
.product-image-wrap img { width:100%; height:100%; object-fit:contain; transition:transform .25s ease; }
.product-card:hover .product-image-wrap img { transform:scale(1.035); }
.product-card h2 { min-height:48px; margin:14px 0 4px; font-size:17px; line-height:1.4; font-weight:500; }
.product-card h2 a:hover { color:var(--blue); }
.view-more { color:var(--blue); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.page-banner { padding:30px 0 27px; background:#f5f5f5; border-bottom:1px solid #e9e9e9; }
.page-banner .section { display:flex; align-items:center; justify-content:space-between; }
.page-banner h1 { margin:0; color:#313131; font-size:28px; font-weight:500; }
.page-banner p { margin:0; color:#8b8b8b; font-size:12px; }
.page-banner p a { color:var(--blue); }
.catalogue-layout { display:grid; grid-template-columns:minmax(0, 1fr) 250px; gap:46px; padding-block:54px 80px; }
.result-line { margin:0 0 25px; color:#777; }
.pagination { display:flex; justify-content:center; gap:6px; margin-top:45px; }
.pagination a, .pagination span { display:grid; min-width:35px; height:35px; place-items:center; border:1px solid #ddd; }
.pagination .current { background:var(--blue); border-color:var(--blue); color:#fff; }
.category-sidebar { border-left:1px solid #eee; padding-left:25px; }
.category-sidebar h2 { margin:0 0 18px; color:#555; font-size:15px; text-transform:uppercase; letter-spacing:.04em; }
.category-sidebar ul { margin:0; padding:0; list-style:none; }
.category-sidebar li { border-bottom:1px solid #eee; }
.category-sidebar a { display:block; padding:7px 0; color:#666; font-size:13px; }
.category-sidebar a:hover, .category-sidebar a.active { color:var(--blue); }
.product-detail { display:grid; grid-template-columns:minmax(280px, 44%) 1fr; gap:42px; }
.product-gallery-main { display:grid; place-items:center; min-height:380px; border:1px solid #e6e6e6; }
.product-gallery-main img { max-height:470px; object-fit:contain; }
.product-thumbnails { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-top:10px; }
.product-thumbnails a { display:grid; height:85px; place-items:center; border:1px solid #e5e5e5; }
.product-thumbnails img { width:100%; height:100%; object-fit:contain; }
.product-summary h1 { margin:12px 0; color:#222; font-size:31px; line-height:1.25; font-weight:500; }
.product-category-line { margin:0; color:#777; font-size:13px; } .product-category-line a { color:var(--blue); }
.description-panel { grid-column:1 / -1; margin-top:30px; border-top:1px solid #ddd; }
.description-panel h2 { display:inline-block; margin:0 0 22px; padding:13px 2px 10px; border-top:3px solid var(--blue); text-transform:uppercase; font-size:14px; }
.description-copy { max-width:800px; color:#555; } .description-copy p { margin:0 0 9px; }
.content-page { padding-block:58px 80px; }
.content-page h2 { color:var(--blue); font-size:24px; } .content-page h3 { color:#333; font-size:19px; }
.content-page p { max-width:880px; color:#595959; }
.profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:45px; align-items:start; }
.motto-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:15px; margin:28px 0 42px; }
.motto-grid div { padding:24px 15px; text-align:center; background:#f5f7fa; border-top:3px solid var(--blue); }
.motto-grid strong { display:block; color:var(--blue); font-size:28px; }
.color-chart { width:100%; max-width:900px; margin-top:28px; border:1px solid #e3e3e3; }
.swatch-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:20px; margin-top:28px; }
.swatch-grid figure { margin:0; padding:10px; border:1px solid #e3e3e3; background:#fff; text-align:center; }
.swatch-grid img { width:100%; aspect-ratio:1.35; object-fit:cover; }
.swatch-grid figcaption { padding-top:8px; font-size:12px; font-weight:700; }
.contact-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-bottom:36px; }
.contact-card { min-height:145px; padding:24px; background:#f7f7f7; border-top:3px solid var(--blue); }
.contact-card h2 { margin:0 0 8px; color:#333; font-size:16px; } .contact-card a { color:var(--blue); }
.map-frame { width:100%; height:390px; border:0; }
.site-footer { margin-top:20px; background:var(--footer); color:#a8a8a8; }
.footer-inner { display:grid; grid-template-columns:1.2fr 1fr; gap:80px; padding:54px 0 42px; }
.footer-inner h2 { margin:0 0 18px; color:#e4e4e4; text-transform:uppercase; font-size:13px; }
.footer-inner p { max-width:520px; margin:0 0 12px; font-size:13px; }
.footer-inner a { display:block; width:max-content; color:#bfbfbf; font-size:13px; } .footer-inner a:hover { color:#fff; }
.footer-inner address { margin-bottom:8px; font-style:normal; font-size:13px; }
.copyright { padding:18px 20px; border-top:1px solid #313131; color:#777; text-align:center; font-size:11px; }
.contact-dock { position:fixed; right:0; bottom:28%; z-index:30; display:grid; box-shadow:0 3px 16px #0003; }
.contact-dock a { padding:10px 14px; background:#235d9c; color:#fff; font-size:12px; } .contact-dock a:first-child { background:#229b4a; }
@media (max-width:900px) {
  .topbar-inner { gap:12px; } .topbar-inner>span { display:none; }
  .desktop-nav { display:none; } .mobile-nav { display:block; }
  .hero { height:420px; } .hero-copy { width:58vw; }
  .highlight-grid { grid-template-columns:repeat(3, 1fr); } .product-grid { grid-template-columns:repeat(2, 1fr); }
  .catalogue-layout { grid-template-columns:1fr; } .category-sidebar { border-left:0; border-top:1px solid #eee; padding:28px 0 0; }
  .category-sidebar ul { columns:2; column-gap:28px; } .contact-grid { grid-template-columns:repeat(2, 1fr); }
  .swatch-grid { grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:620px) {
  .section, .topbar-inner, .header-inner, .footer-inner { width:min(100% - 28px, 1120px); }
  .topbar { display:none; } .site-header { height:72px; } .brand img { width:190px; }
  .hero { height:330px; } .hero-copy { left:18px; width:calc(100% - 36px); padding:18px; }
  .hero-copy h1 { font-size:27px; } .hero-copy p { font-size:14px; }
  .product-highlights { padding-top:40px; } .section-heading { gap:12px; } .section-heading h1 { font-size:19px; }
  .highlight-grid { grid-template-columns:repeat(2, 1fr); gap:12px; } .highlight-card, .more-products { min-height:135px; } .highlight-card img { height:135px; }
  .product-grid { grid-template-columns:1fr; } .product-image-wrap { height:260px; }
  .page-banner .section { display:block; } .page-banner p { margin-top:5px; }
  .product-detail { grid-template-columns:1fr; } .description-panel { grid-column:auto; }
  .profile-grid { grid-template-columns:1fr; } .motto-grid { grid-template-columns:repeat(2, 1fr); }
  .contact-grid { grid-template-columns:1fr; } .footer-inner { grid-template-columns:1fr; gap:35px; } .contact-dock { bottom:18px; }
  .swatch-grid { grid-template-columns:repeat(2, 1fr); gap:10px; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } .hero-slide { animation:none; opacity:0; } .hero-slide:first-child { opacity:1; } }