/* PEDDEL — a paddling club on the Berg. One pale river-stone ground runs the
   whole way down with no alternating tinted bands, and the container is broken
   exactly TWICE: a near-black counter strip carrying four oversized teal figures,
   and a six-up gapless photograph run. The structural move that makes this
   recognisable is the counter-move on the film — it is held INSIDE the 760px
   text measure as a still with a play disc over it, heading above and caption
   below, where almost every other page in the set runs its video full-bleed.
   Anodised teal is spent on exactly three things: the stage button, the four
   counter figures and the submit. The CTA button is ink so it stays a fourth. */
body.t-peddel.ws-body {
  --bg: #eceae6; --fg: #3c3f42; --heading: #191a1c; --text: #3c3f42; --muted: #7a7e82;
  --pd-ink: #191a1c; --pd-teal: #0f9b8e; --pd-line: #d6d3cc;
  --hero-a: rgba(12, 20, 22, .26); --hero-b: rgba(12, 20, 22, .60);
}
body.t-peddel { background: var(--bg); }
body.t-peddel .ws-brand, body.t-peddel .ws-nav-links a { color: var(--heading); text-transform: uppercase; letter-spacing: .17em; font-weight: 700; }

/* the stage holds the entire first screen — three frames crossfading, copy centred */
body.t-peddel .ws-hero { min-height: 100vh; }
body.t-peddel .ws-hero h1 { color: #f5f3ef; font-size: clamp(38px, 6.4vw, 82px); font-weight: 700; letter-spacing: -.042em; line-height: 1.02; text-shadow: none; }

/* teal 1 of 3 — a flat slab, never an outline, with ink lettering so it holds up */
body.t-peddel.ws-body .btn.brand { background: var(--pd-teal); color: #08100f; border: 0; border-radius: 0; box-shadow: none; text-transform: uppercase; letter-spacing: .19em; font-size: 10.5px; font-weight: 700; padding: 16px 34px; }
body.t-peddel.ws-body .ws-cta .btn.brand { background: var(--pd-ink); color: var(--bg); }

/* one ground the whole way down — every alternating tint killed */
body.t-peddel.ws-body .ws-section { padding: 90px 0; background: transparent; }
body.t-peddel .ws-h2, body.t-peddel .ws-story-copy h2 { color: var(--heading); font-size: clamp(24px, 3.2vw, 38px); font-weight: 700; letter-spacing: -.032em; line-height: 1.1; }
body.t-peddel .ws-story-copy p, body.t-peddel .ws-video-caption, body.t-peddel .ws-sub, body.t-peddel .ws-quote blockquote { color: var(--text); font-size: 15.5px; line-height: 1.8; }

/* the ONLY split on the page: prose left at 60, photograph hard right at 40 */
body.t-peddel .ws-story-right .ws-story-grid { grid-template-columns: 3fr 2fr; gap: 60px; align-items: start; }
body.t-peddel .ws-story-media img, body.t-peddel .ws-member-photo img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 0; margin: 0 0 13px; }

/* THE COUNTER-MOVE — the film contained in the text measure, disc over the still */
body.t-peddel .ws-video-frame { aspect-ratio: 16 / 9; border-radius: 0; box-shadow: none; background: #191a1c url("/media/samples/pdl_video.jpg") center / cover; }
body.t-peddel .ws-video-frame::before { content: ''; position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%; background: rgba(236, 234, 230, .93); }
body.t-peddel .ws-video-frame::after { content: ''; position: absolute; inset: 0; margin: auto; width: 0; height: 0; transform: translateX(6px); border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 26px solid #191a1c; }

/* BREAK 1 OF 2 — the near-black band, the only place numbers are the loudest thing */
body.t-peddel.ws-body .ws-features { background: var(--pd-ink); padding: 74px 0; }
body.t-peddel .ws-features-grid, body.t-peddel .ws-team-grid, body.t-peddel .ws-testimonials-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; text-align: left; }
body.t-peddel .ws-feature-icon { color: #6e7377; margin-bottom: 10px; }
body.t-peddel .ws-feature h3 { color: var(--pd-teal); font-size: clamp(46px, 6.4vw, 78px); font-weight: 700; letter-spacing: -.055em; line-height: 1; margin: 0 0 10px; }
body.t-peddel .ws-feature p { color: #a7abaf; font-size: 13px; line-height: 1.6; }

/* four coaches in tall crops, the name ruled off directly under the photograph */
body.t-peddel .ws-member strong { display: block; border-top: 1px solid var(--pd-line); padding-top: 12px; color: var(--heading); font-size: 15px; }

/* BREAK 2 OF 2 — six gapless tiles, the two wide frames given a double column */
body.t-peddel.ws-body .ws-photogrid { padding: 0; }
body.t-peddel .ws-photogrid-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-peddel .ws-photogrid-grid img:nth-child(2), body.t-peddel .ws-photogrid-grid img:nth-child(6) { grid-column: span 2; aspect-ratio: 2 / 1; }

/* the shallow prompt — one line between two hairlines, no photograph, no colour */
body.t-peddel.ws-body .ws-cta { padding: 50px 0; border-top: 1px solid var(--pd-line); border-bottom: 1px solid var(--pd-line); }
body.t-peddel .ws-cta-inner h2 { color: var(--heading); font-size: clamp(19px, 2.2vw, 26px); margin: 0 0 20px; }
body.t-peddel .ws-quote { background: transparent; border: 0; border-top: 1px solid var(--pd-line); border-radius: 0; box-shadow: none; padding: 20px 0 0; }
body.t-peddel .ws-quote blockquote::before { content: none; }

/* the page ends on the form — six fields in two columns, teal 3 of 3 on the submit */
body.t-peddel .ws-form { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 24px 26px; max-width: 100%; }
body.t-peddel .ws-form .btn.brand { grid-column: 1 / -1; justify-self: center; }
body.t-peddel .ws-field input, body.t-peddel .ws-field select, body.t-peddel .ws-field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--pd-line); border-radius: 0; color: var(--heading); padding: 10px 2px; }

@media (max-width: 760px) {
  body.t-peddel .ws-features-grid, body.t-peddel .ws-team-grid, body.t-peddel .ws-testimonials-grid, body.t-peddel .ws-photogrid-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-peddel .ws-photogrid-grid img:nth-child(2), body.t-peddel .ws-photogrid-grid img:nth-child(6) { grid-column: auto; aspect-ratio: 1 / 1; }
  body.t-peddel .ws-form { grid-template-columns: 1fr; }
}

/* night — the same cold stone after dark, the teal one stop brighter */
html[data-theme="dark"] body.t-peddel.ws-body {
  --bg: #141517; --fg: #a4a8ac; --heading: #eceae6; --text: #a4a8ac; --muted: #767a7e;
  --pd-ink: #08090a; --pd-teal: #2fc3b4; --pd-line: #2b2d30;
  --hero-a: rgba(5, 8, 9, .32); --hero-b: rgba(5, 8, 9, .68);
}
html[data-theme="dark"] body.t-peddel { background: var(--bg); }