/* ---------- Mangle — laundry & garment care (WEBSITE) ----------------------
   THE STRUCTURAL MOVE: a shallow bone call band is welded flush onto the bottom
   of a full-viewport three-slide stage — heading, phone line and button laid out
   on ONE centred row — so the page interrupts itself before it has said a word.
   Everything under that weld is contained and gapped and never bleeds again,
   except the four price tiles, which are butted edge to edge inside a single
   hairline as the only gapless element on the page. Brass is spent on the
   buttons and the price figures and nowhere else, so the photographs carry all
   the warmth. The two story blocks are told apart by their side classes
   (.ws-story-right / .ws-story-left), never :nth-of-type, which would match the
   hero. */
body.t-mangle.ws-body {
  --bg: #dde3e8; --fg: #414e5c; --heading: #141d29; --text: #414e5c; --muted: #77848f;
  --mg-tile: #f6f5f1; --mg-line: #c3ccd4; --mg-brass: #a8802f;
  --hero-a: rgba(14, 22, 32, .30); --hero-b: rgba(14, 22, 32, .58);
}
body.t-mangle { background: var(--bg); }

/* wordmark left, four links right, hairline under — and deliberately unfixed, so
   the stage keeps the whole first screen to itself */
body.t-mangle .ws-nav { position: static; background: var(--bg); backdrop-filter: none; border-bottom: 1px solid var(--mg-line); }
body.t-mangle .ws-brand { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .26em; }
body.t-mangle .ws-nav-links a { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .15em; color: var(--heading); opacity: .74; }

/* the only bleed on the page */
body.t-mangle .ws-hero { min-height: 100vh; }
body.t-mangle .ws-hero h1 { font-size: clamp(34px, 6.4vw, 74px); font-weight: 700; line-height: 1.02; letter-spacing: -.03em; }

/* one ground, contained rungs, nothing painted from here down */
body.t-mangle.ws-body .ws-section:not(.ws-cta) { padding: 78px 0; background: transparent; }
body.t-mangle.ws-body .btn.brand { background: var(--mg-brass); color: #fff8ec; border-radius: 2px; font-size: 13px; font-weight: 600; letter-spacing: .06em; padding: 14px 28px; }

/* THE WELD — a shallow bone band flush under the stage, its three parts on one row */
body.t-mangle.ws-body .ws-cta { background: var(--mg-tile); color: var(--heading); border-bottom: 1px solid var(--mg-line); padding: 26px 0; }
body.t-mangle .ws-cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 30px; max-width: none; }
body.t-mangle .ws-cta-inner h2 { color: var(--heading); font-size: clamp(19px, 2.2vw, 25px); margin: 0; }
body.t-mangle .ws-cta-inner p { color: var(--text); font-size: 15px; opacity: 1; margin: 0; }
body.t-mangle.ws-body .ws-hero-cta.btn.brand, body.t-mangle.ws-body .ws-cta .btn.brand { background: var(--mg-brass); color: #fff8ec; box-shadow: none; }

/* four bone tiles, gapped and ranged left */
body.t-mangle .ws-features-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
body.t-mangle .ws-feature { background: var(--mg-tile); color: var(--heading); text-align: left; padding: 26px 22px 28px; }

/* the ladder gets quieter: full image weight right, then half image weight left */
body.t-mangle .ws-story-media img { border-radius: 0; aspect-ratio: 4 / 3; }
body.t-mangle .ws-story-right .ws-story-grid { grid-template-columns: 4fr 6fr; gap: 76px; }
body.t-mangle .ws-story-left .ws-story-grid { grid-template-columns: 3fr 7fr; gap: 52px; }

/* four promises, text only, each standing on a hairline */
body.t-mangle .ws-col { border-top: 1px solid var(--heading); padding-top: 15px; }

/* THE ONLY GAPLESS THING — four price tiles butted flush inside one hairline */
body.t-mangle .ws-pricing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; max-width: none; border: 1px solid var(--mg-line); }
body.t-mangle .ws-plan { background: var(--mg-tile); border: 0; border-left: 1px solid var(--mg-line); border-radius: 0; text-align: left; padding: 30px 24px 28px; }
body.t-mangle .ws-plan:first-child { border-left: 0; }
body.t-mangle .ws-plan-amt { color: var(--mg-brass); font-size: 36px; letter-spacing: -.02em; }
body.t-mangle .ws-plan li::before { color: var(--heading); }

/* the depot address and hours are ordered out from inside the form so they land
   as two plain lines beneath the submit */
body.t-mangle .ws-field input, body.t-mangle .ws-field textarea, body.t-mangle .ws-field select { background: var(--mg-tile); border: 1px solid var(--mg-line); border-radius: 2px; color: var(--heading); }
body.t-mangle .ws-form-heading { order: 2; margin-top: 4px; }
body.t-mangle .ws-form-heading h3, body.t-mangle .ws-form-heading p { font-size: 14.5px; font-weight: 500; line-height: 1.6; color: var(--muted); margin: 0; }

@media (max-width: 900px) {
  body.t-mangle .ws-features-grid, body.t-mangle .ws-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-mangle .ws-story-right .ws-story-grid, body.t-mangle .ws-story-left .ws-story-grid { grid-template-columns: 1fr; gap: 26px; }
  body.t-mangle .ws-hero { min-height: 82vh; }
  body.t-mangle .ws-nav-links a { opacity: 1; }
}
@media (max-width: 560px) {
  body.t-mangle .ws-features-grid, body.t-mangle .ws-pricing-grid { grid-template-columns: 1fr; }
}

/* mangle by night — the laundered grey goes to wet slate, the bone tiles drop to
   a lit charcoal, and the brass warms half a stop so it still reads on the
   buttons and the four price figures */
html[data-theme="dark"] body.t-mangle.ws-body {
  --bg: #141a20; --fg: #97a3ae; --heading: #e7edf1; --text: #97a3ae; --muted: #6d7a85;
  --mg-tile: #1c242b; --mg-line: #2b353d; --mg-brass: #c99a44;
  --hero-a: rgba(6, 10, 14, .34); --hero-b: rgba(6, 10, 14, .66);
}
html[data-theme="dark"] body.t-mangle { background: var(--bg); }
html[data-theme="dark"] body.t-mangle .ws-nav { background: var(--bg); }
html[data-theme="dark"] body.t-mangle .ws-feature p, html[data-theme="dark"] body.t-mangle .ws-col p, html[data-theme="dark"] body.t-mangle .ws-story-copy p, html[data-theme="dark"] body.t-mangle .ws-plan li, html[data-theme="dark"] body.t-mangle .ws-sub, html[data-theme="dark"] body.t-mangle .ws-richtext p { color: var(--text); }
html[data-theme="dark"] body.t-mangle.ws-body .btn.brand, html[data-theme="dark"] body.t-mangle.ws-body .ws-hero-cta.btn.brand, html[data-theme="dark"] body.t-mangle.ws-body .ws-cta .btn.brand { color: #191207; }