:root {
  --navy: #0d2343;
  --ink: #101e32;
  --blue: #165fbc;
  --sky: #d8e9fb;
  --paper: #f9f7f1;
  --cream: #efe9dd;
  --yellow: #ffc52c;
  --orange: #ef792e;
  --line: rgba(13, 35, 67, .16);
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--navy); background: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.skip-link { position: fixed; left: 12px; top: -50px; z-index: 20; padding: 10px 15px; background: var(--yellow); color: var(--navy); font-weight: 800; transition: top .2s; }
.skip-link:focus { top: 12px; }

.utility-bar { background: var(--navy); color: white; font-family: var(--mono); font-size: 11px; letter-spacing: .02em; }
.utility-inner { min-height: 37px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.utility-inner p { margin: 0; color: #d1deed; }
.utility-inner a { color: white; text-decoration: underline; text-decoration-color: #55749d; text-underline-offset: 3px; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 3px rgba(255,197,44,.15); }

.site-header { position: relative; z-index: 10; background: var(--paper); border-bottom: 1px solid var(--line); }
.header-inner { min-height: 86px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--navy); line-height: .9; }
.brand strong { display: block; font-size: 21px; letter-spacing: -.08em; font-weight: 800; }
.brand em { display: block; margin-top: 4px; color: var(--blue); font-family: var(--mono); font-size: 9px; letter-spacing: .18em; font-style: normal; text-transform: uppercase; }
.brand-mark { position: relative; display: block; width: 31px; height: 37px; background: var(--yellow); overflow: hidden; border-radius: 2px; transform: skewY(-7deg); }
.brand-mark::after { content: "ϟ"; position: absolute; top: 1px; left: 9px; font-size: 30px; font-weight: 800; color: var(--navy); transform: skewY(7deg); }
.brand-mark i { position: absolute; z-index: 1; display: block; width: 4px; height: 8px; background: var(--navy); border-radius: 4px; bottom: -2px; }
.brand-mark i:nth-child(1) { left: 5px; }.brand-mark i:nth-child(2) { left: 14px; }.brand-mark i:nth-child(3) { left: 23px; }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 39px); font-size: 13px; font-weight: 700; }
.site-nav > a:not(.nav-cta) { position: relative; }
.site-nav > a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--blue); transform: scaleX(0); transform-origin: right; transition: transform .2s; }
.site-nav > a:not(.nav-cta):hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { padding: 12px 17px; color: white; background: var(--navy); transition: background .2s, transform .2s; }
.nav-cta:hover { background: var(--blue); transform: translateY(-2px); }
.menu-button { display: none; border: 0; background: transparent; color: var(--navy); }

