/*
  JKJ-Plus Catalog Studio
  Design tokens and reusable component layer for the catalog + B2B
  development workspace. This file intentionally follows site.css so it can
  replace the former editorial layout without changing source content.
*/

:root {
  --jkj-cream: #fbf8f2;
  --jkj-cream-strong: #f2ede3;
  --jkj-cream-soft: #f7f3eb;
  --jkj-forest: #12372f;
  --jkj-forest-soft: #28594c;
  --jkj-charcoal: #1b2723;
  --jkj-copy: #4d5b53;
  --jkj-muted: #748078;
  --jkj-line: #d9ddd5;
  --jkj-white: #fffdf9;
  --jkj-dark-copy: #e8ede8;
  --jkj-dark-muted: #c9d8cf;

  --jkj-font-display: "Iowan Old Style", Baskerville, "Times New Roman", serif;
  --jkj-font-sans: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --jkj-type-eyebrow: 0.6875rem;
  --jkj-type-caption: 0.75rem;
  --jkj-type-body: 1rem;
  --jkj-type-small-heading: clamp(1.35rem, 1.8vw, 1.75rem);
  --jkj-type-section: clamp(1.9rem, 3.2vw, 3.1rem);
  --jkj-type-page: clamp(2.25rem, 4vw, 4.6rem);
  --jkj-type-hero: clamp(2.7rem, 5.4vw, 5.75rem);
  --jkj-leading-display: 0.98;
  --jkj-leading-heading: 1.04;
  --jkj-leading-copy: 1.6;

  --jkj-space-1: 0.5rem;
  --jkj-space-2: 1rem;
  --jkj-space-3: 1.5rem;
  --jkj-space-4: 2rem;
  --jkj-space-5: 3rem;
  --jkj-space-6: 4rem;
  --jkj-space-7: 6rem;
  --jkj-space-8: 8rem;
  --jkj-section-space: var(--jkj-space-8);
  --jkj-gutter: clamp(1rem, 3vw, 3rem);
  --jkj-shell: 90rem;
  --jkj-grid-gap: clamp(1rem, 1.75vw, 1.75rem);

  --jkj-radius-control: 0.75rem;
  --jkj-radius-card: 1rem;
  --jkj-radius-media: 1rem;
  --jkj-shadow-card: 0 0.125rem 0.75rem rgb(27 39 35 / 4%);
  --jkj-shadow-card-hover: 0 0.5rem 1.4rem rgb(27 39 35 / 8%);
  --jkj-speed: 180ms ease;

  --jkj-everyday-1: #173a32;
  --jkj-everyday-2: #768d7d;
  --jkj-everyday-3: #d7d2c7;
  --jkj-everyday-4: #2d3130;
  --jkj-active-1: #1d4359;
  --jkj-active-2: #7591a8;
  --jkj-active-3: #17272d;
  --jkj-active-4: #d6d2c8;
  --jkj-outdoor-1: #31463a;
  --jkj-outdoor-2: #6d7965;
  --jkj-outdoor-3: #c8c7b5;
  --jkj-outdoor-4: #2d3330;
  --jkj-family-1: #d7c8aa;
  --jkj-family-2: #8ba69d;
  --jkj-family-3: #f1e7d4;
  --jkj-family-4: #87927e;
  --jkj-design-1: #a6a49b;
  --jkj-design-2: #d6d0c3;
  --jkj-design-3: #617468;
  --jkj-design-4: #292e2c;
  --jkj-smart-1: #1e2e32;
  --jkj-smart-2: #4c7284;
  --jkj-smart-3: #aab5ad;
  --jkj-smart-4: #e4dfd3;

  /* Existing page primitives now resolve to the catalog system. */
  --surface-base: var(--jkj-cream);
  --surface-subtle: var(--jkj-cream-strong);
  --surface-muted: #e8e8e0;
  --color-forest-900: var(--jkj-forest);
  --color-forest-800: #17463c;
  --color-forest-700: var(--jkj-forest-soft);
  --color-ink: var(--jkj-charcoal);
  --color-text: var(--jkj-copy);
  --color-muted: var(--jkj-muted);
  --color-line: var(--jkj-line);
  --color-white: var(--jkj-white);
  --color-on-dark: var(--jkj-dark-copy);
  --color-on-dark-muted: var(--jkj-dark-muted);
  --font-display: var(--jkj-font-display);
  --font-sans: var(--jkj-font-sans);
  --type-caption: var(--jkj-type-caption);
  --type-label: 0.8125rem;
  --type-body: var(--jkj-type-body);
  --type-body-lg: 1.0625rem;
  --type-h3: var(--jkj-type-small-heading);
  --type-h2: var(--jkj-type-section);
  --type-h1: var(--jkj-type-page);
  --type-display: var(--jkj-type-hero);
  --leading-display: var(--jkj-leading-display);
  --leading-heading: var(--jkj-leading-heading);
  --leading-body: var(--jkj-leading-copy);
  --page-gutter: var(--jkj-gutter);
  --shell-max: var(--jkj-shell);
  --grid-gap: var(--jkj-grid-gap);
  --section-space: var(--jkj-section-space);
  --radius-control: var(--jkj-radius-control);
  --radius-card: var(--jkj-radius-card);
  --radius-media: var(--jkj-radius-media);
  --shadow-media: var(--jkj-shadow-card);
  --shadow-card-hover: var(--jkj-shadow-card-hover);
  --transition-fast: var(--jkj-speed);
}

html { background: var(--jkj-cream); }
body { background: var(--jkj-cream); color: var(--jkj-charcoal); font-family: var(--jkj-font-sans); }
body, main { overflow-x: clip; }
.shell { width: min(var(--jkj-shell), calc(100% - (var(--jkj-gutter) * 2))); }
.section { padding-block: var(--jkj-section-space); }

