/* ---- salamander (Salamander — Commercial kitchen equipment 256) ------------
   THE STRUCTURAL MOVE: the container is thrown away twice running and then
   slammed shut. Under a full-viewport four-frame stage the page gives up its
   1080px column for a gapless full-bleed 50/50 — copy in the left half, one
   photograph filling the right half to the edge, nothing between them — and
   gives it up again immediately for six photographs butted edge to edge in two
   rows of three with the gutter set to literally zero, on near-black. Only
   after those two bleeds does the page contract, hard, onto white cards
   standing proud of a cold rolled-steel ground. Amber is spent exactly twice,
   on the pill and on the rand figure, and nowhere else — the black band's
   control is bone, not amber. Nothing in here touches the header beyond type
   and colour: no order, no position, no reflow, and no :nth-of-type. */
body.t-salamander {
  background: #c3c7c9;
  color: #23282c;
  --sl-amber: #e9a010;
  --sl-ember: #9a6206;
  --sl-black: #131619;
  --sl-bone: #ece9e3;
  --bg-flat: #c3c7c9;
  --header-bg: #c3c7c9;
  --surface: #ffffff;
  --surface-2: #b4b9bc;
  --line: #a8adb0;
  --line-strong: #878d91;
  --heading: #14171a;
  --text: #23282c;
  --muted: #4d565b;
  --radius: 0;
  --shadow: none;
}

/* a flat steel bar the same colour as the page, so the stage begins beneath it
   rather than behind it. Type, tracking and colour only — the rendered header
   keeps its own order and spacing untouched. */
