/* Graphite studio direction. Shared by the real catalog and fictional study. */
:root {
  --paper: #101216;
  --surface: #191c21;
  --ink: #f4f0e9;
  --muted: #b4b2ae;
  --amber: #dfb884;
  --amber-soft: #e3c59e;
  --line: #3c3f44;
  --olive: #b2c9ad;
  --lavender: #c4b6db;
  color-scheme: dark;
  background: var(--paper);
}

body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 75% 850px at 90% 3%, #8a694320, transparent 75%),
    radial-gradient(ellipse 65% 700px at -10% 38%, #6b847717, transparent 80%),
    radial-gradient(ellipse 65% 900px at 100% 88%, #76668113, transparent 80%),
    var(--paper);
}

/* A self-hosted tile, behind every content surface. No animation or remote assets. */
body::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url('assets/grain.svg') repeat;
  opacity: .095;
}

::selection { background: var(--amber-soft); color: #191612; }
button:focus-visible, a:focus-visible, input:focus-visible {
  outline-color: var(--amber);
}
.preview-strip {
  color: #c1b9ad;
  background: #0b0d10b8;
  border-color: #ffffff12;
}
.preview-inner { min-height: 39px; }
.site-header { padding-block: 29px; border-color: #ffffff1c; }
.brand { color: var(--ink); }
.brand img { border-radius: 10px; outline: 1px solid #ffffff1a; }
.brand-studio { color: #b9b5ae; }
.main-nav a { color: #d1cec8; }
.main-nav a:hover { color: var(--amber); }
.header-note { color: var(--muted); }
.header-note .status-dot { box-shadow: 0 0 12px #b2c9ad38; }

.hero { padding-block: 92px 81px; gap: 70px; }
.hero h1 { font-size: clamp(54px, 5.85vw, 81px); line-height: 1.08; }
.hero h1 em { color: var(--amber); }
.hero-description { color: #bcb9b3; font-size: 17px; line-height: 1.85; }
.eyebrow { color: var(--muted); letter-spacing: 2px; }
.button { border-radius: 5px; min-height: 48px; transition: background .18s, border-color .18s; }
.button-dark { color: #1b1712; background: var(--amber); border-color: #e7c79e; }
.button-dark:hover { color: #1b1712; background: #edcda4; border-color: #f1d7b7; }
.button-outline { color: var(--ink); border-color: #777b80; background: #ffffff04; }
.button-outline:hover { background: #ffffff0c; }
.hero-aside { position: relative; border-color: #ffffff1c; padding-top: 5px; }
.reason-mark { color: var(--amber); width: 145px; height: 145px; opacity: .85; }
.aside-kicker { color: #a9a59d; }
.aside-copy { font-size: 21px; color: #ded8cf; }
.aside-foot { color: var(--muted); font-size: 12px; }
.hero-rule { border-color: #ffffff1c; padding-block: 19px; }
.hero-rule span span { color: #777970; }
.catalog { padding-top: 67px; padding-bottom: 74px; }
.section-heading { margin-bottom: 34px; }
.section-heading h2 { font-size: 39px; letter-spacing: -1.3px; }
.section-heading > p { font-size: 13px; }

.product-grid { gap: 28px; }
.product-card {
  border: 1px solid #424449;
  border-radius: 12px;
  background: linear-gradient(145deg, #202329, #171a1f 65%);
  box-shadow: 0 4px 8px #00000012, 0 24px 60px -32px #000000b3;
  transition: border-color .2s;
}
.product-card:hover { border-color: #77746c; }
.product-topline { color: #c7c4bd; padding: 24px 26px 15px; font-size: 11px; }
.product-number { color: #aaa69f; font-variant-numeric: tabular-nums; }
.product-card .card-title { padding: 0 26px 23px; }
.product-card .card-title h3 { font-size: 27px; letter-spacing: -.85px; }
.type-tag { color: #c5d9c0; background: #b2c9ad10; border: 1px solid #b2c9ad32; border-radius: 4px; }
.command-center .type-tag { color: #d2c3e6; background: #c4b6db10; border-color: #c4b6db32; }
.product-visual, .command-center .product-visual {
  margin-inline: 11px;
  border-radius: 6px;
  background: #0e1411;
  border: 1px solid #ffffff13;
}
.command-center .product-visual { background: #15131c; }
.gallery-cover { background: #111713; }
.expand-label { background: #191c21ef; border-color: #777b80; color: var(--ink); font-size: 11px; padding: 9px 12px; }
.visual-foot { background: #b2c9ad08; color: #c2d3bc; padding: 12px 13px; }
.command-center .visual-foot { background: #c4b6db08; color: #d2c3e6; }
.thumbnail-bar { margin-top: 15px; margin-inline: 24px; }
.gallery-thumb { border-radius: 4px; background: #0e1114; }
.gallery-thumb:not(.active) { border-color: #777b80; }
.gallery-thumb:not(.active) img { opacity: .76; }
.gallery-thumb:hover img { opacity: 1; }
.gallery-step { color: #ece7dd; border-color: #777b80; background: #ffffff03; border-radius: 4px; }
.gallery-step:hover { background: #ffffff0c; border-color: #a29d92; }
.product-content { padding: 28px 27px 25px; }
.product-promise { font-size: 31px; letter-spacing: -.75px; line-height: 1.22; color: #efe8dd; }
.product-description { color: #b9b7b2; font-size: 14px; max-width: 460px; }
.benefit-list { color: #c5c4bd; font-size: 12px; gap: 10px 18px; margin-bottom: 27px; }
.product-bottom { border-color: #ffffff1c; padding-top: 19px; }
.product-link { font-size: 13px; color: #ead1b0; }
.product-link:hover { color: #f4dfc3; }
.collection-footnote { font-size: 12px; margin-top: 28px; color: #aaa9a3; }
.collection-footnote .status-dot { background: var(--amber); }

.approach-section {
  background: linear-gradient(110deg, #dfb88408, #ffffff02 65%, #788f8406);
  border-color: #ffffff1c;
}
.approach-grid { padding-block: 63px; gap: 90px; }
.approach-grid h2 { font-size: 40px; }
.approach-copy p { color: #bcb9b3; font-size: 15px; }
.text-link { color: #ead1b0; }
.contact-handle { color: var(--muted); }
.site-footer { padding-block: 35px; }
.site-footer p, .footer-note { color: #aba8a2; }
.skip-link { background: var(--amber); color: #191612; }

.lightbox {
  color: var(--ink);
  background: linear-gradient(145deg, #25282d, #15181c);
  border-color: #6a6c70;
  border-radius: 12px;
  box-shadow: 0 30px 120px #000a;
}
.lightbox::backdrop { background: #05070cde; backdrop-filter: blur(7px); }
.icon-button { color: var(--ink); border-color: #777b80; background: #ffffff05; }
.icon-button:hover { background: #ffffff12; }
.lightbox figure img { background: #0d1013; }
.lightbox figcaption { color: #c3beb5; }
.lightbox-controls > span { color: var(--muted); }

/* Explicitly fictional expansion study, visually consistent with the real catalog. */
.growth-hero { padding-top: 72px; }
.study-label { background: #dfb8840b; border-color: #7b674e; color: #d8c4a8; }
.filter { border-color: #777b80; color: #c5c2bc; border-radius: 5px; min-height: 44px; }
.filter:hover { background: #ffffff09; }
.filter.active { color: #191612; background: var(--amber); border-color: var(--amber); }
.growth-search input { color: var(--ink); background: #1c1f24; border-color: #777b80; min-height: 44px; }
.growth-search input::placeholder { color: #aaa8a4; }
.fixture-card { background: linear-gradient(140deg, #22252b, #171a1f); border-color: #424449; border-radius: 10px; box-shadow: 0 12px 30px #0002; }
.fixture-art {
  background: radial-gradient(ellipse at 70% 20%, color-mix(in srgb, var(--fixture-ink) 18%, #1b1e23), #14171b);
  border-bottom: 1px solid #ffffff12;
}
.fixture-art::before, .fixture-art::after { border-color: color-mix(in srgb, var(--fixture-ink) 55%, transparent); }
.fixture-symbol { color: color-mix(in srgb, var(--fixture-ink) 45%, #f4f0e9); }
.fixture-label { color: #cdb797; }
.empty-state { border: 1px dashed #6a6c70; border-radius: 10px; }

@media (min-width: 1500px) {
  .hero { padding-block: 100px 89px; }
}
@media (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr) 220px; gap: 40px; }
  .hero h1 { font-size: 62px; }
  .product-card .card-title { align-items: flex-start; }
  .product-card .card-title h3 { font-size: 26px; }
  .product-content { padding-inline: 24px; }
  .product-promise { font-size: 29px; }
  .approach-grid { gap: 50px; }
}
@media (max-width: 850px) {
  .product-grid { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .hero { grid-template-columns: 1fr; padding-block: 62px 54px; gap: 0; }
  .hero h1 { font-size: clamp(48px, 7.6vw, 65px); }
  .hero-description { font-size: 16px; }
  .section-heading h2 { font-size: 36px; }
  .product-card .card-title { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .product-card .card-title h3 { font-size: 27px; }
  .approach-grid { gap: 35px; padding-block: 48px; }
  .approach-grid h2 { font-size: 35px; }
}
@media (max-width: 560px) {
  .preview-inner { min-height: 39px; }
  .preview-strip { font-size: 10px; }
  .site-header { padding-block: 23px; }
  .hero { padding-block: 46px 40px; }
  .hero h1 { font-size: 44px; line-height: 1.1; letter-spacing: -2px; }
  .hero-description { font-size: 15px; }
  .hero-rule { padding-block: 16px; }
  .catalog { padding-block: 46px 49px; }
  .section-heading h2 { font-size: 32px; }
  .section-heading > p { font-size: 13px; }
  .product-grid { gap: 27px; }
  .product-topline { padding: 22px 20px 14px; }
  .product-card .card-title { padding: 0 20px 20px; flex-direction: column; align-items: flex-start; }
  .product-card .card-title h3 { font-size: 26px; }
  .type-tag { font-size: 10px; }
  .product-visual, .command-center .product-visual { margin-inline: 8px; }
  .visual-foot { padding: 11px 10px; font-size: 10px; }
  .thumbnail-bar { margin-inline: 16px; gap: 5px; }
  .gallery-step { min-height: 44px; }
  .product-content { padding: 26px 20px 21px; }
  .product-promise { font-size: 29px; }
  .product-description { font-size: 14px; }
  .benefit-list { font-size: 12px; gap: 9px 14px; }
  .product-link { font-size: 13px; }
  .collection-footnote { font-size: 11px; }
  .approach-grid { padding-block: 43px; gap: 25px; }
  .approach-grid h2 { font-size: 35px; }
  .approach-copy p { font-size: 14px; }
  .site-footer { padding-block: 29px; }
  .growth-hero { padding-top: 45px; }
}
@media (max-width: 380px) {
  .hero h1 { font-size: 41px; }
  .thumbnail-bar { margin-inline: 12px; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}