.hero { overflow: hidden; background: var(--paper); }
.hero-grid { min-height: 571px; display: grid; grid-template-columns: minmax(0, .96fr) minmax(410px, 1.04fr); gap: 50px; align-items: center; }
.hero-copy { position: relative; z-index: 2; padding: 56px 0 60px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 21px; color: var(--blue); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; }
.eyebrow span { width: 21px; height: 2px; background: currentColor; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -.055em; line-height: .98; }
h1 { max-width: 610px; margin-bottom: 23px; font-size: clamp(57px, 7.25vw, 98px); }
h1 em, h2 em { color: var(--blue); font-style: italic; }
.hero-intro { max-width: 450px; margin-bottom: 30px; color: #4d5a6c; font-size: 17px; line-height: 1.7; }
.hero-actions, .location-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 51px; padding: 0 20px; font-size: 13px; font-weight: 800; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-3px); box-shadow: 0 7px 0 rgba(13,35,67,.16); }
.button-primary { background: var(--blue); color: white; }.button-primary:hover { background: #0e4d9d; }
.button-dark { background: var(--navy); color: white; }.button-dark:hover { background: #1c365c; }
.text-link { display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--navy); padding-bottom: 3px; font-size: 13px; font-weight: 800; transition: color .2s, border .2s; }
.text-link:hover { color: var(--blue); border-color: var(--blue); }
.hero-note { display: flex; align-items: center; gap: 9px; margin-top: 47px; color: #687484; font-size: 12px; }
.hero-note p { margin: 0; }.mini-bolt { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid #b2bfce; border-radius: 50%; color: var(--blue); font-size: 17px; font-weight: 800; }

.hero-art { position: relative; align-self: stretch; min-height: 500px; overflow: hidden; background: var(--sky); border-left: 1px solid rgba(13,35,67,.13); }
.hero-art::before { content: ""; position: absolute; inset: 0; opacity: .25; background-image: radial-gradient(#1a568e 1px, transparent 1px); background-size: 11px 11px; mask-image: linear-gradient(to bottom, black, transparent 74%); }
.art-sun { position: absolute; top: 55px; right: -21px; width: 167px; height: 167px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 23px rgba(255, 197, 44, .22); }
.art-wire { position: absolute; border: 11px solid var(--navy); border-left: 0; border-bottom: 0; border-radius: 0 165px 0 0; transform: rotate(14deg); opacity: .94; }
.wire-one { top: -86px; left: -91px; width: 351px; height: 260px; }.wire-two { bottom: -129px; right: 48px; width: 253px; height: 213px; border-width: 8px; transform: rotate(191deg); }.wire-three { bottom: -126px; left: 40px; width: 169px; height: 187px; border-width: 5px; border-color: var(--orange); transform: rotate(315deg); }
.art-board { position: absolute; right: 80px; bottom: 63px; width: 290px; height: 334px; padding: 24px; background: var(--paper); border: 8px solid var(--navy); box-shadow: 13px 13px 0 var(--blue); transform: rotate(3.8deg); }
.board-label { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: 1px solid var(--line); color: #58708c; font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }.board-label b { color: var(--yellow); font-size: 21px; }
.art-board p { position: absolute; bottom: 16px; left: 24px; margin: 0; color: var(--navy); font-family: var(--serif); font-size: 31px; font-weight: 700; line-height: .83; letter-spacing: -.07em; }.art-board p small { color: var(--blue); font-family: var(--mono); font-size: 8px; letter-spacing: .25em; }
.switch { position: absolute; top: 92px; display: grid; place-items: center; width: 69px; height: 102px; border: 5px solid var(--navy); background: var(--sky); }.switch-a { left: 35px; }.switch-b { right: 35px; }.switch span { display: block; width: 28px; height: 62px; background: var(--navy); border-radius: 15px; }.switch-a span { transform: translateY(13px); }.switch-b span { transform: translateY(-13px); background: var(--orange); }
.socket { position: absolute; top: 210px; right: 49px; display: flex; gap: 10px; align-items: center; justify-content: center; width: 91px; height: 41px; background: var(--navy); border-radius: 22px; }.socket i { display: block; width: 6px; height: 16px; border-radius: 4px; background: var(--yellow); }
.art-lamp { position: absolute; top: 138px; right: 362px; width: 105px; height: 127px; }.art-lamp i { position: absolute; top: 0; left: 50px; width: 4px; height: 41px; background: var(--navy); }.art-lamp b { position: absolute; left: 10px; top: 35px; width: 85px; height: 78px; background: var(--orange); border: 5px solid var(--navy); border-radius: 53% 53% 44% 44%; }.lamp-glow { position: absolute; top: 25px; left: 0; width: 105px; height: 105px; border-radius: 50%; background: rgba(255,197,44,.4); filter: blur(14px); }
.art-tag { position: absolute; right: 19px; top: 270px; padding: 9px 11px; background: var(--navy); color: white; font-family: var(--mono); font-size: 9px; line-height: 1.35; letter-spacing: .05em; text-transform: uppercase; transform: rotate(90deg); transform-origin: bottom right; }
.hero-rule { position: relative; z-index: 3; width: min(1180px, calc(100% - 48px)); height: 1px; margin: 0 auto; background: var(--line); }.hero-rule span { position: absolute; right: 0; top: -4px; width: 8px; height: 8px; background: var(--blue); transform: rotate(45deg); }

.marquee { overflow: hidden; padding: 15px 0 14px; background: var(--yellow); color: var(--navy); white-space: nowrap; }.marquee-track { display: inline-flex; align-items: center; gap: 26px; min-width: max-content; animation: drift 36s linear infinite; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }.marquee i { font-style: normal; font-size: 15px; }
@keyframes drift { to { transform: translateX(-50%); } }

.section { padding: 112px 0; }.section-heading { margin-bottom: 48px; }.split-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 45px; }.split-heading h2, .location-copy h2, .visit-banner h2 { margin-bottom: 0; font-size: clamp(43px, 5vw, 66px); }.split-heading > p { max-width: 327px; margin-bottom: 5px; color: #5a6676; font-size: 15px; line-height: 1.7; }
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.category-card { position: relative; min-height: 344px; padding: 22px 23px; overflow: hidden; border-right: 1px solid var(--line); transition: transform .25s, box-shadow .25s; }.category-card:last-child { border-right: 0; }.category-card:hover { z-index: 2; transform: translateY(-8px); box-shadow: 0 15px 0 rgba(13,35,67,.13); }
.card-number { color: currentColor; font-family: var(--mono); font-size: 10px; font-weight: 500; opacity: .64; }.category-card h3 { position: absolute; left: 23px; bottom: 72px; margin: 0; font-family: var(--serif); font-size: 28px; font-weight: 700; letter-spacing: -.05em; line-height: .98; }.category-card p { position: absolute; bottom: 33px; left: 23px; right: 22px; margin: 0; font-size: 11px; line-height: 1.5; }.category-card a { position: absolute; left: 23px; bottom: 11px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid currentColor; }.category-card a span { margin-left: 4px; font-size: 14px; }
.card-light { background: var(--cream); color: var(--navy); }.card-blue { background: var(--blue); color: white; }.card-amber { background: var(--yellow); color: var(--navy); }.card-ink { background: var(--navy); color: white; }
.category-icon { position: absolute; top: 53px; right: 24px; width: 85px; height: 102px; }.icon-switch { display: flex; gap: 7px; align-items: center; justify-content: center; width: 74px; height: 104px; background: var(--paper); border: 5px solid currentColor; }.icon-switch i { width: 7px; height: 42px; background: currentColor; border-radius: 10px; }.icon-switch i:nth-child(2) { transform: translateY(-13px); }.icon-cable { border: 8px solid currentColor; border-left-color: transparent; border-radius: 50%; transform: rotate(-35deg); }.icon-cable i { position: absolute; width: 9px; height: 28px; background: var(--yellow); border-radius: 5px; transform: rotate(35deg); }.icon-cable i:nth-child(1) { top: 4px; right: 23px; }.icon-cable i:nth-child(2) { top: 16px; right: 5px; }.icon-cable i:nth-child(3) { top: 40px; right: -8px; }.icon-bulb { top: 42px; right: 20px; width: 85px; height: 105px; }.icon-bulb::before { content: ""; position: absolute; top: 0; left: 11px; width: 62px; height: 67px; border: 6px solid currentColor; border-radius: 50% 50% 44% 44%; }.icon-bulb::after { content: ""; position: absolute; bottom: 10px; left: 26px; width: 34px; height: 25px; border-top: 7px solid currentColor; border-bottom: 7px solid currentColor; }.icon-bulb i { position: absolute; z-index: 1; bottom: 0; left: 25px; width: 36px; height: 12px; background: currentColor; }.icon-fan { top: 52px; right: 11px; width: 106px; height: 106px; border: 4px solid currentColor; border-radius: 50%; }.icon-fan b { position: absolute; top: 41px; left: 41px; z-index: 2; width: 18px; height: 18px; background: var(--yellow); border: 3px solid currentColor; border-radius: 50%; }.icon-fan i { position: absolute; left: 49px; top: 6px; width: 13px; height: 46px; background: currentColor; border-radius: 13px 13px 2px 2px; transform-origin: 7px 47px; }.icon-fan i:nth-child(1) { transform: rotate(0deg); }.icon-fan i:nth-child(2) { transform: rotate(120deg); }.icon-fan i:nth-child(3) { transform: rotate(240deg); }

.visit-banner { position: relative; overflow: hidden; background: var(--yellow); color: var(--navy); }.visit-banner::before { content: ""; position: absolute; top: -72px; right: 7%; width: 292px; height: 292px; border: 28px solid rgba(255,255,255,.30); border-radius: 50%; }.visit-banner::after { content: ""; position: absolute; bottom: -223px; left: -73px; width: 362px; height: 362px; border: 50px solid rgba(13,35,67,.08); border-radius: 50%; }.visit-banner-inner { position: relative; z-index: 1; padding: 85px 0 88px 25.5%; }.visit-banner .eyebrow { color: var(--navy); }.visit-banner h2 { max-width: 600px; margin-bottom: 22px; }.visit-banner h2 em { color: var(--navy); }.banner-copy { max-width: 430px; margin-bottom: 30px; font-size: 16px; line-height: 1.7; }.banner-spark { position: absolute; left: 8%; top: 87px; font-size: 89px; line-height: 1; }

.shop-info { background: var(--paper); }.shop-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: center; }.location-copy .eyebrow { margin-bottom: 21px; }.location-copy h2 { margin-bottom: 43px; }.address-block { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 31px; }.address-symbol { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border: 1px solid var(--blue); border-radius: 50%; color: var(--blue); font-size: 23px; }.address-block h3 { margin: 0 0 5px; font-size: 13px; font-weight: 800; }.address-block p { margin: 0; color: #586576; font-size: 14px; line-height: 1.7; }
.map-card { position: relative; display: block; min-height: 387px; overflow: hidden; background: #bbd8ee; border: 1px solid #98bad5; transition: transform .25s, box-shadow .25s; }.map-card:hover { transform: translateY(-5px); box-shadow: 10px 10px 0 var(--navy); }.map-pattern { position: absolute; inset: 0; opacity: .3; background-image: radial-gradient(#3677aa 1px, transparent 1px); background-size: 8px 8px; }.road { position: absolute; z-index: 1; background: #f9f7ef; box-shadow: 0 0 0 3px rgba(255,255,255,.35); }.road-one { left: -46px; top: 165px; width: 600px; height: 35px; transform: rotate(-22deg); }.road-two { left: 250px; top: -90px; width: 34px; height: 600px; transform: rotate(24deg); }.road-three { left: -67px; top: 302px; width: 550px; height: 18px; transform: rotate(13deg); }.map-pin { position: absolute; z-index: 3; top: 129px; left: 50%; display: grid; place-items: center; width: 63px; height: 63px; margin-left: -32px; background: var(--navy); border: 7px solid var(--yellow); border-radius: 50% 50% 50% 0; color: var(--yellow); font-size: 28px; transform: rotate(-45deg); box-shadow: 5px 7px 0 rgba(13,35,67,.18); }.map-pin span { transform: rotate(45deg); }.map-label { position: absolute; z-index: 3; top: 214px; left: calc(50% + 11px); padding: 11px 15px; background: var(--paper); color: var(--navy); font-family: var(--serif); font-size: 21px; font-weight: 700; line-height: .82; box-shadow: 4px 4px 0 var(--blue); }.map-label small { color: var(--blue); font-family: var(--mono); font-size: 7px; letter-spacing: .15em; }.map-cta { position: absolute; z-index: 4; right: 17px; bottom: 17px; display: flex; gap: 11px; align-items: center; padding: 9px 12px; background: var(--navy); color: white; font-family: var(--mono); font-size: 10px; letter-spacing: .03em; text-transform: uppercase; }.map-cta b { color: var(--yellow); font-size: 15px; }

.site-footer { background: var(--navy); color: white; }.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 25px; min-height: 160px; border-bottom: 1px solid rgba(255,255,255,.18); }.brand-footer { color: white; }.brand-footer strong { color: white; }.brand-footer em { color: var(--yellow); }.footer-top > p { margin: 0; color: #b6c5d6; font-family: var(--serif); font-size: 21px; font-style: italic; }.back-top { display: flex; align-items: center; gap: 8px; color: var(--yellow); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }.back-top span { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(255,255,255,.37); border-radius: 50%; color: white; font-size: 15px; }.footer-bottom { display: flex; justify-content: space-between; padding: 18px 0; color: #9db1c5; font-family: var(--mono); font-size: 10px; letter-spacing: .05em; }.footer-bottom p { margin: 0; }.footer-bottom a { color: #dbe9f8; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }.reveal.is-visible { opacity: 1; transform: translateY(0); }.category-card:nth-child(2) { transition-delay: .08s; }.category-card:nth-child(3) { transition-delay: .16s; }.category-card:nth-child(4) { transition-delay: .24s; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr .85fr; gap: 20px; }.hero-art { min-height: 480px; }.art-board { right: 45px; transform: scale(.83) rotate(3.8deg); transform-origin: bottom right; }.art-lamp { right: 258px; transform: scale(.75); }.category-grid { grid-template-columns: repeat(2, 1fr); }.category-card:nth-child(2) { border-right: 0; }.category-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.shop-grid { gap: 50px; }
}
@media (max-width: 700px) {
  .container { width: min(100% - 32px, 580px); }.utility-inner { justify-content: center; min-height: 34px; }.utility-inner a { display: none; }.utility-inner p { font-size: 9px; }.header-inner { min-height: 73px; }.brand strong { font-size: 19px; }.site-nav { position: absolute; top: 73px; left: 0; right: 0; display: grid; gap: 0; padding: 7px 16px 16px; background: var(--paper); border-bottom: 1px solid var(--line); transform: translateY(-115%); opacity: 0; visibility: hidden; transition: transform .25s, opacity .25s, visibility .25s; }.site-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }.site-nav > a:not(.nav-cta) { padding: 12px 0; }.nav-cta { margin-top: 6px; text-align: center; }.menu-button { display: grid; gap: 6px; padding: 10px 0 10px 12px; }.menu-button span { display: block; width: 24px; height: 2px; background: var(--navy); transition: transform .2s; }.menu-button[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }.menu-button[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .hero-grid { min-height: 0; display: block; }.hero-copy { padding: 56px 0 46px; }h1 { font-size: clamp(53px, 16vw, 76px); }.hero-intro { font-size: 15px; }.hero-note { margin-top: 32px; }.hero-art { min-height: 382px; margin: 0 -16px; border: 0; }.art-sun { top: 38px; width: 125px; height: 125px; }.art-board { right: 51px; bottom: 48px; transform: scale(.76) rotate(3.8deg); }.art-lamp { top: 100px; right: 235px; transform: scale(.63); }.art-tag { top: 220px; }.hero-rule { width: min(100% - 32px, 580px); }
  .section { padding: 76px 0; }.split-heading { display: block; }.split-heading h2, .location-copy h2, .visit-banner h2 { font-size: 47px; }.split-heading > p { margin-top: 23px; }.category-grid { grid-template-columns: 1fr; }.category-card, .category-card:nth-child(2) { min-height: 273px; border-right: 0; border-bottom: 1px solid var(--line); }.category-card:last-child { border-bottom: 0; }.category-card h3 { bottom: 71px; }.category-icon { top: 38px; right: 38px; transform: scale(.83); transform-origin: top right; }.visit-banner-inner { padding: 68px 0 72px 26%; }.visit-banner::before { right: -71px; width: 218px; height: 218px; border-width: 20px; }.banner-spark { top: 69px; left: 3%; font-size: 62px; }.banner-copy { font-size: 14px; }.shop-grid { display: block; }.location-copy { margin-bottom: 52px; }.location-copy h2 { margin-bottom: 32px; }.map-card { min-height: 326px; }.road-one { top: 140px; }.map-pin { top: 97px; }.map-label { top: 177px; }.footer-top { min-height: 0; display: block; padding: 40px 0; }.footer-top > p { margin: 26px 0; font-size: 19px; }.footer-bottom { gap: 15px; font-size: 9px; }.marquee { padding: 12px 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.marquee-track { animation: none; }.reveal { opacity: 1; transform: none; transition: none; } }