/* Black lacquer, brushed metal and restrained red light. */
:root {
  --paper: #030303;
  --ink: #f5f5f5;
  --accent: #ff3040;
  --button-fill: linear-gradient(155deg, #e51b2a 0%, #d50b20 48%, #b8071e 100%);
  --button-hover: linear-gradient(155deg, #e81b2b, #df1126 48%, #c80a1f);
  --muted: #adaeb2;
  --line: #ffffff20;
  --white: #101011;
  --radius: 8px;
  --glass: linear-gradient(145deg, #ffffff0d, #ffffff02 42%, #0008), #09090a;
}
body {
  background: radial-gradient(ellipse 950px 540px at 88% 8%, #c20b2010, transparent 70%),
    radial-gradient(ellipse 750px 500px at 0% 36%, #ffffff06, transparent 75%), var(--paper);
}
.utility-bar { background: #000; border-bottom: 1px solid #ffffff0b; }
.site-header {
  background: linear-gradient(180deg, #171718d9, #060606ed);
  border-bottom-color: #ffffff26;
  box-shadow: inset 0 1px #ffffff0b;
  backdrop-filter: blur(24px);
  transition: box-shadow .35s, background .35s;
}
.site-header.is-scrolled { box-shadow: 0 12px 45px #0009, inset 0 1px #ffffff09; }
.navigation { min-height: 100px; }
.brand img { filter: drop-shadow(0 3px 10px #ffffff0c); }
#main-nav > a { color: #d4d4d6; }
#main-nav > a:hover, #main-nav > a[aria-current] { color: #fff; }
.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.scroll-progress > span { display: block; height: 100%; background: var(--accent); box-shadow: 0 0 12px #ff304060; transform: scaleX(0); transform-origin: left; }
.button { position: relative; overflow: hidden; border-radius: 8px; transition: transform .35s, box-shadow .35s, background .35s; }
.button-dark {
  background: var(--button-fill);
  border-color: #ff526680;
  color: #fff;
  box-shadow: inset 0 1px #ffffff45, 0 5px 18px #e9102b1a;
}
.button-dark:hover { background: var(--button-hover); box-shadow: inset 0 1px #ffffff55, 0 8px 25px #e9102b35; }
.button::after { content: ''; position: absolute; top: -60%; left: -70%; width: 42%; height: 220%; transform: skewX(-24deg); background: linear-gradient(90deg, transparent, #ffffff35, transparent); pointer-events: none; }
.button:hover::after { animation: button-glint .7s ease-out; }
.button .icon, .text-link .icon { transition: transform .35s; }
.button:hover .icon, .text-link:hover .icon { transform: translate(2px, -2px); }
.button-outline { background: linear-gradient(160deg, #ffffff0b, #ffffff02); border-color: #ffffff32; box-shadow: inset 0 1px #ffffff0c; }
.button-outline:hover { background: #181819; border-color: #ffffff60; }
.status-dot { box-shadow: 0 0 12px #ff304050; }
.video-hero { padding-top: 40px; padding-bottom: 60px; }
.hero-banner {
  --light-x: 50%; --light-y: 0%;
  position: relative;
  border-radius: 14px;
  border-color: #ffffff32;
  box-shadow: 0 35px 80px -30px #000, 0 0 60px -25px #ff304040, inset 0 1px #ffffff55;
  transform-origin: center;
}
.hero-banner::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse 75% 45% at var(--light-x) var(--light-y), #ffffff10, transparent 80%);
  box-shadow: inset 0 1px #ffffff38;
}
.hero-banner-toolbar { min-height: 56px; background: linear-gradient(180deg, #19191b, #090909); border-top-color: #ffffff1c; }
.hero-banner-toolbar > .eyebrow { color: #c5c5c8; }
.hero-video-toggle { border: 1px solid transparent; }
.hero-video-toggle:hover { background: #ffffff0c; border-color: #ffffff20; }
.video-hero-intro { margin-top: 42px; }
.video-hero-intro h1 { font-size: clamp(44px, 4.9vw, 70px); letter-spacing: -.06em; }
.video-hero-intro h1 > .accent, .page-intro h1 > .accent, .studio-teaser h2 > .accent {
  color: var(--accent);
  background: linear-gradient(135deg, #ff4050, #f51c32 65%, #ff3040);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.video-hero-copy > p { font-size: 15px; }
.video-hero-intro .eyebrow { color: #c8c8cc; }
.capability-strip { background: linear-gradient(180deg, #ffffff04, transparent); border-color: #ffffff15; }
.capability-strip span:first-child { color: #b1b1b6; }
.section-heading .eyebrow, .page-intro > .eyebrow, .about-strip .eyebrow { color: #b8b8be; }
.product-grid { gap: 24px; }
.product-card {
  --light-x: 50%; --light-y: 0%;
  position: relative; padding: 9px; border: 1px solid #ffffff16; border-radius: 13px;
  background: var(--glass); box-shadow: inset 0 1px #ffffff12, 0 12px 25px #0004;
  transition: border-color .35s, box-shadow .35s;
}
.product-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(ellipse 70% 55% at var(--light-x) var(--light-y), #ffffff09, transparent 85%);
}
.product-card:hover, .product-card:focus-within { border-color: #ffffff40; box-shadow: inset 0 1px #ffffff25, 0 18px 35px #0008; }
.product-image { border-radius: 7px; background: #070707; }
.product-image img { filter: saturate(.9); }
.product-card-info { padding: 18px 9px 12px; }
.product-card-info h3 { font-size: 19px; }
.product-card-info p { color: #b2b2b8; }
.product-card-info .eyebrow { color: #9999a1; }
.image-arrow, .add-product { background: linear-gradient(145deg, #28282b, #080809); border-color: #ffffff35; box-shadow: inset 0 1px #ffffff15; }
.add-product:hover, .add-product.selected { background: var(--button-fill); color: #fff; }
.studio-teaser {
  position: relative; padding: 86px 0;
  background: radial-gradient(ellipse at 85% 50%, #ff30400b, transparent 65%), linear-gradient(150deg, #101011, #030303 60%);
  border-top: 1px solid #ffffff13; border-bottom: 1px solid #ffffff13;
}
.studio-teaser > .container { grid-template-columns: .85fr 1.15fr; gap: 65px; }
.studio-teaser h2 { font-size: clamp(38px, 4vw, 56px); }
.studio-teaser .sign-scene { width: 100%; }
.sign-scene {
  --light-x: 62%; --light-y: 24%;
  border-radius: 14px; border-color: #ffffff26;
  background: linear-gradient(150deg, #19191c, #050505);
  box-shadow: inset 0 1px #ffffff18, 0 35px 70px -25px #000c;
}
.scene-topline { border-bottom-color: #ffffff15; height: 52px; }
.scene-wall {
  perspective: 1100px;
  background: radial-gradient(ellipse at var(--light-x) var(--light-y), #303035 0%, #111113 48%, #040405 90%);
}
.scene-floor { background: linear-gradient(180deg, #1e1e22, #030303 75%); border-top: 1px solid #ffffff25; transform: skewY(-5deg); }
.scene-floor::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 60px, #ffffff04 60px 61px); transform: perspective(150px) rotateX(35deg); }
.scene-glow { background: var(--scene-colour); opacity: .14; filter: blur(65px); top: 75px; height: 240px; }
.sign-assembly {
  transform: rotateY(-18deg) rotateX(9deg) rotateZ(-5deg);
  transition: transform .65s cubic-bezier(.18,.7,.25,1);
  animation: none; filter: drop-shadow(18px 30px 18px #0009);
}
.sign-depth { inset: 0; background: linear-gradient(150deg, #424248, #080809 70%); transform: translate3d(5px, 5px, -18px); box-shadow: 12px 25px 25px #0008; }
.sign-edge { position: absolute; pointer-events: none; background: linear-gradient(90deg, #080809, #66666c 40%, #171719); }
.sign-edge-right { right: 0; top: 0; width: 26px; height: 100%; transform-origin: right; transform: rotateY(-90deg); }
.sign-edge-bottom { bottom: 0; left: 0; height: 26px; width: 100%; transform-origin: bottom; transform: rotateX(90deg); background: linear-gradient(#45454a, #080809); }
.sign-face {
  transform: translateZ(7px); border: 1px solid #ffffff45;
  background: linear-gradient(145deg, #ffffff24, transparent 45%, #00000028), var(--scene-colour);
  box-shadow: inset 0 2px 1px #ffffff6b, inset 0 -2px 2px #0008;
}
.sign-brand {
  text-shadow: 0 1px 0 #fff8, 1px 2px 0 #6666, 2px 3px 0 #3339, 3px 4px 0 #3339, 4px 5px 0 #2229, 5px 6px 0 #2229, 7px 9px 8px #0005;
}
.sign-sheen { inset: -65%; background: linear-gradient(115deg, transparent 36%, #ffffff00 40%, #ffffff3d 48%, #ffffff08 55%, transparent 60%); opacity: .45; transform: translateX(-12%); animation: sign-reflection 9s ease-in-out infinite; animation-play-state: paused; }
.sign-scene[data-in-view=true] .sign-sheen { animation-play-state: running; }
.sign-scene[data-finish=matte] .sign-sheen { opacity: .15; }
.sign-scene[data-finish=metallic] .sign-face { background: linear-gradient(115deg, var(--scene-colour) 10%, #e6e6e6 38%, #707077 45%, var(--scene-colour) 65%, #ffffff35); }
.scene-controls { background: linear-gradient(180deg, #19191c, #090909); border-top-color: #ffffff20; border-radius: 0 0 14px 14px; }
.floating-note { right: 12px; background: linear-gradient(150deg, #28282cd9, #0a0a0bea); backdrop-filter: blur(16px); border-color: #ffffff2a; box-shadow: inset 0 1px #ffffff18, 0 18px 30px #0007; border-radius: 9px; animation: none; }
.studio-scene .floating-note { right: 12px; }
.scene-caption { color: #bdbdc5; }
.work-card { border-radius: 13px; border: 1px solid #ffffff20; box-shadow: 0 15px 40px #0008; }
.work-card > div { background: linear-gradient(transparent, #000d); }
.gallery-card { padding: 8px; background: var(--glass); border: 1px solid #ffffff17; border-radius: 12px; text-align: left; transition: border-color .35s; }
.gallery-card:hover, .gallery-card:focus-visible { border-color: #ffffff48; }
.gallery-card > img { border-radius: 6px; }
.gallery-card > span { padding: 14px 5px 6px; }
.filter-toolbar { border-color: #ffffff19; }
.filter-button { border-radius: 6px; color: #bebec4; }
.filter-button.active { background: var(--button-fill); color: #fff; border-color: #ff526680; box-shadow: inset 0 1px #ffffff45; }
.filter-button:hover:not(.active) { background: #ffffff0a; color: #fff; }
.search-field { background: linear-gradient(160deg, #ffffff08, #ffffff02); border-radius: 7px; padding: 0 12px; }
.help-banner, .studio-panel, #quote-form, .contact-card, .admin-login, .admin-notice, .admin-detail, .admin-stats > div, .admin-table-wrap {
  background: var(--glass); border-color: #ffffff24; border-radius: 13px; box-shadow: inset 0 1px #ffffff14, 0 20px 50px #0005;
}
input:not([type=checkbox],[type=radio],[type=color],[type=file]), textarea, select { background: #030303; border-color: #ffffff25; border-radius: 7px; box-shadow: inset 0 2px 8px #0008; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); outline-color: #ff30402b; }
.product-checks label > span, .finish-options span, .quote-review, .artwork-upload { background: linear-gradient(155deg, #ffffff05, transparent), #030303; border-color: #ffffff26; border-radius: 7px; }
.product-checks input:checked + span { background: #ff304011; border-color: var(--accent); }
.finish-options input:checked + span { background: var(--button-fill); color: #fff; }
input[type=file]::file-selector-button { background: linear-gradient(145deg, #29292b, #101011); border-color: #ffffff35; border-radius: 5px; }
.lightbox { background: linear-gradient(155deg, #19191be8, #050505f5); border: 1px solid #ffffff30; border-radius: 16px; box-shadow: inset 0 1px #ffffff18, 0 40px 120px #000d; }
.lightbox[open] { animation: dialog-enter .25s ease-out; }
.lightbox::backdrop { background: #000d; backdrop-filter: blur(14px); }
.lightbox-content > img { background: #000; border-radius: 6px; }
.lightbox-close { background: linear-gradient(145deg, #333336, #090909); border-color: #ffffff45; }
.about-photo { border: 1px solid #ffffff20; border-radius: 13px; }
.project-cta {
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 90% 100%, #d5092318, transparent 65%), linear-gradient(145deg, #19191b, #050505 70%);
  border-color: #ffffff20;
}
.project-cta::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, #ffffff60, transparent); }
.site-footer { background: #000; }
.footer-bottom { border-color: #ffffff15; }
.toast { background: linear-gradient(145deg, #29292cef, #080809f5); border: 1px solid #ffffff30; border-radius: 10px; backdrop-filter: blur(16px); box-shadow: 0 20px 50px #0008; }
.depth-enabled { transition: transform .55s cubic-bezier(.18,.7,.25,1), border-color .35s, box-shadow .35s; }
.js-motion .reveal { transform: translateY(26px); transition: opacity .85s ease, transform .85s cubic-bezier(.2,.7,.2,1); }
.js-motion .reveal.visible { transform: none; }
.js-motion .reveal > .reveal-item { opacity: 0; translate: 0 22px; transition: opacity .65s ease, translate .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--reveal-order, 0) * 65ms); }
.js-motion .reveal.visible > .reveal-item { opacity: 1; translate: 0 0; }
@keyframes button-glint { to { left: 145%; } }
@keyframes sign-reflection { 0%, 100% { transform: translateX(-12%); } 50% { transform: translateX(12%); } }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width:1080px) {
  .navigation { min-height: 90px; }
  .studio-teaser > .container { gap: 35px; grid-template-columns: 1fr 1.2fr; }
  .studio-teaser h2 { font-size: 38px; }
  .studio-teaser .sign-brand { font-size: 46px; }
  .product-card-info h3 { font-size: 16px; }
  .video-hero-intro { gap: 35px; }
  .video-hero-intro h1 { font-size: clamp(36px, 4.7vw, 50px); }
  .video-hero-copy > p { font-size: 13px; }
}
@media (max-width:720px) {
  .navigation { min-height: 78px; }
  #main-nav.open { background: linear-gradient(155deg, #19191bf5, #050505f7); backdrop-filter: blur(24px); border-color: #ffffff25; box-shadow: 0 25px 50px #000a; }
  .video-hero { padding-top: 22px; padding-bottom: 38px; }
  .hero-banner { border-radius: 10px; }
  .hero-banner-toolbar { min-height: 48px; }
  .video-hero-intro { margin-top: 30px; gap: 20px; }
  .video-hero-intro h1 { font-size: clamp(34px, 10.1vw, 54px); }
  .video-hero-copy > p { font-size: 12px; }
  .product-grid { gap: 16px 12px; }
  .product-card { padding: 5px; border-radius: 10px; }
  .product-card-info { padding: 13px 4px 8px; }
  .product-card-info h3 { font-size: 15px; }
  .product-card-info p { font-size: 9px; }
  .product-card-info .eyebrow { font-size: 6px; }
  .studio-teaser { padding: 48px 0; }
  .studio-teaser > .container { grid-template-columns: 1fr; gap: 30px; }
  .studio-teaser h2 { font-size: 38px; }
  .studio-teaser .sign-scene { height: 460px; }
  .studio-teaser .scene-wall { height: 344px; }
  .studio-teaser .sign-assembly { top: 50px; height: 222px; }
  .studio-teaser .sign-brand { font-size: 47px; top: 28px; left: 25px; }
  .studio-teaser .sign-baseline { left: 26px; bottom: 26px; font-size: 7px; }
  .scene-topline { padding: 0 16px; font-size: 7px; }
  .scene-topline > span:last-child { font-size: 6px; }
  .scene-controls { padding: 0 15px; gap: 12px; }
  .scene-controls > span { font-size: 8px; }
  .scene-controls a { font-size: 7px; gap: 4px; }
  .scene-controls .swatches { gap: 8px; }
  .scene-controls .swatch { width: 16px; height: 16px; }
  .floating-note { padding: 12px 14px; bottom: 95px; right: 8px; }
  .floating-note strong { font-size: 9px; }
  .floating-note div > span { font-size: 8px; }
  .scene-caption { left: 16px; right: 16px; font-size: 5.5px; }
  .studio-scene .sign-brand { font-size: 48px; }
  .studio-panel, #quote-form, .contact-card { border-radius: 12px; }
  .gallery-card { padding: 5px; }
  .gallery-card > span { padding: 11px 3px 5px; }
  .lightbox { border-radius: 12px; }
}
@media (max-width:380px) {
  .video-hero-intro h1 { font-size: 32px; }
  .product-card-info h3 { font-size: 13px; }
  .product-card-info .add-product { width: 24px; height: 24px; }
  .studio-teaser .sign-brand { font-size: 40px; }
  .scene-controls { gap: 9px; padding: 0 11px; }
  .scene-controls > span { font-size: 7px; }
  .scene-controls .swatches { gap: 7px; }
  .scene-controls a { font-size: 6px; }
  .studio-scene .sign-brand { font-size: 40px; }
}
@media (prefers-reduced-motion:reduce) {
  .depth-enabled { transform: none !important; }
  .reveal, .reveal-item { transition: none !important; transition-delay: 0s !important; }
  .js-motion .reveal, .js-motion .reveal > .reveal-item { opacity: 1; transform: none; translate: none; }
  .sign-sheen, .button::after, .lightbox[open] { animation: none !important; }
}