/* ---- helder (Helder — Laser eye & cataract clinic 275) ---------------------
   THE STRUCTURAL MOVE: the top half of the page is image mass and nothing else
   — a full-viewport stage, then THREE story bands whose container is thrown
   away so each photograph runs off both edges of the screen, stacked one under
   the other. The page then snaps shut into ONE contained mist band holding
   eight procedures four across, and everything below that is hairlines on
   near-white paper: three quotes, four answers, four tall portraits, not a
   card or a shadow among them. Teal is spent only on the buttons, the icon
   strokes and the open answer's marker. :nth-child appears exactly once, in
   the platform's own zebra selector, where every sibling is a section; no
   selector here picks a band by element type, and nothing here touches the
   header, the nav or anything inside them. */
body.t-helder.ws-body {
  --bg: #f6f7f7; --fg: #3d474c; --heading: #131a1e; --text: #46525a; --muted: #7f8b91;
  --hd-teal: #17817c; --hd-mist: #e4ecec; --hd-line: #d5dedf; --hd-field: #ffffff;
  --hero-a: rgba(9, 16, 20, .30); --hero-b: rgba(9, 16, 20, .52);
}

/* the platform's alternating wash off — the mist is spent deliberately, on the
   two contained bands that carry the most text */
body.t-helder.ws-body .ws-section:nth-child(even):not(.ws-cta):not(.ws-features):not(.ws-faq) { background: transparent; }
body.t-helder.ws-body .ws-section.ws-features, body.t-helder.ws-body .ws-section.ws-faq { background: var(--hd-mist); }

/* the shared sheet's hardcoded greys re-pointed at tokens, so night moves them */
body.t-helder .ws-sub, body.t-helder .ws-feature p, body.t-helder .ws-story-copy p, body.t-helder .ws-quote blockquote, body.t-helder .ws-member p, body.t-helder .ws-faq-item p { color: var(--text); }

/* a whole screen of photograph before a word of copy */
body.t-helder .ws-hero { min-height: 100vh; }

/* flat teal slabs — no border, no shadow, barely a radius */
body.t-helder.ws-body .btn.brand { background: var(--hd-teal); border-color: var(--hd-teal); color: #f6f7f7; border-radius: 2px; padding: 14px 30px; font-size: 14px; font-weight: 600; letter-spacing: .02em; box-shadow: none; }

/* THE MOVE — three banner bands, the picture off both edges, the copy inset */
body.t-helder .ws-story { padding: 0; }
body.t-helder .ws-story .ws-container { max-width: none; padding: 0; gap: 0; align-items: stretch; }
body.t-helder .ws-story-media img { border-radius: 0; height: 100%; aspect-ratio: 5 / 4; }
body.t-helder .ws-story-copy { display: grid; align-content: center; padding: clamp(48px, 6vw, 92px) clamp(24px, 5vw, 78px); }

/* the one dense band, and the four portraits below it — both four across, both
   filling every row (8 tiles, 4 doctors) */
body.t-helder .ws-features-grid, body.t-helder .ws-team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 34px; }
body.t-helder .ws-feature-icon { color: var(--hd-teal); margin-bottom: 16px; }

/* one seam instead of a card, everywhere below the photographs */
body.t-helder .ws-feature, body.t-helder .ws-quote, body.t-helder .ws-member { text-align: left; background: transparent; border: 0; border-top: 1px solid var(--hd-line); border-radius: 0; box-shadow: none; padding: 22px 0 0; }
body.t-helder .ws-faq-list, body.t-helder .ws-faq-item { border-color: var(--hd-line); }

/* three quotes in one row, no photographs */
body.t-helder .ws-testimonials-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }

/* tall portraits, and the role set small, wide and teal */
body.t-helder .ws-member-photo img { width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: 0; margin: 0 0 14px; }
body.t-helder .ws-member .muted.small { display: block; text-transform: uppercase; letter-spacing: .13em; font-size: 10.5px; color: var(--hd-teal); margin-top: 5px; }

/* the thin consultation strip: one line of slate across the page, button right */
body.t-helder.ws-body .ws-section.ws-cta { background: var(--heading); padding: 34px 0; }
body.t-helder .ws-cta-inner { max-width: 1120px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 44px; text-align: left; }
body.t-helder .ws-cta-inner h2, body.t-helder .ws-cta-inner p { grid-column: 1; margin: 0; font-size: clamp(16px, 1.8vw, 19px); line-height: 1.5; }
body.t-helder.ws-body .ws-cta .btn.brand { grid-column: 2; grid-row: 1 / span 2; background: #f6f7f7; border-color: #f6f7f7; color: #131a1e; }

/* the last band splits: the two sets of rooms left, the six fields right */
body.t-helder .ws-contact .ws-narrow { max-width: 1120px; display: grid; grid-template-columns: .95fr 1.05fr; gap: 14px 64px; align-items: start; }
body.t-helder .ws-contact .ws-h2 { grid-column: 1 / -1; text-align: left; }
body.t-helder .ws-contact .ws-sub { grid-column: 1; grid-row: 2; max-width: none; margin: 0; text-align: left; white-space: pre-line; color: var(--heading); font-size: 14.5px; line-height: 1.85; }
body.t-helder .ws-contact .ws-form { grid-column: 2; grid-row: 2; max-width: none; margin: 0; }
body.t-helder .ws-field input, body.t-helder .ws-field textarea, body.t-helder .ws-field select { background: var(--hd-field); border: 1px solid var(--hd-line); border-radius: 2px; color: var(--heading); }

/* every four-across band folds to two and then to one — each still fills its rows */
@media (max-width: 1040px) {
  body.t-helder .ws-features-grid, body.t-helder .ws-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-helder .ws-story .ws-container, body.t-helder .ws-contact .ws-narrow, body.t-helder .ws-cta-inner { grid-template-columns: 1fr; }
  body.t-helder .ws-contact .ws-sub, body.t-helder .ws-contact .ws-form { grid-column: 1; grid-row: auto; }
  body.t-helder.ws-body .ws-cta .btn.brand { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 16px; }
}
@media (max-width: 640px) {
  body.t-helder .ws-features-grid, body.t-helder .ws-team-grid, body.t-helder .ws-testimonials-grid { grid-template-columns: 1fr; }
}

/* night — the paper goes to wet slate, the mist bands sink below it instead of
   lifting, the strip drops to the darkest thing on the page and the teal is
   raised a couple of steps so it still carries the icons and the open answer */
html[data-theme="dark"] body.t-helder.ws-body {
  --bg: #0e1316; --fg: #b6c1c4; --heading: #eef4f4; --text: #a3b0b4; --muted: #77848a;
  --hd-teal: #4fb3ac; --hd-mist: #151d21; --hd-line: #273336; --hd-field: #151d21;
  --hero-a: rgba(4, 8, 10, .34); --hero-b: rgba(4, 8, 10, .60);
}
html[data-theme="dark"] body.t-helder.ws-body .ws-section.ws-cta { background: #05090b; }