/* ---------- Sleeptou — Roadside recovery & towing 207 (website) ----------
   THE STRUCTURAL MOVE: the beacon amber is a HAIRLINE LATTICE, never a fill.
   The four statistics and the eight insurer names are drawn as the same
   gutterless grid of cells, separated only by a 1px amber rule and run out to
   the window edges — one four-across band, then one four-by-two strip directly
   under it. Between them they are the only structure on the page: everything
   else sits on one unbroken concrete-grey ground with no card, no shadow and no
   rounded corner anywhere, and the ground is interrupted exactly once, by the
   night plate behind the closing push. Sections are reached by class; nothing
   here uses :nth-of-type, and nothing here touches the header's order. */

body.t-sleeptou.ws-body {
  --bg: #f0efec; --fg: #4d4c47; --heading: #1c1c1a; --text: #4d4c47; --muted: #8b8983;
  --sl-amber: #e0b400; --sl-rule: #d6d3cb; --sl-dark: #131311;
  --hero-a: rgba(14, 14, 12, .28); --hero-b: rgba(14, 14, 12, .70);
}
body.t-sleeptou { background: #f0efec; color: #1c1c1a; }

/* the bar rides on the stage itself — type only, never repositioned */
body.t-sleeptou .ws-nav { position: absolute; top: 0; left: 0; right: 0; padding: 15px 0; background: transparent; backdrop-filter: none; border-bottom: 0; }
body.t-sleeptou .ws-brand, body.t-sleeptou .ws-nav-links a, body.t-sleeptou .ws-nav-links a:hover, body.t-sleeptou .ws-nav-links a.on { color: #f3f1ea; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; border-bottom: 0; }

/* the stage — three plates of midday tar, headline and one button dead centre */
body.t-sleeptou .ws-hero { min-height: 100vh; }
body.t-sleeptou .ws-hero h1 { font-size: clamp(36px, 6.6vw, 84px); font-weight: 800; letter-spacing: -.045em; line-height: 1.0; max-width: 15ch; text-shadow: none; }
body.t-sleeptou.ws-body .btn.brand, body.t-sleeptou.ws-body .ws-hero-cta.btn.brand, body.t-sleeptou.ws-body .ws-cta .btn.brand { background: var(--sl-amber); color: #16150f; border-radius: 0; box-shadow: none; text-transform: uppercase; letter-spacing: .17em; font-size: 11px; font-weight: 800; padding: 17px 34px; }

/* one concrete ground the whole way down: the zebra wash never fires */
body.t-sleeptou.ws-body .ws-section, body.t-sleeptou.ws-body .ws-section:nth-child(even):not(.ws-cta):not(.ws-shoplink) { background: transparent; color: var(--text); padding: 92px 0; }
body.t-sleeptou .ws-h2 { color: var(--heading); font-size: clamp(17px, 2.2vw, 23px); font-weight: 800; text-transform: uppercase; letter-spacing: .14em; margin: 0 0 42px; }
/* the shared sheet hard-codes greys that only work on a white page */
body.t-sleeptou .ws-sub, body.t-sleeptou .ws-feature p, body.t-sleeptou .ws-story-copy p, body.t-sleeptou .ws-member p, body.t-sleeptou .ws-video-caption { color: var(--text); line-height: 1.82; }
body.t-sleeptou .ws-feature h3, body.t-sleeptou .ws-gallery-cap strong, body.t-sleeptou .ws-member strong { color: var(--heading); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }

/* the lone film band — a still with a beacon-amber play disc struck over it */
body.t-sleeptou .ws-video .ws-container { max-width: 980px; }
body.t-sleeptou .ws-video-frame { aspect-ratio: 21 / 9; border-radius: 0; box-shadow: none; background: #14140f url("/media/samples/slt_video.jpg") center / cover; }
body.t-sleeptou .ws-video-frame::before { content: ''; position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%; background: var(--sl-amber); }
body.t-sleeptou .ws-video-frame::after { content: ''; position: absolute; inset: 0; margin: auto; width: 0; height: 0; transform: translateX(5px); border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-left: 23px solid #16150f; }

/* the three-across cadence, run twice — six claims, then six callout tiles */
body.t-sleeptou .ws-features-grid, body.t-sleeptou .ws-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px 32px; }
body.t-sleeptou .ws-feature-icon { color: var(--sl-amber); margin-bottom: 14px; }
body.t-sleeptou .ws-gallery-item img, body.t-sleeptou .ws-story-media img { aspect-ratio: 4 / 3; border-radius: 0; filter: saturate(.82) contrast(1.06); }
body.t-sleeptou .ws-story-copy h2 { color: var(--heading); font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.035em; margin: 0 0 20px; }

/* THE LATTICE, ONE — four figures in four ruled cells, out to the window edges */
body.t-sleeptou.ws-body .ws-section.ws-columns, body.t-sleeptou.ws-body .ws-section.ws-listblock { padding: 18px 0 92px; }
body.t-sleeptou .ws-columns .ws-container, body.t-sleeptou .ws-listblock .ws-container { max-width: none; padding: 0 clamp(16px, 3vw, 40px); }
body.t-sleeptou .ws-columns .ws-cols { gap: 0; border-top: 1px solid var(--sl-amber); border-bottom: 1px solid var(--sl-amber); }
body.t-sleeptou .ws-col { padding: 46px clamp(14px, 2.4vw, 32px) 42px; border-left: 1px solid var(--sl-amber); }
body.t-sleeptou .ws-col-h { color: var(--sl-amber); font-size: clamp(44px, 7.4vw, 104px); font-weight: 800; letter-spacing: -.055em; line-height: .92; font-variant-numeric: tabular-nums; margin: 0 0 12px; }
body.t-sleeptou .ws-col p { color: var(--muted); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .22em; margin: 0; }

/* THE LATTICE, TWO — the same cells, eight names deep, set as type not logos */
body.t-sleeptou .ws-list-bullet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sl-amber); }
body.t-sleeptou .ws-list-bullet li { margin: 0; padding: 28px 14px; border-bottom: 1px solid var(--sl-amber); border-left: 1px solid var(--sl-amber); text-align: center; color: var(--heading); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .15em; line-height: 1.6; }
body.t-sleeptou .ws-col:first-child, body.t-sleeptou .ws-list-bullet li:nth-child(4n+1) { border-left: 0; }

/* four of the crew, squared off — no circles, no roundels anywhere on the page */
body.t-sleeptou .ws-team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 26px; }
body.t-sleeptou .ws-member-photo img { width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: 0; margin: 0 0 14px; filter: saturate(.82) contrast(1.06); }

/* the one night plate on the page, and the ruled form under it */
body.t-sleeptou.ws-body .ws-section.ws-cta { background-color: var(--sl-dark); background-image: linear-gradient(rgba(9, 9, 8, .58), rgba(9, 9, 8, .82)), url("/media/samples/slt_cta.jpg"); background-size: cover; background-position: center; padding: 112px 0; }
body.t-sleeptou .ws-field label { color: var(--muted); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .17em; }
body.t-sleeptou .ws-field input, body.t-sleeptou .ws-field textarea, body.t-sleeptou .ws-field select { background: transparent; border: 0; border-bottom: 1px solid var(--sl-rule); border-radius: 0; color: var(--heading); padding: 12px 2px; }
body.t-sleeptou .ws-footer { background: var(--sl-dark); color: #8b8880; border-top: 0; padding: 30px 0; }

/* mobile: both lattices halve, the cadence halves, the menu drops onto concrete */
@media (max-width: 860px) {
  body.t-sleeptou .ws-features-grid, body.t-sleeptou .ws-gallery-grid, body.t-sleeptou .ws-team-grid, body.t-sleeptou .ws-cols-4, body.t-sleeptou .ws-list-bullet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-sleeptou .ws-list-bullet li:nth-child(odd) { border-left: 0; }
  body.t-sleeptou .ws-hero h1 { font-size: clamp(30px, 9.4vw, 50px); }
  body.t-sleeptou .ws-nav-links a { color: var(--heading); }
}

/* night — the same lattice printed bone on asphalt, the amber one stop hotter */
html[data-theme="dark"] body.t-sleeptou.ws-body, html[data-theme="dark"] body.t-sleeptou {
  --bg: #131311; --fg: #a09d94; --heading: #f2efe4; --text: #a09d94; --muted: #7b786f;
  --sl-amber: #f4c62a; --sl-rule: #2f2e29; --sl-dark: #0a0a09;
  --hero-a: rgba(5, 5, 4, .32); --hero-b: rgba(5, 5, 4, .76);
  background: #131311; color: #f2efe4;
}
html[data-theme="dark"] body.t-sleeptou.ws-body .ws-section.ws-cta { background-image: linear-gradient(rgba(5, 5, 4, .70), rgba(5, 5, 4, .88)), url("/media/samples/slt_cta.jpg"); }