h1, h2, h3 { color: var(--jkj-charcoal); font-family: var(--jkj-font-display); font-weight: 500; letter-spacing: -0.045em; text-wrap: balance; }
h1 { font-size: var(--jkj-type-page); line-height: var(--jkj-leading-display); }
h2 { font-size: var(--jkj-type-section); line-height: var(--jkj-leading-heading); }
h3 { font-size: var(--jkj-type-small-heading); line-height: 1.08; }
p { color: var(--jkj-copy); font-size: var(--jkj-type-body); line-height: var(--jkj-leading-copy); }
.eyebrow {
  color: var(--jkj-muted);
  font-family: var(--jkj-font-sans);
  font-size: var(--jkj-type-eyebrow);
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1.35;
  text-transform: uppercase;
}

.button {
  min-height: 3rem;
  padding: 0.875rem 1.5rem;
  border-radius: var(--jkj-radius-control);
  font-family: var(--jkj-font-sans);
  font-size: var(--jkj-type-caption);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  transition: background-color var(--jkj-speed), border-color var(--jkj-speed), color var(--jkj-speed), box-shadow var(--jkj-speed), transform var(--jkj-speed);
}
.button:hover { box-shadow: var(--jkj-shadow-card); transform: translateY(-0.125rem); }
.button-ink, .button-accent { border-color: var(--jkj-forest); background: var(--jkj-forest); color: var(--jkj-white); }
.button-ink:hover, .button-accent:hover { border-color: var(--jkj-forest-soft); background: var(--jkj-forest-soft); }
.button-light { border-color: rgb(232 237 232 / 60%); background: transparent; color: var(--jkj-dark-copy); }
.button-light:hover { border-color: var(--jkj-dark-copy); background: var(--jkj-dark-copy); color: var(--jkj-forest); }
.text-link { border: 0; color: var(--jkj-forest); font-size: 0.875rem; font-weight: 650; letter-spacing: 0; }
.text-link::after { font-size: 0.875rem; transition: transform var(--jkj-speed); }
.text-link:hover::after { transform: translateX(0.1875rem); }
.text-link-light { color: var(--jkj-dark-copy); }

/* Shared header: clear hierarchy, narrow utility feel, no retail controls. */
.site-header {
  border-bottom: 1px solid rgb(18 55 47 / 10%);
  background: rgb(251 248 242 / 94%);
  backdrop-filter: blur(0.75rem);
}
.header-inner { grid-template-columns: auto minmax(0, 1fr) auto; min-height: 4.5rem; gap: var(--jkj-space-3); }
.brand-lockup { gap: 0.625rem; }
.brand-lockup img { width: 2.75rem; }
.brand-type strong { color: var(--jkj-forest); font-family: var(--jkj-font-sans); font-size: 0.9375rem; font-weight: 750; letter-spacing: -0.04em; }
.brand-type small { color: var(--jkj-muted); font-size: 0.625rem; font-weight: 550; }
.site-nav { gap: clamp(0.75rem, 1.4vw, 1.75rem); }
.site-nav a { color: var(--jkj-charcoal); font-size: var(--jkj-type-caption); font-weight: 650; }
.site-nav a::after { bottom: -0.625rem; background: var(--jkj-forest); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--jkj-forest); }
.header-cta { min-height: 2.5rem; padding-inline: 1rem; }
.menu-button { border-radius: 0; }

.site-footer { background: var(--jkj-forest); }
.footer-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: var(--jkj-space-5); padding-block: var(--jkj-space-7); }
.footer-brand-block p, .footer-grid nav a, .footer-contact a:not(.text-link) { font-size: var(--jkj-type-caption); }
.footer-contact span { font-size: var(--jkj-type-eyebrow); }

/* Catalog hero and trust strip. */
.catalog-hero { overflow: clip; border-bottom: 1px solid var(--jkj-line); background: var(--jkj-cream-soft); }
.catalog-hero-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--jkj-grid-gap);
  align-items: center;
  min-height: clamp(35rem, 44vw, 42rem);
  padding-block: var(--jkj-space-5);
}
.catalog-hero-copy { display: grid; grid-column: span 5; justify-items: start; gap: var(--jkj-space-3); padding-block: var(--jkj-space-4); }
.catalog-hero-copy h1 { max-width: 10ch; font-size: var(--jkj-type-hero); }
.catalog-hero-copy .eyebrow, .catalog-hero-copy .hero-kicker { color: var(--jkj-forest-soft); }
.catalog-hero-copy .hero-kicker { margin: 0; font-size: var(--jkj-type-eyebrow); font-weight: 750; letter-spacing: 0.12em; line-height: 1.35; }
.catalog-hero-copy .hero-lede { max-width: 35ch; margin: 0; }
.catalog-hero-copy .hero-note { max-width: 40ch; margin: 0; color: var(--jkj-muted); font-size: var(--jkj-type-caption); }
.catalog-hero-media { position: relative; grid-column: 7 / -1; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--jkj-radius-media); background: var(--jkj-cream-strong); box-shadow: var(--jkj-shadow-card); }
.catalog-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.catalog-hero-media span { position: absolute; right: var(--jkj-space-2); bottom: var(--jkj-space-2); color: rgb(77 91 83 / 62%); font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.1em; }

.trust-strip { border-bottom: 1px solid var(--jkj-line); background: var(--jkj-white); }
.trust-strip-inner { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; }
.trust-strip span { position: relative; min-height: 3.75rem; display: grid; place-items: center; padding: var(--jkj-space-1) var(--jkj-space-2); color: var(--jkj-charcoal); font-size: var(--jkj-type-caption); font-weight: 650; text-align: center; }
.trust-strip span + span::before { position: absolute; left: 0; width: 1px; height: 1.25rem; background: var(--jkj-line); content: ""; }
.trust-strip span::after { width: 0.375rem; height: 0.375rem; margin-left: 0.5rem; border: 1px solid var(--jkj-forest-soft); border-radius: 99rem; content: ""; }

