/* ---- skroef (Skroef — Drones, gimbals & FPV kit 338) ------------------------
   THE STRUCTURAL MOVE: two grids stacked back to back at deliberately opposite
   weight. The category strip runs THREE across as bordered frames — a hairline
   box with a white mat inside it and the label set small underneath — and the
   catalogue immediately below runs FOUR across with the card taken away
   entirely: no edge, no ground, no lift, just a flat-lay on white with a short
   cyan rule and the rand figure under it. Same page, same even gaps, opposite
   weight. The document opens on a full-viewport photograph and returns to
   edge-to-edge exactly once, on the graphite band near the foot; everything
   between sits on bone. Signal cyan is rationed to three things and three only
   — the solid buttons, the rule under each catalogue tile, and the price.
   Nothing here touches the header, the nav, or the order or position of a
   single item inside them. --------------------------------------------------- */
body.t-skroef {
  background: #f4f2ee;
  color: #2a2e31;
  --sk-cyan: #23a6c4;
  --sk-cyan-hi: #1a8299;
  --sk-graphite: #1b1e20;
  --bg-flat: #f4f2ee;
  --header-bg: #f4f2ee;
  --surface: #ffffff;
  --surface-2: #eae7e1;
  --line: #dcd8d1;
  --line-strong: #b4afa7;
  --heading: #15181a;
  --text: #2a2e31;
  --muted: #7c817f;
  --radius: 0;
  --shadow: none;
}

/* a flat bone bar the same colour as the page. Colour, type and tracking only. */
body.t-skroef .sf-head, body.t-skroef .sf-header,
body.t-skroef .sf-foot, body.t-skroef .sf-footer, body.t-skroef .sf-cats {
  background: #f4f2ee; border-color: #dcd8d1;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-skroef .sf-name, body.t-skroef .sf-navlink { text-transform: uppercase; letter-spacing: 0.16em; font-size: 11.5px; font-weight: 600; }

/* CYAN 1 of 3 — every call to action, a flat slab with no edge on it */
body.t-skroef .btn.brand { background: var(--sk-cyan); border: 0; box-shadow: none; color: #0d1315; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 700; padding: 15px 30px; }
body.t-skroef .btn.brand:hover { background: var(--sk-cyan-hi); color: #f4f2ee; }

/* the first screen is a photograph and almost nothing else: the heading is held
   to a narrow measure so it always breaks into two short stacked lines */
body.t-skroef .sc-hero { min-height: 100vh; padding: 130px 24px; background-color: var(--sk-graphite); }
body.t-skroef .sc-hero h1 { max-width: 15ch; margin: 0 auto 20px; font-size: clamp(36px, 6.4vw, 74px); font-weight: 700; line-height: 1.02; letter-spacing: -0.035em; }
body.t-skroef .sc-h2 { text-transform: uppercase; letter-spacing: 0.22em; font-size: clamp(11px, 1.4vw, 13px); font-weight: 700; color: var(--muted); margin-bottom: 34px; }

/* the story band throws the photograph to the RIGHT and the three sentences
   left, without moving a single element out of document order */
body.t-skroef .sc-about-split { direction: rtl; padding: 88px 20px; }
body.t-skroef .sc-about-copy { direction: ltr; }
body.t-skroef .sc-about-copy p { color: var(--text); font-size: 16.5px; line-height: 1.85; }

/* GRID ONE — BORDERED. Three across, two clean rows, each photograph mounted on
   a white mat inside a hairline frame with the label sitting under the box. */
body.t-skroef .sc-strip { padding: 90px 20px 18px; }
body.t-skroef .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 30px; }
body.t-skroef .sc-strip-img { border: 1px solid var(--line-strong); background: #ffffff; padding: 16px; aspect-ratio: 4 / 3; }
body.t-skroef .sc-strip-label { margin-top: 13px; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11.5px; font-weight: 700; }

/* GRID TWO — BORDERLESS. Four across, two clean rows, and the card removed
   completely. CYAN 2 and 3 live here: the short rule under each frame and the
   rand figure sitting beneath it. */
body.t-skroef .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 42px 30px; padding: 4px 0 74px; }
body.t-skroef .product-card, body.t-skroef .product-card:hover { background: transparent; border: 0; box-shadow: none; transform: none; }
body.t-skroef .product-card .ph { background: #ffffff; }
body.t-skroef .product-card .meta { padding: 13px 0 0; margin-top: 14px; border-top: 2px solid var(--sk-cyan); }
body.t-skroef .product-card .t, body.t-skroef .product-card .p { font-size: 15px; }
body.t-skroef .product-card .p { color: var(--sk-cyan-hi); font-weight: 700; margin-top: 4px; }

/* the only edge-to-edge moment after the hero: the photograph is multiplied
   down into the graphite itself rather than dimmed with a scrim over it */
body.t-skroef .sc-banner { min-height: 60vh; padding: 96px 24px; background-color: var(--sk-graphite); background-blend-mode: multiply; display: flex; align-items: center; justify-content: center; }
body.t-skroef .sc-banner h2 { max-width: 13ch; margin: 0 auto 30px; color: #f4f2ee; font-size: clamp(26px, 4.2vw, 48px); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; }

/* three plain lines on one side, the form on the other */
body.t-skroef .sc-contact-lead p { white-space: pre-line; line-height: 2; color: var(--text); }
body.t-skroef .sc-contact-split label[for="sc-msg"] { font-size: 0; }
body.t-skroef .sc-contact-split label[for="sc-msg"]::after { content: 'What you fly, or want to fly'; font-size: 13px; }

@media (max-width: 900px) {
  body.t-skroef .sc-hero { min-height: 82vh; padding: 96px 20px; }
  body.t-skroef .sc-strip-row, body.t-skroef .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  body.t-skroef .sc-banner { min-height: 44vh; padding: 70px 20px; }
}

/* NIGHT — the bone inverts to a cold near-black and the graphite drops below it,
   so the closing band still reads as the heaviest thing on the page. The mats
   under both grids stay bone on purpose: these are flat-lays shot on white, and
   a white-on-black product photo turns into a glowing box. Cyan lifts two stops
   because #23a6c4 goes muddy against a dark ground. */
html[data-theme="dark"] body.t-skroef {
  background: #101315;
  color: #c4cacc;
  --sk-cyan: #35bcd9;
  --sk-cyan-hi: #62d3ea;
  --sk-graphite: #080b0c;
  --bg-flat: #101315;
  --header-bg: #101315;
  --surface: #171b1d;
  --surface-2: #1c2123;
  --line: #262c2f;
  --line-strong: #3f4749;
  --heading: #f4f2ee;
  --text: #c4cacc;
  --muted: #838a8c;
}
html[data-theme="dark"] body.t-skroef .sf-head, html[data-theme="dark"] body.t-skroef .sf-header,
html[data-theme="dark"] body.t-skroef .sf-foot, html[data-theme="dark"] body.t-skroef .sf-footer,
html[data-theme="dark"] body.t-skroef .sf-cats { background: #101315; border-color: #262c2f; }
html[data-theme="dark"] body.t-skroef .btn.brand { color: #08191d; }
html[data-theme="dark"] body.t-skroef .sc-strip-img, html[data-theme="dark"] body.t-skroef .product-card .ph { background: #eceae5; }