/* ---- vlot (Vlot — Kayaks, SUPs & paddling kit 346) -------------------------
   THE STRUCTURAL MOVE: the page spends its entire visual budget in ONE shot and
   then goes quiet. A full-viewport photograph carries a single enormous
   lowercase word and a small ghost target, and the moment it ends the document
   clamps to one contained centred column — 1080, the same two edges as the
   shared .container — and never bleeds again. The catalogue is unrolled out of
   its checkerboard into one hull per contained row, the photograph large on the
   left and the name, the green rule, the rand figure and the buy slab set
   beside it on the right; --surface-2 is set to the ground colour so no band on
   the page carries a fill of its own; and even the single dark slate slab is
   INSET inside the column rather than run edge to edge. The one break in the
   symmetry is the about band, deliberately lopsided, a narrow left-aligned text
   column against one large photograph held right. River green is spent on four
   things and nothing else: the strip labels, the rule under each hull's name,
   the rand figures and the form button. `order` appears once, on
   .sc-about-media; nothing in this block touches the header, the nav, or the
   order or position of a single item inside them. --------------------------- */
body.t-vlot {
  background: #f7f5ef;
  color: #14161a;
  --vl-green: #2f6b4f;
  --vl-green-hi: #3d8663;
  --bg-flat: #f7f5ef;
  --header-bg: #f7f5ef;
  --surface: #f7f5ef;
  --surface-2: #f7f5ef;
  --line: #e2ded3;
  --line-strong: #c6c0b2;
  --heading: #14161a;
  --text: #14161a;
  --muted: #77746b;
  --radius: 0;
  --shadow: none;
}

/* a flat bone bar the same colour as the paper, so the one photograph begins
   under the header rather than behind it. Type, colour and tracking only. */