.home-statement { grid-template-columns: 5fr 3fr 4fr; gap: var(--jkj-grid-gap); align-items: end; padding-block: var(--jkj-space-7); }
.home-statement h2 { max-width: 12ch; margin-top: var(--jkj-space-2); font-size: var(--jkj-type-section); }
.statement-strong { color: var(--jkj-forest-soft); font-family: var(--jkj-font-display); font-size: clamp(1.5rem, 2.2vw, 2.15rem); font-weight: 500; line-height: 1.08; }
.home-statement > p:last-child { max-width: 31ch; }

/* Directory-style product browsing. */
.catalog-browse { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--jkj-grid-gap); align-items: start; padding-block: var(--jkj-space-7); border-top: 1px solid var(--jkj-line); }
.catalog-filters { position: sticky; top: 5.5rem; display: grid; grid-column: span 3; gap: var(--jkj-space-3); padding-right: var(--jkj-space-3); }
.catalog-filter-heading { display: grid; gap: var(--jkj-space-1); padding-bottom: var(--jkj-space-2); border-bottom: 1px solid var(--jkj-line); }
.catalog-filter-heading h2 { font-family: var(--jkj-font-sans); font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; }
.catalog-filter-group { display: grid; gap: 0.625rem; padding: 0 0 var(--jkj-space-3); margin: 0; border: 0; border-bottom: 1px solid var(--jkj-line); }
.catalog-filter-group legend { padding: 0; color: var(--jkj-charcoal); font-size: var(--jkj-type-caption); font-weight: 700; }
.catalog-filter-group label { display: grid; grid-template-columns: 1rem 1fr; gap: 0.5rem; align-items: center; color: var(--jkj-copy); font-size: var(--jkj-type-caption); line-height: 1.35; }
.catalog-filter-group input { width: 0.9375rem; height: 0.9375rem; accent-color: var(--jkj-forest); }
.catalog-clear { justify-self: start; padding: 0; border: 0; background: transparent; color: var(--jkj-forest); font-size: var(--jkj-type-caption); font-weight: 650; text-decoration: underline; text-underline-offset: 0.2em; }
.catalog-results { display: grid; grid-column: 4 / -1; gap: var(--jkj-space-4); }
.catalog-results-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--jkj-space-3); align-items: end; }
.catalog-results-heading h2 { max-width: 16ch; margin-top: var(--jkj-space-1); }
.catalog-results-heading p { max-width: 42ch; margin: var(--jkj-space-2) 0 0; }
.catalog-count { align-self: start; margin: 0; color: var(--jkj-muted); font-size: var(--jkj-type-caption); font-weight: 650; white-space: nowrap; }
.catalog-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--jkj-grid-gap); }
.catalog-product-card { min-width: 0; overflow: hidden; border: 1px solid var(--jkj-line); border-radius: var(--jkj-radius-card); background: var(--jkj-white); box-shadow: var(--jkj-shadow-card); transition: box-shadow var(--jkj-speed), transform var(--jkj-speed); }
.catalog-product-card:hover { box-shadow: var(--jkj-shadow-card-hover); transform: translateY(-0.125rem); }
.catalog-product-media { display: block; overflow: hidden; border-bottom: 1px solid var(--jkj-line); }
.catalog-product-media .product-visual { aspect-ratio: 4 / 3; border-radius: 0; box-shadow: none; }
.catalog-product-media .product-image { object-fit: contain; transform: none; }
.catalog-product-media .product-visual:hover .product-image { transform: none; }
.catalog-product-copy { display: grid; gap: var(--jkj-space-1); padding: var(--jkj-space-2); }
.catalog-product-copy > div { display: flex; justify-content: space-between; gap: var(--jkj-space-1); align-items: center; }
.catalog-product-id { color: var(--jkj-muted); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; }
.catalog-status { min-height: 1.25rem; padding: 0.1875rem 0.375rem; font-size: 0.5625rem; letter-spacing: 0.07em; }
.catalog-product-copy h3 { font-size: 1.2rem; }
.catalog-product-copy p { display: -webkit-box; min-height: calc(var(--jkj-type-caption) * 3.7); margin: 0; overflow: hidden; color: var(--jkj-copy); font-size: var(--jkj-type-caption); line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.catalog-product-link { display: flex; justify-content: space-between; align-items: center; margin-top: var(--jkj-space-1); color: var(--jkj-forest); font-size: var(--jkj-type-caption); font-weight: 700; }
.catalog-product-link span { transition: transform var(--jkj-speed); }
.catalog-product-link:hover span { transform: translate(0.125rem, -0.125rem); }
.catalog-colour-dots { display: flex; gap: 0.375rem; align-items: center; min-height: 1.25rem; }
.catalog-colour-dots i, .studio-swatches button { width: 0.875rem; height: 0.875rem; border: 1px solid rgb(27 39 35 / 14%); border-radius: 99rem; background: var(--dot-color); }

[data-family="everyday"] .tone-1 { --dot-color: var(--jkj-everyday-1); }
[data-family="everyday"] .tone-2 { --dot-color: var(--jkj-everyday-2); }
[data-family="everyday"] .tone-3 { --dot-color: var(--jkj-everyday-3); }
[data-family="everyday"] .tone-4 { --dot-color: var(--jkj-everyday-4); }
[data-family="active"] .tone-1 { --dot-color: var(--jkj-active-1); }
[data-family="active"] .tone-2 { --dot-color: var(--jkj-active-2); }
[data-family="active"] .tone-3 { --dot-color: var(--jkj-active-3); }
[data-family="active"] .tone-4 { --dot-color: var(--jkj-active-4); }
[data-family="outdoor"] .tone-1 { --dot-color: var(--jkj-outdoor-1); }
[data-family="outdoor"] .tone-2 { --dot-color: var(--jkj-outdoor-2); }
[data-family="outdoor"] .tone-3 { --dot-color: var(--jkj-outdoor-3); }
[data-family="outdoor"] .tone-4 { --dot-color: var(--jkj-outdoor-4); }
[data-family="family"] .tone-1 { --dot-color: var(--jkj-family-1); }
[data-family="family"] .tone-2 { --dot-color: var(--jkj-family-2); }
[data-family="family"] .tone-3 { --dot-color: var(--jkj-family-3); }
[data-family="family"] .tone-4 { --dot-color: var(--jkj-family-4); }
[data-family="design"] .tone-1 { --dot-color: var(--jkj-design-1); }
[data-family="design"] .tone-2 { --dot-color: var(--jkj-design-2); }
[data-family="design"] .tone-3 { --dot-color: var(--jkj-design-3); }
[data-family="design"] .tone-4 { --dot-color: var(--jkj-design-4); }
[data-family="smart"] .tone-1 { --dot-color: var(--jkj-smart-1); }
[data-family="smart"] .tone-2 { --dot-color: var(--jkj-smart-2); }
[data-family="smart"] .tone-3 { --dot-color: var(--jkj-smart-3); }
[data-family="smart"] .tone-4 { --dot-color: var(--jkj-smart-4); }

/* Six inspirational entry cards use the same quiet catalog card language. */
.family-section { padding-top: 0; }
.section-heading { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--jkj-grid-gap); margin-bottom: var(--jkj-space-4); }
.section-heading h2 { max-width: 16ch; }
.section-heading p { justify-self: end; max-width: 37ch; }
.family-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--jkj-grid-gap); }
.family-card { aspect-ratio: 4 / 3; border: 1px solid var(--jkj-line); border-radius: var(--jkj-radius-card); background: var(--jkj-cream-strong); box-shadow: var(--jkj-shadow-card); }
.family-card::after { inset: 0; background: linear-gradient(110deg, rgb(251 248 242 / 94%) 0%, rgb(251 248 242 / 60%) 42%, rgb(251 248 242 / 5%) 72%); }
.family-card:hover { transform: translateY(-0.125rem); box-shadow: var(--jkj-shadow-card-hover); }
.family-card-copy { top: var(--jkj-space-2); right: var(--jkj-space-2); left: var(--jkj-space-2); }
.family-card-copy > span { margin-bottom: 0.25rem; color: var(--jkj-muted); font-size: 0.5625rem; }
.family-card-copy h3 { color: var(--jkj-forest); font-family: var(--jkj-font-sans); font-size: 0.9375rem; font-weight: 750; letter-spacing: 0.08em; }
.family-card-copy p { margin-top: 0.25rem; color: var(--jkj-muted); font-size: 0.6875rem; }
.family-card .product-image { object-fit: contain; transform: none; }
.family-card .product-visual:hover .product-image { transform: none; }
.family-card-hover { right: var(--jkj-space-2); bottom: var(--jkj-space-2); left: var(--jkj-space-2); align-items: end; }
.family-card-hover p { max-width: 24ch; color: var(--jkj-copy); font-size: 0.625rem; line-height: 1.4; }
.family-card-hover span { color: var(--jkj-forest); font-size: 0.625rem; font-weight: 750; letter-spacing: 0.1em; }

