/* ============================== SMEUL ==============================
   THE STRUCTURAL MOVE: the page is CONTAINED and stays contained. Every
   row sits inside a narrow centred column with wide pale gutters either
   side of it, and exactly two blocks are ever let out — the full-viewport
   slider at the top and the booking band low down. Inside that column the
   showcase is stubbornly ONE-HANDED: copy always left, picture always
   right, and the four-tile strip welded to its underside with no gap, so
   the pair reads as one text-left unit instead of a zig-zag. Every section
   title is demoted to a small tracked label and the type weight is spent
   on the two wide blocks instead. Ember is spent exactly three times: the
   rand figure on a card, the hairline of the ghost button, and the rule
   under each label. */
body.t-smeul {
  background: #f7f5f1;
  color: #24211e;
  --sm-ember: #b8551f;
  --sm-ash: #e8e5df;
  --sm-soot: #1b1917;
  --bg-flat: #f7f5f1;
  --header-bg: #f7f5f1;
  --surface: #ffffff;
  --surface-2: #e8e5df;
  --line: #ddd9d2;
  --line-strong: #c6c1b8;
  --heading: #16140f;
  --text: #24211e;
  --muted: #6f6a63;
  --radius: 0;
  --shadow: none;
}

/* one flat bar the colour of the page — no panel, no blur, no rule under it.
   Type, colour and tracking only; nothing here moves or reorders a header item. */
