/* The plasterer look: everything here is scoped to .site[data-look="plasterer"]. Appended after base.css (bun run --filter @platform/sections css).

   The stukadoor's world, drawn: a fresh wall in raking light with the
   trowel's arcs in it, raw grey gypsum, a wall drying from grey to white,
   strips of afplaktape, the black specie kuip flecked with plaster, and the
   galvanised corner bead (hoekprofiel) where two surfaces meet. Every
   surface is CSS gradients (the stylesheet may load nothing but fonts); the
   trowel arcs are inline SVG in the markup (looks/plasterer/surfaces.tsx) and
   the finish samples on the stalenbord come from finishes.ts. Orange only on
   buttons. */

.site[data-look="plasterer"] {
  /* Raw gypsum: a fine speckle (dots on co-prime grids, so no pattern shows) over soft clouds. */
  --pl-gypsum:
    radial-gradient(circle, rgb(40 36 30 / 0.08) 0 0.7px, transparent 1.1px) 0 0 / 13px 17px,
    radial-gradient(circle, rgb(255 255 255 / 0.22) 0 0.8px, transparent 1.2px) 2px 9px / 23px 13px,
    radial-gradient(circle, rgb(40 36 30 / 0.07) 0 1.1px, transparent 1.6px) 11px 5px / 29px 31px,
    radial-gradient(ellipse 40% 30% at 18% 24%, rgb(255 255 255 / 0.16), transparent 70%),
    radial-gradient(ellipse 34% 40% at 82% 70%, rgb(60 54 46 / 0.09), transparent 70%),
    radial-gradient(ellipse 30% 22% at 55% 40%, rgb(255 255 255 / 0.1), transparent 70%),
    radial-gradient(ellipse 26% 34% at 30% 88%, rgb(60 54 46 / 0.07), transparent 70%);
  /* A wall drying: darker wet patches left where the plaster is thickest. */
  --pl-drying:
    radial-gradient(ellipse 22% 30% at 12% 70%, rgb(120 116 108 / 0.22), transparent 70%),
    radial-gradient(ellipse 30% 22% at 46% 18%, rgb(120 116 108 / 0.16), transparent 70%),
    radial-gradient(ellipse 18% 26% at 78% 58%, rgb(120 116 108 / 0.2), transparent 70%),
    radial-gradient(ellipse 26% 18% at 64% 92%, rgb(120 116 108 / 0.14), transparent 70%),
    radial-gradient(ellipse 14% 20% at 92% 12%, rgb(120 116 108 / 0.14), transparent 70%);
  /* The kuip's rubber, flecked with dried plaster. */
  --pl-flecks:
    radial-gradient(ellipse 4px 2.5px, rgb(217 214 206 / 0.18), transparent) 40px 70px / 410px 290px,
    radial-gradient(ellipse 12px 1.4px, rgb(217 214 206 / 0.12), transparent) 10px 140px / 530px 370px,
    radial-gradient(ellipse 2.5px 2px, rgb(217 214 206 / 0.16), transparent) 220px 20px / 370px 430px;
  /* Cross-head screws at the four corners of a board (a background stack). */
  --pl-screw-head: radial-gradient(circle closest-side at 42% 40%, #e4e6e8, #a2a7ab 45%, #6a6f74 82%, #4f5459 92%, transparent 100%);
  --pl-screw-bar: linear-gradient(#34383c, #34383c);
  --pl-screws:
    var(--pl-screw-bar) left 12.5px top 16.2px / 9px 1.6px no-repeat, var(--pl-screw-bar) left 16.2px top 12.5px / 1.6px 9px no-repeat, var(--pl-screw-head) left 10px top 10px / 14px 14px no-repeat,
    var(--pl-screw-bar) right 12.5px top 16.2px / 9px 1.6px no-repeat, var(--pl-screw-bar) right 16.2px top 12.5px / 1.6px 9px no-repeat, var(--pl-screw-head) right 10px top 10px / 14px 14px no-repeat,
    var(--pl-screw-bar) left 12.5px bottom 16.2px / 9px 1.6px no-repeat, var(--pl-screw-bar) left 16.2px bottom 12.5px / 1.6px 9px no-repeat, var(--pl-screw-head) left 10px bottom 10px / 14px 14px no-repeat,
    var(--pl-screw-bar) right 12.5px bottom 16.2px / 9px 1.6px no-repeat, var(--pl-screw-bar) right 16.2px bottom 12.5px / 1.6px 9px no-repeat, var(--pl-screw-head) right 10px bottom 10px / 14px 14px no-repeat;
  /* Two screws per sample, top left and bottom right. */
  --pl-screws-2:
    var(--pl-screw-bar) left 9.5px top 13px / 8px 1.4px no-repeat, var(--pl-screw-bar) left 12.8px top 9.7px / 1.4px 8px no-repeat, var(--pl-screw-head) left 7px top 7px / 13px 13px no-repeat,
    var(--pl-screw-bar) right 9.5px bottom 13px / 8px 1.4px no-repeat, var(--pl-screw-bar) right 12.8px bottom 9.7px / 1.4px 8px no-repeat, var(--pl-screw-head) right 7px bottom 7px / 13px 13px no-repeat;
  --pl-wall: #f4f3ef;
  --pl-wall-low: #e8e6e0;
  --pl-gyp: #bdbab2;
  --pl-dry: #e1e2df;
  --pl-ink: #22201c;
  --pl-steel: #6f7478;
  --pl-tub: #1b1b1a;
  --pl-on-tub: #f2f0ea;
  --pl-tub-muted: #c4c1b9;
  /* Crêpe masking tape (afplaktape): the yellowish beige roll on every job. */
  --pl-tape: #ecdc98;
  /* Wet cement board behind the stalenbord: a deep cool slate, so the white board and the samples stand out. */
  --pl-slate: #2b353b;
  --pl-on-slate: #f2f1ec;
  --pl-slate-muted: #b9c3c8;
  --pl-slate-grain:
    radial-gradient(circle, rgb(255 255 255 / 0.07) 0 0.7px, transparent 1.1px) 0 0 / 13px 17px,
    radial-gradient(circle, rgb(0 0 0 / 0.22) 0 0.9px, transparent 1.3px) 5px 9px / 23px 19px,
    radial-gradient(ellipse 45% 35% at 20% 20%, rgb(255 255 255 / 0.06), transparent 70%),
    radial-gradient(ellipse 40% 45% at 85% 80%, rgb(0 0 0 / 0.18), transparent 70%);
  --pl-board: #ffffff;
  /* Raking light from the window on the left: a wall is lighter where the light comes from. */
  --pl-rake: linear-gradient(100deg, rgb(255 255 255 / 0.75), rgb(255 255 255 / 0) 42%, rgb(70 60 50 / 0.06) 100%);
  /* The corner bead: a galvanised nose with perforated wings, seen face-on. */
  --pl-bead-x: linear-gradient(90deg, #8a8f93, #dfe2e4 18%, #a3a8ac 34%, #f6f7f8 46%, #c9cdd0 50%, #f6f7f8 54%, #a3a8ac 66%, #dfe2e4 82%, #8a8f93);
  --pl-bead-holes: radial-gradient(circle, rgb(40 40 40 / 0.55) 0 2.2px, transparent 2.6px);
  --wrap: 84rem;
  --fs-base: 1.125rem;
  --fs-lead: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  --fs-h2: clamp(2.5rem, 1.5rem + 3.6vw, 5.2rem);
  --fs-h3: clamp(1.2rem, 1.1rem + 0.35vw, 1.4rem);
  background: var(--pl-wall);
  font-feature-settings: 'kern';
  hyphenate-limit-chars: 10 4 4;
}
@media (max-width: 40rem) { .site[data-look="plasterer"] { --fs-base: 1.0625rem; } }

.site[data-look="plasterer"] :is(h1, h2) { font-weight: 800; letter-spacing: -0.045em; line-height: 0.95; overflow-wrap: break-word; hyphens: manual; }
.site[data-look="plasterer"] h2 { margin-bottom: 0.4em; }
.site[data-look="plasterer"] :is(h3, .h3) { font-weight: 700; letter-spacing: -0.02em; }
.site[data-look="plasterer"] main > .s + .s { border-top: 0; }
.site[data-look="plasterer"] .lead { color: var(--pl-ink); max-width: 36rem; }

/* --- Buttons: mark orange, black letters, pressed in like a trowel. ------------ */
.site[data-look="plasterer"] .btn { min-height: 3.5rem; padding: 0.75rem 1.7rem; font-size: 1.1rem; font-weight: 750; letter-spacing: -0.01em; border: 0; box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.2); transition: transform 0.12s ease, box-shadow 0.12s ease; }
.site[data-look="plasterer"] .btn:hover { text-decoration: none; transform: translateY(2px); box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.2); }
.site[data-look="plasterer"] .btn:active { transform: translateY(4px); box-shadow: none; }
/* Phone numbers in Hanken's tabular figures: DM Mono's slashed zero turns "06 00" into "Ø6 ØØ". */
.site[data-look="plasterer"] .cta-detail { font-weight: 600; font-variant-numeric: tabular-nums; }
.site[data-look="plasterer"] .cta-alt { font-size: 1.05rem; text-decoration-thickness: 2px; text-decoration-color: var(--pl-steel); }
.site[data-look="plasterer"] .cta-alt:hover { text-decoration-color: currentColor; }

/* The corner bead, a vertical strip where one surface meets the next. */
.site[data-look="plasterer"] .pl-bead { position: absolute; z-index: 2; top: 0; bottom: 0; left: -9px; width: 18px; background: var(--pl-bead-holes) 0 0 / 6px 9px repeat-y, var(--pl-bead-holes) 12px 4.5px / 6px 9px repeat-y, var(--pl-bead-x); box-shadow: 2px 0 6px rgb(30 25 20 / 0.25); }

/* --- Header: the name on the wall. ------------------------------------------------ */
.site[data-look="plasterer"] .site-header { background: var(--pl-wall); border-bottom: 1px solid #dad7cf; }
.site[data-look="plasterer"] .brand { font-weight: 800; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); letter-spacing: -0.035em; }
.site[data-look="plasterer"] .site-header .btn { min-height: 2.9rem; font-size: 1rem; padding-inline: 1.2rem; }

/* --- Hero: the wall in raking light, the photo around the corner. -------------- */
.site[data-look="plasterer"] .pl-hero { display: grid; padding: 0; min-height: clamp(36rem, calc(100svh - 4.6rem), 58rem); background: var(--pl-wall); }
.site[data-look="plasterer"] .pl-hero-wall { display: flex; align-items: center; min-width: 0; padding: clamp(2rem, 6vw, 5.5rem) var(--gap) clamp(2.25rem, 5vw, 4.5rem); position: relative; isolation: isolate; background: var(--pl-rake), var(--pl-wall); }
.site[data-look="plasterer"] .pl-arcs { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.site[data-look="plasterer"] .pl-hero-text { container-type: inline-size; width: 100%; max-width: 54rem; }
.site[data-look="plasterer"] .pl-hero h1, .site[data-look="plasterer"] .pl-hero h2 {
  /* Big, but never wider than the longest word allows (--hl, set in the markup). */
  font-size: min(7.2rem, 14cqi, calc(100cqi / (var(--hl, 10) * 0.6)));
  line-height: 0.9; letter-spacing: -0.05em; max-width: none; margin: 0 0 0.3em; text-wrap: balance;
}
.site[data-look="plasterer"] .pl-hero .lead { font-size: var(--fs-lead); max-width: 34rem; margin: 0; }
.site[data-look="plasterer"] .pl-hero .actions { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.site[data-look="plasterer"] .pl-hero-photo { position: relative; min-height: 16rem; background: var(--pl-gyp); }
.site[data-look="plasterer"] .pl-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* No photo: one big sample plate of the first finish, screwed to the wall. */
.site[data-look="plasterer"] .pl-hero-plate { display: grid; place-items: center; padding: clamp(1.5rem, 4vw, 4rem) var(--gap); background: var(--pl-rake), var(--pl-wall-low); }
.site[data-look="plasterer"] .pl-plate { position: relative; display: block; width: min(100%, 34rem); aspect-ratio: 1; background-color: #ebe8e1; background-size: cover; box-shadow: 0 0 0 1px rgb(34 32 28 / 0.14), 0 30px 50px -30px rgb(40 34 26 / 0.6); }
.site[data-look="plasterer"] .pl-plate::after { content: ''; position: absolute; inset: 0; background: var(--pl-screws); }
.site[data-look="plasterer"] .pl-plate-label { position: absolute; left: 1.4rem; bottom: 2.6rem; padding: 0.3rem 0.8rem; background: var(--pl-tape); font-family: var(--font-figures); font-size: 1rem; rotate: -1.5deg; box-shadow: 0 1px 2px rgb(0 0 0 / 0.15); }
@media (min-width: 52rem) { .site[data-look="plasterer"] .pl-has-plate.pl-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
@media (max-width: 51.99rem) {
  .site[data-look="plasterer"] .pl-hero-plate { order: -1; padding: 1.25rem var(--gap); }
  .site[data-look="plasterer"] .pl-plate { width: auto; height: clamp(10rem, 26svh, 16rem); }
}
@media (min-width: 52rem) {
  .site[data-look="plasterer"] .pl-has-photo.pl-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .site[data-look="plasterer"] .pl-hero-wall { padding-left: max(var(--gap), (100vw - var(--wrap)) / 2); padding-right: clamp(2rem, 4vw, 4rem); }
  .site[data-look="plasterer"] .pl-no-photo .pl-hero-text { max-width: 72rem; }
}
@media (max-width: 51.99rem) {
  .site[data-look="plasterer"] .pl-hero { min-height: 0; }
  .site[data-look="plasterer"] .pl-hero-photo { order: -1; height: clamp(12rem, 30svh, 22rem); min-height: 0; }
  .site[data-look="plasterer"] .pl-hero-photo .pl-bead { inset: auto 0 -9px 0; width: auto; height: 18px; background: var(--pl-bead-holes) 0 0 / 9px 6px repeat-x, var(--pl-bead-holes) 4.5px 12px / 9px 6px repeat-x, linear-gradient(180deg, #8a8f93, #dfe2e4 18%, #a3a8ac 34%, #f6f7f8 46%, #c9cdd0 50%, #f6f7f8 54%, #a3a8ac 66%, #dfe2e4 82%, #8a8f93); }
  .site[data-look="plasterer"] .pl-hero h1, .site[data-look="plasterer"] .pl-hero h2 { font-size: min(5.2rem, 16cqi, calc(100cqi / (var(--hl, 10) * 0.6))); }
  .site[data-look="plasterer"] .pl-hero-wall { padding-top: 2rem; }
}

/* The lowest price per m², with a small drawn sample of that finish. */
.site[data-look="plasterer"] .pl-from { display: inline-flex; align-items: center; gap: 0.85rem; margin-top: clamp(1.75rem, 4vw, 3rem); padding: 0.45rem 1.1rem 0.45rem 0.45rem; background: var(--pl-board); color: var(--pl-ink); text-decoration: none; box-shadow: 0 0 0 1px rgb(34 32 28 / 0.12), 0 10px 24px -18px rgb(34 32 28 / 0.6); }
.site[data-look="plasterer"] .pl-from-sample { flex: none; width: 3.25rem; height: 3.25rem; background-size: cover; background-color: #ebe8e1; box-shadow: inset 0 0 0 1px rgb(34 32 28 / 0.12); }
.site[data-look="plasterer"] .pl-from-text { font-family: var(--font-figures); font-size: 0.95rem; line-height: 1.2; }
.site[data-look="plasterer"] .pl-from-amount { font-family: var(--font-body); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.035em; }
.site[data-look="plasterer"] .pl-from:hover .pl-from-what { text-decoration: underline; text-underline-offset: 0.2em; }

/* --- Services: the stalenbord, screwed to raw grey gypsum. ------------------------ */
.site[data-look="plasterer"] .pl-services { --text: var(--pl-on-slate); --muted: var(--pl-slate-muted); padding-block: clamp(4rem, 9vw, 8.5rem); background: var(--pl-slate-grain), var(--pl-slate); color: var(--pl-on-slate); }
.site[data-look="plasterer"] .pl-services .sheet-head { max-width: 62rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.site[data-look="plasterer"] .pl-services .sheet-head .lead { color: var(--pl-on-slate); }
.site[data-look="plasterer"] .pl-board { --text: var(--on-board); --muted: var(--board-muted); position: relative; background: var(--pl-board); color: var(--on-board); padding: clamp(1.25rem, 3.5vw, 3.25rem); padding-top: clamp(1rem, 2.5vw, 1.75rem);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.1), 0 30px 50px -30px rgb(40 34 26 / 0.55);
  background: var(--pl-screws), var(--pl-board); }
.site[data-look="plasterer"] .pl-board-print { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1.5rem; margin: 0 1.5rem clamp(1.5rem, 3vw, 2.5rem); padding-bottom: 0.9rem; border-bottom: 1px solid #e3e0d9; font-family: var(--font-figures); font-size: 0.85rem; letter-spacing: 0.02em; color: var(--board-muted); }
.site[data-look="plasterer"] .pl-board-phone { font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.site[data-look="plasterer"] .pl-board .sample-board { background: none; border: 0; margin: 0; padding: 0; }
.site[data-look="plasterer"] .pl-board .service-list { margin: 0; border: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 2.6vw, 2.5rem); }
@media (min-width: 64rem) {
  .site[data-look="plasterer"] .pl-board[data-size="some"] .service-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site[data-look="plasterer"] .pl-board[data-size="many"] .service-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site[data-look="plasterer"] .pl-board[data-size="few"] .service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 52rem; }
}
@media (max-width: 30rem) {
  .site[data-look="plasterer"] .pl-board { padding-inline: 0.9rem; padding-bottom: 2.75rem; }
  .site[data-look="plasterer"] .pl-board-print { margin-inline: 1.6rem; }
  .site[data-look="plasterer"] .pl-board .price-unit { display: block; }
  .site[data-look="plasterer"] .pl-board .price-amount { font-size: 1.6rem; }
  .site[data-look="plasterer"] .pl-board .service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 0.9rem; }
  .site[data-look="plasterer"] .pl-board[data-size="few"] .service-list { grid-template-columns: minmax(0, 1fr); }
}
.site[data-look="plasterer"] .service { display: flex; flex-direction: column; border: 0; padding: 0; }
/* Each sample a drawn finish on a square plate, two screws, its name on tape. */
.site[data-look="plasterer"] .sample { display: block; position: relative; aspect-ratio: 1; background-color: #ebe8e1; background-size: cover; background-position: center; overflow: hidden; box-shadow: 0 0 0 1px rgb(34 32 28 / 0.14), 0 3px 0 -1px rgb(34 32 28 / 0.12); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.site[data-look="plasterer"] .sample::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--pl-screws-2); }
/* The light rakes across the sample when you look closer. */
.site[data-look="plasterer"] .sample::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 0.4) 48%, transparent 66%) 120% 0 / 250% 100% no-repeat; opacity: 0; transition: opacity 0.3s ease, background-position 0.9s ease; }
.site[data-look="plasterer"] .service:hover .sample { transform: translateY(-4px); box-shadow: 0 0 0 1px rgb(34 32 28 / 0.14), 0 14px 22px -14px rgb(34 32 28 / 0.55); }
.site[data-look="plasterer"] .service:hover .sample::before { opacity: 1; background-position: -20% 0; }
.site[data-look="plasterer"] .sample-label { position: absolute; left: 0.7rem; bottom: 0.8rem; max-width: calc(100% - 1.4rem); padding: 0.2rem 0.55rem; background: var(--pl-tape); color: var(--on-board); font-family: var(--font-figures); font-size: 0.78rem; letter-spacing: 0.01em; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; rotate: -1.2deg; box-shadow: 0 1px 1px rgb(0 0 0 / 0.12);
  clip-path: polygon(0 6%, 4% 0, 9% 7%, 15% 1%, 100% 0, 98% 30%, 100% 62%, 97% 100%, 6% 100%, 2% 94%, 0 70%); }
.site[data-look="plasterer"] .service-body { padding-top: 1rem; }
.site[data-look="plasterer"] .service .price-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.site[data-look="plasterer"] .service :is(h2, h3) { margin: 0; font-size: var(--fs-h3); line-height: 1.15; hyphens: auto; text-wrap: pretty; }
.site[data-look="plasterer"] .price { margin: 0; font-family: var(--font-figures); font-weight: 400; font-size: 0.92rem; letter-spacing: -0.02em; color: var(--board-muted); white-space: normal; font-variant-numeric: tabular-nums; }
.site[data-look="plasterer"] .price-amount { font-family: var(--font-body); font-weight: 700; font-size: 1.95rem; letter-spacing: -0.035em; color: var(--on-board); line-height: 1.1; font-variant-numeric: tabular-nums; }
.site[data-look="plasterer"] .price:not(:has(.price-amount)) { font-family: var(--font-body); font-weight: 700; font-size: 1.95rem; letter-spacing: -0.035em; color: var(--on-board); }
.site[data-look="plasterer"] .service-note { margin: 0.45rem 0 0; font-size: 0.98rem; line-height: 1.5; color: var(--board-muted); max-width: 30ch; }
.site[data-look="plasterer"] .pl-services .sheet-foot { margin: 1.5rem 0 0; font-family: var(--font-figures); font-size: 0.85rem; color: var(--pl-slate-muted); }

/* --- About: the photo off the page edge, the text on the wall. ------------------- */
.site[data-look="plasterer"] .pl-about { display: grid; padding: 0; max-width: none; background: var(--pl-rake), var(--pl-wall); }
.site[data-look="plasterer"] .pl-about-photo { position: relative; min-height: 22rem; background: var(--pl-gyp); }
.site[data-look="plasterer"] .pl-about-photo .about-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.site[data-look="plasterer"] .pl-about-photo .pl-bead { left: auto; right: -9px; }
.site[data-look="plasterer"] .pl-about-text { align-self: center; padding: clamp(3.5rem, 8vw, 7.5rem) var(--gap); max-width: 46rem; }
.site[data-look="plasterer"] .pl-since { margin: -0.2rem 0 1.5rem; font-family: var(--font-figures); font-size: 1rem; color: var(--muted); }
.site[data-look="plasterer"] .pl-since span { font-family: var(--font-body); font-weight: 800; font-size: 1.7rem; color: var(--pl-ink); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.site[data-look="plasterer"] .pl-prose p { font-size: clamp(1.1rem, 1.02rem + 0.3vw, 1.3rem); line-height: 1.55; max-width: 36rem; }
@media (min-width: 52rem) {
  .site[data-look="plasterer"] .pl-about.pl-has-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(34rem, 72vh, 50rem); }
  .site[data-look="plasterer"] .about-image_right .pl-about-photo { order: 2; }
  .site[data-look="plasterer"] .about-image_right .pl-about-photo .pl-bead { right: auto; left: -9px; }
  .site[data-look="plasterer"] .pl-about-text { padding-inline: clamp(2.5rem, 6vw, 6rem) var(--gap); }
  .site[data-look="plasterer"] .pl-no-photo .pl-about-text { max-width: var(--wrap); width: min(100% - 2 * var(--gap), var(--wrap)); margin-inline: auto; padding-inline: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 4rem; }
}
@media (max-width: 51.99rem) {
  .site[data-look="plasterer"] .pl-about-photo { height: clamp(16rem, 70vw, 26rem); min-height: 0; }
  .site[data-look="plasterer"] .pl-about-photo .pl-bead { display: none; }
}

/* --- Reviews: big set quotes on a wall that is drying, grey to white. ------------ */
.site[data-look="plasterer"] .pl-reviews { padding-block: clamp(4.5rem, 10vw, 9rem); background: var(--pl-drying), var(--pl-dry); color: var(--pl-ink); }
.site[data-look="plasterer"] .pl-reviews h2 { max-width: 14ch; }
.site[data-look="plasterer"] .pl-reviews .quote-list { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 5vw, 5rem); margin-top: clamp(1.5rem, 4vw, 3rem); }
.site[data-look="plasterer"] .pl-reviews figure { margin: 0; }
.site[data-look="plasterer"] .pl-reviews blockquote { margin: 0; }
.site[data-look="plasterer"] .pl-reviews blockquote p { margin: 0; font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2.1rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.025em; text-wrap: pretty; }
.site[data-look="plasterer"] .pl-reviews li:first-child blockquote p { font-size: clamp(1.9rem, 1.2rem + 2.8vw, 4rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.035em; max-width: 24ch; }
.site[data-look="plasterer"] .pl-q { margin-left: -0.42em; }
.site[data-look="plasterer"] .pl-reviews figcaption { margin-top: 1rem; font-family: var(--font-figures); font-size: 0.95rem; }
.site[data-look="plasterer"] .pl-reviews figcaption::before { content: '— '; }
@media (min-width: 52rem) {
  .site[data-look="plasterer"] .pl-reviews .quote-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site[data-look="plasterer"] .pl-reviews:not([data-count="2"]) li:first-child { grid-column: 1 / -1; }
  .site[data-look="plasterer"] .pl-reviews[data-count="2"] li:first-child blockquote p { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.8rem); }
  .site[data-look="plasterer"] .pl-reviews[data-count="2"] li:nth-child(2) { padding-top: 5rem; }
  .site[data-look="plasterer"] .pl-reviews[data-count="3"] li:nth-child(3) { padding-top: 3rem; }
}

/* --- FAQ: the questions down a smooth wall, a corner bead between them. --------- */
.site[data-look="plasterer"] .pl-on-wall { position: relative; isolation: isolate; background: var(--pl-wall); }
.site[data-look="plasterer"] .s-faq { padding-block: clamp(4rem, 9vw, 8rem); background: var(--pl-rake); }
.site[data-look="plasterer"] .s-faq .faq-items { max-width: none; margin-top: 0; }
.site[data-look="plasterer"] .faq-items :is(details, dl > div) { position: relative; border: 0; padding-top: 0.5rem; }
.site[data-look="plasterer"] .faq-items :is(details, dl > div)::before { content: ''; display: block; height: 7px; margin-bottom: 0.4rem; background: radial-gradient(circle, rgb(40 40 40 / 0.45) 0 1.3px, transparent 1.7px) 0 0 / 7px 7px repeat-x, linear-gradient(180deg, #9aa0a4, #e7e9eb 30%, #b4b9bc 48%, #f2f3f4 52%, #b4b9bc 70%, #9aa0a4); opacity: 0.7; }
.site[data-look="plasterer"] .faq-items details:first-child { border-top: 0; }
.site[data-look="plasterer"] .faq-items summary { min-height: 4.5rem; font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.6rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; padding-block: 0.6rem; }
.site[data-look="plasterer"] .faq-items summary::after { content: ''; width: 1.6rem; height: 1.6rem; background: linear-gradient(currentColor, currentColor) center / 100% 3px no-repeat, linear-gradient(currentColor, currentColor) center / 3px 100% no-repeat; transition: rotate 0.2s ease; }
.site[data-look="plasterer"] .faq-items details[open] summary::after { content: ''; rotate: 45deg; }
.site[data-look="plasterer"] .faq-items summary:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.site[data-look="plasterer"] .faq-items details p, .site[data-look="plasterer"] .faq-items dd { color: var(--pl-ink); font-size: 1.1rem; max-width: 40rem; margin-bottom: 1.6rem; }
.site[data-look="plasterer"] .faq-items dt { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.6rem); letter-spacing: -0.02em; }
@media (min-width: 60rem) {
  .site[data-look="plasterer"] .s-faq .wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 0 clamp(3rem, 6vw, 6rem); align-items: start; }
  .site[data-look="plasterer"] .s-faq h2 { position: sticky; top: 6.5rem; }
}

/* --- Werkgebied: each place on a strip of afplaktape, on bare plasterboard
       (gipsplaat, 60 cm wide, its joints filled, rows of screws). ------------- */
.site[data-look="plasterer"] .pl-area { padding-block: clamp(4rem, 8vw, 7rem); color: var(--pl-ink);
  background:
    radial-gradient(ellipse 7px 5px, rgb(255 255 255 / 0.75) 0 3px, transparent 5px) calc(50% - 15rem) 1.4rem / 30rem 3rem,
    linear-gradient(90deg, transparent calc(50% - 4rem), rgb(255 255 255 / 0.32) calc(50% - 1.2rem), rgb(255 255 255 / 0.32) calc(50% + 1.2rem), transparent calc(50% + 4rem)) calc(50% - 15rem) 0 / 30rem 100%,
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgb(70 72 74 / 0.18) 0, rgb(70 72 74 / 0.18) calc(50% + 0.5px), transparent 0) calc(50% - 15rem) 0 / 30rem 100%,
    var(--pl-gypsum), #d6d5d0; }
.site[data-look="plasterer"] .pl-area .area-list li::after, .site[data-look="plasterer"] .pl-area .area-list li::before { content: none; }
.site[data-look="plasterer"] .pl-area-inner { display: grid; gap: 2rem clamp(3rem, 6vw, 6rem); align-items: start; }
@media (min-width: 60rem) { .site[data-look="plasterer"] .pl-area-inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.site[data-look="plasterer"] .pl-area .area-body { max-width: 30rem; font-size: 1.1rem; }
.site[data-look="plasterer"] .pl-tapes { display: flex; flex-wrap: wrap; gap: 1.1rem 0.9rem; padding-top: 0.5rem; }
.site[data-look="plasterer"] .pl-tapes li { position: relative; padding: 0.55rem 1.4rem 0.6rem; font-weight: 700; font-size: clamp(1.15rem, 1rem + 0.75vw, 1.75rem); letter-spacing: -0.02em; line-height: 1.15; color: var(--pl-ink);
  background: repeating-linear-gradient(90deg, rgb(0 0 0 / 0.025) 0 1px, transparent 1px 3px), linear-gradient(180deg, rgb(255 255 255 / 0.35), transparent 40%, rgb(0 0 0 / 0.04)), var(--pl-tape);
  box-shadow: 0 1px 2px rgb(40 30 20 / 0.18);
  clip-path: polygon(0 4%, 2% 0, 4% 6%, 6% 1%, 8% 5%, 100% 0, 98.5% 14%, 100% 30%, 98% 48%, 100% 66%, 98.5% 84%, 100% 100%, 7% 100%, 5% 95%, 3% 100%, 1% 96%, 0 100%, 1.5% 80%, 0 60%, 1.5% 40%, 0 20%); }
.site[data-look="plasterer"] .pl-tapes li:nth-child(3n + 1) { rotate: -0.8deg; }
.site[data-look="plasterer"] .pl-tapes li:nth-child(3n + 2) { rotate: 0.6deg; translate: 0 3px; }
.site[data-look="plasterer"] .pl-tapes li:nth-child(5n) { rotate: -0.3deg; translate: 0 -2px; }

/* --- Hours: a white board screwed to the wall, the days in DM Mono. -------------- */
/* A wall just trowelled: the plaster still wet and dark grey, a sheen where the spaan went. Ink only (6.5:1). */
.site[data-look="plasterer"] .pl-hours .s-hours { --muted: var(--pl-ink); --border: rgb(34 32 28 / 0.25); padding-block: clamp(4rem, 8vw, 7rem); color: var(--pl-ink);
  background: var(--pl-rake), var(--pl-wall); }
.site[data-look="plasterer"] .s-hours .hours-call { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem); font-weight: 800; letter-spacing: -0.035em; }
.site[data-look="plasterer"] .s-hours .hours-call a { text-decoration-thickness: 3px; text-underline-offset: 0.18em; }
.site[data-look="plasterer"] .s-hours .hours-place { color: var(--pl-ink); }
.site[data-look="plasterer"] .hours-card { --muted: var(--board-muted); --border: #e3e0d9; max-width: 32rem; padding: 1.75rem 2.25rem; background: var(--pl-screws), var(--pl-board); box-shadow: 0 1px 0 rgb(0 0 0 / 0.1), 0 24px 40px -30px rgb(40 34 26 / 0.6); }
.site[data-look="plasterer"] .hours-table :is(th, td) { padding-block: 0.8rem; border-bottom-color: #e3e0d9; font-size: 1.05rem; }
.site[data-look="plasterer"] .hours-table tr:last-child :is(th, td) { border-bottom: 0; }
.site[data-look="plasterer"] .hours-table td { font-family: var(--font-body); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 1.1rem; letter-spacing: 0; }
.site[data-look="plasterer"] .hours-table .is-closed td { font-family: var(--font-figures); font-weight: 400; }
.site[data-look="plasterer"] .s-hours .hours-inner { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) { .site[data-look="plasterer"] .s-hours .hours-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 30rem) {
  .site[data-look="plasterer"] .hours-card { padding: 1.25rem 1.4rem; }
  .site[data-look="plasterer"] .hours-table th { white-space: normal; }
  .site[data-look="plasterer"] .hours-table th::after { display: block; width: fit-content; margin: 0.3rem 0 0; }
}
.site[data-look="plasterer"] .hours-table th::after { background: var(--pl-ink); color: var(--pl-wall); font-family: var(--font-figures); font-weight: 400; font-size: 0.75rem; border-radius: 0; }

/* --- Call to action: the specie kuip, black rubber flecked with plaster, and the
       round tub of grey plaster beside the words. ---------------------------- */
.site[data-look="plasterer"] .pl-cta { --text: var(--pl-on-tub); --muted: var(--pl-tub-muted); position: relative; overflow: clip; padding-block: clamp(4.5rem, 10vw, 9rem); background: var(--pl-flecks), var(--pl-tub); color: var(--pl-on-tub); }
/* The kuip from above: a thick rim, the black inner wall sloping down, the
   grey plaster in it smoothed by one pull of the trowel, and the stucspaan
   laid across the rim. */
.site[data-look="plasterer"] .pl-tub { --d: clamp(22rem, 42vw, 40rem); position: absolute; z-index: 0; width: var(--d); aspect-ratio: 1; right: calc(-0.2 * var(--d)); top: 50%; translate: 0 -50%; pointer-events: none; }
.site[data-look="plasterer"] .pl-tub::before, .site[data-look="plasterer"] .pl-tub::after { content: ''; position: absolute; border-radius: 50%; }
.site[data-look="plasterer"] .pl-tub::before { inset: 0; background: radial-gradient(circle, transparent 0 66%, #0d0d0c 66.5%, #262624 75%, #1a1a19 86%, #3a3a37 87%, #2c2c2a 92%, #444441 99%, transparent 100%); }
.site[data-look="plasterer"] .pl-tub::after { inset: 17%; background: linear-gradient(118deg, transparent 38%, rgb(255 255 255 / 0.2) 44%, rgb(255 255 255 / 0.08) 56%, transparent 62%), radial-gradient(circle at 40% 35%, rgb(255 255 255 / 0.16), transparent 60%), var(--pl-gypsum), #9e9a91; box-shadow: inset 0 10px 24px rgb(0 0 0 / 0.55); }
.site[data-look="plasterer"] .pl-trowel { position: absolute; z-index: 1; width: 56%; left: -6%; top: 22%; rotate: -28deg; filter: drop-shadow(10px 16px 10px rgb(0 0 0 / 0.55)); }
.site[data-look="plasterer"] .pl-cta-inner { position: relative; z-index: 1; display: grid; gap: 2rem; }
.site[data-look="plasterer"] .pl-cta-text { max-width: 44rem; }
.site[data-look="plasterer"] .pl-cta h2 { font-size: clamp(2.6rem, 1.4rem + 4.6vw, 6.2rem); color: var(--pl-on-tub); }
.site[data-look="plasterer"] .pl-cta p { font-size: var(--fs-lead); color: var(--pl-tub-muted); max-width: 34rem; margin: 0; }
.site[data-look="plasterer"] .pl-cta-act { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.site[data-look="plasterer"] .pl-cta-number { font-weight: 800; font-variant-numeric: tabular-nums; font-size: clamp(2rem, 1.2rem + 3vw, 4rem); letter-spacing: -0.045em; white-space: nowrap; color: var(--pl-on-tub); text-decoration: none; }
.site[data-look="plasterer"] .pl-cta-number:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.site[data-look="plasterer"] .pl-cta :focus-visible { outline-color: var(--pl-on-tub); }
@media (max-width: 51.99rem) {
  .site[data-look="plasterer"] .pl-tub { --d: 20rem; right: -5rem; top: auto; bottom: -8rem; translate: none; }
  .site[data-look="plasterer"] .pl-cta { padding-bottom: 14rem; }
}

/* --- Contact: the number at the size of the wall. ------------------------------- */
.site[data-look="plasterer"] .s-contact { padding-block: clamp(4rem, 9vw, 8rem); background: var(--pl-rake); }
.site[data-look="plasterer"] .contact-inner { display: grid; gap: 3rem clamp(3rem, 6vw, 6rem); align-items: start; }
@media (min-width: 60rem) { .site[data-look="plasterer"] .contact-inner:has(.contact-form) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.site[data-look="plasterer"] .contact-list { display: grid; gap: 0; margin-top: 1.5rem; border-top: 0; }
.site[data-look="plasterer"] .contact-list li { border-top: 1px solid #d3d0c8; padding-block: 1rem; border-bottom: 0; }
.site[data-look="plasterer"] .contact-link { display: grid; gap: 0.1rem; text-decoration: none; }
.site[data-look="plasterer"] .contact-label { font-family: var(--font-figures); font-size: 0.85rem; color: var(--muted); }
.site[data-look="plasterer"] .contact-value { font-weight: 700; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.7rem); letter-spacing: -0.025em; overflow-wrap: anywhere; }
.site[data-look="plasterer"] .contact-link:hover .contact-value { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
.site[data-look="plasterer"] .contact-list li:first-child { border-top: 0; padding-top: 0; }
.site[data-look="plasterer"] .contact-list li:first-child .contact-value { font-weight: 800; font-size: clamp(2.6rem, 1.2rem + 5.6vw, 6.8rem); letter-spacing: -0.06em; line-height: 0.95; }
.site[data-look="plasterer"] .contact-note, .site[data-look="plasterer"] .contact-also { font-size: 0.95rem; }
.site[data-look="plasterer"] .contact-also { display: inline-block; margin-top: 0.5rem; }
/* The form on a white board, screwed to the wall. */
.site[data-look="plasterer"] :is(.contact-form, .request-form) { --text: var(--on-board); --muted: var(--board-muted); position: relative; border-top: 0; padding: clamp(1.5rem, 3.5vw, 2.75rem); background: var(--pl-screws), var(--pl-board); box-shadow: 0 1px 0 rgb(0 0 0 / 0.1), 0 30px 50px -34px rgb(40 34 26 / 0.6); }
.site[data-look="plasterer"] :is(.contact-form, .request-form) label { font-weight: 650; }
.site[data-look="plasterer"] :is(.contact-form, .request-form) :is(input:not([type="checkbox"], [type="radio"]), textarea, select) { border: 0; border-bottom: 2px solid var(--pl-ink); border-radius: 0; background: #f4f3ef; padding: 0.8rem 0.9rem; font: inherit; color: var(--pl-ink); }
.site[data-look="plasterer"] :is(.contact-form, .request-form) :is(input, textarea, select):focus-visible { outline: 3px solid var(--pl-ink); outline-offset: 2px; background: #fff; }
.site[data-look="plasterer"] .form-note { font-size: 0.92rem; }

/* --- Request form and booking (the inmeten visit). --------------------------- */
.site[data-look="plasterer"] :is(.s-request, .s-booking, .s-booking-flow) { padding-block: clamp(4rem, 9vw, 8rem); background: var(--pl-gypsum), var(--pl-gyp); color: var(--pl-ink); }
/* The booking list on the plain wall, so it never sits on the same grey as the form above it. */
.site[data-look="plasterer"] .s-booking { background: var(--pl-rake), var(--pl-wall-low); }
.site[data-look="plasterer"] :is(.s-request, .s-booking) .lead { color: var(--pl-ink); }
.site[data-look="plasterer"] .request-step > legend { font-weight: 800; letter-spacing: -0.03em; font-size: 1.5rem; }
.site[data-look="plasterer"] .request-step + .request-step { border-top-color: #e3e0d9; }
.site[data-look="plasterer"] .s-booking .booking-inner > :is(ul, div, form, p:not(.lead)) { background-color: var(--pl-board); }
.site[data-look="plasterer"] .booking-services { border-top: 0; padding: 0.5rem clamp(1.25rem, 3vw, 2rem); box-shadow: 0 30px 50px -34px rgb(40 34 26 / 0.6); }
.site[data-look="plasterer"] .booking-services li:last-child { border-bottom: 0; }
.site[data-look="plasterer"] .booking-name { font-size: 1.25rem; font-weight: 750; letter-spacing: -0.02em; }
.site[data-look="plasterer"] .booking-choices a { border-radius: 0; background: var(--pl-board); }
.site[data-look="plasterer"] .booking-services a { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 30rem) {
  .site[data-look="plasterer"] .booking-services a { grid-template-columns: minmax(0, 1fr); }
  .site[data-look="plasterer"] .booking-go { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 0.3rem; }
}
.site[data-look="plasterer"] .booking-choices a[aria-current] { background: var(--pl-ink); color: var(--pl-wall); border-color: var(--pl-ink); }

/* --- Trust strip: the customer's own claims, one line on tape. ---------------- */
.site[data-look="plasterer"] .s-trust { padding-block: 1.4rem; background: var(--pl-wall-low); }
.site[data-look="plasterer"] .trust-list { font-size: 1.1rem; font-weight: 650; }
.site[data-look="plasterer"] .trust-list li:not(:last-child)::after { color: var(--pl-steel); }

/* --- Gallery: the customer's own work, large and plain. --------------------------- */
.site[data-look="plasterer"] .s-gallery { padding-block: clamp(4rem, 9vw, 8rem); }
.site[data-look="plasterer"] .s-gallery .gallery-items { display: grid; gap: clamp(0.75rem, 1.5vw, 1.25rem); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2rem; }
.site[data-look="plasterer"] .s-gallery .gallery-items li:first-child, .site[data-look="plasterer"] .s-gallery .gallery-items li:last-child:nth-child(even) { grid-column: 1 / -1; }
@media (max-width: 30rem) { .site[data-look="plasterer"] .s-gallery .gallery-items { grid-template-columns: minmax(0, 1fr); } }
.site[data-look="plasterer"] .s-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--pl-gyp); }
@media (min-width: 52rem) { .site[data-look="plasterer"] .s-gallery .gallery-items li:first-child img { aspect-ratio: 21 / 9; } }

/* --- Subpages: their first section carries the page's h1 at hero scale. --------- */
.site[data-look="plasterer"] main > .s:first-child:not(.s-hero) > .wrap h1,
.site[data-look="plasterer"] main > .s:first-child:not(.s-hero) h1 { font-size: clamp(3rem, 1.6rem + 6vw, 7.5rem); letter-spacing: -0.05em; }

/* --- Footer: the floor under the wall, a corner bead along its top. ------------- */
.site[data-look="plasterer"] .site-footer { position: relative; padding-top: clamp(3.5rem, 7vw, 6rem); background: var(--deep); }
.site[data-look="plasterer"] .site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: var(--pl-bead-holes) 0 1px / 9px 6px repeat-x, var(--pl-bead-holes) 4.5px 8px / 9px 6px repeat-x, linear-gradient(180deg, #8a8f93, #dfe2e4 18%, #a3a8ac 34%, #f6f7f8 46%, #c9cdd0 50%, #f6f7f8 54%, #a3a8ac 66%, #dfe2e4 82%, #8a8f93); }
.site[data-look="plasterer"] .footer-brand .footer-name { font-weight: 800; font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.4rem); letter-spacing: -0.045em; line-height: 0.98; max-width: 16ch; }
.site[data-look="plasterer"] .site-footer { font-size: 1rem; }
.site[data-look="plasterer"] .footer-title { font-family: var(--font-figures); font-weight: 400; color: var(--muted); }

/* --- Quick bar (phones): the kuip's black, the button orange. ----------------- */
@media (max-width: 51.99rem) {
  .site[data-look="plasterer"] .quickbar { --on-deep: var(--pl-on-tub); background: var(--pl-tub); border-top: 0; }
  .site[data-look="plasterer"] .quick { font-size: 1.05rem; font-weight: 750; }
}

/* --- Motion: samples are hung, tape is stuck on, quotes come up. Only with motion allowed. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .site[data-look="plasterer"] .pl-board .service { animation: pl-hang linear forwards; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    .site[data-look="plasterer"] .pl-tapes li { animation: pl-tape linear forwards; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .site[data-look="plasterer"] .pl-reviews li { animation: pl-rise linear forwards; animation-timeline: view(); animation-range: entry 0% entry 50%; }
  }
  @keyframes pl-hang { from { translate: 0 28px; } }
  @keyframes pl-tape { from { scale: 0.86 1; } }
  @keyframes pl-rise { from { translate: 0 24px; } }
  .site[data-look="plasterer"] .pl-hero-text > * { animation: pl-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .site[data-look="plasterer"] .pl-hero-text > :nth-child(2) { animation-delay: 0.08s; }
  .site[data-look="plasterer"] .pl-hero-text > :nth-child(3) { animation-delay: 0.16s; }
  .site[data-look="plasterer"] .pl-hero-text > :nth-child(4) { animation-delay: 0.24s; }
}

/* --- Finish samples: the material's close-up where the library has one. ------- */
.site[data-look="plasterer"] .pl-photo { background: #e6e2da; }
.site[data-look="plasterer"] .pl-photo .pl-sample-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The same raking light over a photo as over a drawn sample, so the board reads as one set. */
.site[data-look="plasterer"] .pl-photo::before { z-index: 1; }
.site[data-look="plasterer"] .pl-photo::after { z-index: 2; }
.site[data-look="plasterer"] :is(.sample, .pl-plate) > :is(.sample-label, .pl-plate-label) { z-index: 3; }
.site[data-look="plasterer"] .sample.pl-photo .pl-sample-img { filter: contrast(1.08); }
/* Drawn samples: unpainted gypsum is a warm pinkish grey, a ceiling cooler, a
   repair a shade whiter. Tinted under the drawing's light, so no two whites match. */
.site[data-look="plasterer"] :is(.sample, .pl-plate, .pl-from-sample):not(.pl-photo) { background-blend-mode: multiply; filter: contrast(1.12); }
.site[data-look="plasterer"] :is(.sample, .pl-plate, .pl-from-sample):not(.pl-photo)[data-finish="behangklaar"] { background-color: #ddd8d3; }
.site[data-look="plasterer"] :is(.sample, .pl-plate, .pl-from-sample):not(.pl-photo)[data-finish="glad"] { background-color: #e8e4de; }
.site[data-look="plasterer"] :is(.sample, .pl-plate, .pl-from-sample):not(.pl-photo)[data-finish="plafond"] { background-color: #e3e7ea; }
.site[data-look="plasterer"] :is(.sample, .pl-plate, .pl-from-sample):not(.pl-photo)[data-finish="herstel"] { background-color: #e3ded8; }
.site[data-look="plasterer"] .pl-from-sample { position: relative; overflow: hidden; }

/* Werkgebied: the tapes stuck on a real plasterboard wall with filled seams. */
.site[data-look="plasterer"] .pl-area.pl-has-board { position: relative; isolation: isolate; overflow: clip; background: #ece6dc; }
.site[data-look="plasterer"] .pl-area-board { position: absolute; inset: 0; z-index: -1; }
.site[data-look="plasterer"] .pl-area-img { width: 100%; height: 100%; object-fit: cover; }
/* Light from the left, where the text sits, so the words stay on a calm patch. */
.site[data-look="plasterer"] .pl-area-board::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(247 245 240 / 0.88), rgb(247 245 240 / 0.55) 38%, rgb(247 245 240 / 0.1) 70%); }
@media (max-width: 59.99rem) { .site[data-look="plasterer"] .pl-area-board::after { background: rgb(247 245 240 / 0.55); } }

/* A board with one or two samples is cut to size, not a wide empty sheet. */
.site[data-look="plasterer"] .pl-board[data-size="few"] { max-width: 52rem; }
.site[data-look="plasterer"] .pl-board[data-size="few"]:has(.service:only-child) { max-width: 30rem; }
.site[data-look="plasterer"] .pl-board .service-list:has(> .service:only-child) { grid-template-columns: minmax(0, 1fr); }