/* Existing business sections inherit a calmer, product-led presentation. */
.smart-home-section, .process-band { background: var(--jkj-forest); }
.smart-home-grid, .process-band-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--jkj-grid-gap); padding-block: var(--jkj-space-7); }
.smart-home-copy { grid-column: span 6; gap: var(--jkj-space-3); }
.smart-home-copy h2, .process-band h2 { max-width: 15ch; color: var(--jkj-dark-copy); font-size: var(--jkj-type-section); font-weight: 500; }
.smart-home-copy p, .process-band li { color: var(--jkj-dark-muted); }
.feature-quiet-list { gap: var(--jkj-space-2); color: var(--jkj-dark-copy); font-size: var(--jkj-type-body); }
.smart-home-visual { grid-column: 8 / -1; gap: var(--jkj-space-2); }
.smart-home-visual .product-visual { box-shadow: none; }
.app-mini-preview { border-color: rgb(232 237 232 / 28%); border-radius: var(--jkj-radius-card); background: rgb(255 255 255 / 5%); }
.design-preview { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--jkj-grid-gap); }
.design-preview-image { grid-column: span 7; }
.design-preview-copy { grid-column: 9 / -1; gap: var(--jkj-space-3); }
.design-preview-copy h2 { max-width: 15ch; font-size: var(--jkj-type-section); }
.production-preview { background: var(--jkj-cream-strong); }
.production-preview .section-heading { margin-bottom: var(--jkj-space-4); }
.production-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--jkj-grid-gap); }
.production-grid .product-card, .selected-grid .product-card, .smart-grid .product-card { border: 1px solid var(--jkj-line); border-radius: var(--jkj-radius-card); box-shadow: var(--jkj-shadow-card); }
.production-grid .product-card-copy, .selected-grid .product-card-copy, .smart-grid .product-card-copy { padding: var(--jkj-space-2); }
.production-grid .product-visual-card, .selected-grid .product-visual-card, .smart-grid .product-visual-card { aspect-ratio: 4 / 3; }
.process-band-grid > div { grid-column: span 5; }
.process-band ol { grid-column: 7 / -1; }
.process-band-grid > .text-link { grid-column: 1 / -1; justify-self: start; }
.process-band h2 { margin-top: var(--jkj-space-2); }
.closing-cta { gap: var(--jkj-space-3); padding-block: var(--jkj-space-7); }
.closing-cta h2 { max-width: 14ch; font-size: var(--jkj-type-section); }

