/* ---- luifel (Luifel — Shade sails & awnings 174) --------------------------
   THE STRUCTURAL MOVE: THE WALL. Eight square photographs, four across in two
   rows, gapped in both directions and with the card taken off them completely —
   no border, no ground, no hover lift — so the caption drops to a quiet line of
   type UNDER the tile and the pictures carry the whole block. Everything above
   it runs the reference's order: a full-screen three-slide stage under a solid
   opaque bar with a hard 2px bottom edge, then the one band on the page with no
   photograph in it (the strip's images shrink to 96px icon chips, so it reads as
   four labelled service cards rather than a picture row), then the contained
   split about, then the wall, then a lone attributed quote, then the form.
   Teal shows up exactly three times and nowhere else — the two hairlines, the
   hero's ghost outline and the price line — so every other contrast on this
   page is a photograph, which is the reference's whole trick. The quote is
   targeted as .sc-richtext and the about as .sc-about-split: different classes
   on the same element type, so nothing here needs a positional selector. */
body.t-luifel {
  background: #f4f0e7;
  color: #3a3833;
  --lf-teal: #14666e;
  --lf-hair: rgba(20, 102, 110, 0.3);
  --radius: 0;
  --shadow: none;
  --header-bg: #f4f0e7;
  --surface: #fbf9f3;
  --surface-2: #eae4d7;
  --line: #ddd6c7;
  --line-strong: #c2baa8;
  --heading: #23211d;
  --text: #3a3833;
  --muted: #6f6a5f;
}

/* a bar with weight — opaque oatmeal, no blur, and a charcoal edge hard enough
   to cut against the photograph rather than dissolve into it */
body.t-luifel .sf-head, body.t-luifel .sf-header,
body.t-luifel .sf-foot, body.t-luifel .sf-footer, body.t-luifel .sf-cats {
  background: #f4f0e7; border-color: #cec5b2;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-luifel .sf-header { border-bottom: 2px solid #23211d; }
body.t-luifel .btn.brand { background: var(--lf-teal); border: 0; color: #f4f0e7; box-shadow: none; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 700; font-size: 11.5px; padding: 16px 30px; }

/* THE STAGE — three slides, the whole first screen, copy dead centre with a
   kicker printed above the heading where the reference put its eyebrow line,
   and the ghost outline standing in for its circular play button. */
body.t-luifel .sc-hero { min-height: calc(100vh - 66px); padding: 96px max(24px, calc(50vw - 480px)); }
body.t-luifel .sc-hero-inner::before { content: 'Canvas loft · Paarl · since 2009'; display: block; margin-bottom: 22px; font-size: 11px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); }
body.t-luifel .sc-hero h1 { font-weight: 800; font-size: clamp(36px, 6.4vw, 74px); line-height: 1.02; letter-spacing: -0.035em; margin-bottom: 18px; }
body.t-luifel .sc-hero p { font-size: 17.5px; line-height: 1.6; max-width: 560px; margin: 0 auto 32px; }
body.t-luifel .sc-hero .btn.brand.sc-hero-ghost { border-color: rgba(126, 199, 204, 0.9); color: #f2fbfb; }

/* THE PHOTOGRAPH-FREE BAND — the images are held to 96px so they read as marks,
   not pictures, and the label under each one does the work. The teal hairline
   under it is the first of only two on the page. */
body.t-luifel .sc-strip { padding: 78px 20px 82px; border-bottom: 1px solid var(--lf-hair); }
body.t-luifel .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; }
body.t-luifel .sc-strip-img { width: 96px; margin: 0 auto; border: 0; background: transparent; }
body.t-luifel .sc-strip-label { max-width: 220px; margin: 18px auto 0; font-size: 14.5px; font-weight: 600; line-height: 1.45; color: var(--heading); }

/* the about stays contained and two-column, one image only, heading above its
   own paragraph rather than beside the picture */
body.t-luifel .sc-about-split { max-width: 1040px; padding: 84px 20px 88px; gap: 60px; align-items: start; }
body.t-luifel .sc-about-media img { aspect-ratio: 4 / 5; object-fit: cover; }
body.t-luifel .sc-about-copy p { color: var(--text); font-size: 16.5px; line-height: 1.85; margin-top: 20px; }

/* THE WALL — four across, two rows, gapped not gapless, and the card stripped
   away so nothing sits between the shopper and the photograph. Price is the
   only coloured thing in a tile. */
body.t-luifel .sc-products { padding: 88px 20px 96px; }
body.t-luifel .sc-products .sc-h2 { font-size: clamp(20px, 2.6vw, 27px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 40px; }
body.t-luifel .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 26px; padding: 0; }
body.t-luifel .product-card, body.t-luifel .product-card:hover { background: transparent; border: 0; transform: none; box-shadow: none; }
body.t-luifel .product-card .meta { padding: 14px 0 0; }
body.t-luifel .product-card .p { color: var(--lf-teal); font-weight: 700; font-variant-numeric: tabular-nums; }

/* one customer, one line of type, the second hairline above it. The quote is
   the heading and the attribution is the body, so the two get different weight
   without a second element existing. */
body.t-luifel .sc-richtext { max-width: 840px; padding: 92px 20px 96px; border-top: 1px solid var(--lf-hair); }
body.t-luifel .sc-richtext .sc-h2 { font-size: clamp(22px, 3.1vw, 34px); font-weight: 400; line-height: 1.42; letter-spacing: -0.02em; color: var(--heading); margin-bottom: 24px; }
body.t-luifel .sc-richtext p { color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.9; }

/* the page ends on a form, not a button — a tonal band, never a coloured one */
body.t-luifel .sc-contact-band { background: var(--surface-2); border-top: 1px solid var(--line-strong); padding: 88px 0 96px; }

@media (max-width: 980px) {
  body.t-luifel .sc-hero { min-height: 82vh; }
  body.t-luifel .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-luifel .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* NIGHT — the loft after the lights go off. Oatmeal drops to unbleached dark
   canvas and the teal lifts two steps, because #14666e was chosen against a
   pale ground and goes to sludge on a dark one. The header's hard edge flips
   from charcoal to bone: a near-black rule on a near-black bar is no edge at
   all, and the edge is the whole point of this header. */
html[data-theme="dark"] body.t-luifel {
  background: #1a1917;
  color: #b4afa4;
  --lf-teal: #57adb2;
  --lf-hair: rgba(87, 173, 178, 0.34);
  --header-bg: #1a1917;
  --surface: #211f1d;
  --surface-2: #2a2724;
  --line: #343029;
  --line-strong: #4a453c;
  --heading: #f1eee6;
  --text: #b4afa4;
  --muted: #857f74;
}
html[data-theme="dark"] body.t-luifel .sf-head, html[data-theme="dark"] body.t-luifel .sf-header,
html[data-theme="dark"] body.t-luifel .sf-foot, html[data-theme="dark"] body.t-luifel .sf-footer,
html[data-theme="dark"] body.t-luifel .sf-cats { background: #1a1917; border-color: #343029; }
html[data-theme="dark"] body.t-luifel .sf-header { border-bottom-color: #f1eee6; }
html[data-theme="dark"] body.t-luifel .btn.brand { color: #0e1a1b; }