:root { --ink: #0b2253; --blue: #1751c8; --muted: #61708e; --pale: #f1f5ff; --line: #dce5f4; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: 'Segoe UI', Arial, sans-serif; background: #fff; line-height: 1.65; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
.wrap { width: min(1240px, calc(100% - 48px)); margin: auto; }
.topbar { background: #0b2253; color: #e5edff; font-size: 12px; letter-spacing: .05em; }
.topbar .wrap { display: flex; justify-content: space-between; padding: 9px 0; }
.header { background: white; position: relative; z-index: 5; }
.nav { height: 90px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.logo img { width: 220px; }
.nav-links { display: flex; align-items: center; gap: 35px; font-weight: 600; font-size: 14px; }
.nav-links a:hover, .text-link:hover { color: var(--blue); }
.button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--blue); background: var(--blue); color: white; border-radius: 7px; padding: 15px 24px; font-weight: 650; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); background: #103b9b; color: white; }
.button.small { padding: 11px 18px; }
.button.ghost { background: transparent; color: var(--ink); border-color: #b9c8e4; margin-left: 8px; }
.menu-toggle { display: none; background: none; border: 0; font-size: 24px; color: var(--ink); }
.hero { background: #edf3ff; overflow: hidden; }
.hero-inner { min-height: 600px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 50px; padding: 75px 0; }
.eyebrow { display: block; color: #3568bf; font-size: 11px; letter-spacing: .18em; font-weight: 750; margin-bottom: 18px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(42px, 5.2vw, 75px); line-height: 1.05; letter-spacing: -.055em; margin-bottom: 24px; }
h1 em { color: var(--blue); font-style: normal; }
h2 { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.16; letter-spacing: -.04em; }
p { color: var(--muted); }
.hero-copy p { max-width: 480px; font-size: 17px; margin-bottom: 28px; }
.slide { display: none; animation: fade .5s ease; }
.slide.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.slider-controls { display: flex; align-items: center; gap: 18px; margin-top: 44px; font-size: 12px; font-weight: 700; }
.slider-controls button { background: white; color: var(--ink); width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; }
.hero-art { min-height: 400px; border-radius: 12px; background: #dbe8fb; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; position: relative; }
.hero-art:after { content: ''; position: absolute; width: 230px; height: 230px; border: 1px solid #b7cbeb; border-radius: 50%; left: 28%; top: 20%; }
.art-label, .art-bottom { display: flex; align-items: center; justify-content: space-between; font-size: 10px; letter-spacing: .12em; position: relative; z-index: 1; }
.art-label b { color: #7184a9; }
.hero-art img { width: 100%; position: relative; z-index: 2; filter: drop-shadow(0 18px 13px #31527c33); }
.art-bottom strong, .art-bottom span { display: block; }
.art-bottom strong { font-size: 18px; letter-spacing: 0; }
.art-bottom span { color: #6e7e9c; margin-top: 4px; }
.round-arrow { border: 1px solid #a6bddf; padding: 8px 13px; border-radius: 50%; }
.hero-strip { background: #e1ebfb; border-top: 1px solid #d2e0f5; }
.hero-strip .wrap { display: flex; justify-content: space-between; padding: 20px 0; gap: 15px; font-size: 10px; font-weight: 750; letter-spacing: .15em; }
.section { padding: 95px 0; }
.section-head { display: flex; justify-content: space-between; gap: 50px; align-items: end; margin-bottom: 34px; }
.section-head p { max-width: 360px; }
.category-grid, .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.category { background: #f3f6fc; border: 1px solid #e7edf8; border-radius: 9px; padding: 25px; min-height: 220px; transition: transform .25s, background .25s; }
.category:hover { transform: translateY(-5px); background: #e9f0fc; }
.cat-number { font-size: 11px; color: #8a9ab8; }
.cat-icon { display: block; color: #3973d1; font-size: 35px; margin: 14px 0; line-height: 1; }
.category h3 { font-size: 19px; margin-bottom: 8px; }
.cat-link, .text-link { color: var(--blue); font-size: 13px; font-weight: 700; }
.center { text-align: center; margin-top: 40px; }
.about-band { background: #f6f3ee; padding: 90px 0; }
.about-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
.about-visual { background: #dce9fb; min-height: 330px; border-radius: 10px; padding: 40px; display: flex; flex-direction: column; justify-content: space-between; color: #17439a; }
.about-visual span { font-size: 130px; font-weight: 800; letter-spacing: -.1em; line-height: 1; }
.about-visual .dot { color: #6fa3ef; font-size: inherit; }
.about-visual small { font-size: 11px; letter-spacing: .2em; font-weight: bold; }
.cta { background: var(--ink); color: white; padding: 55px 65px; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.cta h2 { margin-bottom: 10px; }.cta p { color: #b8c7e3; margin: 0; }.cta .eyebrow { color: #96bcff; }.light { background: white; color: var(--ink); border-color: white; white-space: nowrap; }
.page-hero { background: #edf3ff; padding: 95px 0; }.page-hero h1 { font-size: clamp(42px, 5vw, 68px); }.page-hero p { max-width: 570px; font-size: 17px; margin: 0; }.page-hero.compact { padding: 65px 0; }.breadcrumb { font-size: 13px; color: #5876aa; }
.product-card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }.product-visual { height: 230px; background: #eff4fd; display: flex; align-items: center; justify-content: center; padding: 25px; }.product-visual img { width: 100%; }.product-symbol { color: #4277cc; font-size: 78px; }.product-body { padding: 25px; }.product-body .eyebrow { margin-bottom: 10px; }.product-body h2 { font-size: 20px; min-height: 50px; letter-spacing: -.02em; }.product-body a { font-size: 13px; color: var(--blue); font-weight: bold; }.note { margin-top: 30px; font-size: 13px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }.contact-item { padding: 20px 0; border-bottom: 1px solid var(--line); }.contact-item b,.contact-item a { display: block; }.contact-item b { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 5px; }.contact-item p { margin: 0; }.form-card { padding: 40px; background: #f1f5fd; border-radius: 10px; }.form-card h2 { font-size: 30px; }.form-card label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 15px; }
input, textarea { display: block; background: white; color: var(--ink); width: 100%; border: 1px solid #d6e1f1; border-radius: 5px; padding: 13px; margin-top: 5px; }textarea { min-height: 120px; resize: vertical; }
footer { background: #081b41; color: white; padding: 70px 0 20px; }footer p { color: #9eb0d0; }footer a { display: block; color: #c8d6ec; font-size: 14px; margin: 8px 0; overflow-wrap: anywhere; }footer h3 { font-size: 15px; }.footer-grid { display: grid; grid-template-columns: 1.3fr .6fr 1fr; gap: 80px; }.footer-logo { width: 220px; border-radius: 4px; }.footer-bottom { color: #9eb0d0; border-top: 1px solid #24385f; margin-top: 45px; padding-top: 20px; font-size: 12px; }
dialog { border: 0; border-radius: 12px; max-width: 490px; width: calc(100% - 32px); padding: 38px; box-shadow: 0 20px 70px #00133344; }dialog::backdrop { background: #05132bbd; }dialog h2 { font-size: 32px; }dialog input, dialog textarea { margin-bottom: 12px; }.close { float: right; border: 0; background: none; font-size: 28px; }
@media (max-width: 800px) { .menu-toggle { display: block; }.nav { height: 75px; }.logo img { width: 190px; }.nav-links { display: none; position: absolute; left: 0; top: 100%; width: 100%; padding: 22px 24px; background: white; flex-direction: column; align-items: stretch; gap: 17px; box-shadow: 0 12px 20px #071d3d14; }.nav-links.open { display: flex; }.hero-inner,.about-layout,.contact-grid { grid-template-columns: 1fr; gap: 40px; }.hero-inner { padding: 55px 0; }.hero-art { min-height: 300px; }.category-grid,.product-grid { grid-template-columns: repeat(2, 1fr); }.section { padding: 65px 0; }.section-head { display: block; }.about-band { padding: 65px 0; }.footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }.cta { padding: 35px; } }
@media (max-width: 520px) { .wrap { width: min(100% - 32px, 1240px); }.topbar .wrap span { display: none; }.topbar .wrap { justify-content: center; }.hero-strip .wrap { flex-wrap: wrap; }.category-grid,.product-grid,.footer-grid { grid-template-columns: 1fr; }.category { min-height: 180px; }.cta { display: block; }.cta .button { margin-top: 20px; }.button.ghost { margin: 10px 0 0; }.form-card { padding: 25px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* Product photography and company branding */
.product-visual { height: auto; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; position: relative; background: #edf3ff; }
.product-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.product-card:hover .product-visual img { transform: scale(1.035); }
.product-brand { position: absolute; top: 12px; left: 12px; color: #0b2253; background: #ffffffee; font-weight: 750; font-size: 10px; letter-spacing: .08em; border-radius: 3px; padding: 7px 9px; }
.logo img { width: 210px; }
.footer-logo { background: white; padding: 4px; }

/* Image-led company section and category cards */
.about-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; }
.category { overflow: hidden; padding: 0 0 24px; }
.category-photo { width: 100%; height: 200px; object-fit: cover; }
.category .cat-number, .category h3, .category .cat-link { margin-left: 24px; margin-right: 24px; }
.category .cat-number { display: block; margin-top: 18px; }
.category h3 { margin-top: 8px; }
/* Square product photographs: preserve the entire image. */
.product-visual, .category-photo { aspect-ratio: 1 / 1; }
.product-visual { height: auto; padding: 18px; }
.product-visual img { object-fit: contain; width: 100%; height: 100%; }
.category-photo { height: auto; object-fit: contain; padding: 18px; background: #eff4fd; }
/* Accessible two-level product menu and product pages. */
.product-menu,.category-menu{position:relative}.product-menu summary,.category-menu summary{cursor:pointer;list-style:none;user-select:none}.product-menu summary::-webkit-details-marker,.category-menu summary::-webkit-details-marker{display:none}.product-menu>summary{padding:12px 0;display:flex;gap:8px;align-items:center}.product-menu>summary span{font-size:13px}.dropdown-panel{position:absolute;right:-180px;top:100%;width:300px;padding:12px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 15px 35px #0b225326;z-index:20}.all-products,.category-all{color:var(--blue)!important;font-weight:700!important}.dropdown-panel>a,.category-menu>summary,.submenu>a{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;font-size:13px;line-height:1.35;border-radius:4px}.dropdown-panel>a:hover,.category-menu>summary:hover,.submenu>a:hover{background:#f0f5ff;color:var(--blue)}.category-menu>summary span{color:var(--blue);font-size:20px;line-height:1}.submenu{position:absolute;right:100%;top:0;width:310px;max-height:65vh;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px;box-shadow:0 15px 35px #0b225326}.submenu>a{font-weight:500}.category-menu[open]>summary{background:#edf3ff;color:var(--blue)}.product-menu[open]>summary{color:var(--blue)}.product-brief{font-size:14px;line-height:1.55;margin:10px 0}.view-product{display:block;color:var(--blue);font-size:13px;font-weight:700;margin:12px 0}.detail-hero{background:#f4f7fd;padding:32px 0 85px}.detail-breadcrumb{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--muted);margin:0 0 36px}.detail-breadcrumb a:hover{color:var(--blue)}.detail-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:65px}.detail-photo{background:#fff;border:1px solid #e0e9f8;border-radius:14px;min-height:470px;display:flex;align-items:center;justify-content:center;position:relative;padding:35px}.detail-photo img{max-width:100%;width:100%;height:400px;object-fit:contain}.detail-photo span{position:absolute;left:22px;bottom:18px;color:#a2aec2;font-size:9px;letter-spacing:.13em}.detail-copy h1{font-size:clamp(36px,4vw,58px);line-height:1.12}.detail-description{font-size:17px;line-height:1.7}.detail-info{border-top:1px solid #d8e3f3;margin:25px 0}.detail-info>div{display:grid;grid-template-columns:140px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid #d8e3f3;font-size:14px}.detail-info span{color:var(--muted)}.detail-actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap}.detail-back{color:var(--blue);font-size:13px;font-weight:600}.product-enquiry{background:#fff}.product-enquiry p{max-width:740px}.product-enquiry h2{margin-bottom:18px}a:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid #4e8df4;outline-offset:3px}
@media(max-width:900px){.product-menu{width:100%}.product-menu>summary{padding:12px 0}.dropdown-panel{position:static;width:100%;box-shadow:none;border:0;border-left:2px solid #cfddf8;border-radius:0;padding:0 0 0 12px}.submenu{position:static;width:100%;max-height:unset;box-shadow:none;border:0;border-left:2px solid #dce7fb;border-radius:0;padding:0 0 0 10px}.category-menu>summary,.submenu>a{padding:10px}.detail-grid{grid-template-columns:1fr;gap:35px}.detail-photo{min-height:300px}.detail-photo img{height:300px}.detail-hero{padding-bottom:60px}}