/* ---------------------------------------------------------------------------
   Tailboard — removals & storage (120). STRUCTURAL MOVE: the hoisted quote
   form, the story column and the video are welded into ONE continuous kraft
   slab through the middle third, so the page reads photograph / dust / kraft /
   dust / photograph — contained and full-bleed strictly alternating, every
   block on one centre axis, no split anywhere. A hairline utility bar carrying
   the depot phone number is drawn on .ws-nav::before, because the section
   model has no slot for it and the number has to appear three times.
   The zebra tint in the base sheet is (0,4,0), so the ground colours are set at
   body.t-tailboard.ws-body .ws-section.<class> to outrank it.
   --------------------------------------------------------------------------- */
body.t-tailboard.ws-body { --bg: #e6e4df; --fg: #4d4b45; --heading: #22211e; --text: #4d4b45; --muted: #8b877e; }
body.t-tailboard .ws-section { padding: 104px 0; }
body.t-tailboard.ws-body .ws-section.ws-features,
body.t-tailboard.ws-body .ws-section.ws-testimonials,
body.t-tailboard.ws-body .ws-section.ws-gallery,
body.t-tailboard.ws-body .ws-section.ws-photogrid { background: #e6e4df; }
body.t-tailboard.ws-body .ws-section.ws-contact,
body.t-tailboard.ws-body .ws-section.ws-richtext,
body.t-tailboard.ws-body .ws-section.ws-video { background: #d8ccb6; }
body.t-tailboard .ws-h2 { color: #22211e; font-size: clamp(25px, 3.6vw, 38px); font-weight: 800; letter-spacing: -0.032em; margin: 0 0 14px; }
body.t-tailboard .ws-sub { color: #6f6b62; font-size: 16px; line-height: 1.7; max-width: 52ch; margin: 0 auto 54px; }

/* the utility bar the reference carries above its menu */
body.t-tailboard .ws-nav { background: #e6e4df; border-bottom: 1px solid #cbc7be; backdrop-filter: none; }
body.t-tailboard .ws-nav::before { content: '021 534 8810 · Depot open Mon–Fri 07:00–17:00, Sat 08:00–12:00'; display: block; padding: 9px 16px; border-bottom: 1px solid #d5d1c8; color: #8b877e; font-size: 10.5px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; text-align: center; }
body.t-tailboard .ws-brand { color: #22211e; font-size: 15px; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; }
body.t-tailboard .ws-nav-links a { color: #4d4b45; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 1; }

/* one stage, three slides, one headline */
body.t-tailboard .ws-hero { min-height: 100vh; --hero-a: rgba(24, 22, 19, 0.32); --hero-b: rgba(24, 22, 19, 0.62); }
body.t-tailboard.ws-body .ws-hero h1 { font-size: clamp(36px, 6vw, 76px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.04; max-width: 17ch; }
body.t-tailboard .btn.brand { background: #e05a16; color: #ffffff; border-radius: 2px; padding: 16px 34px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; box-shadow: none; }
body.t-tailboard .btn.brand:hover { background: #c24a0d; }

/* four icons, no photographs, deliberate whitespace either side */
body.t-tailboard .ws-features .ws-container { max-width: 940px; }
body.t-tailboard .ws-features-grid, body.t-tailboard .ws-testimonials-grid { grid-template-columns: repeat(4, 1fr); gap: 42px 30px; }
body.t-tailboard .ws-feature, body.t-tailboard .ws-quote, body.t-tailboard .ws-gallery-cap { text-align: center; }
body.t-tailboard .ws-feature-icon { color: #22211e; margin-bottom: 16px; }
body.t-tailboard .ws-feature h3, body.t-tailboard .ws-gallery-cap strong { color: #22211e; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 10px; }
body.t-tailboard .ws-feature p, body.t-tailboard .ws-gallery-cap span { color: #6f6b62; font-size: 14px; line-height: 1.7; }

/* the kraft slab: form third, then the story column, then the video */
body.t-tailboard .ws-richtext, body.t-tailboard .ws-video { padding-top: 0; }
body.t-tailboard .ws-richtext p { color: #4a453c; font-size: 16.5px; line-height: 1.85; margin: 0 0 20px; }
body.t-tailboard .ws-field input, body.t-tailboard .ws-field textarea, body.t-tailboard .ws-field select, body.t-tailboard .ws-select-trigger { background: #f3eee4; border: 1px solid #bfb19a; border-radius: 2px; color: #22211e; }
body.t-tailboard .ws-video-frame, body.t-tailboard .ws-gallery-item img { border-radius: 0; box-shadow: none; }

/* four quotes on rules, six tiles three across */
body.t-tailboard .ws-quote { background: transparent; border: 0; border-top: 2px solid #22211e; border-radius: 0; padding: 18px 0 0; }
body.t-tailboard .ws-quote blockquote { color: #22211e; font-size: 15px; line-height: 1.7; }
body.t-tailboard .ws-quote blockquote::before { content: none; }
body.t-tailboard .ws-gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 36px 26px; }
body.t-tailboard .ws-gallery-cap { padding-top: 14px; }

/* the bleeds: four photographs flush, then flat strap orange */
body.t-tailboard .ws-photogrid { padding: 0; }
body.t-tailboard .ws-photogrid-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-tailboard .ws-cta { background: #e05a16; padding: 116px 0; }
body.t-tailboard .ws-cta .btn.brand { background: #22211e; color: #f3eee4; }
body.t-tailboard .ws-cta .btn.brand:hover { background: #100f0e; }
body.t-tailboard .ws-footer { background: #22211e; border-top: 0; color: #8b877e; }

@media (max-width: 900px) {
  body.t-tailboard .ws-section { padding: 68px 0; }
  body.t-tailboard .ws-features-grid, body.t-tailboard .ws-testimonials-grid, body.t-tailboard .ws-gallery-grid, body.t-tailboard .ws-photogrid-grid { grid-template-columns: repeat(2, 1fr); }
  body.t-tailboard .ws-nav::before { font-size: 9.5px; letter-spacing: 0.08em; }
}

/* night */
html[data-theme="dark"] body.t-tailboard.ws-body { --bg: #1a1917; --fg: #a8a49b; --heading: #eceae4; --text: #a8a49b; --muted: #7e7a72; }
html[data-theme="dark"] body.t-tailboard { background: #1a1917; }
html[data-theme="dark"] body.t-tailboard.ws-body .ws-section.ws-features,
html[data-theme="dark"] body.t-tailboard.ws-body .ws-section.ws-testimonials,
html[data-theme="dark"] body.t-tailboard.ws-body .ws-section.ws-gallery,
html[data-theme="dark"] body.t-tailboard.ws-body .ws-section.ws-photogrid { background: #1a1917; }
html[data-theme="dark"] body.t-tailboard.ws-body .ws-section.ws-contact,
html[data-theme="dark"] body.t-tailboard.ws-body .ws-section.ws-richtext,
html[data-theme="dark"] body.t-tailboard.ws-body .ws-section.ws-video { background: #262320; }
html[data-theme="dark"] body.t-tailboard .ws-nav { background: #1a1917; border-color: #322e2a; }
html[data-theme="dark"] body.t-tailboard .ws-nav::before { border-color: #322e2a; color: #7e7a72; }
html[data-theme="dark"] body.t-tailboard .ws-brand,
html[data-theme="dark"] body.t-tailboard .ws-h2,
html[data-theme="dark"] body.t-tailboard .ws-feature-icon,
html[data-theme="dark"] body.t-tailboard .ws-feature h3,
html[data-theme="dark"] body.t-tailboard .ws-gallery-cap strong,
html[data-theme="dark"] body.t-tailboard .ws-quote blockquote { color: #eceae4; }
html[data-theme="dark"] body.t-tailboard .ws-nav-links a,
html[data-theme="dark"] body.t-tailboard .ws-sub,
html[data-theme="dark"] body.t-tailboard .ws-feature p,
html[data-theme="dark"] body.t-tailboard .ws-gallery-cap span,
html[data-theme="dark"] body.t-tailboard .ws-richtext p { color: #a8a49b; }
html[data-theme="dark"] body.t-tailboard .ws-quote { border-top-color: #eceae4; }
html[data-theme="dark"] body.t-tailboard .ws-field input,
html[data-theme="dark"] body.t-tailboard .ws-field textarea,
html[data-theme="dark"] body.t-tailboard .ws-field select,
html[data-theme="dark"] body.t-tailboard .ws-select-trigger { background: #1a1917; border-color: #3d3833; color: #eceae4; }
html[data-theme="dark"] body.t-tailboard .ws-footer { background: #262320; }