body.t-salamander .sf-head, body.t-salamander .sf-header,
body.t-salamander .sf-foot, body.t-salamander .sf-footer, body.t-salamander .sf-cats {
  background: #c3c7c9; border-color: #a8adb0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-salamander .sf-name, body.t-salamander .sf-navlink { text-transform: uppercase; letter-spacing: 0.2em; font-size: 12px; font-weight: 700; }

/* AMBER 1 of 2 — every control is a fully-rounded amber pill with no edge on
   it, exactly the reference's one-accent discipline */
body.t-salamander .btn.brand { background: var(--sl-amber); color: #17130a; border: 0; box-shadow: none; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 700; padding: 16px 34px; }
body.t-salamander .btn.brand:hover { background: #f6b023; color: #17130a; }

/* the whole first screen: four frames cross-fading, a tracked eyebrow lifted
   above a two-word headline, the pill, and nothing else on the fold */
body.t-salamander .sc-hero { min-height: 100vh; padding: 96px 20px; }
body.t-salamander .sc-hero-inner { display: flex; flex-direction: column; align-items: center; max-width: 860px; }
body.t-salamander .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: #f2f0eb; text-shadow: none; }
body.t-salamander .sc-hero h1 { font-size: clamp(42px, 9vw, 108px); line-height: 0.94; letter-spacing: -0.04em; font-weight: 700; margin-bottom: 36px; }
body.t-salamander .sc-h2 { color: var(--heading); font-weight: 700; font-size: clamp(23px, 3.2vw, 36px); letter-spacing: -0.025em; margin-bottom: 32px; }

/* BLEED ONE — the page briefly stops to talk. Copy left, photograph filling the
   right half to the edge: no card, no border, no radius, no gutter. */
body.t-salamander .sc-about-split { max-width: none; width: 100vw; margin: 0 calc(50% - 50vw); padding: 0; gap: 0; grid-template-columns: 1fr 1fr; align-items: stretch; }
body.t-salamander .sc-about-media { order: 2; }
body.t-salamander .sc-about-media img { height: 100%; min-height: clamp(340px, 60vh, 620px); aspect-ratio: auto; border-radius: 0; }
body.t-salamander .sc-about-copy { align-self: center; padding: clamp(56px, 7vw, 108px) clamp(24px, 6vw, 92px); }
body.t-salamander .sc-about-copy p { color: var(--text); font-size: clamp(16px, 1.9vw, 18px); line-height: 1.85; }

/* BLEED TWO, welded straight underneath it — six tiles butted edge to edge with
   the gutter at zero, the band doubled to two rows of three on near-black. The
   caption is laid inside its own tile so nothing opens a seam between rows. */
body.t-salamander .sc-strip { max-width: none; width: 100vw; margin: 0 calc(50% - 50vw); padding: 0; background: var(--sl-black); }
body.t-salamander .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
body.t-salamander .sc-strip-card { position: relative; }
body.t-salamander .sc-strip-img { border: 0; border-radius: 0; aspect-ratio: 4 / 3; background: var(--sl-black); }
body.t-salamander .sc-strip-label { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 40px 22px 20px; text-align: left; color: var(--sl-bone); background: linear-gradient(rgba(19, 22, 25, 0), rgba(19, 22, 25, 0.88)); text-transform: uppercase; letter-spacing: 0.18em; font-size: 11.5px; font-weight: 700; }

/* THE CONTRACTION — white cards punched out of the steel, four across in two
   rows that both fill. AMBER 2 of 2 is the rand figure, taken down two stops
   only as far as it must go to stay legible on a white card. */
body.t-salamander .sc-products { padding: clamp(80px, 8vw, 118px) 20px clamp(80px, 8vw, 116px); }
body.t-salamander .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; padding: 0; }
body.t-salamander .product-card { background: var(--surface); border: 0; border-radius: 0; box-shadow: none; }
body.t-salamander .product-card:hover { transform: none; box-shadow: 0 14px 34px rgba(19, 22, 25, 0.24); }
body.t-salamander .product-card .ph { aspect-ratio: 4 / 3; background: var(--surface); border-radius: 0; }
body.t-salamander .product-card .meta { padding: 18px 20px 24px; }
body.t-salamander .product-card .p { color: var(--sl-ember); font-weight: 700; font-size: 15.5px; margin-top: 7px; }

/* the only bleed left after the two at the top: one near-black photograph with
   the words held in the quiet left of the frame, and a bone control so the
   amber stays spent at two */
body.t-salamander .sc-banner { min-height: 60vh; margin: 0 calc(50% - 50vw); padding: clamp(72px, 9vh, 120px) max(24px, calc(50vw - 540px)); display: flex; align-items: center; text-align: left; background-color: var(--sl-black); }
body.t-salamander .sc-banner-inner { max-width: 520px; margin: 0; }
body.t-salamander .sc-banner .btn.brand { background: var(--sl-bone); color: #14171a; }

/* the close: one contained centred column, a small wordless emblem above a wide
   declarative heading, and the fields stacked the full width beneath it */
body.t-salamander .sc-contact { max-width: 640px; padding: clamp(88px, 9vw, 128px) 20px clamp(88px, 9vw, 124px); }
body.t-salamander .sc-contact::before { content: ''; display: block; width: 88px; height: 88px; margin: 0 auto 32px; border-radius: 50%; background: var(--sl-black) url("/media/samples/sal_emblem_element.jpg") center / cover; }
body.t-salamander .sc-contact .sc-h2 { font-size: clamp(28px, 4.8vw, 52px); line-height: 1.04; margin-bottom: 18px; }
body.t-salamander .sc-field input, body.t-salamander .sc-field textarea { background: var(--surface); border: 0; border-radius: 0; padding: 15px 16px; }
body.t-salamander .sc-contact-form .btn { align-self: stretch; }

@media (max-width: 900px) {
  body.t-salamander .sc-hero { min-height: 84vh; }
  body.t-salamander .sc-about-split { grid-template-columns: 1fr; }
  body.t-salamander .sc-about-media { order: 0; }
  body.t-salamander .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-salamander .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-salamander .sc-banner { min-height: 48vh; }
}

/* NIGHT — the bench goes down to a workshop lit by one lamp. The steel drops to
   a dark grey, the near-black bands go blacker still so they still read as
   holes cut in the page, and the amber is allowed its full glow on the rand
   figures because there is no white card left for it to burn out against. */
html[data-theme="dark"] body.t-salamander {
  background: #22272a;
  color: #b7bec2;
  --sl-amber: #f0ab1f;
  --sl-ember: #f0ab1f;
  --sl-black: #0b0d0f;
  --sl-bone: #f1eee8;
  --bg-flat: #22272a;
  --header-bg: #22272a;
  --surface: #2e3439;
  --surface-2: #383f44;
  --line: #3a4146;
  --line-strong: #545c61;
  --heading: #eef1f2;
  --text: #b7bec2;
  --muted: #8b9297;
}
html[data-theme="dark"] body.t-salamander .sf-head, html[data-theme="dark"] body.t-salamander .sf-header,
html[data-theme="dark"] body.t-salamander .sf-foot, html[data-theme="dark"] body.t-salamander .sf-footer,
html[data-theme="dark"] body.t-salamander .sf-cats { background: #22272a; border-color: #3a4146; }
html[data-theme="dark"] body.t-salamander .product-card:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); }