/* Frigitorium — specifications | styles lifted verbatim from the supplied master */
:root {
    --bg:           #05070c;
    --bg-2:         #0a0f18;
    --surface:      #0d131e;
    --surface-2:    #111827;
    --surface-3:    #161e2d;
    --line:         rgba(255,255,255,0.10);
    --line-strong:  rgba(255,255,255,0.18);
    --text:         #eef2f8;
    --text-dim:     #aab3c2;
    --text-mute:    #7a8597;

    --c-physical:   #6fb6ff;
    --c-psych:      #c098ff;
    --c-perf:       #4fd1c5;
    --c-experience: #f5a25d;
    --c-use:        #a3d977;
    --c-ops:        #f0c674;
    --c-social:     #e6b257;
    --c-env:        #6aa9ff;
    --c-diff:       #8fd6ff;
    --c-history:    #d9b88a;

    --maxw: 1240px;
    --pad:  clamp(20px, 4vw, 56px);
    --r-lg: 22px;
    --r-md: 14px;
    --r-sm: 8px;

    --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }
  .serif { font-family: "Instrument Serif", "Cormorant Garamond", Georgia, serif; font-weight: 400; letter-spacing: -0.005em; }
  .mono  { font-family: var(--mono); font-feature-settings: "tnum" 1, "zero" 1; }

  /* Tangerine accent — used on closing fragments of section descriptors */
  .script {
    font-family: "Tangerine", "Instrument Serif", serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.85em;
    line-height: 1;
    color: #F86A3F;
    letter-spacing: 0;
    margin-left: 0.06em;
    vertical-align: -0.02em;
    display: inline-block;
  }
  .container { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
  a { color: inherit; }
  ::selection { background: rgba(143,214,255,0.25); color: #fff; }

  /* ───────── Top bar (matches main page) ───────── */
  .topbar {
    position: sticky; top: 0; z-index: 20;
    background: linear-gradient(to bottom, rgba(5,7,12,0.92), rgba(5,7,12,0.6));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .topbar-row {
    display: flex; align-items: center; justify-content: space-between;
    height: 76px;
  }
  .brand { display: inline-flex; align-items: center; text-decoration: none; }
  .brand img { height: 44px; width: auto; display: block; }
  .nav {
    display: flex; gap: 28px;
    font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-dim);
  }
  .nav a { text-decoration: none; }
  .nav a:hover { color: var(--text); }
  .nav a.is-active { color: var(--c-diff); }
  @media (max-width: 720px) { .nav { display: none; } }

  /* ───────── Page intro ───────── */
  .page-intro {
    position: relative;
    padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 64px);
    overflow: hidden;
  }
  .page-intro::before {
    content: ""; position: absolute; inset: -10% -10% auto -10%; height: 70%;
    background:
      radial-gradient(60% 60% at 50% 25%, rgba(111,182,255,0.14), transparent 60%),
      radial-gradient(40% 50% at 85% 5%, rgba(192,152,255,0.08), transparent 70%);
    pointer-events: none;
    z-index: 0;
  }
  .page-intro-inner {
    position: relative; z-index: 1;
    max-width: 880px;
  }

  .eyebrow {
    font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--c-diff); margin-bottom: 18px;
  }
  .eyebrow .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 12px; vertical-align: 2px; }

  .page-intro h1 {
    font-family: "Instrument Serif", serif; font-weight: 400;
    font-size: clamp(40px, 6.2vw, 84px);
    line-height: 1.02; letter-spacing: -0.015em;
    margin: 0 0 22px;
  }
  .page-intro h1 em { font-style: italic; color: #cfe7ff; }
  .page-intro p.lede {
    font-size: clamp(17px, 1.4vw, 20px); color: var(--text-dim);
    max-width: 56ch; margin: 0;
  }

  /* ───────── Component index (under intro) ───────── */
  .component-index {
    padding: clamp(28px, 4vw, 56px) 0 clamp(56px, 7vw, 96px);
    position: relative; z-index: 1;
  }
  .index-head {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--mono);
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--text-mute);
    padding-bottom: 14px; margin-bottom: 22px;
    border-bottom: 1px solid var(--line);
  }
  .index-head .left { display: flex; align-items: center; gap: 14px; }
  .index-head .left::before {
    content: ""; width: 28px; height: 1px; background: var(--c-diff);
  }
  .index-head .right { color: var(--c-diff); }

  .index-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
  @media (max-width: 980px) { .index-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .index-grid { grid-template-columns: 1fr; } }

  .index-tile {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 220ms ease, transform 280ms cubic-bezier(.2,.7,.2,1), background 220ms ease;
  }
  .index-tile:hover {
    border-color: color-mix(in oklab, var(--c-diff) 55%, var(--line));
    background: var(--surface-2);
    transform: translateY(-2px);
  }
  .index-tile:hover .tile-num { color: var(--c-diff); -webkit-text-stroke-color: var(--c-diff); }
  .index-tile:hover .tile-img img { transform: scale(1.03); }

  .index-tile .tile-img {
    position: relative;
    aspect-ratio: 4 / 3;
    background: radial-gradient(80% 60% at 50% 50%, #131c2c, #050912 75%);
    overflow: hidden;
    display: grid; place-items: center;
    border-bottom: 1px solid var(--line);
  }
  .index-tile .tile-img img {
    max-width: 64%; max-height: 78%; width: auto; height: auto;
    object-fit: contain;
    filter: drop-shadow(0 18px 36px rgba(0,0,0,0.55));
    transition: transform 360ms cubic-bezier(.2,.7,.2,1);
  }
  .index-tile .tile-img.is-empty::after {
    content: "";
    position: absolute; inset: 0;
    background:
      repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 10px, transparent 10px 20px);
    pointer-events: none;
  }
  .index-tile .tile-num {
    position: absolute; top: 14px; left: 16px;
    font-family: "Instrument Serif", serif; font-style: italic;
    font-size: 52px; line-height: 0.85;
    color: transparent;
    -webkit-text-stroke: 1px rgba(143,214,255,0.55);
    transition: color 220ms ease, -webkit-text-stroke-color 220ms ease;
    pointer-events: none;
  }
  .index-tile .tile-status { display: none !important; }
  .index-head .right { display: none !important; }
  .index-tile .tile-meta {
    padding: 18px 18px 20px;
    display: flex; flex-direction: column; gap: 6px;
  }
  .index-tile .tile-name {
    font-family: "Instrument Serif", serif;
    font-size: 22px; line-height: 1.15;
    color: var(--text);
    letter-spacing: -0.005em;
  }
  .index-tile .tile-role {
    font-family: var(--mono);
    font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--text-mute);
  }
  .index-tile .tile-arrow {
    position: absolute; right: 16px; bottom: 18px;
    width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid var(--line);
    color: var(--text-mute);
    transition: color 220ms ease, border-color 220ms ease, transform 220ms ease;
  }
  .index-tile:hover .tile-arrow {
    color: var(--c-diff); border-color: var(--c-diff);
    transform: translate(2px, -2px);
  }
  .index-tile.is-pending { opacity: 0.78; }
  .index-tile.is-pending:hover { opacity: 1; }

  /* ───────── Sticky section nav (scroll-spy) ───────── */
  .section-nav {
    position: sticky; top: 76px; z-index: 18;
    background: linear-gradient(to bottom, rgba(5,7,12,0.94), rgba(5,7,12,0.78));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-110%);
    opacity: 0;
    transition: transform 320ms cubic-bezier(.2,.7,.2,1), opacity 220ms ease;
    pointer-events: none;
  }
  .section-nav.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .section-nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px;
    height: 48px;
  }
  .section-nav ol {
    list-style: none; margin: 0; padding: 0;
    display: flex; align-items: center; gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .section-nav ol::-webkit-scrollbar { display: none; }
  .section-nav li { flex: 0 0 auto; }
  .section-nav a {
    display: inline-flex; align-items: baseline; gap: 8px;
    padding: 8px 14px;
    text-decoration: none;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
    white-space: nowrap;
  }
  .section-nav a:hover {
    background: rgba(143,214,255,0.06);
    border-color: var(--line);
  }
  .section-nav a .num {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
    color: var(--text-mute);
  }
  .section-nav a .name {
    font-size: 12.5px; letter-spacing: 0.02em;
    color: var(--text-dim);
  }
  .section-nav a.is-active {
    background: rgba(143,214,255,0.10);
    border-color: color-mix(in oklab, var(--c-diff) 40%, var(--line));
  }
  .section-nav a.is-active .num { color: var(--c-diff); }
  .section-nav a.is-active .name { color: var(--text); }

  .section-nav .progress {
    flex: 0 0 auto;
    width: 120px; height: 2px;
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
    overflow: hidden;
  }
  .section-nav .progress > span {
    display: block; height: 100%; width: 0%;
    background: linear-gradient(to right, var(--c-diff), #cfe7ff);
    transition: width 220ms ease;
  }
  @media (max-width: 720px) {
    .section-nav .progress { display: none; }
    .section-nav-inner { gap: 12px; }
  }

  /* anchor offset so sticky bars don't cover headings */
  .nozzle { scroll-margin-top: 130px; }

  /* big numeral becomes a quiet back-to-top link */
  .nozzle-head .index-link {
    text-decoration: none; display: inline-block;
    transition: -webkit-text-stroke-color 220ms ease, transform 220ms ease;
  }
  .nozzle-head .index-link:hover .index {
    -webkit-text-stroke-color: rgba(143,214,255,0.85);
  }
  .nozzle-head .index-link:hover { transform: translateY(-2px); }
  .divider {
    height: 1px;
    background: linear-gradient(to right, transparent, var(--line-strong), transparent);
    margin: 0;
  }

  /* ───────── Nozzle block ───────── */
  .nozzle {
    padding: clamp(56px, 8vw, 110px) 0;
    position: relative;
  }
  .nozzle::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(to right, transparent, var(--line-strong), transparent);
    opacity: 0.6;
  }

  /* big section header — large index numeral + title */
  .nozzle-head {
    display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 40px);
    align-items: start;
    margin-bottom: clamp(40px, 5vw, 64px);
  }
  .nozzle-head .index {
    font-family: "Instrument Serif", serif; font-weight: 400; font-style: italic;
    font-size: clamp(80px, 11vw, 160px); line-height: 0.85;
    color: transparent;
    -webkit-text-stroke: 1px rgba(143,214,255,0.45);
    text-stroke: 1px rgba(143,214,255,0.45);
    letter-spacing: -0.03em;
    user-select: none;
  }
  .nozzle-head .meta { padding-top: clamp(12px, 2vw, 24px); }
  .nozzle-head .kicker {
    font-family: var(--mono);
    font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--c-diff);
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 18px;
  }
  .nozzle-head .kicker::before {
    content: ""; width: 32px; height: 1px; background: var(--c-diff);
  }
  .nozzle-head h2 {
    font-family: "Instrument Serif", serif; font-weight: 400;
    font-size: clamp(34px, 4.6vw, 56px); line-height: 1.05;
    margin: 0 0 16px; letter-spacing: -0.01em;
  }
  .nozzle-head .source {
    font-family: "Instrument Serif", serif; font-style: italic;
    font-size: 17px; color: var(--text-dim); margin: 0;
  }

  /* hero pair: product cutout + spray */
  .nozzle-hero {
    display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 0;
    background: #000;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: clamp(40px, 5vw, 64px);
  }
  @media (max-width: 880px) { .nozzle-hero { grid-template-columns: 1fr; } }
  .nozzle-hero .product {
    position: relative;
    background:
      radial-gradient(80% 60% at 50% 50%, #131c2c, #050912 70%);
    display: grid; place-items: center;
    min-height: 360px; padding: 40px;
    border-right: 1px solid var(--line);
  }
  @media (max-width: 880px) { .nozzle-hero .product { border-right: 0; border-bottom: 1px solid var(--line); } }
  .nozzle-hero .product img {
    max-width: 70%; max-height: 380px; width: auto; height: auto;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,0.6));
  }
  .nozzle-hero .product .tag {
    position: absolute; top: 20px; left: 22px;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--text-mute);
  }
  /* Side-by-side product pair in hero */
  .nozzle-hero .product.is-pair { padding: 48px 24px 32px; }
  .nozzle-hero .product.is-pair .pair-row {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(18px, 3vw, 36px);
    align-items: end;
    width: 100%; max-width: 460px;
  }
  .nozzle-hero .product.is-pair .pair-item {
    display: flex; flex-direction: column; align-items: center;
    gap: 12px;
    text-align: center;
  }
  .nozzle-hero .product.is-pair .pair-item img {
    max-width: 100%;
    max-height: 220px;
    width: auto; height: auto;
    object-fit: contain;
    filter: drop-shadow(0 22px 44px rgba(0,0,0,0.55));
  }
  .nozzle-hero .product.is-pair .pair-label {
    font-family: var(--mono);
    font-size: 10px; letter-spacing: 0.20em; text-transform: uppercase;
    color: var(--text-mute);
    padding-top: 4px;
    border-top: 1px dashed var(--line);
    width: 100%;
  }
  .nozzle-hero .product.is-pair .pair-label b {
    font-style: normal; font-weight: 500; color: var(--text-dim);
    margin-right: 6px;
  }
  .nozzle-hero .spray {
    position: relative;
    min-height: 360px;
    overflow: hidden;
  }
  .nozzle-hero .spray img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  /* Comp 01 spray image has a white edge baked in on right + bottom — crop it off. */
  #mist-body-jet .nozzle-hero .spray img {
    width: 102%; height: 102%;
    object-position: left top;
  }
  .nozzle-hero .spray .overlay {
    position: absolute; left: 28px; bottom: 24px;
    font-family: "Instrument Serif", serif; font-style: italic;
    font-size: clamp(22px, 2.8vw, 34px);
    color: rgba(255,255,255,0.92);
    line-height: 1.1;
    max-width: 50%;
    text-shadow: 0 2px 30px rgba(0,0,0,0.6);
  }
  .nozzle-hero .spray .corner {
    position: absolute; top: 20px; right: 22px;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
    color: rgba(255,255,255,0.6);
  }

  /* description + at-a-glance */
  .nozzle-intro {
    display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(28px, 5vw, 56px);
    margin-bottom: clamp(48px, 6vw, 72px);
    align-items: start;
  }
  @media (max-width: 880px) { .nozzle-intro { grid-template-columns: 1fr; } }
  .nozzle-intro .desc p {
    margin: 0 0 14px;
    font-size: 16.5px;
    line-height: 1.7;
    color: #d4dcec;
  }
  .nozzle-intro .desc p:first-of-type::first-line {
    /* subtle editorial touch */
  }
  .nozzle-intro .desc .lead-mark {
    display: inline-block;
    font-family: "Instrument Serif", serif;
    font-style: italic;
    color: var(--c-diff);
    font-size: 22px; line-height: 1; margin-right: 4px;
    vertical-align: -2px;
  }
  .at-glance {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    padding: 22px;
  }
  .at-glance h4 {
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--text-mute); margin: 0 0 14px;
    padding-bottom: 12px; border-bottom: 1px solid var(--line);
  }
  .at-glance dl { display: grid; grid-template-columns: 1fr auto; gap: 10px 18px; margin: 0; }
  .at-glance dt { color: var(--text-dim); font-size: 13.5px; }
  .at-glance dd { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--text); }
  .at-glance dd .u { color: var(--text-mute); }

  /* ───────── Spec grid ───────── */
  .spec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  @media (max-width: 880px) { .spec-grid { grid-template-columns: 1fr; } }

  .spec-card {
    --accent: var(--c-diff);
    position: relative;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)),
      var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 26px 26px 24px;
    overflow: hidden;
  }
  .spec-card::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(to right, transparent, var(--accent) 20%, var(--accent) 80%, transparent);
    opacity: 0.65;
  }
  .spec-card.span-2 { grid-column: span 2; }
  @media (max-width: 880px) { .spec-card.span-2 { grid-column: span 1; } }

  .spec-card .card-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 22px;
  }
  .spec-card .card-ico {
    width: 32px; height: 32px; border-radius: 8px;
    display: grid; place-items: center;
    background: color-mix(in oklab, var(--accent) 12%, transparent);
    color: var(--accent);
    border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
  }
  .spec-card .card-ico svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .spec-card .card-title {
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--accent); font-weight: 600;
  }

  /* Features list — definition table */
  .spec-table { width: 100%; border-collapse: collapse; }
  .spec-table tr { border-bottom: 1px dashed var(--line); }
  .spec-table tr:last-child { border-bottom: 0; }
  .spec-table th, .spec-table td {
    padding: 13px 0; text-align: left; vertical-align: baseline;
  }
  .spec-table th {
    font-weight: 400; color: var(--text-dim);
    font-size: 14.5px; letter-spacing: 0.005em;
  }
  .spec-table td {
    font-family: var(--mono); font-size: 13.5px;
    color: var(--text); text-align: right;
    font-feature-settings: "tnum" 1, "zero" 1;
  }
  .spec-table td .u { color: var(--text-mute); margin-left: 4px; }

  /* Finish swatch */
  .finish-row { display: flex; align-items: center; gap: 18px; }
  .swatch {
    width: 64px; height: 64px; border-radius: var(--r-sm);
    border: 1px solid var(--line-strong);
    background:
      linear-gradient(135deg,
        #f0f3f7 0%, #c8d0db 20%, #6e7686 45%,
        #b6bdc8 65%, #8e96a4 85%, #5f6573 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 4px 14px rgba(0,0,0,0.4);
    flex: 0 0 auto;
  }
  .finish-row .meta .name {
    font-family: "Instrument Serif", serif; font-size: 22px; line-height: 1.1; margin: 0 0 4px;
  }
  .finish-row .meta .desc {
    color: var(--text-dim); font-size: 13.5px; margin: 0;
  }
  /* Single-finish swatch variants */
  .swatch.is-stainless {
    background:
      repeating-linear-gradient(180deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 3px),
      linear-gradient(180deg, #b3b8c0 0%, #7c8088 50%, #aab0b8 100%);
  }

  /* Multi-finish grid */
  .finish-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
  }
  @media (max-width: 620px) { .finish-grid { grid-template-columns: repeat(3, 1fr); } }
  .finish-grid .swatch-card { text-align: left; }
  .finish-grid .swatch-card .sw {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-strong);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 4px 14px rgba(0,0,0,0.35);
    margin-bottom: 9px;
  }
  .finish-grid .swatch-card .lbl {
    font-family: var(--mono);
    font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--text-dim);
    line-height: 1.35;
  }
  .sw--chrome {
    background:
      linear-gradient(135deg,
        #f0f3f7 0%, #c8d0db 20%, #6e7686 45%,
        #b6bdc8 65%, #8e96a4 85%, #5f6573 100%);
  }
  .sw--brushed-nickel {
    background:
      repeating-linear-gradient(90deg,
        rgba(255,255,255,0.06) 0 1px, transparent 1px 3px),
      linear-gradient(180deg, #b9bfc7 0%, #8a9099 55%, #a4abb5 100%);
  }
  .sw--matte-black {
    background:
      radial-gradient(70% 70% at 30% 25%, #2a2d33 0%, #161719 60%, #0d0e10 100%);
  }
  .sw--matte-white {
    background:
      radial-gradient(70% 70% at 30% 25%, #f0eee9 0%, #d9d6cf 70%, #c4c0b8 100%);
  }
  .sw--brushed-brass {
    background:
      repeating-linear-gradient(90deg,
        rgba(255,255,255,0.06) 0 1px, transparent 1px 3px),
      linear-gradient(180deg, #d9b67a 0%, #a07f3f 50%, #c8a35f 100%);
  }

  /* Dimensions: 3-up variant */
  .dim-block.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
  @media (max-width: 880px) { .dim-block.cols-3 { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 620px) { .dim-block.cols-3 { grid-template-columns: 1fr; } }

  /* Dimensions svg block */
  .dim-block { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
  @media (max-width: 620px) { .dim-block { grid-template-columns: 1fr; } }
  .dim-svg-wrap {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0)),
      var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 16px;
    position: relative;
  }
  .dim-svg-wrap .vlabel {
    position: absolute; top: 10px; left: 14px;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--text-mute);
  }
  .dim-svg-wrap svg { width: 100%; height: auto; display: block; }

  /* Water usage cards */
  .usage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  @media (max-width: 620px) { .usage-grid { grid-template-columns: repeat(2, 1fr); } }
  .usage-card {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 18px 16px 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .usage-card .jet-ico {
    margin: 0 auto 12px;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    color: var(--c-diff); opacity: 0.85;
  }
  .usage-card .jet-ico svg { width: 100%; height: 100%; }
  .usage-card .count {
    font-family: "Instrument Serif", serif; font-style: italic;
    font-size: 14px; color: var(--text-dim); margin-bottom: 8px;
  }
  .usage-card .count b { font-style: normal; font-family: "Instrument Serif", serif; font-size: 22px; color: var(--text); margin-right: 4px; vertical-align: -1px; }
  .usage-card .val {
    font-family: var(--mono);
    font-size: 20px; color: var(--c-diff);
    letter-spacing: 0.01em;
    line-height: 1; padding-top: 6px;
    border-top: 1px dashed var(--line);
  }
  .usage-card .val .u { font-size: 11px; color: var(--text-mute); letter-spacing: 0.18em; text-transform: uppercase; margin-left: 4px; }

  .usage-note {
    margin-top: 16px;
    font-size: 12.5px; color: var(--text-mute);
    line-height: 1.5;
    font-style: italic;
  }

  /* Flow rate chart */
  .flow-chart-wrap {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 24px 20px 18px;
  }
  .flow-chart-wrap .legend {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 14px;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--text-mute);
  }
  .flow-chart-wrap .legend .y { color: var(--c-diff); }
  .flow-chart-wrap svg { width: 100%; height: auto; display: block; }

  /* placeholder nozzle block (02 / 03) */
  .placeholder {
    background:
      repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0 10px, transparent 10px 20px),
      var(--surface);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-lg);
    padding: clamp(36px, 5vw, 56px);
    text-align: center;
  }
  .placeholder .ph-index {
    font-family: "Instrument Serif", serif; font-style: italic;
    font-size: clamp(54px, 8vw, 92px); line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,0.18);
    margin-bottom: 14px;
  }
  .placeholder h3 {
    font-family: "Instrument Serif", serif; font-weight: 400;
    font-size: clamp(22px, 2.4vw, 30px); margin: 0 0 8px;
    color: var(--text);
  }
  .placeholder p {
    color: var(--text-mute); margin: 0;
    font-size: 14px; letter-spacing: 0.02em;
  }
  .placeholder .badge {
    display: inline-block;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--text-mute);
    padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
    margin-top: 18px;
  }

  /* ───────── Footer ───────── */
  footer.site {
    padding: 28px 0 40px;
    border-top: 1px solid var(--line);
    color: var(--text-mute); font-size: 12.5px; letter-spacing: 0.06em;
    margin-top: clamp(40px, 6vw, 80px);
  }
  .foot-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }