/* ---- kwas (Kwas — Bridal & editorial makeup artist 178) ---------------------
   THE STRUCTURAL MOVE: the price list is a ruled ledger, not a grid of cards —
   four full-width rows, the service hard left and the rand figure hard right —
   and the film is locked to the identical column width immediately under it,
   so the whole middle of the page reads as one narrow editorial spine. Only
   the hero bleeds; nothing below it is ever painted a second colour. Brass is
   spent on three jobs and no others: the button, the price figures and the
   hairline between price rows. The bar is absolute rather than sticky so it
   rides the photograph and leaves with it — wordmark left, five links right.
   Every selector here is a plain class; no :first-of-type / :nth-of-type is
   used to reach a section. */
body.t-kwas.ws-body {
  --bg: #efe4dd; --fg: #4a3227; --heading: #2f1e16; --text: #4a3227; --muted: #8c7166;
  --kw-brass: #a67c45; --kw-rule: #dbc7bb;
  --sf-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --hero-a: rgba(42, 26, 18, .20); --hero-b: rgba(42, 26, 18, .52);
}
body.t-kwas { background: var(--bg); }

/* the bar rides the photograph and leaves with it — no band of its own */
body.t-kwas .ws-nav { position: absolute; top: 0; left: 0; right: 0; background: transparent; backdrop-filter: none; border-bottom: 0; color: #f9f1ec; }
body.t-kwas .ws-brand { color: #f9f1ec; font-family: var(--sf-serif); font-weight: 400; font-size: 22px; letter-spacing: .2em; text-transform: uppercase; }
body.t-kwas .ws-nav-links a, body.t-kwas .ws-nav-links a:hover, body.t-kwas .ws-nav-links a.on { color: #f9f1ec; opacity: .88; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; border-bottom: 0; }

/* the stage — one whole viewport, three photographs, copy on the centre axis */
body.t-kwas .ws-hero { min-height: 100vh; }
body.t-kwas .ws-hero h1 { font-family: var(--sf-serif); font-size: clamp(32px, 5.8vw, 68px); font-weight: 400; letter-spacing: -.01em; line-height: 1.1; text-shadow: none; }
body.t-kwas.ws-body .btn.brand, body.t-kwas.ws-body .ws-hero-cta.btn.brand:hover { background: var(--kw-brass); color: #fbf6f2; border: 0; border-radius: 0; box-shadow: none; text-transform: uppercase; letter-spacing: .18em; font-size: 11.5px; font-weight: 600; padding: 16px 34px; }

/* one plaster ground the whole way down — the zebra wash comes off */
body.t-kwas .ws-section { padding: 94px 0; }
body.t-kwas.ws-body .ws-section:nth-child(even):not(.ws-cta):not(.ws-shoplink) { background: transparent; }
body.t-kwas .ws-h2, body.t-kwas .ws-story-copy h2 { font-family: var(--sf-serif); color: var(--heading); font-size: clamp(24px, 3.1vw, 36px); font-weight: 400; letter-spacing: -.01em; line-height: 1.18; text-align: left; margin: 0 0 16px; }
body.t-kwas .ws-sub, body.t-kwas .ws-story-copy p { color: var(--text); font-size: 15.5px; line-height: 1.78; text-align: left; max-width: 58ch; margin: 0 0 28px; }

/* band two — 45/55, and the portrait stops well short of the page edge */
body.t-kwas .ws-story-grid { grid-template-columns: 45fr 55fr; gap: 56px; align-items: start; }
body.t-kwas .ws-story-media img { border-radius: 0; aspect-ratio: 3 / 4; }

/* THE LEDGER, and the film welded to the same column width underneath it */
body.t-kwas .ws-pricing .ws-container, body.t-kwas .ws-video .ws-container { max-width: 884px; }
body.t-kwas .ws-pricing-grid { display: block; max-width: none; margin: 0; border-top: 1px solid var(--kw-rule); }
body.t-kwas .ws-plan { display: grid; grid-template-columns: 1fr auto; column-gap: 30px; align-items: baseline; background: transparent; border: 0; border-bottom: 1px solid var(--kw-rule); border-radius: 0; padding: 24px 0 22px; text-align: left; }
body.t-kwas .ws-plan h3 { margin: 0; font-family: var(--sf-serif); font-size: 20px; font-weight: 400; color: var(--heading); }
body.t-kwas .ws-plan-price, body.t-kwas .ws-plan-amt { margin: 0; font-size: 20px; font-weight: 500; color: var(--kw-brass); font-variant-numeric: tabular-nums; letter-spacing: 0; }
body.t-kwas .ws-plan ul, body.t-kwas .ws-plan li { margin: 7px 0 0; padding: 0; max-width: 48ch; color: var(--muted); font-size: 14px; line-height: 1.65; }
body.t-kwas .ws-plan li::before, body.t-kwas .ws-plan .btn.brand, body.t-kwas .ws-quote blockquote::before { display: none; }

/* nothing on this page is boxed or raised — the film and the quotes go bare */
body.t-kwas .ws-video-frame, body.t-kwas .ws-quote { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
body.t-kwas .ws-testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 64px; }
body.t-kwas .ws-quote blockquote { font-family: var(--sf-serif); color: var(--heading); font-size: 17px; font-weight: 400; line-height: 1.6; margin: 0 0 12px; }
body.t-kwas .ws-video-caption, body.t-kwas .ws-quote figcaption { text-align: left; color: var(--muted); font-size: 13px; line-height: 1.6; }

/* the only input on the page — one narrow column, studio lines under the send */
body.t-kwas .ws-contact .ws-container { max-width: 564px; }
body.t-kwas .ws-field input, body.t-kwas .ws-field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--kw-rule); border-radius: 0; color: var(--heading); padding: 10px 2px; }
body.t-kwas .ws-form .ws-form-heading { order: 1; margin-top: 12px; padding-top: 20px; border-top: 1px solid var(--kw-rule); }
body.t-kwas .ws-form-heading h3, body.t-kwas .ws-form-heading p { margin: 0 0 4px; color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.7; }

@media (max-width: 760px) {
  body.t-kwas .ws-nav-links a, body.t-kwas .ws-nav-links a:hover, body.t-kwas .ws-nav-links a.on { color: var(--heading); opacity: 1; }
  body.t-kwas .ws-testimonials-grid { grid-template-columns: 1fr; gap: 34px; }
}

/* night — the same plaster inverted to a warm dark, brass lifted to carry on it */
html[data-theme="dark"] body.t-kwas.ws-body {
  --bg: #1a1310; --fg: #b7a49a; --heading: #f2e7e0; --text: #b7a49a; --muted: #8a7469;
  --kw-brass: #cfa163; --kw-rule: #33261f;
  --hero-a: rgba(10, 6, 4, .26); --hero-b: rgba(10, 6, 4, .58);
}
html[data-theme="dark"] body.t-kwas { background: var(--bg); }