body.t-smeul .sf-header, body.t-smeul .sf-head,
body.t-smeul .sf-footer, body.t-smeul .sf-foot, body.t-smeul .sf-cats {
  background: #f7f5f1; border-color: #ddd9d2; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-smeul .sf-name, body.t-smeul .sf-navlink { text-transform: uppercase; letter-spacing: 0.22em; font-size: 12px; font-weight: 600; }

/* THE COLUMN — narrower than the house default, so every contained row keeps a
   wide pale gutter on both sides and the two full-bleed blocks land harder */
body.t-smeul .container { max-width: 1000px; }

/* flat soot slabs with no edge on them: the accent is never spent on a button */
body.t-smeul .btn.brand { background: var(--sm-soot); border: 0; box-shadow: none; color: #f7f5f1; text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 700; padding: 16px 34px; }
body.t-smeul .btn.brand:hover { background: #3b3630; color: #ffffff; opacity: 1; }

/* WIDE, ONCE — three slides own the whole first screen, copy dead centre, and
   the sub set as the tracked eyebrow line the reference runs over its headline */
body.t-smeul .sc-hero { min-height: 100vh; padding: 96px 20px; }
body.t-smeul .sc-hero h1 { font-size: clamp(32px, 5.4vw, 62px); line-height: 1.08; letter-spacing: -0.02em; font-weight: 600; }
body.t-smeul .sc-hero p { text-transform: uppercase; letter-spacing: 0.3em; font-size: 11.5px; font-weight: 600; }

/* EMBER 1 of 3 — the hairline on the ghost button, and the only outline anywhere */
body.t-smeul .sc-hero .btn.brand.sc-hero-ghost { background: transparent; border: 1px solid var(--sm-ember); color: #ffffff; }
body.t-smeul .sc-hero .btn.brand.sc-hero-ghost:hover { background: var(--sm-ember); color: #ffffff; }

/* EVERY TITLE IS A LABEL — small, uppercase, widely tracked, with EMBER 2 of 3
   as the short rule beneath it. Size is deliberately withheld from every
   contained row so the two wide blocks are the only loud type on the page. */
body.t-smeul .sc-h2 { font-size: 11px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); margin-bottom: 26px; }
body.t-smeul .sc-h2::after { content: ''; display: block; width: 28px; height: 2px; background: var(--sm-ember); margin: 14px auto 0; }
body.t-smeul .sc-about-copy .sc-h2::after { margin-left: 0; }

/* THE QUIET BEAT — a tiny label and ONE sentence carrying a whole row with
   nothing beside them, straight off the floor of the slider */
body.t-smeul .sc-richtext { max-width: 700px; padding: 104px 20px 96px; }
body.t-smeul .sc-richtext p { color: var(--heading); font-size: clamp(19px, 2.6vw, 27px); line-height: 1.45; letter-spacing: -0.012em; }

/* THE ASH SLAB — the catalogue is the one row given the second ground, inset in
   the page so the pale gutters run either side of it. Cards go flat: flat-lays
   on white, title under the photo, EMBER 3 of 3 as the rand under the title. */
body.t-smeul .sc-products { background: var(--sm-ash); padding: 74px 48px 78px; }
body.t-smeul .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 34px; padding: 0; }
body.t-smeul .product-card, body.t-smeul .product-card:hover { background: transparent; border: 0; box-shadow: none; transform: none; }
body.t-smeul .product-card .ph { background: #ffffff; aspect-ratio: 4 / 5; }
body.t-smeul .product-card .meta { padding: 16px 0 0; }
body.t-smeul .product-card .p { color: var(--sm-ember); font-weight: 700; font-size: 15px; margin-top: 5px; }

/* THE ONE-HANDED SHOWCASE — copy left, picture right, and it never flips. The
   split loses its floor and the strip loses its ceiling, so the four tiles hang
   off the block above as the second half of the same unit. */
body.t-smeul .sc-about-split { grid-template-columns: 5fr 6fr; gap: 56px; padding: 112px 20px 34px; align-items: start; }
body.t-smeul .sc-about-media { order: 2; }
body.t-smeul .sc-about-media img { aspect-ratio: 3 / 4; }
body.t-smeul .sc-about-copy p { color: var(--text); font-size: 16px; line-height: 1.85; max-width: 44ch; }
body.t-smeul .sc-strip { padding: 0 20px 110px; }
body.t-smeul .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
body.t-smeul .sc-strip-img { border: 0; aspect-ratio: 4 / 3; background: var(--sm-ash); }
body.t-smeul .sc-strip-label { margin-top: 12px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); text-align: left; line-height: 1.6; }

/* WIDE, TWICE AND LAST — the booking band is the only other thing let out of
   the column, and the only full photograph after the slider */
body.t-smeul .sc-banner { min-height: 62vh; margin: 0 calc(50% - 50vw); padding: 118px 24px 122px; }
body.t-smeul .sc-banner h2 { font-size: clamp(26px, 3.6vw, 42px); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; }

/* the foot: soot edge to edge, centred, the form in one narrow stack */
body.t-smeul .sc-contact-band { background: var(--sm-soot); color: #e6e2da; padding: 96px 0 104px; }
body.t-smeul .sc-contact-band .sc-h2 { color: #a49b90; }
body.t-smeul .sc-contact-band .sc-contact-sub { color: #b3aca2; font-size: 15.5px; line-height: 1.8; }
body.t-smeul .sc-contact-band .sc-field input, body.t-smeul .sc-contact-band .sc-field textarea { background: #262320; border: 1px solid #35312c; color: #f1ece4; }
body.t-smeul .sc-contact-band .btn.brand { background: #f2ede5; color: var(--sm-soot); }

@media (max-width: 900px) {
  body.t-smeul .sc-hero { min-height: 86vh; }
  body.t-smeul .sc-products { padding: 56px 22px 60px; }
  body.t-smeul .product-grid, body.t-smeul .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-smeul .sc-about-split { padding: 64px 20px 30px; }
  body.t-smeul .sc-banner { min-height: 48vh; padding: 78px 20px 82px; }
}

/* NIGHT — the off-white drops to a cold ash-black and the second tier drops
   with it, so the catalogue slab stays a visible step off the page ground
   instead of collapsing into it. Ember lifts a shade to keep the rand, the
   ghost hairline and the label rules legible on the dark, and the soot slab
   inverts to bone since a near-black button on a near-black page is nothing. */
html[data-theme="dark"] body.t-smeul {
  background: #171614;
  color: #ded9d1;
  --sm-ember: #d4713a;
  --sm-ash: #201f1c;
  --sm-soot: #0f0e0d;
  --bg-flat: #171614;
  --header-bg: #171614;
  --surface: #201f1c;
  --surface-2: #201f1c;
  --line: #2c2a26;
  --line-strong: #3a3733;
  --heading: #f4f0e9;
  --text: #ded9d1;
  --muted: #8e887f;
}
html[data-theme="dark"] body.t-smeul .sf-header, html[data-theme="dark"] body.t-smeul .sf-head,
html[data-theme="dark"] body.t-smeul .sf-footer, html[data-theme="dark"] body.t-smeul .sf-foot,
html[data-theme="dark"] body.t-smeul .sf-cats { background: #171614; border-color: #2c2a26; }
html[data-theme="dark"] body.t-smeul .btn.brand { background: #efe9e0; color: #171614; }
html[data-theme="dark"] body.t-smeul .btn.brand:hover { background: #ffffff; color: #171614; }
html[data-theme="dark"] body.t-smeul .product-card .ph { background: #272522; }
html[data-theme="dark"] body.t-smeul .sc-contact-band { background: #0f0e0d; }
html[data-theme="dark"] body.t-smeul .sc-contact-band .sc-field input,
html[data-theme="dark"] body.t-smeul .sc-contact-band .sc-field textarea { background: #1c1b18; border-color: #2c2a26; }