/* Product-detail B2B design-development workspace. */
.product-page .product-crumb { padding-block: var(--jkj-space-2); font-size: var(--jkj-type-eyebrow); }
.studio-product-shell {
  display: grid;
  grid-template-columns: minmax(15rem, 3.2fr) minmax(25rem, 5.2fr) minmax(17rem, 3.6fr);
  overflow: hidden;
  border: 1px solid var(--jkj-line);
  border-radius: var(--jkj-radius-card);
  background: var(--jkj-white);
  box-shadow: var(--jkj-shadow-card);
}
.studio-product-panel, .studio-direction-panel { display: grid; align-content: start; gap: var(--jkj-space-3); padding: var(--jkj-space-3); background: var(--jkj-white); }
.studio-product-panel { border-right: 1px solid var(--jkj-line); }
.studio-direction-panel { border-left: 1px solid var(--jkj-line); }
.studio-panel-title { display: grid; gap: var(--jkj-space-1); }
.studio-panel-title h1 { max-width: 13ch; font-size: clamp(1.75rem, 2.8vw, 2.8rem); }
.studio-panel-title .product-summary { margin: var(--jkj-space-1) 0 0; font-size: var(--jkj-type-caption); }
.studio-product-meta { display: grid; margin: 0; border-top: 1px solid var(--jkj-line); }
.studio-product-meta > div { display: grid; gap: 0.25rem; padding-block: var(--jkj-space-1); border-bottom: 1px solid var(--jkj-line); }
.studio-product-meta dt, .studio-colour-control > span { color: var(--jkj-muted); font-size: var(--jkj-type-eyebrow); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.studio-product-meta dd { margin: 0; color: var(--jkj-copy); font-size: var(--jkj-type-caption); line-height: 1.45; }
.studio-colour-control { display: grid; gap: var(--jkj-space-1); }
.studio-colour-note { margin: 0; color: var(--jkj-muted); font-size: 0.6875rem; line-height: 1.4; }
.studio-swatches { display: flex; gap: 0.625rem; }
.studio-swatches button { width: 1.5rem; height: 1.5rem; padding: 0; cursor: pointer; transition: box-shadow var(--jkj-speed), transform var(--jkj-speed); }
.studio-swatches button[aria-pressed="true"] { outline: 2px solid var(--jkj-forest); outline-offset: 0.1875rem; }
.studio-swatches button:hover { transform: translateY(-0.0625rem); }
.studio-product-actions { display: grid; border-top: 1px solid var(--jkj-line); }
.studio-product-actions a, .studio-product-actions button { display: flex; min-height: 2.75rem; justify-content: space-between; align-items: center; padding: 0; border: 0; border-bottom: 1px solid var(--jkj-line); background: transparent; color: var(--jkj-copy); font-family: var(--jkj-font-sans); font-size: var(--jkj-type-caption); text-align: left; }
.studio-product-actions a:hover, .studio-product-actions button:hover { color: var(--jkj-forest); }
.studio-product-actions span { color: var(--jkj-muted); font-size: 1rem; }
.studio-inquiry-button { width: 100%; }
.studio-action-status { min-height: 1.4em; margin: 0; color: var(--jkj-muted); font-size: 0.6875rem; line-height: 1.4; }
.studio-preview-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; padding: var(--jkj-space-2); background: #f5f6f2; }
.studio-preview-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--jkj-space-2); padding: 0 0 var(--jkj-space-2); color: var(--jkj-muted); font-size: var(--jkj-type-caption); font-weight: 650; }
.studio-preview-toolbar > div { display: flex; gap: 0.5rem; }
.studio-preview-toolbar button { display: grid; width: 2rem; height: 2rem; place-items: center; padding: 0; border: 1px solid var(--jkj-line); border-radius: 0.5rem; background: var(--jkj-white); color: var(--jkj-forest); font-size: 1rem; }
.studio-canvas { position: relative; display: grid; min-height: 30rem; place-items: center; overflow: hidden; border: 1px solid var(--jkj-line); border-radius: 0.75rem; background: radial-gradient(circle at 50% 15%, var(--jkj-white), var(--jkj-cream-strong)); }
.studio-canvas .product-visual { position: relative; z-index: 2; width: min(78%, 28rem); aspect-ratio: 4 / 5; overflow: visible; border-radius: 0; background: transparent; box-shadow: none; transition: transform 300ms ease, filter 300ms ease; }
.studio-canvas .product-image { object-fit: contain; transform: none; transition: transform 300ms ease, filter 300ms ease; }
.studio-canvas .product-visual:hover .product-image { transform: none; }
.studio-canvas .visual-label { right: 0; bottom: 0; color: rgb(77 91 83 / 50%); font-size: 0.5625rem; }
.studio-canvas .product-print { display: none; }
.studio-grid-floor { position: absolute; z-index: 1; right: -20%; bottom: -32%; left: -20%; height: 38%; border-top: 1px solid rgb(18 55 47 / 12%); background-image: linear-gradient(rgb(18 55 47 / 8%) 1px, transparent 1px), linear-gradient(90deg, rgb(18 55 47 / 8%) 1px, transparent 1px); background-size: 2.25rem 2.25rem; transform: perspective(16rem) rotateX(58deg); transform-origin: top; }
.studio-dimension { position: absolute; z-index: 3; color: var(--jkj-muted); font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.08em; }
.studio-dimension::before { position: absolute; background: var(--jkj-line); content: ""; }
.studio-dimension-vertical { top: 25%; right: 6%; writing-mode: vertical-rl; }
.studio-dimension-vertical::before { top: 0; left: -0.5rem; width: 1px; height: 100%; }
.studio-dimension-horizontal { bottom: 7%; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.studio-dimension-horizontal::before { right: calc(100% + 0.5rem); top: 50%; width: 2.5rem; height: 1px; }
.studio-text-layer { position: absolute; z-index: 4; left: 50%; top: 48%; color: rgb(255 255 255 / 80%); font-family: var(--jkj-font-display); font-size: clamp(1.1rem, 2vw, 1.8rem); font-weight: 500; letter-spacing: -0.05em; opacity: 0; transform: translate(-50%, -50%) rotate(-8deg); transition: opacity var(--jkj-speed); }
.studio-canvas.has-text .studio-text-layer { opacity: 1; }
.studio-upload-artwork { position: absolute; z-index: 3; width: 42%; max-height: 48%; object-fit: contain; opacity: 0.34; mix-blend-mode: multiply; pointer-events: none; }
.studio-canvas.has-upload .studio-upload-artwork { animation: studio-artwork-in var(--jkj-speed) both; }
.studio-canvas.has-direction::after { position: absolute; z-index: 3; inset: 18% 25%; border-radius: 48% 42% 50% 46%; background: conic-gradient(from 90deg, rgb(40 89 76 / 0%), rgb(40 89 76 / 30%), rgb(211 229 212 / 48%), rgb(40 89 76 / 0%)); content: ""; mix-blend-mode: multiply; opacity: 0.65; pointer-events: none; }
.studio-canvas.is-zoomed .product-visual { transform: scale(1.12); }
.studio-canvas[data-studio-view="front"] .product-visual { transform: translateX(-8%) scale(1.04); }
.studio-canvas[data-studio-view="back"] .product-visual { transform: translateX(8%) scale(1.04); filter: saturate(0.88); }
.studio-view-switcher { display: flex; justify-content: center; gap: 0.5rem; padding-top: var(--jkj-space-2); }
.studio-view-switcher button { min-height: 2.25rem; padding: 0.375rem 0.625rem; border: 1px solid var(--jkj-line); border-radius: 0.5rem; background: var(--jkj-white); color: var(--jkj-copy); font-size: 0.6875rem; font-weight: 650; }
.studio-view-switcher button[aria-pressed="true"] { border-color: var(--jkj-forest); background: var(--jkj-forest); color: var(--jkj-white); }
.studio-direction-heading { display: grid; gap: 0.5rem; }
.studio-direction-heading h2 { font-family: var(--jkj-font-sans); font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; }
.studio-prompt-label { position: relative; display: grid; }
.studio-prompt-label textarea { width: 100%; min-height: 8.5rem; resize: vertical; padding: 0.75rem 0.75rem 1.75rem; border: 1px solid var(--jkj-line); border-radius: 0.625rem; outline: none; background: var(--jkj-cream); color: var(--jkj-charcoal); font-family: var(--jkj-font-sans); font-size: var(--jkj-type-caption); line-height: 1.5; }
.studio-prompt-label textarea:focus { border-color: var(--jkj-forest); box-shadow: 0 0 0 0.1875rem rgb(40 89 76 / 12%); }
.studio-prompt-label small { position: absolute; right: 0.75rem; bottom: 0.625rem; color: var(--jkj-muted); font-size: 0.625rem; }
.studio-generate { width: 100%; }
.studio-source-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }
.studio-source-actions label, .studio-source-actions button { display: inline-flex; min-height: 2.75rem; justify-content: center; align-items: center; padding: 0.625rem; border: 1px solid var(--jkj-line); border-radius: 0.625rem; background: transparent; color: var(--jkj-forest); font-family: var(--jkj-font-sans); font-size: 0.6875rem; font-weight: 700; text-align: center; }
.studio-source-actions label:hover, .studio-source-actions button:hover { border-color: var(--jkj-forest); background: var(--jkj-cream-soft); }
.studio-source-actions input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.studio-upload-status { min-height: 1.25rem; color: var(--jkj-muted); font-size: 0.625rem; line-height: 1.35; }
.studio-layer-panel { display: grid; gap: var(--jkj-space-1); padding-top: var(--jkj-space-2); border-top: 1px solid var(--jkj-line); }
.studio-layer-panel > div { display: flex; justify-content: space-between; gap: var(--jkj-space-1); color: var(--jkj-charcoal); font-size: var(--jkj-type-caption); font-weight: 700; }
.studio-layer-panel small { color: var(--jkj-muted); font-size: 0.625rem; font-weight: 500; }
.studio-layer-panel ul { display: grid; gap: 0.375rem; padding: 0; margin: 0; list-style: none; }
.studio-layer-panel li { display: grid; grid-template-columns: 1rem 1fr auto; gap: 0.375rem; align-items: center; min-height: 2.375rem; padding: 0.375rem 0.5rem; border: 1px solid var(--jkj-line); border-radius: 0.5rem; background: var(--jkj-cream); color: var(--jkj-copy); transition: opacity var(--jkj-speed); }
.studio-layer-panel li > span { color: var(--jkj-muted); font-size: 0.625rem; }
.studio-layer-panel li strong { overflow: hidden; font-size: 0.6875rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.studio-layer-panel li button { padding: 0; border: 0; background: transparent; color: var(--jkj-forest); font-size: 0.75rem; }
.studio-layer-panel li.is-muted { opacity: 0.44; }

@keyframes studio-artwork-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 0.34; transform: translateY(0); }
}

