/* ============================================================
   perron — Karoo rail journeys 224 (WEBSITE)
   THE STRUCTURAL MOVE: a drop-shadowed four-across fact card straddles
   the floor of the full-viewport stage and breaks the section seam — the
   only block on the page that sits on top of another one. Under it the
   rhythm alternates strictly: contained fares → a GAPLESS full-bleed
   six-tile route row with the place names set on the glass → a
   photograph-free INVERTED indigo icon band as the deliberate rest → one
   shadowed plate of reviews → a full-bleed dusk band with a small bone
   card dropped into it. Brass is spent on the fares, the hairlines and
   the two asks; there is no second accent anywhere.
   ============================================================ */
body.t-perron.ws-body {
  --bg: #f7f4ee; --fg: #4a4740; --heading: #1b2440; --text: #4a4740; --muted: #6f6a63;
  --pr-ink: #1b2440; --pr-brass: #b8863b; --pr-line: #ded8cc; --pr-card: #ffffff; --pr-band: #efe9dd;
  --hero-a: rgba(14, 18, 33, .28); --hero-b: rgba(14, 18, 33, .62);
}
body.t-perron { background: var(--bg); }

/* wordmark and links kept to type only — the bar's order is the platform's */
body.t-perron .ws-brand, body.t-perron .ws-nav-links a { color: var(--heading); text-transform: uppercase; letter-spacing: .22em; font-size: 11.5px; font-weight: 700; }
body.t-perron .ws-nav-links a:hover, body.t-perron .ws-nav-links a.on { color: var(--pr-brass); opacity: 1; }

/* the stage — one whole viewport, the departure line hoisted above the title,
   and a deep floor so the fact card has clear photograph to land on */
body.t-perron .ws-hero { min-height: 100vh; }
body.t-perron .ws-hero-inner { display: flex; flex-direction: column; align-items: center; padding-bottom: 150px; }
body.t-perron .ws-hero-inner p { order: -1; max-width: none; margin: 0 0 20px; color: #e7e0d0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3em; }
body.t-perron .ws-hero h1 { font-size: clamp(38px, 6.4vw, 82px); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; text-shadow: none; max-width: 16ch; }

/* one bone ground the whole way down — the zebra wash never lands, and only the
   icon band, the dusk band and the booking strip are ever painted */
body.t-perron .ws-section { padding: 92px 0; }
body.t-perron.ws-body .ws-section:nth-child(even):not(.ws-cta):not(.ws-shoplink):not(.ws-features) { background: transparent; }
body.t-perron .ws-h2, body.t-perron .ws-title-h, body.t-perron .ws-story-copy h2 { color: var(--heading); font-size: clamp(26px, 3.4vw, 40px); font-weight: 700; letter-spacing: -.03em; }
body.t-perron .ws-sub, body.t-perron .ws-title-sub { color: var(--muted); font-size: 15px; line-height: 1.7; }
body.t-perron .ws-plan li, body.t-perron .ws-col p, body.t-perron .ws-cta-inner p { color: var(--text); font-size: 14.5px; line-height: 1.62; margin: 0; }
body.t-perron .ws-story-copy p, body.t-perron .ws-quote blockquote { color: var(--text); font-size: 16px; line-height: 1.82; }

/* brass 1 of 3 — every ask is a flat slab, never a border */
body.t-perron.ws-body .btn.brand, body.t-perron.ws-body .ws-hero-cta.btn.brand, body.t-perron.ws-body .ws-cta .btn.brand { background: var(--pr-brass); color: #fbf8f2; border: 0; border-radius: 0; box-shadow: none; text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; font-weight: 700; padding: 16px 32px; }

/* ★ THE SEAM-BREAKER — four facts on one shadowed plate, riding up over the
   stage's lower edge. The 1px grid gap IS the hairline between the fields. */
body.t-perron .ws-columns { padding: 0 0 96px; margin-top: -92px; position: relative; z-index: 2; }
body.t-perron .ws-columns .ws-container { max-width: 1240px; }
body.t-perron .ws-cols-4, body.t-perron .ws-testimonials-grid { gap: 1px; background: var(--pr-line); box-shadow: 0 24px 62px rgba(16, 21, 38, .24); }
body.t-perron .ws-col { background: var(--pr-card); padding: 32px 26px; }
body.t-perron .ws-col-h, body.t-perron .ws-plan h3 { color: var(--heading); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 700; margin: 0 0 12px; }

/* four fares on square plates ruled in the same hairline; brass 2 of 3 is the rand */
body.t-perron .ws-pricing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1180px; gap: 16px; }
body.t-perron .ws-plan { background: transparent; border: 1px solid var(--pr-line); border-radius: 0; padding: 30px 24px; text-align: left; }
body.t-perron .ws-plan-amt { color: var(--pr-brass); font-size: 30px; font-weight: 700; letter-spacing: -.02em; }

/* ★ THE ROUTE ROW — six near-square frames edge to edge, no container, no gutter,
   the place name set straight onto the photograph */
body.t-perron .ws-gallery, body.t-perron .ws-gallery .ws-container { max-width: none; padding: 0; }
body.t-perron .ws-gallery-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
body.t-perron .ws-gallery-item { position: relative; }
body.t-perron .ws-gallery-cap { position: absolute; inset: auto 0 0 0; padding: 58px 14px 16px; gap: 4px; background: linear-gradient(rgba(12, 15, 26, 0), rgba(12, 15, 26, .86)); }
body.t-perron .ws-gallery-cap strong { color: #fbf8f2; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; font-weight: 700; }
body.t-perron .ws-gallery-cap span { color: #d8bd8b; font-size: 10.5px; line-height: 1.4; }

/* ★ THE REST — eight tiles, indigo ground, brass line icons, not one photograph */
body.t-perron.ws-body .ws-features { background: var(--pr-ink); padding: 106px 0; }
body.t-perron .ws-feature h3 { color: #fbf8f2; font-size: 15px; font-weight: 700; }
body.t-perron .ws-features .ws-h2 { color: #fbf8f2; }
body.t-perron .ws-features .ws-sub, body.t-perron .ws-feature p { color: #9aa3bb; font-size: 13.5px; line-height: 1.65; }
body.t-perron .ws-features-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 46px 30px; }
body.t-perron .ws-feature-icon { color: var(--pr-brass); margin-bottom: 16px; }

/* reviews — one shadowed plate, the three parted by the same 1px hairline gap */
body.t-perron .ws-testimonials-grid { grid-template-columns: 1fr; max-width: 880px; margin: 0 auto; }
body.t-perron .ws-quote { background: var(--pr-card); border: 0; border-radius: 0; box-shadow: none; padding: 40px 46px; }

/* the one photographic band, with a small bone card dropped into its right side */
body.t-perron.ws-body .ws-cta { padding: 132px 0; background-color: var(--pr-ink); background-image: linear-gradient(rgba(12, 15, 26, .38), rgba(12, 15, 26, .60)), url("/media/samples/prn_band_dusk.jpg"); background-size: cover; background-position: center; }
body.t-perron .ws-cta-inner { max-width: 470px; margin: 0 0 0 auto; text-align: left; background: var(--bg); padding: 40px 38px; box-shadow: 0 22px 58px rgba(8, 10, 18, .44); }
body.t-perron .ws-cta-inner h2 { color: var(--heading); font-size: 23px; letter-spacing: -.02em; }

/* the story runs 45/55 with the dining car on the left; the journal is the only
   other photograph block and it is gapped, so the route row stays the one weld */
body.t-perron .ws-story-grid { grid-template-columns: 45fr 55fr; gap: 58px; }
body.t-perron .ws-story-media img, body.t-perron .ws-gallery-item img, body.t-perron .ws-photogrid-grid img { border-radius: 0; }
body.t-perron .ws-photogrid-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

/* the booking strip — tinted band, heading ranged left of the fields */
body.t-perron.ws-body .ws-contact { background: var(--pr-band); }
body.t-perron .ws-contact .ws-container { max-width: 1180px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 72px; align-items: start; }
body.t-perron .ws-contact .ws-h2, body.t-perron .ws-contact .ws-sub { text-align: left; margin: 0 0 14px; max-width: 30ch; }
body.t-perron .ws-contact .ws-form { grid-column: 2; grid-row: 1 / -1; max-width: none; margin: 0; }
body.t-perron .ws-field input, body.t-perron .ws-field select, body.t-perron .ws-field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--pr-line); border-radius: 0; color: var(--heading); padding: 11px 2px; }

@media (max-width: 980px) {
  body.t-perron .ws-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.t-perron .ws-features-grid, body.t-perron .ws-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-perron .ws-contact .ws-container { grid-template-columns: 1fr; }
  body.t-perron .ws-contact .ws-form { grid-column: 1; grid-row: auto; padding-top: 30px; }
}
@media (max-width: 720px) {
  body.t-perron .ws-columns { margin-top: 0; padding: 0 0 56px; }
  body.t-perron .ws-hero-inner { padding-bottom: 60px; }
  body.t-perron .ws-cta-inner { max-width: none; margin: 0; }
}

/* night — the same bone paper after dark, the brass one stop hotter */
html[data-theme="dark"] body.t-perron.ws-body {
  --bg: #121520; --fg: #a5a49e; --heading: #f0ece3; --text: #a5a49e; --muted: #7b7a74;
  --pr-ink: #090c15; --pr-brass: #d3a054; --pr-line: #2b2f3d; --pr-card: #1a1e2a; --pr-band: #181c26;
  --hero-a: rgba(5, 7, 13, .34); --hero-b: rgba(5, 7, 13, .68);
}
html[data-theme="dark"] body.t-perron { background: var(--bg); }
html[data-theme="dark"] body.t-perron .ws-cols-4, html[data-theme="dark"] body.t-perron .ws-testimonials-grid { box-shadow: 0 24px 62px rgba(0, 0, 0, .58); }
html[data-theme="dark"] body.t-perron.ws-body .ws-cta { background-image: linear-gradient(rgba(4, 6, 11, .54), rgba(4, 6, 11, .74)), url("/media/samples/prn_band_dusk.jpg"); }