/* ---- spalk (Spalk — Strapping, braces & rehab supply 133) -------------------
   THE STRUCTURAL MOVE: the same labelled photograph band runs TWICE, both times
   full-bleed on a darker clay — the first welded flush to the bottom edge of the
   stage with no oat gap at all, the second repeated straight after the
   catalogue. Everything between them (both story rows, the eight flat-lays, the
   form) stays inside the contained column, so the middle reads as a column held
   between two painted stripes rather than a ladder of pictures. The two story
   rows are the only place a photograph and a paragraph share a row, and they are
   mirrored off each other with an adjacent-sibling flip — picture left, then
   picture right. Ground is warm oat paper end to end instead of clinical white;
   one strapping-tape cobalt lands on the stage button, the strip labels and the
   rand figures and never fills a surface. Flat-lays sit on plain white. */
body.t-spalk {
  background: #f4eee2;
  color: #26241f;
  --sk-cobalt: #2a4f9b;
  --sk-clay: #e3d6bf;
  --bg-flat: #f4eee2;
  --surface: #ffffff;
  --surface-2: #eae1d0;
  --line: #ddd1bb;
  --line-strong: #c6b89c;
  --heading: #1b1a16;
  --text: #26241f;
  --muted: #6d6557;
  --header-bg: #f4eee2;
  --radius: 0;
  --shadow: none;
}

/* the bar sits ABOVE the stage on the same paper — flat, never floating over it */
body.t-spalk .sf-header, body.t-spalk .sf-head,
body.t-spalk .sf-footer, body.t-spalk .sf-foot, body.t-spalk .sf-cats {
  background: #f4eee2; border-color: #ddd1bb;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-spalk .sf-name { font-weight: 700; font-size: 16px; letter-spacing: 0.09em; text-transform: uppercase; }

/* COBALT — the only signal on the page, and only ever on a control or a figure */
body.t-spalk .btn.brand { background: var(--sk-cobalt); border-color: var(--sk-cobalt); color: #ffffff; font-weight: 600; padding: 14px 30px; }
body.t-spalk .btn.brand:hover { background: #1f3d78; border-color: #1f3d78; }

/* the stage: three slides, full viewport, copy dead centre and nothing else */
body.t-spalk .sc-hero { min-height: 100vh; padding: 24px 20px; }
body.t-spalk .sc-hero h1 { font-size: clamp(32px, 6vw, 66px); font-weight: 700; line-height: 1.06; letter-spacing: -0.025em; }
body.t-spalk .sc-h2 { font-weight: 700; font-size: clamp(20px, 2.6vw, 30px); letter-spacing: -0.015em; color: var(--heading); }

/* THE WELD — both strips break the container and run edge to edge on clay, and
   the first one starts hard against the bottom of the stage with nothing between */
body.t-spalk .sc-strip {
  max-width: 100vw; width: 100vw; margin: 0 calc(50% - 50vw);
  background: var(--sk-clay); padding: 34px 20px 38px;
}
body.t-spalk .sc-strip-row { max-width: 1040px; margin: 0 auto; grid-template-columns: repeat(4, 1fr); gap: 20px; }
body.t-spalk .sc-strip-img { border: 0; border-radius: 0; aspect-ratio: 4 / 3; background: #d8c9ae; }
body.t-spalk .sc-strip-label { margin-top: 11px; color: var(--sk-cobalt); text-transform: uppercase; letter-spacing: 0.13em; font-size: 11.5px; font-weight: 700; }

/* the contained middle: two story rows MIRRORED against each other, picture left
   then picture right, off the adjacent sibling rather than a type selector */
body.t-spalk .sc-about-split { padding: 76px 20px; gap: 56px; }
body.t-spalk .sc-about-split + .sc-about-split .sc-about-media { order: 2; }

/* eight flat-lays, four across, two rows that fill — kept on plain white so the
   goods lift off the oat ground instead of sinking into it */
body.t-spalk .sc-products { padding: 78px 20px 30px; }
body.t-spalk .product-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }
body.t-spalk .product-card { background: #ffffff; border-color: #ddd1bb; border-radius: 0; box-shadow: none; }
body.t-spalk .product-card:hover { transform: none; border-color: var(--sk-cobalt); box-shadow: none; }
body.t-spalk .product-card .ph { background: #ffffff; aspect-ratio: 4 / 5; }
body.t-spalk .product-card .p { color: var(--sk-cobalt); font-weight: 700; }

/* the only bleed below the stage */
body.t-spalk .sc-banner { min-height: 46vh; border-radius: 0; }

@media (max-width: 760px) {
  body.t-spalk .product-grid, body.t-spalk .sc-strip-row { grid-template-columns: repeat(2, 1fr); }
  body.t-spalk .sc-about-split + .sc-about-split .sc-about-media { order: 0; }
}

/* NIGHT — the oat paper goes to a warm near-black and the clay bands stay one
   step lighter than the ground, so the two stripes still read as painted bands
   rather than disappearing. Cobalt lifts to a paler blue to survive on them. */
html[data-theme="dark"] body.t-spalk {
  background: #171613;
  color: #c9c2b4;
  --sk-cobalt: #7ea3e0;
  --sk-clay: #24221d;
  --bg-flat: #171613;
  --surface: #1e1c18;
  --surface-2: #24221d;
  --line: #322f28;
  --line-strong: #46423a;
  --heading: #f2ede1;
  --text: #c9c2b4;
  --muted: #8b8476;
  --header-bg: #171613;
}
html[data-theme="dark"] body.t-spalk .sf-header, html[data-theme="dark"] body.t-spalk .sf-head,
html[data-theme="dark"] body.t-spalk .sf-footer, html[data-theme="dark"] body.t-spalk .sf-foot,
html[data-theme="dark"] body.t-spalk .sf-cats { background: #171613; border-color: #322f28; }
html[data-theme="dark"] body.t-spalk .sc-strip-img { background: #2d2a23; }
html[data-theme="dark"] body.t-spalk .product-card, html[data-theme="dark"] body.t-spalk .product-card .ph { background: #1e1c18; border-color: #322f28; }
html[data-theme="dark"] body.t-spalk .btn.brand { background: var(--sk-cobalt); border-color: var(--sk-cobalt); color: #10131c; }