/* A transparent material gallery: CSS glass, real alpha product studies. */
.glass-gallery-page .page-heading{padding-top:67px;padding-bottom:40px}.glass-gallery-page .page-heading h1{font-size:clamp(65px,6.8vw,110px);line-height:1.03;font-weight:400;letter-spacing:-.055em;max-width:none}.glass-gallery-page .page-heading p{font-size:15px;line-height:1.85;max-width:65ch;color:#91afc2}.glass-collection{padding-bottom:80px}.glass-toolbar{display:flex;align-items:center;justify-content:space-between;gap:35px;border-top:1px solid #547c9040;padding-top:25px}.glass-modes{display:flex;gap:28px}.glass-modes button{border:0;border-bottom:1px solid transparent;background:none;padding:14px 0;color:#759aad;font-size:13px;display:flex;gap:13px;align-items:center}.glass-modes button[aria-pressed=true]{color:#e4f1f7;border-color:#94c9db}.glass-modes button>span{font-size:8px;color:#61869b;letter-spacing:.05em}.glass-search{width:255px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #608da277;padding:10px 0;color:#6f9db2}.glass-search svg{width:17px;height:17px;flex-shrink:0}.glass-search input{color:#c5dfec;background:none;border:0;outline:none;min-width:0;width:100%;font:inherit;font-size:11px}.glass-search input::placeholder{color:#789bae}.glass-filters{display:flex;gap:25px;margin-top:23px;padding-bottom:20px;border-bottom:1px solid #547c9040;align-items:center}.glass-filter{border:0;background:none;color:#658ba1;font-size:10px;padding:8px 0;display:flex;align-items:center;gap:8px;white-space:nowrap}.glass-filter.active{color:#c8e8f3}.glass-filter>span{font-size:6px;letter-spacing:.1em;text-transform:uppercase;border:1px solid #78a7ba55;color:#87bacc;padding:4px 5px}.glass-summary{display:flex;justify-content:space-between;gap:20px;margin:25px 0 20px;color:#648ba1;font-size:9px;letter-spacing:.04em}.glass-summary>span{font-size:8px;color:#547c92}
#glass-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:90px 45px;align-items:start}.glass-exhibit{grid-column:span 8;min-width:0}.glass-exhibit[data-glass-layout="1"]{grid-column:span 4;padding-top:135px}.glass-exhibit[data-glass-layout="2"]{grid-column:span 5}.glass-exhibit[data-glass-layout="3"]{grid-column:span 7;padding-top:105px}.glass-display{position:relative;aspect-ratio:1.7;perspective:1000px;isolation:isolate}.glass-exhibit[data-glass-layout="1"] .glass-display{aspect-ratio:1.09}.glass-exhibit[data-glass-layout="2"] .glass-display{aspect-ratio:1.36}.glass-exhibit[data-glass-layout="3"] .glass-display{aspect-ratio:1.62}.glass-display::before{content:'';position:absolute;inset:17% -12% 0;background:radial-gradient(ellipse at 50% 64%,#58b7d022,transparent 62%);filter:blur(22px);z-index:0;pointer-events:none}.glass-back{position:absolute;inset:15% 8% 28%;z-index:1;background:linear-gradient(125deg,#addae411,#6cabc503 60%,#9fd6e10a);border:1px solid #a6dbe42e;backdrop-filter:blur(6px);box-shadow:inset 0 1px 0 #f0fbff1a;border-radius:3px 3px 0 0}.glass-ceiling{position:absolute;left:8%;right:8%;height:9%;top:8%;background:linear-gradient(135deg,#bedde715,#add9e307);clip-path:polygon(9% 0,100% 0,91% 100%,0 100%);border-top:1px solid #bbebf83d;z-index:1}.glass-side{position:absolute;right:2%;top:11%;bottom:22%;width:6%;background:linear-gradient(100deg,#93c6d908,#acd7e81a);clip-path:polygon(0 6%,100% 0,100% 90%,0 100%);border-right:1px solid #99d4e33d;z-index:1}.glass-shelf{position:absolute;left:7%;right:5%;height:34%;bottom:17%;z-index:2;transform:rotateX(63deg) rotateZ(-3deg);transform-origin:center bottom;background:linear-gradient(135deg,#b3e1eb2b,#e9fcff12 42%,#82b7ce12 75%,#c9f2f72b);border:1px solid #c4eaf477;box-shadow:0 22px 28px #0003,inset 0 0 25px #c7ebf412;backdrop-filter:blur(8px);border-radius:3px}.glass-shelf::after{content:'';position:absolute;height:7px;left:-1px;right:-1px;bottom:-7px;background:linear-gradient(90deg,#a7d4e357,#e6f9ff1d,#a1cbd84a);border-bottom:1px solid #d1f4ff66;transform-origin:center top;transform:rotateX(-13deg);box-shadow:0 2px 12px #86c7d626}.glass-floor-shadow{position:absolute;left:15%;right:12%;height:6%;bottom:20%;z-index:2;background:#010c1670;border-radius:50%;filter:blur(12px);transform:rotate(-3deg)}.glass-object{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;background:none;z-index:3;cursor:zoom-in;padding:0}.glass-object img{position:absolute;left:8%;bottom:26%;width:84%;height:52%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 12px 10px #00101e66);transform:translateY(0) rotate(-3deg);transition:transform .85s cubic-bezier(.2,.7,.2,1),filter .85s;transform-origin:center bottom}.glass-object:hover img,.glass-object:focus-visible img{transform:translateY(-7px) rotate(-4deg);filter:drop-shadow(0 19px 14px #00101e88)}.glass-object:focus-visible{outline:1px solid #94c9dd;outline-offset:-5px}.glass-front{position:absolute;inset:15% 8% 28%;z-index:4;pointer-events:none;background:linear-gradient(115deg,transparent 5%,#dcf7ff05 35%,transparent 45%,#d9f5fc08 46%,transparent 49%,transparent 78%,#f2ffff05);border-left:1px solid #d9f5ff18;border-bottom:1px solid #b0d5e525;overflow:hidden}.glass-front::before{content:'';position:absolute;inset:-80% -100%;background:linear-gradient(110deg,transparent 43%,#d9f7ff0a 48%,#ecffff1a 50%,transparent 54%);transform:translateX(-40%);opacity:.7;animation:glass-light-pass 18s ease-in-out infinite;animation-delay:-6s}.glass-exhibit:nth-child(even) .glass-front::before{animation-delay:-13s;animation-duration:23s}.background-motion-paused .glass-front::before{animation-play-state:paused}.glass-plaque{position:absolute;left:10%;bottom:8%;font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:#6c9aaf;z-index:5;pointer-events:none}.glass-original{position:absolute;right:8%;bottom:8%;font-size:8px;color:#9ac6d8;z-index:5;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .4s,transform .4s}.glass-display:hover .glass-original,.glass-display:focus-within .glass-original{opacity:1;transform:none}
.glass-product-copy{display:grid;grid-template-columns:.85fr 1.15fr;gap:25px;margin-top:23px;padding:23px 8px 0;border-top:1px solid #4b758b3d}.glass-product-copy .eyebrow{font-size:7px;color:#76a9be;letter-spacing:.1em}.glass-product-copy h2{font-size:39px;line-height:1.1;letter-spacing:-.045em;font-weight:400;margin-top:14px;color:#ddecf4}.glass-product-copy h3{font-family:Georgia,'Times New Roman',serif;font-size:28px;line-height:1.2;font-weight:400;letter-spacing:-.03em;color:#bed9e5}.glass-product-copy p{font-size:12px;line-height:1.8;color:#7ea2b8;max-width:40ch;margin-top:14px}.glass-product-links{display:flex;gap:20px;flex-wrap:wrap;margin-top:20px}.glass-product-links .text-link{font-size:9px;gap:10px;color:#afcfdf;border-color:#6b92a755}.glass-product-links .text-link:last-child{color:#6f96ad;border-color:transparent}.glass-product-links .arrow{width:11px;height:11px}.glass-exhibit[data-glass-layout="1"] .glass-product-copy,.glass-exhibit[data-glass-layout="2"] .glass-product-copy{display:block}.glass-exhibit[data-glass-layout="1"] .glass-product-copy h2{font-size:31px}.glass-exhibit[data-glass-layout="1"] .glass-product-copy h3,.glass-exhibit[data-glass-layout="2"] .glass-product-copy h3{margin-top:20px;font-size:27px}.glass-exhibit[data-glass-layout="1"] .glass-product-copy p{font-size:11px}
.glass-empty{padding:70px 0;text-align:center}.glass-empty h2{font-size:36px}.glass-empty p{color:#7fa4ba;font-size:13px;margin-top:18px}.glass-empty button{background:none;border:0;border-bottom:1px solid #7fa9be;color:#bfdfec;font-size:12px;padding:12px 0;margin-top:20px}.glass-gallery-page [hidden]{display:none!important}.reference-desk{padding-top:50px}.reference-intro{display:grid;grid-template-columns:1fr 1fr;gap:20px 60px;align-items:end;margin-bottom:35px}.reference-intro .eyebrow{grid-column:1/-1;font-size:8px}.reference-intro h2{font-size:45px;line-height:1.1;letter-spacing:-.04em}.reference-intro p{font-size:13px;color:#8eafc3;line-height:1.85;max-width:42ch;justify-self:end}.reference-table{width:100%;border-collapse:collapse;text-align:left}.reference-table th,.reference-table td{padding:21px 14px;border-bottom:1px solid #496e8255;vertical-align:middle}.reference-table thead th{font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:#6c97ad;font-weight:400;padding-top:18px;padding-bottom:18px}.reference-table tbody th{width:26%;font-weight:400}.reference-table tbody th>button{font-size:20px;letter-spacing:-.025em;color:#c8e1ee;background:none;border:0;display:flex;align-items:center;gap:16px;padding:0;text-align:left;cursor:zoom-in}.reference-table tbody th>button>span:last-child{font-size:13px;color:#6e9bb2}.reference-id{display:block;color:#517c94;font-size:7px;letter-spacing:.1em;margin-top:8px}.reference-table td{font-size:11px;color:#80a4b9}.reference-table td:nth-child(3){font-size:10px;color:#63899f}.reference-table td a{font-size:10px;color:#9cc5d9}.reference-table tr:hover{background:#3b6c8710}.reference-private{font-size:8px;line-height:1.5;color:#c6bba1;border-left:1px solid #a9977288;padding-left:9px;display:inline-block;max-width:150px}.showroom-source-note{padding-top:55px;margin-top:50px;border-top:1px solid #466d8244;display:grid;grid-template-columns:1fr 1fr;gap:55px}.showroom-source-note p{font-size:9px;color:#50798f;line-height:1.85;max-width:65ch}.glass-reveals .glass-exhibit{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}.glass-reveals .glass-exhibit:not(.is-visible){opacity:0;transform:translateY(28px)}.glass-reveals .glass-exhibit.is-visible{opacity:1;transform:none}
@keyframes glass-light-pass{0%,20%{transform:translateX(-40%)}65%,100%{transform:translateX(40%)}}
/* Uniform low plinths: one coherent perspective, with a small rear light source. */
#glass-grid,.glass-home-gallery{grid-template-columns:repeat(2,minmax(0,1fr));display:grid;gap:75px 45px;align-items:start}
#glass-grid .glass-exhibit,.glass-home-gallery .glass-exhibit{grid-column:auto;padding:0;width:100%;margin:0;min-width:0}
#glass-grid .glass-display,.glass-home-gallery .glass-display{aspect-ratio:1.5}
.glass-display::before{display:none}.glass-plinth{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;filter:drop-shadow(0 15px 13px #010c1844)}
.glass-halo{position:absolute;inset:7% 5% 20%;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 53% 52%,#9fdae92b 0%,#77bbd314 29%,#387c9e05 51%,transparent 69%);filter:blur(16px)}
.glass-object img{left:11%;bottom:25%;width:78%;height:53%;transform:none;filter:drop-shadow(0 9px 8px #00101e66)}
.glass-object:hover img,.glass-object:focus-visible img{transform:translateY(-4px);filter:drop-shadow(0 14px 11px #00101e77)}
.glass-floor-shadow{left:15%;right:12%;bottom:19%;height:4%;filter:blur(11px);transform:none;background:#010b1555}
.glass-plaque,.glass-original{bottom:7%}.glass-plaque{left:17%}.glass-original{right:8%}
.glass-home-gallery .glass-product-copy{padding-top:22px}.glass-home-gallery .glass-product-copy h2{font-size:35px}
@media(max-width:1100px){#glass-grid{gap:70px 28px}.glass-exhibit{grid-column:span 7}.glass-exhibit[data-glass-layout="1"]{grid-column:span 5;padding-top:90px}.glass-exhibit[data-glass-layout="2"]{grid-column:span 5}.glass-exhibit[data-glass-layout="3"]{grid-column:span 7;padding-top:80px}.glass-product-copy{display:block}.glass-product-copy h3{margin-top:19px}.glass-product-copy h2{font-size:35px}.glass-product-copy p{font-size:11px}.glass-modes{gap:23px}.glass-product-links{gap:15px}.glass-search{width:230px}.glass-gallery-page .page-heading h1{font-size:79px}}
@media(max-width:850px){.glass-gallery-page .page-heading{padding-top:50px;padding-bottom:32px}.glass-gallery-page .page-heading h1{font-size:67px}.glass-gallery-page .page-heading p{font-size:13px}.glass-toolbar{align-items:stretch;flex-direction:column;gap:18px}.glass-search{width:100%;max-width:370px}.glass-filters{gap:20px;flex-wrap:wrap}.glass-summary{font-size:8px}.glass-summary>span{display:none}#glass-grid{gap:65px 25px}.glass-exhibit,.glass-exhibit[data-glass-layout="1"],.glass-exhibit[data-glass-layout="2"],.glass-exhibit[data-glass-layout="3"]{grid-column:span 6;padding-top:0}.glass-display,.glass-exhibit[data-glass-layout="1"] .glass-display,.glass-exhibit[data-glass-layout="2"] .glass-display,.glass-exhibit[data-glass-layout="3"] .glass-display{aspect-ratio:1.17}.glass-product-copy{padding-top:19px;margin-top:15px}.glass-product-copy h2,.glass-exhibit[data-glass-layout="1"] .glass-product-copy h2{font-size:30px}.glass-product-copy h3,.glass-exhibit[data-glass-layout="1"] .glass-product-copy h3,.glass-exhibit[data-glass-layout="2"] .glass-product-copy h3{font-size:25px}.glass-product-links{display:block;margin-top:17px}.glass-product-links .text-link{display:flex;max-width:max-content;font-size:9px;margin-top:12px}.glass-plaque{font-size:6px}.glass-original{font-size:6px;opacity:1;transform:none}.reference-intro h2{font-size:36px}.reference-intro p{font-size:11px}.reference-table th,.reference-table td{padding:17px 10px}.reference-table tbody th>button{font-size:17px}.reference-table td{font-size:9px}.reference-table td a{font-size:9px}.showroom-source-note{gap:30px}.showroom-source-note p{font-size:8px}}
@media(max-width:560px){.glass-gallery-page .page-heading{padding-top:40px;padding-bottom:27px}.glass-gallery-page .page-heading h1{font-size:clamp(50px,13.5vw,69px);line-height:1.02;max-width:400px}.glass-gallery-page .page-heading p{font-size:12px;line-height:1.85;max-width:42ch}.glass-toolbar{padding-top:19px;gap:17px}.glass-modes{gap:23px}.glass-modes button{font-size:11px;padding:10px 0;gap:8px}.glass-modes button>span{font-size:7px}.glass-search{max-width:none}.glass-search input{font-size:11px}.glass-filters{flex-wrap:nowrap;overflow-x:auto;gap:23px;padding-bottom:18px;margin-right:calc(-1 * var(--gutter));padding-right:var(--gutter);scrollbar-width:thin;scrollbar-color:#47778f transparent}.glass-filter{font-size:9px}.glass-filter>span{font-size:5px;padding:3px 4px}.glass-summary{font-size:8px;margin:21px 0 14px}#glass-grid{display:block}.glass-exhibit,.glass-exhibit[data-glass-layout="1"],.glass-exhibit[data-glass-layout="2"],.glass-exhibit[data-glass-layout="3"]{padding:0;margin:0 0 55px;width:100%}.glass-exhibit[data-glass-layout="1"],.glass-exhibit[data-glass-layout="2"]{width:89%;margin-left:auto}.glass-display,.glass-exhibit[data-glass-layout="1"] .glass-display,.glass-exhibit[data-glass-layout="2"] .glass-display,.glass-exhibit[data-glass-layout="3"] .glass-display{aspect-ratio:1.18}.glass-exhibit[data-glass-layout="1"] .glass-display{aspect-ratio:1.02}.glass-product-copy{padding:21px 4px 0;margin-top:10px}.glass-product-copy .eyebrow{font-size:7px}.glass-product-copy h2,.glass-exhibit[data-glass-layout="1"] .glass-product-copy h2{font-size:34px}.glass-product-copy h3,.glass-exhibit[data-glass-layout="1"] .glass-product-copy h3,.glass-exhibit[data-glass-layout="2"] .glass-product-copy h3{font-size:29px}.glass-product-copy p,.glass-exhibit[data-glass-layout="1"] .glass-product-copy p{font-size:12px;line-height:1.9}.glass-product-links{display:flex;flex-wrap:wrap;gap:15px;margin-top:21px}.glass-product-links .text-link{font-size:9px;margin-top:0}.glass-plaque{font-size:6px;bottom:7%}.glass-original{font-size:6px;bottom:7%}.reference-desk{padding-top:32px}.reference-intro{display:block;margin-bottom:25px}.reference-intro .eyebrow{font-size:7px}.reference-intro h2{font-size:35px;margin-top:17px}.reference-intro p{font-size:11px;line-height:1.8;margin-top:19px;max-width:38ch}.reference-table thead th{font-size:6px;padding:13px 5px}.reference-table th,.reference-table td{padding:18px 5px}.reference-table tbody th{width:40%}.reference-table tbody th>button{font-size:17px;gap:8px}.reference-table tbody th>button>span:last-child{font-size:10px}.reference-table td{font-size:8px}.reference-table td:nth-child(3),.reference-table thead th:nth-child(3){display:none}.reference-table td a{font-size:8px;white-space:nowrap}.reference-id{font-size:6px}.showroom-source-note{display:block;margin-top:32px;padding-top:28px}.showroom-source-note p{font-size:7px;line-height:1.85;margin-top:16px}.glass-empty{padding:50px 0}.glass-empty h2{font-size:29px}.glass-empty p{font-size:11px}.glass-collection{padding-bottom:40px}}
@media(max-width:850px){#glass-grid,.glass-home-gallery{gap:60px 28px}#glass-grid .glass-product-copy,.glass-home-gallery .glass-product-copy{display:block}#glass-grid .glass-display,.glass-home-gallery .glass-display{aspect-ratio:1.25}}
@media(max-width:560px){#glass-grid,.glass-home-gallery{grid-template-columns:1fr;gap:55px}#glass-grid .glass-display,.glass-home-gallery .glass-display{aspect-ratio:1.2}#glass-grid .glass-exhibit,.glass-home-gallery .glass-exhibit{width:100%;margin:0;padding:0}.glass-home-gallery .glass-product-copy h2{font-size:34px}.glass-home-gallery .glass-product-copy h3{margin-top:19px}}
@media(prefers-reduced-motion:reduce){.glass-front::before{animation:none!important}.glass-object img,.glass-original,.glass-reveals .glass-exhibit{transition:none!important}.glass-reveals .glass-exhibit{opacity:1!important;transform:none!important}.glass-object:hover img,.glass-object:focus-visible img{transform:none}}
/* A regular showroom wall: four across on desktop, five on very wide screens. */
#glass-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:55px 25px}
#glass-grid .glass-display{aspect-ratio:1.18}
#glass-grid .glass-product-copy{display:block;padding:18px 3px 0;margin-top:5px}
#glass-grid .glass-product-copy .eyebrow{font-size:6px;letter-spacing:.07em}
#glass-grid .glass-product-copy h2{font-size:27px;margin-top:12px}
#glass-grid .glass-product-copy h3{display:none}
#glass-grid .glass-product-copy p{font-size:11px;line-height:1.8;margin-top:13px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:59px}
#glass-grid .glass-product-links{display:flex;gap:13px;margin-top:18px;flex-wrap:wrap}
#glass-grid .glass-product-links .text-link{font-size:8px;margin:0}
#glass-grid .glass-plaque,#glass-grid .glass-original{font-size:5px}
@media(min-width:1900px){#glass-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1250px){#glass-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:50px 25px}}
@media(max-width:900px){#glass-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:45px 25px}}
@media(max-width:560px){#glass-grid{grid-template-columns:1fr;gap:48px}#glass-grid .glass-display{aspect-ratio:1.25}#glass-grid .glass-product-copy{padding-top:17px}#glass-grid .glass-product-copy h2{font-size:32px}#glass-grid .glass-product-copy p{font-size:12px;min-height:0;-webkit-line-clamp:4}#glass-grid .glass-product-copy .eyebrow{font-size:7px}#glass-grid .glass-product-links .text-link{font-size:9px}#glass-grid .glass-plaque,#glass-grid .glass-original{font-size:6px}}

/* Compact, uniform exhibits with a small travelling pool of rear light. */
#glass-grid{gap:34px 25px}
#glass-grid .glass-display,.glass-home-gallery .glass-display{aspect-ratio:2.1}
.glass-object img{left:5%;width:90%;height:66%;bottom:25%}
.glass-halo{inset:22% 29% 35%;background:radial-gradient(ellipse,#a8e0ed35 0%,#77bbd318 36%,transparent 72%);filter:blur(13px);animation:showroom-backlight 12s ease-in-out infinite alternate}
.glass-exhibit:nth-child(3n+2) .glass-halo{animation-delay:-5s}.glass-exhibit:nth-child(3n) .glass-halo{animation-delay:-9s}
#glass-grid .glass-product-copy{padding:13px 3px 0;margin-top:0}
#glass-grid .glass-product-copy h2{margin-top:8px;font-size:26px}
#glass-grid .glass-product-copy p{margin-top:9px;-webkit-line-clamp:2;min-height:0;line-height:1.65}
#glass-grid .glass-product-links{margin-top:12px;gap:10px}
.glass-plaque,.glass-original{bottom:6%}.glass-plaque{left:10%}
.background-motion-paused .glass-halo{animation-play-state:paused}
@keyframes showroom-backlight{0%{transform:translate(-13%,-6%) scale(.92);opacity:.65}55%{opacity:1}100%{transform:translate(17%,6%) scale(1.08);opacity:.8}}
@media(max-width:900px){#glass-grid{gap:32px 23px}}
@media(max-width:560px){#glass-grid{gap:32px}#glass-grid .glass-display,.glass-home-gallery .glass-display{aspect-ratio:1.85}#glass-grid .glass-product-copy p{-webkit-line-clamp:2}#glass-grid .glass-product-copy h2{font-size:30px}}
@media(prefers-reduced-motion:reduce){.glass-halo{animation:none!important}}
#glass-grid .glass-product-copy p{font-size:12px}#glass-grid .glass-product-links .text-link{font-size:9px}#glass-grid .glass-product-copy .eyebrow{font-size:7px}
.glass-ready .glass-exhibit:not(.is-inview) .glass-halo{animation-play-state:paused}

/* ==========================================================================
   EASTEED V7 — ARCHITECTURAL & INDUSTRIAL HAUTE-COUTURE DESIGN SYSTEM
   ========================================================================== */

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
  --font-serif: 'Instrument Serif', 'Playfair Display', 'Newsreader', 'Noto Serif', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --bg-obsidian: #06131c;
  --bg-deep: #091c29;
  --surface-glass: rgba(14, 36, 51, 0.68);
  --surface-glass-hover: rgba(20, 50, 70, 0.82);
  --surface-elevated: linear-gradient(165deg, rgba(19, 47, 66, 0.72) 0%, rgba(9, 25, 37, 0.88) 100%);
  --border-subtle: rgba(138, 204, 226, 0.16);
  --border-strong: rgba(154, 222, 244, 0.42);
  --accent-cyan: #8ad4eb;
  --accent-ice: #d4f1fa;
  --text-primary: #f0f7fa;
  --text-secondary: #a8c4d4;
  --text-muted: #789bb0;
  --shadow-card: 0 20px 50px rgba(1, 9, 16, 0.48), inset 0 1px 0 rgba(225, 246, 255, 0.09);
  --shadow-hover: 0 28px 64px rgba(1, 10, 18, 0.68), 0 0 32px rgba(120, 204, 230, 0.14), inset 0 1px 0 rgba(225, 246, 255, 0.18);
}

html {
  background: var(--bg-obsidian) !important;
  scroll-padding-top: 100px !important;
}

body {
  font-family: var(--font-sans) !important;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  background:
    radial-gradient(ellipse 80% 50% at 85% 10%, rgba(34, 106, 136, 0.24), transparent 60%),
    radial-gradient(ellipse 70% 55% at 12% 75%, rgba(22, 74, 102, 0.20), transparent 65%),
    linear-gradient(160deg, #05111a 0%, #091d2b 45%, #0c2536 75%, #06141e 100%) !important;
  background-attachment: fixed !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.008em;
}

/* 1. Typography & Hierarchy Refinement */
h1, h2, h3, h4 {
  font-family: var(--font-sans) !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.032em !important;
  font-weight: 500 !important;
}

.serif, .campaign-italic {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  color: #dff1f7 !important;
}

.eyebrow, .studio-kicker {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--accent-cyan) !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.eyebrow::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  margin-right: 2px !important;
  border-radius: 50% !important;
  background: var(--accent-cyan) !important;
  box-shadow: 0 0 10px rgba(138, 212, 235, 0.85) !important;
}

.pill {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.12em !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  background: rgba(138, 212, 235, 0.12) !important;
  border: 1px solid rgba(138, 212, 235, 0.35) !important;
  color: #bce8f5 !important;
  backdrop-filter: blur(8px);
}

/* 2. Top Preview Strip & Glassmorphic Sticky Header */
.preview-strip {
  background: rgba(4, 13, 20, 0.92) !important;
  border-bottom: 1px solid rgba(138, 204, 226, 0.14) !important;
  padding: 7px var(--gutter) !important;
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.12em !important;
  color: #8bb4c8 !important;
}

.preview-strip a {
  color: #bce6f4 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(188, 230, 244, 0.4) !important;
  padding-bottom: 1px;
}

.site-header {
  height: 82px !important;
  background: rgba(6, 19, 28, 0.82) !important;
  backdrop-filter: blur(24px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(165%) !important;
  border-bottom: 1px solid rgba(138, 204, 226, 0.16) !important;
  box-shadow: 0 12px 36px rgba(0, 8, 15, 0.42) !important;
}

.brand {
  font-size: 27px !important;
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
  color: #f4fbfe !important;
  gap: 12px !important;
}

.desktop-nav {
  gap: clamp(8px, 1.2vw, 18px) !important;
}

.desktop-nav > a {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #bfd6e3 !important;
  padding: 8px 15px !important;
  border-radius: 999px !important;
  transition: color 0.25s ease, background 0.25s ease !important;
}

.desktop-nav > a:hover {
  color: #ffffff !important;
  background: rgba(138, 212, 235, 0.10) !important;
}

.desktop-nav > a.active {
  color: #ffffff !important;
  background: rgba(138, 212, 235, 0.15) !important;
}

.desktop-nav > a.active::after,
.desktop-nav > a:hover::after {
  bottom: 4px !important;
  left: 16px !important;
  right: 16px !important;
  width: auto !important;
  height: 1.5px !important;
  background: var(--accent-cyan) !important;
  border-radius: 2px;
}

/* 3. Buttons & Interactive Links */
.button {
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  padding: 13px 24px !important;
  min-height: 46px !important;
  gap: 14px !important;
  background: linear-gradient(135deg, #d0eff8 0%, #90d1e6 100%) !important;
  color: #051b29 !important;
  border: 1px solid #dcf4fb !important;
  box-shadow: 0 6px 22px rgba(138, 212, 235, 0.22) !important;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease, filter 0.25s ease !important;
}

.button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 30px rgba(138, 212, 235, 0.38) !important;
  filter: brightness(1.05);
  color: #041520 !important;
}

.button.outline, .button.ghost {
  background: rgba(16, 43, 60, 0.55) !important;
  color: #e4f4fa !important;
  border: 1px solid rgba(145, 210, 232, 0.38) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px);
}

.button.outline:hover, .button.ghost:hover {
  background: rgba(28, 68, 92, 0.80) !important;
  border-color: rgba(175, 230, 248, 0.68) !important;
  color: #ffffff !important;
}

.header-cta {
  padding: 10px 20px !important;
  min-height: 40px !important;
  font-size: 13px !important;
}

.text-link {
  font-size: 13px !important;
  font-weight: 500 !important;
  gap: 12px !important;
  color: #bae3f2 !important;
  border-bottom: 1px solid rgba(138, 212, 235, 0.42) !important;
  padding: 6px 0 !important;
  transition: color 0.2s ease, border-color 0.2s ease !important;
}

.text-link:hover {
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* Position ambient toggle neatly at bottom-right below all content docks */
.ambient-toggle {
  top: auto !important;
  bottom: 14px !important;
  right: 18px !important;
  background: rgba(6, 19, 29, 0.84) !important;
  border: 1px solid rgba(138, 204, 226, 0.24) !important;
  padding: 7px 13px !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: #bce4f2 !important;
  box-shadow: 0 8px 24px rgba(0, 8, 16, 0.45) !important;
}

/* 4. Hero Section & Frosted Control Console (fits 100% in 900px viewport) */
.campaign-hero {
  height: calc(100svh - 114px) !important;
  min-height: 640px !important;
  max-height: 920px !important;
  border-bottom: 1px solid var(--border-subtle);
}

.campaign-shade {
  background:
    linear-gradient(90deg, rgba(5, 17, 26, 0.94) 0%, rgba(6, 20, 30, 0.80) 34%, rgba(6, 20, 30, 0.28) 65%, rgba(6, 20, 30, 0.10) 100%),
    linear-gradient(0deg, rgba(6, 19, 28, 0.96) 0%, rgba(6, 19, 28, 0.55) 22%, transparent 48%),
    linear-gradient(180deg, rgba(5, 16, 24, 0.55) 0%, transparent 24%) !important;
}

.campaign-copy {
  padding-top: clamp(44px, 7vh, 105px) !important;
}

.campaign-copy .eyebrow {
  margin-bottom: 20px !important;
}

.campaign-copy h1 {
  font-size: clamp(58px, 6.2vw, 98px) !important;
  line-height: 1.01 !important;
  letter-spacing: -0.038em !important;
  text-shadow: 0 8px 40px rgba(0, 10, 18, 0.65) !important;
}

.campaign-copy > p {
  font-size: 17px !important;
  line-height: 1.55 !important;
  color: #c2dae6 !important;
  max-width: 34ch !important;
  margin-top: 20px !important;
}

.campaign-copy .button-row {
  margin-top: 26px !important;
  gap: 16px !important;
}

.campaign-copy .text-link {
  border: 1px solid rgba(145, 210, 232, 0.36) !important;
  background: rgba(12, 34, 49, 0.60) !important;
  backdrop-filter: blur(14px) !important;
  padding: 12px 22px !important;
  border-radius: 999px !important;
  min-height: 46px !important;
}

.campaign-copy .text-link:hover {
  background: rgba(24, 60, 84, 0.82) !important;
  border-color: rgba(175, 230, 248, 0.68) !important;
}

.campaign-bottom {
  bottom: 48px !important;
  left: var(--gutter) !important;
  right: var(--gutter) !important;
  width: auto !important;
  margin: 0 auto !important;
  background: rgba(7, 21, 32, 0.82) !important;
  backdrop-filter: blur(22px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
  border: 1px solid rgba(142, 208, 230, 0.22) !important;
  border-radius: 16px !important;
  padding: 12px 22px 14px !important;
  box-shadow: 0 20px 50px rgba(0, 8, 16, 0.58) !important;
  max-width: calc(var(--max) - 2 * var(--gutter)) !important;
}

.campaign-tab {
  padding: 12px 8px 2px 0 !important;
  min-height: 46px !important;
  color: #8eb0c2 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
}

.campaign-tab.is-active {
  color: #ffffff !important;
}

.campaign-tab-number {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--accent-cyan) !important;
}

.campaign-disclosure {
  bottom: 16px !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: #7ea3b7 !important;
}

/* 5. Capability Index Matrix */
.capability-index {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
  gap: 56px !important;
  align-items: center !important;
}

.capability-index > div > p {
  font-size: clamp(26px, 2.5vw, 34px) !important;
  line-height: 1.22 !important;
  color: #eef7fb !important;
  font-weight: 500 !important;
}

.capability-index nav {
  gap: 14px 18px !important;
}

.capability-index nav a {
  background: var(--surface-elevated) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 14px !important;
  padding: 18px 22px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #e2f1f8 !important;
  box-shadow: 0 10px 28px rgba(1, 9, 16, 0.28) !important;
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease !important;
}

.capability-index nav a:hover {
  transform: translateY(-3px) !important;
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-hover) !important;
  color: #ffffff !important;
}

.capability-index nav a > span {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--accent-cyan) !important;
  background: rgba(138, 212, 235, 0.14) !important;
  border: 1px solid rgba(138, 212, 235, 0.28) !important;
  padding: 4px 9px !important;
  border-radius: 6px !important;
}

/* 6. 3-View Perspective Story & Technical Stage */
.perspective-sticky {
  top: 82px !important;
  height: calc(100svh - 82px) !important;
  min-height: 600px !important;
}

.perspective-layout {
  gap: 44px !important;
}

.perspective-copy {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.perspective-copy h2 {
  font-size: clamp(36px, 3.6vw, 54px) !important;
  margin-top: 16px !important;
}

.perspective-copy > p {
  margin-top: 14px !important;
  font-size: 13.5px !important;
}

.perspective-steps {
  gap: 10px !important;
  margin-top: 20px !important;
}

.perspective-step {
  border: 1px solid rgba(138, 204, 226, 0.15) !important;
  border-left: 3px solid transparent !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  background: rgba(11, 30, 44, 0.48) !important;
  transition: all 0.3s ease !important;
}

.perspective-step:hover {
  background: rgba(16, 43, 62, 0.65) !important;
  border-color: rgba(138, 204, 226, 0.3) !important;
}

.perspective-step.is-active {
  background: linear-gradient(135deg, rgba(22, 58, 80, 0.82) 0%, rgba(12, 34, 49, 0.72) 100%) !important;
  border-color: rgba(145, 214, 236, 0.38) !important;
  border-left: 3px solid var(--accent-cyan) !important;
  box-shadow: 0 14px 36px rgba(0, 10, 18, 0.4) !important;
}

.perspective-step > span:first-child {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--accent-cyan) !important;
}

.perspective-step strong {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #f0f8fc !important;
  margin-top: 5px !important;
}

.perspective-step .perspective-description {
  font-size: 12.5px !important;
  color: #a9c6d6 !important;
  line-height: 1.55 !important;
  margin-top: 6px !important;
}

.perspective-copy > .text-link {
  margin-top: 18px !important;
}

.perspective-art {
  background: radial-gradient(ellipse at 50% 50%, rgba(34, 96, 124, 0.28) 0%, rgba(8, 24, 36, 0.75) 75%) !important;
  border: 1px solid rgba(138, 204, 226, 0.20) !important;
  border-radius: 24px !important;
  padding: 24px !important;
  box-shadow: var(--shadow-card) !important;
  min-height: 460px !important;
}

.perspective-product {
  height: 430px !important;
}

.perspective-image-caption {
  left: 24px !important;
  right: 24px !important;
  bottom: 18px !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: #9acae0 !important;
  background: rgba(6, 19, 29, 0.72);
  backdrop-filter: blur(10px);
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(138, 204, 226, 0.18);
}

.perspective-note {
  font-size: 11px !important;
  color: #7b9fb4 !important;
  margin-top: 12px !important;
}

/* 7. Glass Showroom Vitrine Cards (Fixes Gestalt row confusion & micro-text) */
.glass-home-gallery {
  gap: 36px 32px !important;
}

#glass-grid {
  gap: 32px 24px !important;
}

.glass-exhibit {
  background: var(--surface-elevated) !important;
  border: 1px solid rgba(138, 204, 226, 0.18) !important;
  border-radius: 20px !important;
  padding: 20px 20px 24px !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s ease, box-shadow 0.35s ease !important;
  display: flex !important;
  flex-direction: column !important;
}

.glass-exhibit:hover, .glass-exhibit:focus-within {
  transform: translateY(-6px) !important;
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-hover) !important;
}

.glass-display {
  background: radial-gradient(ellipse at 50% 58%, rgba(44, 118, 148, 0.30) 0%, rgba(6, 18, 27, 0.88) 76%) !important;
  border: 1px solid rgba(138, 204, 226, 0.14) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

.glass-plaque {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  color: #9ecce0 !important;
  background: rgba(6, 19, 29, 0.72) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(138, 204, 226, 0.18) !important;
  left: 14px !important;
  bottom: 12px !important;
}

.glass-original {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: #d0f0fa !important;
  background: rgba(18, 52, 72, 0.85) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(138, 204, 226, 0.3) !important;
  right: 14px !important;
  bottom: 12px !important;
}

.glass-product-copy {
  border-top: 1px solid rgba(138, 204, 226, 0.14) !important;
  padding: 18px 6px 0 !important;
  margin-top: 16px !important;
  flex: 1 !important;
}

.glass-home-gallery .glass-product-copy {
  display: grid !important;
  grid-template-columns: 0.85fr 1.15fr !important;
  gap: 20px !important;
}

#glass-grid .glass-product-copy .eyebrow,
.glass-product-copy .eyebrow {
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
}

#glass-grid .glass-product-copy h2,
.glass-product-copy h2 {
  font-size: 24px !important;
  font-weight: 600 !important;
  color: #f2f9fc !important;
  margin-top: 10px !important;
}

.glass-home-gallery .glass-product-copy h2 {
  font-size: 30px !important;
}

.glass-product-copy h3 {
  font-size: 22px !important;
  color: #d4ecf6 !important;
}

#glass-grid .glass-product-copy p,
.glass-product-copy p {
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: #9cb9c9 !important;
  margin-top: 10px !important;
}

#glass-grid .glass-product-links,
.glass-product-links {
  margin-top: 16px !important;
  gap: 16px !important;
}

#glass-grid .glass-product-links .text-link,
.glass-product-links .text-link {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #bce6f4 !important;
}

/* Showroom Toolbar, Modes, Filters & Reference Table */
.glass-toolbar {
  background: rgba(11, 30, 44, 0.62) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 16px !important;
  padding: 14px 22px !important;
  backdrop-filter: blur(16px);
}

.glass-modes {
  gap: 10px !important;
}

.glass-modes button {
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  color: #9ab9ca !important;
  transition: all 0.25s ease !important;
}

.glass-modes button[aria-pressed="true"] {
  background: rgba(138, 212, 235, 0.16) !important;
  border-color: rgba(138, 212, 235, 0.42) !important;
  color: #ffffff !important;
}

.glass-modes button > span {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  background: rgba(6, 19, 29, 0.65);
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--accent-cyan) !important;
}

.glass-search {
  width: 300px !important;
  background: rgba(6, 19, 29, 0.65) !important;
  border: 1px solid rgba(138, 204, 226, 0.24) !important;
  border-radius: 999px !important;
  padding: 9px 16px !important;
}

.glass-search input {
  font-size: 13px !important;
  color: #eaf6fb !important;
}

.glass-filters {
  gap: 10px !important;
  margin-top: 18px !important;
  padding-bottom: 22px !important;
}

.glass-filter {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 9px 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(138, 204, 226, 0.18) !important;
  background: rgba(11, 30, 44, 0.48) !important;
  color: #a2c0d0 !important;
  transition: all 0.25s ease !important;
}

.glass-filter:hover {
  border-color: rgba(138, 204, 226, 0.38) !important;
  color: #e8f6fb !important;
}

.glass-filter.active {
  background: linear-gradient(135deg, #c6eaf5 0%, #89cce2 100%) !important;
  color: #051b29 !important;
  border-color: #d6f3fb !important;
  font-weight: 600 !important;
}

.glass-filter > span {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  border-radius: 999px !important;
  padding: 2px 7px !important;
  background: rgba(5, 27, 41, 0.18);
  color: inherit !important;
  border-color: currentColor !important;
}

.glass-summary {
  font-family: var(--font-mono) !important;
  font-size: 11.5px !important;
  color: #8bb0c4 !important;
  margin: 22px 0 24px !important;
}

.glass-summary > span {
  font-size: 11px !important;
  color: #749cb2 !important;
}

.reference-table-wrap {
  background: var(--surface-elevated) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 18px !important;
  padding: 8px 20px !important;
  box-shadow: var(--shadow-card) !important;
  overflow-x: auto;
}

.reference-table thead th {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--accent-cyan) !important;
}

.reference-table td {
  font-size: 13px !important;
  color: #a9c5d4 !important;
}

.reference-table td a {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #bce6f4 !important;
}

/* 8. Process Cinema, Partner Network & Journal Cards */
.process-slide {
  background: var(--surface-elevated) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-card) !important;
}

.process-slide-meta {
  padding: 22px 24px 24px !important;
}

.process-slide-meta > span {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--accent-cyan) !important;
}

.process-slide-meta p {
  font-size: 12px !important;
  color: #8fb1c4 !important;
}

.brand-reference-grid {
  gap: 24px !important;
}

.brand-reference {
  background: var(--surface-elevated) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 16px !important;
  padding: 14px 14px 16px !important;
  box-shadow: 0 14px 36px rgba(1, 9, 16, 0.35) !important;
  transition: transform 0.3s ease, border-color 0.3s ease !important;
}

.brand-reference:hover {
  transform: translateY(-4px) !important;
  border-color: var(--border-strong) !important;
}

.brand-reference > div {
  background: linear-gradient(145deg, #f5f9fb 0%, #e3eef3 100%) !important;
  border-radius: 10px !important;
  height: 114px !important;
  padding: 24px !important;
  box-shadow: inset 0 1px 0 #ffffff !important;
}

.brand-reference figcaption {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #b4d5e4 !important;
  letter-spacing: 0.1em !important;
  margin-top: 12px !important;
  text-align: center;
}

/* Editorial Journal & Insights Cards */
.journal-list {
  border: 0 !important;
  gap: 24px !important;
}

.journal-card, .insight-card, .product-card, .workshop-card, .pathway {
  background: var(--surface-elevated) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 18px !important;
  padding: 28px !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.journal-card + .journal-card, .pathway + .pathway {
  border-left: 1px solid var(--border-subtle) !important;
  padding-left: 28px !important;
}

.journal-card:hover, .insight-card:hover, .product-card:hover, .workshop-card:hover, .pathway:hover {
  transform: translateY(-5px) !important;
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-hover) !important;
}

.product-card, .insight-card, .workshop-card {
  padding: 18px 18px 24px !important;
}

.product-art, .insight-cover, .workshop-card img, .detail-visual, .premium-hero-visual {
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(138, 204, 226, 0.14) !important;
}

.premium-hero-visual .figure-note, .detail-visual .figure-note {
  background: rgba(6, 19, 29, 0.82) !important;
  backdrop-filter: blur(12px) !important;
  color: #b8d8e8 !important;
  border: 1px solid rgba(138, 204, 226, 0.22) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 11px !important;
}

.pathways {
  border: 0 !important;
  gap: 24px !important;
}

/* 9. Contact Brief Form & Closing Callout */
.brief-form {
  background: var(--surface-elevated) !important;
  border: 1px solid rgba(138, 204, 226, 0.22) !important;
  border-radius: 22px !important;
  padding: 36px !important;
  box-shadow: var(--shadow-card) !important;
}

.field input, .field select, .field textarea {
  border-radius: 10px !important;
  background: rgba(6, 19, 29, 0.68) !important;
  border: 1px solid rgba(138, 204, 226, 0.26) !important;
  padding: 13px 16px !important;
  font-size: 14px !important;
  color: #eef7fb !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent-cyan) !important;
  box-shadow: 0 0 0 3px rgba(138, 212, 235, 0.18) !important;
  outline: none !important;
}

.closing {
  background: linear-gradient(135deg, rgba(22, 60, 82, 0.78) 0%, rgba(10, 28, 42, 0.92) 100%) !important;
  border: 1px solid rgba(145, 214, 236, 0.28) !important;
  border-radius: 24px !important;
  padding: 52px 56px !important;
  margin-top: 28px !important;
  margin-bottom: 64px !important;
  box-shadow: var(--shadow-card) !important;
}

.image-dialog, .compare-dialog {
  border-radius: 20px !important;
  border: 1px solid rgba(145, 214, 236, 0.28) !important;
  box-shadow: 0 32px 90px rgba(0, 6, 12, 0.75) !important;
}

.viewer-tools button, .dialog-close {
  border-radius: 8px !important;
}

@media (max-width: 850px) {
  .glass-home-gallery .glass-product-copy {
    grid-template-columns: 1fr !important;
  }
  .closing {
    padding: 36px 28px !important;
  }
  .brief-form {
    padding: 24px 20px !important;
  }
}

/* === EASTEED V8 REAL-TIME AURORA & INDUSTRIAL SCALE BENTO STRIP === */
.site-lightfield {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  opacity: 0.95 !important;
}

.aurora-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  filter: blur(28px);
  opacity: 0.92;
}

.scale-bento-section {
  padding-top: 44px;
  padding-bottom: 12px;
  position: relative;
  z-index: 2;
}

.scale-bento-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.scale-bento-card {
  background: linear-gradient(160deg, rgba(18, 48, 68, 0.76) 0%, rgba(8, 23, 35, 0.90) 100%);
  border: 1px solid rgba(138, 212, 235, 0.22);
  border-radius: 18px;
  padding: 24px 22px;
  box-shadow: 0 18px 44px rgba(1, 9, 16, 0.45), inset 0 1px 0 rgba(225, 246, 255, 0.12);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.scale-bento-card:hover {
  transform: translateY(-4px);
  border-color: rgba(154, 226, 248, 0.48);
  box-shadow: 0 24px 56px rgba(1, 10, 18, 0.65), 0 0 28px rgba(120, 204, 230, 0.16);
}

.scale-bento-card strong {
  display: block;
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 600;
  letter-spacing: -0.035em;
  color: #f4fbfe;
  margin-top: 10px;
  line-height: 1.1;
}

.scale-bento-card p {
  font-size: 12.5px;
  line-height: 1.65;
  color: #9ec0d2;
  margin-top: 10px;
}

@media (max-width: 1050px) {
  .scale-bento-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .scale-bento-grid {
    grid-template-columns: 1fr;
  }
}

/* === OPTION 2 + OPTION 3: INTERACTIVE X-RAY CUTAWAY + BENTO MATRIX HERO === */
.bento-xray-hero {
  height: auto !important;
  min-height: calc(100svh - 114px) !important;
  max-height: none !important;
  padding: 20px 0 28px !important;
  background: transparent !important;
  display: flex;
  align-items: center;
}

.bento-hero-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.48fr;
  gap: 28px;
  align-items: stretch;
  width: 100%;
}

.bento-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 0;
}

.bento-hero-copy h1 {
  font-size: clamp(44px, 4.4vw, 66px) !important;
  line-height: 1.01 !important;
  letter-spacing: -0.038em !important;
  margin-top: 18px !important;
  color: #f4fbfe !important;
}

.bento-hero-lead {
  font-size: 16px !important;
  line-height: 1.62 !important;
  color: #b4d0df !important;
  margin-top: 20px !important;
  max-width: 40ch !important;
}

.bento-hero-copy .button-row {
  margin-top: 28px !important;
  gap: 14px !important;
}

.bento-hero-copy .text-link {
  border: 1px solid rgba(145, 210, 232, 0.36) !important;
  background: rgba(12, 34, 49, 0.60) !important;
  backdrop-filter: blur(14px) !important;
  padding: 12px 22px !important;
  border-radius: 999px !important;
  min-height: 46px !important;
}

.bento-mini-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(138, 204, 226, 0.18);
}

.bento-mini-metrics div {
  background: rgba(9, 26, 38, 0.55);
  border: 1px solid rgba(138, 204, 226, 0.14);
  border-radius: 12px;
  padding: 12px 14px;
}

.bento-mini-metrics strong {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: #eef8fc;
  letter-spacing: -0.02em;
}

.bento-mini-metrics span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #84b4c8;
  margin-top: 3px;
}

/* Right Column: 4-Window Bento Matrix */
.bento-hero-matrix {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-content: start;
}

.bento-card {
  background: linear-gradient(165deg, rgba(16, 42, 60, 0.78) 0%, rgba(7, 20, 31, 0.92) 100%);
  border: 1px solid rgba(138, 208, 232, 0.22);
  border-radius: 22px;
  box-shadow: 0 22px 54px rgba(1, 9, 16, 0.52), inset 0 1px 0 rgba(225, 246, 255, 0.12);
  overflow: hidden;
  position: relative;
}

.bento-xray-stage {
  grid-column: 1 / -1;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.xray-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.xray-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: #9ad8ec;
}

.xray-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 10px #38bdf8;
}

.xray-tag {
  color: #729db2;
  font-size: 9.5px;
}

.xray-QuickModes {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.xray-QuickModes .campaign-tab {
  min-height: 30px !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(138, 204, 226, 0.18) !important;
  background: rgba(8, 24, 36, 0.65) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  color: #93b7c9 !important;
  cursor: pointer;
}

.xray-QuickModes .campaign-tab.is-active {
  background: rgba(56, 189, 248, 0.22) !important;
  border-color: rgba(125, 211, 252, 0.65) !important;
  color: #ffffff !important;
}

.xray-QuickModes .campaign-tab-number {
  padding: 0 !important;
  font-size: 9.5px !important;
}

.xray-scan-toggle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(138, 204, 226, 0.28);
  background: rgba(12, 34, 49, 0.75);
  color: #c8ecf7;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Dual-Layer X-Ray Viewport */
.xray-viewport {
  position: relative;
  height: 258px;
  border-radius: 16px;
  background: radial-gradient(ellipse at 52% 54%, rgba(32, 96, 126, 0.34) 0%, rgba(4, 13, 21, 0.95) 78%);
  border: 1px solid rgba(138, 208, 232, 0.18);
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  touch-action: pan-y;
}

.xray-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.xray-blueprint-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(125, 211, 252, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(125, 211, 252, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 8;
}

.xray-layer-core img,
.xray-layer-upper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 62% 54% !important;
  transform: none !important;
  filter: none !important;
}

.xray-layer-upper {
  clip-path: polygon(0 0, var(--xray-pos, 52%) 0, var(--xray-pos, 52%) 100%, 0 100%);
}

/* === DARK OBSIDIAN GLASS PARTNER LOGO WALL (NO WHITE PLATES) === */
.brand-reference-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 24px !important;
}

.brand-reference {
  margin: 0 !important;
  background: linear-gradient(160deg, rgba(16, 42, 60, 0.56) 0%, rgba(7, 20, 31, 0.82) 100%) !important;
  border: 1px solid rgba(138, 208, 232, 0.18) !important;
  border-radius: 16px !important;
  padding: 20px 22px 14px !important;
  box-shadow: 0 16px 36px rgba(1, 9, 16, 0.42), inset 0 1px 0 rgba(225, 246, 255, 0.08) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  transition: transform 0.32s ease, border-color 0.32s ease, box-shadow 0.32s ease !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.brand-reference:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(125, 211, 252, 0.48) !important;
  box-shadow: 0 20px 44px rgba(2, 12, 22, 0.58), 0 0 24px rgba(56, 189, 248, 0.14), inset 0 1px 0 rgba(225, 246, 255, 0.16) !important;
}

.brand-reference > div {
  height: 92px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 8px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
}

.brand-reference > div:hover {
  transform: none !important;
}

.brand-reference img, .brand-reference svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 165px;
  overflow: visible;
  filter: none;
  opacity: 0.92;
  transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
}

.brand-reference:hover img, .brand-reference:hover svg {
  opacity: 1;
  transform: scale(1.04);
  filter: none;
}

.brand-reference figcaption {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: #92bed2 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-top: 12px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(138, 204, 226, 0.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.brand-reference figcaption::after {
  content: "ARCHIVE REF";
  font-size: 8.5px;
  color: rgba(138, 184, 204, 0.55);
  letter-spacing: 0.08em;
}

.partner-spotlight img {
  background: rgba(10, 28, 41, 0.55) !important;
  border: 1px solid rgba(138, 208, 232, 0.16) !important;
  border-radius: 14px !important;
  padding: 24px !important;
  filter: drop-shadow(0 4px 16px rgba(56, 189, 248, 0.20)) !important;
  mix-blend-mode: normal !important;
}

.xray-corner-label {
  position: absolute;
  top: 12px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(5, 16, 25, 0.80);
  border: 1px solid rgba(138, 208, 232, 0.22);
  color: #a8d8ea;
  pointer-events: none;
  z-index: 8;
}

.xray-label-left { left: 12px; }
.xray-label-right { right: 12px; color: #7dd3fc; border-color: rgba(56, 189, 248, 0.35); }

/* Glowing Laser Line */
.xray-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--xray-pos, 52%);
  width: 2px;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
  z-index: 8;
}

.xray-laser-line {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.2), #7dd3fc 20%, #e0f2fe 50%, #7dd3fc 80%, rgba(56, 189, 248, 0.2));
  box-shadow: 0 0 18px 3px rgba(56, 189, 248, 0.75), 0 0 36px 8px rgba(14, 165, 233, 0.35);
}

.xray-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(6, 22, 34, 0.92);
  border: 1.5px solid #bae6fd;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.8);
  color: #e0f2fe;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

/* Technical Hotspots */
.xray-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 12;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.hotspot-ping {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid rgba(125, 211, 252, 0.65);
  animation: xray-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.hotspot-dot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(6, 22, 34, 0.92);
  border: 1.5px solid #7dd3fc;
  color: #e0f2fe;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}

.xray-hotspot:hover .hotspot-dot,
.xray-hotspot.is-selected .hotspot-dot {
  background: #bae6fd;
  color: #041622;
  transform: scale(1.12);
}

@keyframes xray-ping {
  0% { transform: scale(0.85); opacity: 0.9; }
  80%, 100% { transform: scale(1.55); opacity: 0; }
}

.xray-readout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(6, 18, 28, 0.76);
  border: 1px solid rgba(138, 204, 226, 0.15);
}

.xray-readout strong {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: #7dd3fc;
  white-space: nowrap;
}

.xray-readout .campaign-disclosure {
  position: static !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  color: #b4d0df !important;
  margin: 0 !important;
}

/* 3 Bottom Bento Sub-Cards */
.bento-subcard {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 158px;
  transition: transform 0.28s ease, border-color 0.28s ease;
}

.bento-subcard:hover {
  transform: translateY(-4px);
  border-color: rgba(154, 226, 248, 0.50);
}

.bento-sub-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bento-sub-top .eyebrow {
  font-size: 9.5px !important;
  letter-spacing: 0.1em !important;
}

.bento-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid rgba(56, 189, 248, 0.30);
  color: #bae6fd;
  white-space: nowrap;
}

.bento-metric-big {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: #f4fbfe;
  margin-top: 8px;
  line-height: 1;
}

.bento-metric-big span {
  font-size: 15px;
  font-weight: 400;
  color: #88c4da;
}

.bento-subcard p {
  font-size: 12px;
  line-height: 1.55;
  color: #9ec0d2;
  margin-top: 8px;
}

.bento-subcard .text-link {
  font-size: 11.5px !important;
  margin-top: 10px;
  align-self: flex-start;
}

.bento-mini-shoe {
  border: 0;
  background: radial-gradient(ellipse at 50% 60%, rgba(44, 118, 148, 0.28), rgba(5, 16, 25, 0.65));
  border-radius: 12px;
  padding: 12px 10px;
  margin: 10px 0 8px;
  width: 100%;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
}

.bento-mini-shoe img {
  max-height: 58px;
  width: 90%;
  object-fit: contain;
  filter: drop-shadow(0 10px 10px rgba(0, 10, 20, 0.7));
  transition: transform 0.35s ease;
}

.bento-mini-shoe:hover img {
  transform: translateY(-3px) scale(1.04);
}

.bento-sub-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #84b0c4;
}

.bento-workshop-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}

.bento-workshop-tags span {
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(8, 25, 38, 0.8);
  border: 1px solid rgba(138, 204, 226, 0.2);
  color: #bce4f2;
}

@media (max-width: 1150px) {
  .bento-hero-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .bento-hero-matrix {
    grid-template-columns: 1fr;
  }
  .xray-viewport {
    height: 250px;
  }
  .xray-readout {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* Give the original 4:3 photos a closer frame while leaving room for the plinth. */
#glass-grid .glass-display,
.glass-home-gallery .glass-display {
  width: min(82%, 320px) !important;
  aspect-ratio: 1.55 !important;
  margin-inline: auto !important;
}

#glass-grid .glass-object img,
.glass-home-gallery .glass-object img {
  left: 4% !important;
  top: 4% !important;
  bottom: auto !important;
  width: 92% !important;
  height: 79% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

#glass-grid .glass-object:hover img,
#glass-grid .glass-object:focus-visible img,
.glass-home-gallery .glass-object:hover img,
.glass-home-gallery .glass-object:focus-visible img {
  transform: translateY(-3px) scale(1.015) !important;
}

#glass-grid .glass-halo,
.glass-home-gallery .glass-halo {
  inset: 31% 20% 26% !important;
}

.application-context {
  margin: 10px 0 22px;
  color: #afcfdd;
  font-size: 13px;
  line-height: 1.6;
}