/* The older route pages retain their content but now share the catalog rhythm. */
.route-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--jkj-grid-gap); padding-block: var(--jkj-space-7) var(--jkj-space-5); }
.route-hero > .eyebrow { grid-column: span 3; padding-top: 0.5rem; }
.route-hero > div { grid-column: 5 / -1; gap: var(--jkj-space-3); }
.route-hero h1 { max-width: 14ch; font-size: var(--jkj-type-page); }
.route-hero p { max-width: 42ch; }
.collection-intro, .collection-controls { padding-block: var(--jkj-space-3); }
.collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--jkj-grid-gap); }
.collection-lead { display: flex; grid-column: auto; }
.collection-lead .product-card-copy { padding-top: var(--jkj-space-2); }
.product-card { overflow: hidden; border: 1px solid var(--jkj-line); border-radius: var(--jkj-radius-card); box-shadow: var(--jkj-shadow-card); }
.product-card-copy { padding: var(--jkj-space-2); }
.product-visual-card { aspect-ratio: 4 / 3; }
.product-visual-card .product-image { object-fit: contain; }
.product-card-copy h3 { font-size: 1.25rem; }
.product-card-copy p { font-size: var(--jkj-type-caption); }
.product-card .visual-label, .design-preview-image span, .exploded-card span { padding: 0; background: transparent; color: rgb(77 91 83 / 52%); font-size: 0.5625rem; font-weight: 600; }
.smart-route-grid, .component-hero, .app-hero, .studio-hero-grid { gap: var(--jkj-grid-gap); }
.component-hero, .app-hero { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.component-hero > div:first-child, .app-hero > div:first-child { grid-column: span 5; }
.component-product-ref, .phone-frame { grid-column: 8 / -1; }
.detail-engineering-grid, .detail-story-grid, .customization-section, .component-detail-grid { gap: var(--jkj-grid-gap); }
.feature-grid, .engineering-grid, .studio-route-grid { gap: var(--jkj-grid-gap); }

@media (min-width: 75rem) {
  .family-card { grid-column: span 4; }
  .selected-grid .product-card, .production-grid .product-card, .smart-grid .product-card { grid-column: auto; }
  .collection-grid .product-card { grid-column: auto; }
}

@media (min-width: 48rem) and (max-width: 74.9375rem) {
  :root { --jkj-gutter: 2rem; --jkj-section-space: var(--jkj-space-7); }
  .site-nav { gap: 0.75rem; }
  .site-nav a { font-size: 0.6875rem; }
  .header-cta { padding-inline: 0.75rem; }
  .catalog-hero-copy { grid-column: span 6; }
  .catalog-hero-media { grid-column: 7 / -1; }
  .catalog-filters { grid-column: span 3; }
  .catalog-results { grid-column: 4 / -1; }
  .catalog-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .family-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .production-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-product-shell { grid-template-columns: minmax(15rem, 4fr) minmax(0, 7fr); }
  .studio-direction-panel { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--jkj-line); border-left: 0; }
  .studio-direction-heading, .studio-prompt-label, .studio-generate, .studio-source-actions, .studio-upload-status, .studio-layer-panel, .studio-direction-panel > .studio-inquiry-button { grid-column: span 1; }
  .studio-layer-panel, .studio-direction-panel > .studio-inquiry-button { grid-column: 2; }
  .studio-direction-heading, .studio-prompt-label, .studio-generate, .studio-source-actions, .studio-upload-status { grid-column: 1; }
  .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 47.9375rem) {
  :root {
    --jkj-gutter: 1rem;
    --jkj-section-space: var(--jkj-space-6);
    --jkj-type-body: 0.9375rem;
    --jkj-type-section: clamp(1.8rem, 8.2vw, 2.25rem);
    --jkj-type-page: clamp(2.05rem, 9.3vw, 2.7rem);
    --jkj-type-hero: clamp(2.55rem, 11vw, 3.2rem);
  }
  .header-inner { min-height: 4rem; grid-template-columns: auto 1fr auto; gap: var(--jkj-space-1); }
  .brand-lockup img { width: 2.5rem; }
  .brand-type strong { font-size: 0.8125rem; }
  .brand-type small { font-size: 0.5625rem; }
  .header-cta { display: none; }
  .menu-button { display: block; min-width: 2.75rem; min-height: 2.75rem; }
  .site-nav { top: 4rem; padding-inline: var(--jkj-gutter); }
  .site-nav a { min-height: 2.75rem; display: flex; align-items: center; font-size: var(--jkj-type-caption); }

  .catalog-hero-grid { grid-template-columns: 1fr; min-height: 0; padding-block: var(--jkj-space-4) var(--jkj-space-5); }
  .catalog-hero-copy, .catalog-hero-media { grid-column: auto; }
  .catalog-hero-copy { gap: var(--jkj-space-2); padding: 0; }
  .catalog-hero-copy h1 { max-width: 11ch; }
  .catalog-hero-copy .hero-lede { max-width: 31ch; }
  .catalog-hero-copy .button-row { width: 100%; align-items: stretch; flex-direction: column; gap: 0.75rem; }
  .catalog-hero-copy .button-row .button { width: 100%; }
  .catalog-hero-copy .button-row .text-link { min-height: 2.75rem; }
  .catalog-hero-media { aspect-ratio: 4 / 5; }
  .catalog-hero-media img { object-position: center; }
  .trust-strip-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-strip span { min-height: 2.75rem; font-size: 0.625rem; }
  .trust-strip span + span::before { height: 1rem; }
  .trust-strip span:last-child { grid-column: 1 / -1; }
  .home-statement { grid-template-columns: 1fr; gap: var(--jkj-space-2); padding-block: var(--jkj-space-6); }
  .home-statement h2 { max-width: 14ch; }
  .statement-strong { font-size: 1.45rem; }

  .catalog-browse { grid-template-columns: 1fr; gap: var(--jkj-space-4); padding-block: var(--jkj-space-6); }
  .catalog-filters { position: static; grid-column: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--jkj-space-2); padding: 0; }
  .catalog-filter-heading { grid-column: 1 / -1; }
  .catalog-filter-group { min-width: 0; gap: 0.5rem; padding-bottom: var(--jkj-space-2); }
  .catalog-filter-group legend { font-size: 0.6875rem; }
  .catalog-filter-group label { grid-template-columns: 0.875rem minmax(0, 1fr); gap: 0.3125rem; font-size: 0.6875rem; }
  .catalog-filter-group input { width: 0.8125rem; height: 0.8125rem; }
  .catalog-clear { grid-column: 1 / -1; }
  .catalog-results { grid-column: auto; gap: var(--jkj-space-3); }
  .catalog-results-heading { grid-template-columns: 1fr; gap: var(--jkj-space-2); }
  .catalog-results-heading h2 { max-width: 14ch; }
  .catalog-count { white-space: normal; }
  .catalog-product-grid { grid-template-columns: 1fr; gap: var(--jkj-space-2); }
  .catalog-product-card { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); }
  .catalog-product-media { border-right: 1px solid var(--jkj-line); border-bottom: 0; }
  .catalog-product-media .product-visual { height: 100%; aspect-ratio: auto; }
  .catalog-product-copy { min-height: 11rem; padding: var(--jkj-space-2); }
  .catalog-product-copy h3 { font-size: 1.1rem; }
  .catalog-product-copy p { min-height: 0; -webkit-line-clamp: 3; }
  .catalog-product-link { align-self: end; }

  .section-heading { grid-template-columns: 1fr; gap: var(--jkj-space-2); margin-bottom: var(--jkj-space-3); }
  .section-heading p { justify-self: start; }
  .family-grid { grid-template-columns: 1fr; gap: var(--jkj-space-2); }
  .family-card { aspect-ratio: 4 / 3; }
  .family-card-copy, .family-card-hover { right: var(--jkj-space-2); left: var(--jkj-space-2); }
  .family-card-copy { top: var(--jkj-space-2); }
  .family-card-hover { bottom: var(--jkj-space-2); }

  .smart-home-grid, .process-band-grid { grid-template-columns: 1fr; gap: var(--jkj-space-4); padding-block: var(--jkj-space-6); }
  .smart-home-copy, .smart-home-visual, .process-band-grid > div, .process-band ol, .process-band-grid > .text-link { grid-column: auto; }
  .smart-home-copy h2, .process-band h2 { max-width: 16ch; }
  .smart-home-visual { grid-template-columns: minmax(0, 3fr) minmax(6.5rem, 1fr); }
  .app-mini-preview { padding: var(--jkj-space-2); }
  .design-preview { grid-template-columns: 1fr; gap: var(--jkj-space-3); }
  .design-preview-image, .design-preview-copy { grid-column: auto; }
  .production-grid { grid-template-columns: 1fr; gap: var(--jkj-space-2); }
  .production-grid .product-card { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); }
  .production-grid .product-card-copy { min-height: 11rem; }
  .production-grid .product-card .product-visual-card { height: 100%; aspect-ratio: auto; }
  .process-band ol { grid-template-columns: 1fr; }
  .closing-cta { padding-block: var(--jkj-space-6); }

  .product-page .product-crumb { padding-block: var(--jkj-space-2); }
  .product-page .product-crumb span { display: none; }
  .studio-product-shell { grid-template-columns: 1fr; border-radius: 0; border-right: 0; border-left: 0; box-shadow: none; }
  .studio-product-panel, .studio-direction-panel { gap: var(--jkj-space-2); padding: var(--jkj-space-3) var(--jkj-gutter); border: 0; }
  .studio-product-panel { border-bottom: 1px solid var(--jkj-line); }
  .studio-panel-title h1 { font-size: var(--jkj-type-page); }
  .studio-product-meta { grid-template-columns: 1fr; }
  .studio-product-meta > div { min-width: 0; padding: var(--jkj-space-1) 0; border-right: 0; }
  .studio-product-meta dt, .studio-product-meta dd { overflow-wrap: anywhere; }
  .studio-product-meta dd { font-size: 0.625rem; }
  .studio-product-actions { grid-template-columns: 1fr 1fr; }
  .studio-product-actions a, .studio-product-actions button { padding-right: var(--jkj-space-2); }
  .studio-product-actions a:nth-child(odd), .studio-product-actions button:nth-child(odd) { border-right: 1px solid var(--jkj-line); }
  .studio-preview-panel { order: 2; padding: var(--jkj-space-2) var(--jkj-gutter); }
  .studio-direction-panel { order: 3; border-top: 1px solid var(--jkj-line); }
  .studio-canvas { min-height: 24rem; }
  .studio-canvas .product-visual { width: min(76%, 19rem); }
  .studio-dimension-vertical { right: 3%; }
  .studio-dimension-horizontal { bottom: 5%; }
  .studio-view-switcher { justify-content: stretch; }
  .studio-view-switcher button { flex: 1; }
  .studio-source-actions { grid-template-columns: 1fr 1fr; }

  .route-hero { grid-template-columns: 1fr; gap: var(--jkj-space-2); padding-block: var(--jkj-space-6) var(--jkj-space-4); }
  .route-hero > .eyebrow, .route-hero > div { grid-column: auto; }
  .route-hero h1 { max-width: 15ch; }
  .collection-grid { grid-template-columns: 1fr; gap: var(--jkj-space-2); }
  .collection-grid .product-card { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); }
  .collection-grid .product-card-copy { min-height: 11rem; }
  .collection-grid .product-card .product-visual-card { height: 100%; aspect-ratio: auto; }
  .component-hero, .app-hero { grid-template-columns: 1fr; }
  .component-hero > div:first-child, .app-hero > div:first-child, .component-product-ref, .phone-frame { grid-column: auto; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--jkj-space-4); padding-block: var(--jkj-space-6); }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-product-card, .family-card, .button, .studio-canvas .product-visual, .studio-canvas .product-image { transition: none; }
}