body.t-vlot .sf-head, body.t-vlot .sf-header,
body.t-vlot .sf-foot, body.t-vlot .sf-footer, body.t-vlot .sf-cats {
  background: #f7f5ef; border-color: #e2ded3;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-vlot .sf-name { text-transform: lowercase; letter-spacing: -0.035em; font-size: 21px; font-weight: 700; }
body.t-vlot .sf-navlink { text-transform: uppercase; letter-spacing: 0.2em; font-size: 10.5px; font-weight: 600; }

/* GREEN 1 of 4 — the form button, a flat river-green slab with no edge on it */
body.t-vlot .btn.brand { background: var(--vl-green); color: #f7f5ef; border: 0; box-shadow: none; text-transform: uppercase; letter-spacing: 0.18em; font-size: 10.5px; font-weight: 700; padding: 15px 32px; }
body.t-vlot .btn.brand:hover { background: var(--vl-green-hi); color: #ffffff; }

/* ONE WORD, ONE SHOT — the whole first screen is the photograph, with a single
   enormous lowercase word held dead centre over it and a small ghost target
   beneath. This is the only place on the page where type is allowed to be loud
   and the only band that ever reaches the edge of the window. */
body.t-vlot .sc-hero { min-height: 100vh; padding: 100px 20px; }
body.t-vlot .sc-hero h1 { text-transform: lowercase; font-size: clamp(72px, 17vw, 250px); font-weight: 700; letter-spacing: -0.055em; line-height: 0.84; margin: 0 0 40px; text-shadow: 0 2px 40px rgba(0, 0, 0, 0.34); }
body.t-vlot .sc-hero .btn.brand.sc-hero-ghost { border-radius: 999px; padding: 13px 30px; font-size: 10.5px; letter-spacing: 0.26em; font-weight: 600; }

/* every heading below the fold is the same small tracked cap line — the page
   introduces nothing loudly after the hero has already said it */
body.t-vlot .sc-h2 { text-transform: uppercase; letter-spacing: 0.24em; font-size: 11px; font-weight: 700; color: var(--heading); margin: 0 0 34px; }

/* THE ICON ROW, PHOTOGRAPHED — four gapped tiles on the bare paper: no card, no
   border, no radius, the object floating at glyph scale over one word. GREEN 2. */
body.t-vlot .sc-strip { padding: clamp(72px, 8vw, 112px) 20px clamp(56px, 6vw, 84px); }
body.t-vlot .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(26px, 4vw, 60px); }
body.t-vlot .sc-strip-img { border: 0; border-radius: 0; background: transparent; }
body.t-vlot .sc-strip-img img { object-fit: contain; }
body.t-vlot .sc-strip-label { margin-top: 20px; text-transform: uppercase; letter-spacing: 0.24em; font-size: 10.5px; font-weight: 700; color: var(--vl-green); }

/* THE CATALOGUE, UNROLLED — one hull per row inside the same 1080 column as
   every other band, the photograph large on the left and the caption stack
   middled against it on the right. No panel, no tint, no gutter fill. */
body.t-vlot .sc-show-grid { grid-template-columns: minmax(0, 1fr); max-width: 1080px; margin: 0 auto; padding: 0 20px; row-gap: clamp(54px, 6vw, 96px); }
body.t-vlot .sc-show-inner {
  display: grid; min-height: 0; padding: 0; text-align: left;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto auto auto 1fr;
  grid-template-areas: 'media .' 'media cat' 'media title' 'media rule' 'media price' 'media buy';
  column-gap: clamp(30px, 5vw, 76px);
  align-items: start;
}
body.t-vlot .sc-show-media { grid-area: media; padding: 0; }
body.t-vlot .sc-show-media img { width: 100%; max-width: 100%; max-height: none; aspect-ratio: 3 / 2; object-fit: cover; }
body.t-vlot .sc-show-cat { grid-area: cat; color: var(--muted); font-size: 10px; letter-spacing: 0.26em; }
body.t-vlot .sc-show-t { grid-area: title; text-transform: none; letter-spacing: -0.02em; font-size: clamp(21px, 2.5vw, 31px); font-weight: 700; margin: 12px 0 0; }
/* GREEN 3 of 4 — the caption rule ruled under every hull's name */
body.t-vlot .sc-show-rule { grid-area: rule; width: 46px; height: 2px; background: var(--vl-green); opacity: 1; margin: 20px 0 0; }
/* GREEN 4 of 4 — the rand figure, and the last green on the page */
body.t-vlot .sc-show-price { grid-area: price; color: var(--vl-green); font-size: clamp(19px, 1.9vw, 24px); font-weight: 700; margin: 20px 0 26px; }
body.t-vlot .sc-show-buy, body.t-vlot .sc-show-btn { grid-area: buy; justify-self: start; }

/* THE ONE LOPSIDED BAND — a narrow left-aligned column of text against one
   large photograph held right, and the only asymmetry anywhere on the page */
body.t-vlot .sc-about-split { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(34px, 5vw, 82px); padding: clamp(80px, 9vw, 124px) 20px; align-items: center; }
body.t-vlot .sc-about-media { order: 2; }
body.t-vlot .sc-about-media img { aspect-ratio: 4 / 3; border-radius: 0; }
body.t-vlot .sc-about-copy p, body.t-vlot .sc-contact-sub { color: var(--text); font-size: 15.5px; line-height: 1.95; }

/* THE SINGLE DARK GROUND BELOW THE HERO — and it is INSET, not bled: a slate
   slab held on the same two edges as the column above it, carrying one short
   passage where the reference ran a testimonial carousel */
body.t-vlot .sc-about-overlay { width: calc(100% - 40px); max-width: 1080px; margin: 0 auto clamp(80px, 9vw, 124px); padding: clamp(72px, 8vw, 112px) clamp(26px, 5vw, 80px); }
body.t-vlot .sc-about-overlay .sc-h2 { text-transform: none; letter-spacing: -0.02em; font-size: clamp(20px, 2.4vw, 29px); font-weight: 700; line-height: 1.28; margin: 0 0 20px; }

/* the foot: a contained centred column, narrower than everything above it, and
   the page's last refusal to run a band edge to edge */
body.t-vlot .sc-contact { max-width: 560px; padding: 0 20px clamp(96px, 10vw, 132px); }

@media (max-width: 860px) {
  body.t-vlot .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body.t-vlot .sc-hero { min-height: 82vh; }
  body.t-vlot .sc-show-inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: 'media' 'cat' 'title' 'rule' 'price' 'buy'; }
  body.t-vlot .sc-about-split { grid-template-columns: minmax(0, 1fr); }
  body.t-vlot .sc-about-media { order: 0; }
}

/* NIGHT — the bone goes to the colour of the lagoon at five in the morning and
   the river green is lifted to the pale green wet fibreglass throws back off a
   head torch, so the four places it lands still carry against a dark ground. */
html[data-theme="dark"] body.t-vlot {
  background: #14171a;
  color: #d5d3cb;
  --vl-green: #74bb95;
  --vl-green-hi: #8fd0ac;
  --bg-flat: #14171a;
  --header-bg: #14171a;
  --surface: #14171a;
  --surface-2: #14171a;
  --line: #272b2f;
  --line-strong: #3b4045;
  --heading: #f2f0e8;
  --text: #d5d3cb;
  --muted: #85847c;
}
html[data-theme="dark"] body.t-vlot .sf-head, html[data-theme="dark"] body.t-vlot .sf-header,
html[data-theme="dark"] body.t-vlot .sf-foot, html[data-theme="dark"] body.t-vlot .sf-footer,
html[data-theme="dark"] body.t-vlot .sf-cats { background: #14171a; border-color: #272b2f; }
html[data-theme="dark"] body.t-vlot .btn.brand { background: var(--vl-green); color: #0e1411; }
html[data-theme="dark"] body.t-vlot .btn.brand:hover { background: var(--vl-green-hi); color: #0e1411; }