/* ---- fetch (Fetch — Kite & wind gear 54) -----------------------------------
   THE STRUCTURAL MOVE: a photography desert down the middle. Three richtext
   blocks run back to back with no picture between them, welded into one
   column by hairline rules, and the middle one is re-gridded into a two-column
   type split — small tracked heading in the left column, the paragraph in the
   right — so a split reads as a split with no image in it at all. It is
   addressed by its rendered id (#about-2), NOT by :nth-of-type, which would
   match the hero. Nothing goes full-bleed below the opener, and the bar never
   turns to glass over it: the hero photograph sits under a solid shelf. */
body.t-fetch {
  background: #f6f5f2;
  color: #34383a;
  --radius: 0;
  --header-bg: #f6f5f2;
  --surface: #ffffff;
  --surface-2: #eceae5;
  --line: #dfddd7;
  --line-strong: #c8c6bf;
  --heading: #14171a;
  --text: #34383a;
  --muted: #6f7477;
}
/* the shelf: opaque, unblurred, no tint — it never goes transparent over the slider */
body.t-fetch .sf-header, body.t-fetch .sf-footer { background: #f6f5f2; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: #dfddd7; }
body.t-fetch .btn.brand { background: #1f5f66; border-color: #1f5f66; color: #ffffff; box-shadow: none; border-radius: 0; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; font-weight: 700; padding: 14px 26px; }
body.t-fetch .btn.brand:hover { background: #17484e; border-color: #17484e; }

/* full-viewport opener that begins UNDER the bar rather than behind it */
body.t-fetch .sc-hero { min-height: calc(100vh - 66px); padding: 92px 20px; }
body.t-fetch .sc-hero h1 { font-weight: 600; font-size: clamp(34px, 6vw, 74px); line-height: 1.02; letter-spacing: -0.03em; max-width: 15ch; margin: 0 auto 18px; }
body.t-fetch .sc-hero .btn.brand.sc-hero-ghost { border-width: 1px; border-radius: 0; }
body.t-fetch .sc-h2 { text-transform: uppercase; letter-spacing: 0.24em; font-size: 11px; font-weight: 700; color: #1f5f66; margin-bottom: 30px; }

/* THE DESERT — three imageless blocks on one contained width, hairline ruled */
body.t-fetch .sc-richtext { max-width: 700px; padding: 78px 20px; border-top: 1px solid #dfddd7; }
body.t-fetch .sc-richtext p { font-size: 16px; line-height: 1.85; color: #4a4f52; }
body.t-fetch .sc-richtext#about { border-top-width: 0; padding-top: 100px; }
/* the imageless split: type on both sides of the block, no photograph anywhere in it */
body.t-fetch .sc-richtext#about-2 { display: grid; grid-template-columns: 170px 1fr; gap: 34px; align-items: start; text-align: left; }
body.t-fetch .sc-richtext#about-2 .sc-h2 { text-align: left; margin: 4px 0 0; }
@media (max-width: 760px) {
  body.t-fetch .sc-richtext#about-2 { display: block; }
  body.t-fetch .sc-richtext#about-2 .sc-h2 { margin-bottom: 16px; }
}

/* the pivot back into imagery: six frames, one place name under each */
body.t-fetch .sc-strip { padding: 48px 20px 28px; }
body.t-fetch .sc-strip-img { aspect-ratio: 4 / 5; border-color: #dfddd7; }
body.t-fetch .sc-strip-label { margin-top: 12px; text-transform: uppercase; letter-spacing: 0.14em; font-size: 10.5px; font-weight: 700; color: #14171a; }

/* eight tiles, four across, two clean rows */
body.t-fetch .sc-buy-grid { grid-template-columns: repeat(4, 1fr); gap: 42px 26px; }
@media (max-width: 900px) { body.t-fetch .sc-buy-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 20px; } }
body.t-fetch .sc-buy-media img { aspect-ratio: 1; }
body.t-fetch .sc-buy-p { color: #1f5f66; font-weight: 600; }

/* the form closes on the same axis the middle blocks used — no coloured band */
body.t-fetch .sc-contact { max-width: 700px; border-top: 1px solid #dfddd7; padding: 76px 20px 94px; }
body.t-fetch .sc-contact-form .btn { align-self: center; }

/* NIGHT — the same coast after dark: wet-slate ground, the teal lifted to a
   shallow-water blue that still reads as the accent on the price and the buy */
html[data-theme="dark"] body.t-fetch {
  background: #101315;
  color: #b9bec0;
  --header-bg: #101315;
  --surface: #171b1d;
  --surface-2: #1c2123;
  --line: #262c2e;
  --line-strong: #343b3e;
  --heading: #edf0f0;
  --text: #b9bec0;
  --muted: #838a8c;
}
html[data-theme="dark"] body.t-fetch .sf-header, html[data-theme="dark"] body.t-fetch .sf-footer { background: #101315; border-color: #262c2e; }
html[data-theme="dark"] body.t-fetch .btn.brand { background: #62b9bf; border-color: #62b9bf; color: #0c0f10; }
html[data-theme="dark"] body.t-fetch .btn.brand:hover { background: #7ccdd2; border-color: #7ccdd2; }
html[data-theme="dark"] body.t-fetch .sc-h2, html[data-theme="dark"] body.t-fetch .sc-buy-p { color: #62b9bf; }
html[data-theme="dark"] body.t-fetch .sc-richtext, html[data-theme="dark"] body.t-fetch .sc-contact { border-top-color: #262c2e; }
html[data-theme="dark"] body.t-fetch .sc-richtext p { color: #a3aaac; }
html[data-theme="dark"] body.t-fetch .sc-strip-img { border-color: #262c2e; }
html[data-theme="dark"] body.t-fetch .sc-field input, html[data-theme="dark"] body.t-fetch .sc-field textarea { background: #171b1d; border-color: #262c2e; color: #edf0f0; }