/* ---- kuil (Kuil — Planted aquariums & aquascaping 225) ---------------------
   THE STRUCTURAL MOVE: THE LIT PANE. Near-black is carried unbroken from the
   menu bar to the closing strip — stage, four-up explainer, education band and
   prose band all sit on the same ground with nothing in a card and nothing on a
   second surface. The catalogue is the ONE place the page opens up: each of the
   six products becomes a tall PURE WHITE slab holding its own picture, category,
   price and buy control, so the grid reads as six lit tanks standing in a dark
   room. The pane redefines its own tokens rather than repainting each child, and
   it stays white at night on purpose — it is the light in the room, not a surface
   that follows the theme. One accent only, the cold teal of light through planted
   water, spent on the solid slabs and the single hairline over the contact strip.
   The hero eyebrow is ordered ABOVE the cut inside .sc-hero-inner; the header is
   never touched. */
body.t-kuil {
  background: #0b100e;
  color: #cdc7b8;
  --ku-teal: #3fc2a4;
  --radius: 0;
  --shadow: none;
  --bg-flat: #0b100e;
  --header-bg: #0b100e;
  --surface: #141a17;
  --surface-2: #1a221e;
  --line: #232c28;
  --line-strong: #38453f;
  --heading: #ece7d9;
  --text: #cdc7b8;
  --muted: #8a887e;
}

/* the bar is the same water as the page and never changes state — flat, no glass
   and no blur, so the ground runs unbroken from the menu to the closing strip */
body.t-kuil .sf-header, body.t-kuil .sf-head,
body.t-kuil .sf-cats, body.t-kuil .sf-foot, body.t-kuil .sf-footer {
  background: #0b100e; border-color: #232c28;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-kuil .sf-name { text-transform: uppercase; letter-spacing: 0.26em; font-size: 14px; font-weight: 700; color: #ece7d9; }
body.t-kuil .btn.brand { background: var(--ku-teal); border: 0; color: #06100d; box-shadow: none; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; font-size: 11px; padding: 15px 30px; }
body.t-kuil .btn.brand:hover { background: #57d4b6; }

/* the stage: the whole first screen, two plates cross-fading, the eyebrow lifted
   above the cut and a hairline ghost under it. Nothing contained, nothing boxed. */
body.t-kuil .sc-hero { min-height: 100vh; padding: 122px 20px 96px; }
body.t-kuil .sc-hero-inner { display: flex; flex-direction: column; align-items: center; max-width: 880px; }
body.t-kuil .sc-hero-inner p { order: -1; margin: 0 0 24px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: #e6e0d0; text-shadow: none; }
body.t-kuil .sc-hero h1 { color: #f2ece0; font-size: clamp(32px, 6vw, 74px); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 32px; }

/* every band is opened by the same quiet tracked label, never a display heading */
body.t-kuil .sc-h2 { font-size: clamp(12.5px, 1.4vw, 15px); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: #e6e0d0; margin-bottom: 36px; }

/* the four-up explainer: the reference's icon-above-text cards, with a
   photograph doing the icon's job. Gapless, so the row is one strip of water. */
body.t-kuil .sc-strip { padding: 104px 20px 0; }
body.t-kuil .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-kuil .sc-strip-img { aspect-ratio: 4 / 5; border: 0; }
body.t-kuil .sc-strip-label { margin-top: 20px; font-size: 11px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: #e6e0d0; }

/* THE LIT PANE — three across in two rows that FILL, each card a white slab that
   sets its own ink so nothing inside it has to fight a bright ground */
body.t-kuil .sc-buygrid { padding: 108px 20px 108px; }
body.t-kuil .sc-buy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
body.t-kuil .sc-buy-card { background: #ffffff; padding: 20px 20px 26px; --surface-2: #ffffff; --heading: #101614; --muted: #2a3733; --brand: #4b6a61; }
body.t-kuil .sc-buy-p { font-size: 19px; font-weight: 700; margin-top: 9px; }
body.t-kuil .sc-buy-form, body.t-kuil .sc-buy-btn { width: 100%; margin-top: 16px; }

/* the education band: one wide dark photograph edge to edge, the copy held in
   the left third and the rest of it left as empty water */
body.t-kuil .sc-banner { margin: 0 calc(50% - 50vw); min-height: 76vh; display: flex; align-items: center; text-align: left; padding: 96px max(24px, calc(50vw - 560px)); }
body.t-kuil .sc-banner-inner { margin: 0; max-width: 460px; }
body.t-kuil .sc-banner h2 { font-size: clamp(24px, 3.4vw, 42px); font-weight: 600; line-height: 1.16; letter-spacing: -0.02em; margin-bottom: 16px; }

/* the single prose block on the page, and the only band that runs image beside text */
body.t-kuil .sc-about-split { padding: 108px 20px 112px; gap: 64px; }
body.t-kuil .sc-about-copy .sc-h2 { text-align: left; }
body.t-kuil .sc-about-copy p, body.t-kuil .sc-richtext p { color: var(--text); font-size: 16.5px; line-height: 1.95; }

/* the closing strip sits on the same water as everything above it, opened by one
   teal hairline instead of by a change of ground */
body.t-kuil .sc-contact-band { background: #0b100e; border-top: 1px solid var(--ku-teal); padding: 88px 0 96px; --surface: #141a17; --line: #2b3a35; }

@media (max-width: 1000px) {
  body.t-kuil .sc-hero { min-height: 86vh; padding: 104px 20px 76px; }
  body.t-kuil .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-kuil .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-kuil .sc-banner { min-height: 58vh; padding: 72px 24px; }
}

/* NIGHT — the room the tank is standing in goes properly dark. The ground drops
   two steps so the contact-band panels stay a shade off it instead of merging,
   and the teal lifts because #3fc2a4 goes muddy against near black. The lit panes
   are left alone in both — they are the light, not a surface. */
html[data-theme="dark"] body.t-kuil {
  background: #050807;
  color: #c2bcae;
  --ku-teal: #57d9ba;
  --bg-flat: #050807;
  --header-bg: #050807;
  --surface: #0b100e;
  --surface-2: #101613;
  --line: #1a2320;
  --line-strong: #2c3a35;
  --heading: #f0ebde;
  --text: #c2bcae;
  --muted: #7c7a71;
}
html[data-theme="dark"] body.t-kuil .sf-header, html[data-theme="dark"] body.t-kuil .sf-head,
html[data-theme="dark"] body.t-kuil .sf-cats, html[data-theme="dark"] body.t-kuil .sf-foot,
html[data-theme="dark"] body.t-kuil .sf-footer { background: #050807; border-color: #1a2320; }
html[data-theme="dark"] body.t-kuil .btn.brand { color: #04100c; }
html[data-theme="dark"] body.t-kuil .sc-contact-band { background: #050807; --surface: #0b100e; --line: #24332e; }