/* The painter look: everything here is scoped to .site[data-look="painter"]. Appended after base.css (bun run --filter @platform/sections css).
   The world of the kleurwaaier: painted fields that print their RAL code in a
   corner, the fan's blades for the services, masking tape, an aluminium
   ladder, Dutch gevels. Colours of a field come in as --field / --on-field
   (inline, black or white chosen by contrast in painter.tsx). */

.site[data-look="painter"] {
  --tape: #e7dcb8;
  --tape-ink: #2b2720;
  --alu: #a1a1a0;
  --alu-hi: #d9dad6;
  --hand: "Kalam", "Kalam fallback", "Comic Sans MS", cursive;
  --fs-base: 1.0625rem;
  --fs-h2: clamp(2.25rem, 1.35rem + 3vw, 4.25rem);
  --fs-h3: clamp(1.3rem, 1.05rem + 0.9vw, 1.85rem);
  --fs-h1: clamp(2.6rem, 1.5rem + 4.4vw, 5.5rem);
  --pt-edge: max(var(--gap), (100cqw - var(--wrap)) / 2);
}
@media (min-width: 64rem) { .site[data-look="painter"] { --fs-base: 1.125rem; } }
.site[data-look="painter"] :is(h1, h2) { font-weight: 820; letter-spacing: -0.035em; line-height: 0.98; }
.site[data-look="painter"] h3, .site[data-look="painter"] .h3 { font-weight: 760; letter-spacing: -0.02em; }
.site[data-look="painter"] main > .s + .s { border-top: 0; }
/* Full-bleed fields line their text up with .wrap: measured on main, so a classic scrollbar doesn't shift it. */
.site[data-look="painter"] main { container-type: inline-size; }
.site[data-look="painter"] p { hyphens: auto; }

/* --- The print on a painted field: code and name, in a corner ------------ */
.site[data-look="painter"] .pt-label {
  display: flex; flex-wrap: wrap; gap: 0 0.6em; margin: 0;
  font-size: 0.78rem; line-height: 1.3; letter-spacing: 0.01em; color: var(--on-field);
}
.site[data-look="painter"] .pt-label-code { font-weight: 750; }

/* --- Masking tape: crepe paper, torn ends ------------------------------- */
.site[data-look="painter"] .pt-tape,
.site[data-look="painter"] .pt-tape-note,
.site[data-look="painter"] .pt-trust li {
  background-color: var(--tape);
  background-image:
    repeating-linear-gradient(90deg, rgb(80 60 20 / 0.06) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgb(255 255 255 / 0.35), transparent 40%, rgb(80 60 20 / 0.07));
}

/* --- Header ----------------------------------------------------------------- */
.site[data-look="painter"] .site-header { border-bottom: 0; }
.site[data-look="painter"] .brand { font-weight: 850; letter-spacing: -0.03em; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); }

/* --- Hero: a painted field, the photo, the fan across the seam ----------- */
.site[data-look="painter"] .pt-hero { padding: 0; display: grid; position: relative; overflow: clip; background: var(--bg); }
.site[data-look="painter"] .pt-hero-field {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--field); color: var(--on-field);
  --text: var(--on-field); --muted: color-mix(in srgb, var(--on-field) 84%, var(--field));
  padding: clamp(4.5rem, 9vw, 7rem) clamp(2.5rem, 5vw, 6rem) clamp(4rem, 7vw, 6rem) var(--pt-edge);
}
.site[data-look="painter"] .pt-hero h1, .site[data-look="painter"] .pt-hero h2 {
  font-size: clamp(3rem, 1.4rem + 5.6vw, 7.25rem); line-height: 0.92; letter-spacing: -0.045em; font-weight: 860;
  max-width: 11ch; margin-bottom: 0.3em; overflow-wrap: break-word; hyphens: auto;
}
.site[data-look="painter"] .pt-hero.pt-len-m :is(h1, h2) { font-size: clamp(2.5rem, 1.3rem + 4.2vw, 5.75rem); max-width: 13ch; }
.site[data-look="painter"] .pt-hero.pt-len-l :is(h1, h2) { font-size: clamp(2.1rem, 1.2rem + 3vw, 4.25rem); max-width: 17ch; line-height: 0.98; }
.site[data-look="painter"] .pt-hero .lead { color: var(--muted); max-width: 34rem; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem); }
.site[data-look="painter"] .pt-hero .btn-primary { box-shadow: 0 0 0 2px var(--on-field); min-height: 56px; padding-inline: 1.7rem; font-size: 1.08rem; }
.site[data-look="painter"] .pt-hero .cta-alt { color: var(--on-field); }
.site[data-look="painter"] .pt-hero-media { position: relative; min-height: 22rem; background: var(--surface); }
.site[data-look="painter"] .pt-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.site[data-look="painter"] .pt-tape-hero { position: absolute; left: 0; right: 0; bottom: 0; height: 1.5rem; z-index: 3; box-shadow: 0 -1px 0 rgb(0 0 0 / 0.08); }
@media (min-width: 52rem) {
  .site[data-look="painter"] .pt-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); min-height: min(calc(100svh - 4.5rem), 62rem); }
  .site[data-look="painter"] .pt-hero-media { min-height: 0; }
  /* Text sits in the middle of the field, so the button clears the first screen even under the gallery's demo bar. */
  .site[data-look="painter"] .pt-hero-field { justify-content: center; padding-block: clamp(2.75rem, 6vw, 5.5rem); }
}
@media (max-width: 51.99rem) {
  .site[data-look="painter"] .pt-hero { min-height: calc(100svh - 3.75rem - 52px - var(--vb-bar, 0px)); grid-template-rows: auto 1fr; }
  .site[data-look="painter"] .pt-hero-media { order: -1; height: clamp(9rem, calc(30svh - var(--vb-bar, 0px)), 16rem); min-height: 0; }
  @media (min-width: 40rem) { .site[data-look="painter"] .pt-hero-media { height: 34svh; max-height: 24rem; } }
  .site[data-look="painter"] .pt-hero-field { padding-top: 2rem; padding-bottom: 3.25rem; }
  .site[data-look="painter"] .pt-hero.no-photo .pt-hero-media { height: clamp(7rem, calc(18svh - var(--vb-bar, 0px)), 10rem); min-height: 0; }
  .site[data-look="painter"] .pt-hero .actions { margin-top: 1.25rem; }
}

/* The fan: blades round one bolt, half open. */
.site[data-look="painter"] .pt-fan {
  --blade: clamp(2.4rem, 3.2vw, 3.4rem); --len: clamp(13rem, 24vw, 24rem);
  position: absolute; z-index: 2; left: calc(var(--blade) * -0.5); bottom: 5.5rem; width: 0; height: 0;
}
.site[data-look="painter"] .pt-fan-blade {
  position: absolute; left: calc(var(--blade) / -2); bottom: calc(var(--blade) / -2);
  width: var(--blade); height: var(--len);
  background: var(--field); color: var(--on-field);
  border-radius: 0.35rem 0.35rem calc(var(--blade) / 2) calc(var(--blade) / 2);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.12), 0 2px 6px rgb(0 0 0 / 0.18);
  transform-origin: 50% calc(100% - var(--blade) / 2);
  rotate: calc(var(--i) * 8deg);
  display: flex; justify-content: center; padding-top: 0.7rem;
}
.site[data-look="painter"] .pt-fan-blade span { writing-mode: vertical-rl; font-size: 0.72rem; font-weight: 750; letter-spacing: 0.04em; white-space: nowrap; hyphens: manual; }
/* The hero field's own colour, pulled out past the others: longer, on top, its full name printed. */
.site[data-look="painter"] .pt-fan-blade.is-pulled { rotate: 76deg; height: calc(var(--len) * 1.1); z-index: 1; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.55), 0 6px 14px rgb(0 0 0 / 0.32); }
.site[data-look="painter"] .pt-fan-blade.is-pulled { align-items: flex-start; padding-top: 0.9rem; }
.site[data-look="painter"] .pt-fan-blade.is-pulled span { font-size: 0.8rem; letter-spacing: 0.02em; rotate: 180deg; }
.site[data-look="painter"] .pt-fan-bolt {
  position: absolute; left: -0.55rem; bottom: -0.55rem; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f2f2ee, #8d8e8b 70%); box-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
}
.site[data-look="painter"] .pt-hero.no-photo .pt-hero-media { background: var(--bg); min-height: 20rem; }
.site[data-look="painter"] .pt-hero.no-photo .pt-fan { --len: clamp(15rem, 30vw, 30rem); --blade: clamp(2.6rem, 3.6vw, 3.8rem); left: clamp(3rem, 8vw, 7rem); bottom: 3.5rem; }
@media (max-width: 51.99rem) {
  .site[data-look="painter"] .pt-fan { --len: clamp(8rem, 21svh, 12rem); --blade: 1.9rem; left: 2.25rem; bottom: 1.4rem; }
  .site[data-look="painter"] .pt-fan-blade span { font-size: 0.62rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .site[data-look="painter"] .pt-fan-blade { animation: pt-fan-open 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: 0.15s; }
}
@keyframes pt-fan-open { from { rotate: 0deg; } }

/* --- Services: the fan opened flat; each service a blade ------------------ */
.site[data-look="painter"] .pt-services { overflow: clip; padding-top: clamp(4.5rem, 9vw, 8rem); }
.site[data-look="painter"] .pt-head { display: grid; gap: 0.5rem clamp(2rem, 5vw, 5rem); align-items: end; }
.site[data-look="painter"] .pt-head :is(h1, h2) { margin: 0; max-width: 14ch; }
.site[data-look="painter"] .pt-head .lead { margin: 0; }
@media (min-width: 52rem) { .site[data-look="painter"] .pt-head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.site[data-look="painter"] .pt-blades { margin-top: clamp(2rem, 4vw, 3.5rem); border: 0; display: grid; gap: 0.45rem; }
.site[data-look="painter"] .pt-blade {
  --muted: var(--on-field); --text: var(--on-field);
  position: relative; display: grid; align-items: center;
  grid-template-columns: 3.25rem minmax(0, 9.5rem) minmax(0, 1fr) auto;
  gap: 0.25rem clamp(1rem, 2.4vw, 2.25rem);
  min-height: clamp(6.5rem, 8vw, 8rem); padding: 1.1rem clamp(1.1rem, 3vw, 2.5rem) 1.1rem 0;
  background: var(--field); color: var(--on-field); border: 0;
  border-radius: 3.5rem 0.5rem 0.5rem 3.5rem;
  transform-origin: 1.65rem 50%;
}
.site[data-look="painter"] .pt-blade-hole {
  justify-self: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--bg);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.45), 0 0 0 3px color-mix(in srgb, var(--on-field) 22%, transparent);
}
.site[data-look="painter"] .pt-blade .chip {
  display: grid; align-content: center; gap: 0.1rem; align-self: stretch;
  font-size: 0.8rem; line-height: 1.25; padding-right: 1rem;
  border-right: 1px solid color-mix(in srgb, var(--on-field) 28%, transparent);
}
.site[data-look="painter"] .pt-blade .chip-code { font-weight: 760; font-size: 0.86rem; }
.site[data-look="painter"] .pt-blade :is(.chip-code, .chip-name) { white-space: nowrap; hyphens: manual; }
.site[data-look="painter"] .pt-blade :is(h2, h3) { font-size: clamp(1.3rem, 1rem + 1.1vw, 2rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.08; margin: 0; }
.site[data-look="painter"] .pt-blade .service-note { color: var(--muted); margin-top: 0.3rem; max-width: 44rem; }
@media (max-width: 47.99rem) { .site[data-look="painter"] .pt-services.is-long .pt-blade .service-note { font-size: 1rem; } }
.site[data-look="painter"] .pt-blade .price { font-variant-numeric: tabular-nums; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.6rem); font-weight: 780; text-align: right; font-family: var(--font-figures); letter-spacing: -0.01em; }
.site[data-look="painter"] .pt-blade :is(.price-from, .price-unit) { font-size: 0.68em; font-weight: 500; }
.site[data-look="painter"] .pt-services.is-long .pt-blade { min-height: 5rem; padding-block: 0.8rem; }
.site[data-look="painter"] .pt-services.is-long .pt-blade :is(h2, h3) { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); }
.site[data-look="painter"] .pt-services .sheet-foot { margin-top: 1.25rem; }
@media (max-width: 47.99rem) {
  .site[data-look="painter"] .pt-blade { grid-template-columns: 2.5rem minmax(0, 1fr); padding: 1rem 1.1rem 1.1rem 0; border-radius: 2.5rem 0.5rem 0.5rem 2.5rem; transform-origin: 1.25rem 2rem; align-items: start; }
  .site[data-look="painter"] .pt-blade-hole { grid-row: 1; margin-top: 0.15rem; width: 1rem; height: 1rem; }
  .site[data-look="painter"] .pt-blade .chip { grid-column: 2; display: flex; gap: 0.5em; border: 0; padding: 0; font-size: 0.78rem; }
  .site[data-look="painter"] .pt-blade .service-body { grid-column: 2; }
  .site[data-look="painter"] .pt-blade .price { grid-column: 2; text-align: left; margin-top: 0.4rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .site[data-look="painter"] .pt-blade { transition: rotate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .site[data-look="painter"] .pt-blade:hover { rotate: -1.4deg; }
  @supports (animation-timeline: view()) {
    .site[data-look="painter"] .pt-blade { animation: pt-blade-open linear; animation-fill-mode: none; animation-timeline: view(); animation-range: entry 10% cover 30%; }
  }
}
@keyframes pt-blade-open { from { rotate: calc(-2deg - var(--i) * 1.2deg); } to { rotate: 0deg; } }

/* --- Gallery: photos on an antraciet wall, notes on tape ------------------ */
.site[data-look="painter"] .pt-gallery {
  background: var(--field); color: var(--on-field); --text: var(--on-field); --muted: color-mix(in srgb, var(--on-field) 84%, var(--field));
  padding-block: clamp(3.5rem, 9vw, 8rem);
}
.site[data-look="painter"] .pt-gallery :is(h1, h2) { max-width: 16ch; }
.site[data-look="painter"] .pt-wall { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 2.2vw, 2rem) clamp(0.75rem, 1.5vw, 1.25rem); margin-top: clamp(2rem, 4vw, 3.5rem); }
.site[data-look="painter"] .pt-wall li { position: relative; background: none; min-width: 0; }
.site[data-look="painter"] .pt-wall img { width: 100%; height: 100%; min-height: 14rem; max-height: 22rem; aspect-ratio: auto; object-fit: cover; background: color-mix(in srgb, var(--on-field) 12%, var(--field)); }
@media (max-width: 47.99rem) {
  /* Phones: a strip to swipe through, the next photo peeking in. */
  .site[data-look="painter"] .pt-wall { display: flex; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gap)); padding: 0 var(--gap) 1.5rem; scroll-padding-inline: var(--gap); scrollbar-width: thin; }
  .site[data-look="painter"] .pt-wall li { flex: 0 0 84%; scroll-snap-align: start; }
  .site[data-look="painter"] .pt-wall img { height: 17rem; min-height: 0; }
  .site[data-look="painter"] .pt-tape-note { font-size: 0.95rem; }
}
@media (min-width: 48rem) {
  /* Six to a wall: one large, two beside it, three under them; short walls close their own row. */
  .site[data-look="painter"] .pt-wall { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(12rem, 17vw, 16.5rem); grid-auto-flow: dense; }
  .site[data-look="painter"] .pt-wall img { min-height: 0; max-height: none; }
  .site[data-look="painter"] .pt-wall li:nth-child(6n + 1) { grid-column: span 7; grid-row: span 2; }
  .site[data-look="painter"] .pt-wall li:nth-child(6n + 2), .site[data-look="painter"] .pt-wall li:nth-child(6n + 3) { grid-column: span 5; }
  .site[data-look="painter"] .pt-wall li:nth-child(6n + 4), .site[data-look="painter"] .pt-wall li:nth-child(6n + 5), .site[data-look="painter"] .pt-wall li:nth-child(6n) { grid-column: span 4; }
  .site[data-look="painter"] .pt-wall li:nth-child(6n + 1):last-child { grid-column: span 12; }
  .site[data-look="painter"] .pt-wall li:nth-child(6n + 2):last-child { grid-row: span 2; }
  .site[data-look="painter"] .pt-wall li:nth-child(6n + 4):last-child { grid-column: span 12; }
  .site[data-look="painter"] .pt-wall li:nth-child(6n + 4):nth-last-child(2), .site[data-look="painter"] .pt-wall li:nth-child(6n + 5):last-child { grid-column: span 6; }
}
.site[data-look="painter"] .pt-tape-note {
  position: absolute; left: clamp(0.75rem, 2vw, 1.5rem); bottom: -0.85rem; max-width: min(calc(100% - 2rem), 30rem); margin: 0;
  padding: 0.35rem 1.1rem 0.3rem; color: var(--tape-ink); font-family: var(--hand); font-size: 1rem; line-height: 1.3;
  rotate: -1.2deg; box-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
  clip-path: polygon(0 6%, 2% 0, 98% 4%, 100% 0, 99% 50%, 100% 96%, 97% 100%, 2% 95%, 0 100%, 1% 50%);
}
@media (max-width: 79.99rem) { .site[data-look="painter"] .pt-tape-note { font-size: 0.9rem; padding-inline: 0.8rem; max-width: calc(100% - 1.5rem); } }
.site[data-look="painter"] .pt-wall li:nth-child(even) .pt-tape-note { rotate: 0.9deg; left: auto; right: clamp(0.75rem, 2vw, 1.5rem); }

/* --- About: the photo to the page edge, text beside it -------------------- */
.site[data-look="painter"] .pt-about { padding: 0; display: grid; max-width: none; }
.site[data-look="painter"] .pt-about.no-photo { background: var(--surface); }
.site[data-look="painter"] .pt-about-media { position: relative; min-height: 20rem; }
.site[data-look="painter"] .pt-about-media .about-img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.site[data-look="painter"] .pt-about-text { padding: var(--section-pad) var(--pt-edge); max-width: 46rem; align-self: center; }
.site[data-look="painter"] .pt-about-text > p:first-of-type { font-size: var(--fs-lead); line-height: 1.5; }
.site[data-look="painter"] .pt-about.no-photo .pt-about-text { max-width: none; width: min(100% - 2 * var(--gap), var(--wrap)); margin-inline: auto; padding-inline: 0; }
@media (min-width: 52rem) {
  .site[data-look="painter"] .pt-about.has-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(34rem, 72vh, 48rem); }
  .site[data-look="painter"] .pt-about.has-photo .pt-about-text { padding: var(--section-pad) var(--pt-edge) var(--section-pad) clamp(2.5rem, 5vw, 5.5rem); }
  .site[data-look="painter"] .about-image_right .pt-about-media { order: 2; }
  .site[data-look="painter"] .about-image_right.has-photo .pt-about-text { padding: var(--section-pad) clamp(2.5rem, 5vw, 5.5rem) var(--section-pad) var(--pt-edge); }
}
.site[data-look="painter"] .pt-year {
  position: relative; display: inline-grid; margin-top: 1.5rem; min-width: 13rem;
  padding: 1rem 1.4rem 2.6rem; background: var(--field); color: var(--on-field);
  box-shadow: 0 0 0 0.45rem #ffffff, 0 0 0 calc(0.45rem + 1px) var(--border);
}
.site[data-look="painter"] .pt-year > p { margin: 0; display: grid; line-height: 1; }
.site[data-look="painter"] .pt-year-word { font-size: 0.95rem; font-weight: 650; }
.site[data-look="painter"] .pt-year-num { font-size: clamp(3.2rem, 2rem + 4vw, 5.5rem); font-weight: 860; letter-spacing: -0.05em; }
.site[data-look="painter"] .pt-year .pt-label { position: absolute; left: 1.4rem; bottom: 0.8rem; }

/* --- Reviews: sample cards laid out on the stofkleed (the painter's cotton
   dust sheet): drawn weave, two soft folds, a few old spatters. --------- */
.site[data-look="painter"] .pt-quotes {
  --sheet: #e9e4d8;
  padding-block: clamp(3.5rem, 9vw, 8rem); position: relative; overflow: clip;
  background-color: var(--sheet);
  background-image:
    radial-gradient(ellipse 1.1rem 0.75rem at 91% 3.5%, rgb(89 25 31 / 0.82) 0 60%, transparent 64%),
    radial-gradient(circle at 89.2% 5.6%, rgb(89 25 31 / 0.82) 0 0.14rem, transparent 0.17rem),
    radial-gradient(circle at 92.6% 1.6%, rgb(89 25 31 / 0.82) 0 0.09rem, transparent 0.12rem),
    radial-gradient(ellipse 1.7rem 1.1rem at 95% 90%, rgb(247 249 239 / 0.92) 0 60%, transparent 63%),
    radial-gradient(circle at 92.8% 87.5%, rgb(247 249 239 / 0.92) 0 0.16rem, transparent 0.19rem),
    radial-gradient(ellipse 0.8rem 0.55rem at 3.5% 97%, rgb(17 66 50 / 0.8) 0 60%, transparent 64%),
    radial-gradient(circle at 5.2% 95.6%, rgb(17 66 50 / 0.8) 0 0.1rem, transparent 0.13rem),
    linear-gradient(97deg, transparent 31%, rgb(255 255 255 / 0.4) 32.2%, rgb(90 75 50 / 0.1) 33.6%, transparent 35.5%),
    linear-gradient(84deg, transparent 69%, rgb(90 75 50 / 0.09) 70.4%, rgb(255 255 255 / 0.35) 71.6%, transparent 73.5%),
    repeating-linear-gradient(0deg, rgb(90 75 50 / 0.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgb(90 75 50 / 0.045) 0 1px, transparent 1px 3px);
}
.site[data-look="painter"] .pt-samples { gap: clamp(1rem, 2.4vw, 2rem); margin-top: clamp(2rem, 4vw, 3rem); }
.site[data-look="painter"] .pt-samples li { position: relative; display: flex; background: #ffffff; padding: 0.55rem; border: 0; box-shadow: 0 1px 0 rgb(90 75 50 / 0.18), 0 10px 22px -12px rgb(60 45 20 / 0.45); }
/* Two pieces of masking tape hold each card down on the sheet. */
.site[data-look="painter"] .pt-samples li::before,
.site[data-look="painter"] .pt-samples li::after {
  content: ''; position: absolute; top: -0.7rem; width: 4.5rem; height: 1.4rem; z-index: 1;
  background-color: var(--tape);
  background-image: repeating-linear-gradient(90deg, rgb(80 60 20 / 0.06) 0 1px, transparent 1px 4px), linear-gradient(180deg, rgb(255 255 255 / 0.35), transparent 40%, rgb(80 60 20 / 0.07));
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.18);
  clip-path: polygon(0 8%, 4% 0, 96% 6%, 100% 0, 98% 50%, 100% 94%, 95% 100%, 3% 92%, 0 100%, 2% 50%);
}
.site[data-look="painter"] .pt-samples li::before { left: 1.25rem; rotate: -4deg; }
.site[data-look="painter"] .pt-samples li::after { right: 1.25rem; rotate: 3deg; }
.site[data-look="painter"] .pt-samples figure { display: flex; flex-direction: column; flex: 1; margin: 0; padding: 0; border: 0; }
.site[data-look="painter"] .pt-samples blockquote {
  flex: 1; margin: 0; padding: clamp(1.5rem, 3.5vw, 3rem); min-height: clamp(14rem, 22vw, 20rem);
  background: var(--field); color: var(--on-field);
  font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); line-height: 1.28; font-weight: 600; letter-spacing: -0.015em;
}
.site[data-look="painter"] .pt-samples figcaption {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem;
  padding: 0.9rem clamp(0.9rem, 2.5vw, 2.4rem) 0.45rem; color: #1b1d1e; font-size: 1rem; font-weight: 700;
}
.site[data-look="painter"] .pt-quote-code { color: #4f5254; font-weight: 500; font-size: 0.82rem; align-self: center; }
@media (min-width: 52rem) { .site[data-look="painter"] .pt-quotes.is-single .pt-samples { grid-template-columns: minmax(0, 1fr); } }

/* --- Werkgebied: the towns between the rungs of a ladder ----------------- */
.site[data-look="painter"] .pt-area { background: var(--field); }
.site[data-look="painter"] .pt-area-head { display: grid; gap: 0.5rem clamp(2rem, 5vw, 5rem); align-items: end; }
.site[data-look="painter"] .pt-area-head :is(h1, h2) { margin: 0; }
.site[data-look="painter"] .pt-area-head .area-body { margin: 0; font-size: var(--fs-lead); line-height: 1.5; }
@media (min-width: 52rem) { .site[data-look="painter"] .pt-area-head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.site[data-look="painter"] .pt-ladders { margin-top: clamp(2rem, 4vw, 3.25rem); display: grid; }
.site[data-look="painter"] .pt-ladder {
  --rail: 0.85rem; --rung: 0.55rem; --metal: linear-gradient(180deg, var(--alu-hi), var(--alu) 55%, #7d7e7b);
  position: relative; display: grid; border: 0; margin: 0;
}
.site[data-look="painter"] .pt-ladder li {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem); font-weight: 780; letter-spacing: -0.02em; line-height: 1.15;
  overflow-wrap: anywhere; hyphens: auto; white-space: normal; min-width: 0; color: var(--text);
}
.site[data-look="painter"] .pt-ladder li::after { content: none; }
/* Phones: one ladder standing up, the towns between its rungs. */
@media (max-width: 47.99rem) {
  .site[data-look="painter"] .pt-ladders { width: min(100%, 20rem); padding-inline: var(--rail, 0.85rem); background: linear-gradient(90deg, var(--alu-hi), var(--alu) 55%, #7d7e7b) left / 0.85rem 100% no-repeat, linear-gradient(90deg, var(--alu-hi), var(--alu) 55%, #7d7e7b) right / 0.85rem 100% no-repeat; padding-block: 1.25rem; }
  .site[data-look="painter"] .pt-ladder li { padding: 0.95rem 1.1rem; border-bottom: var(--rung) solid var(--alu); }
  .site[data-look="painter"] .pt-ladder:first-child li:first-child { border-top: var(--rung) solid var(--alu); }
}
/* Wider: ladders lying flat, four towns each, the rails running past the last rung. */
@media (min-width: 48rem) {
  .site[data-look="painter"] .pt-ladders { gap: 1.5rem; }
  .site[data-look="painter"] .pt-ladder {
    grid-template-columns: repeat(var(--k), minmax(0, 1fr)); width: max(calc(var(--k) / 4 * (100% - 3rem) + 3rem), min(100%, calc(var(--k) * 16rem)));
    padding: var(--rail) 1.5rem;
    background:
      linear-gradient(90deg, #2b2b2b 0.55rem, transparent 0.55rem calc(100% - 0.55rem), #2b2b2b 0) top / 100% var(--rail) no-repeat,
      linear-gradient(90deg, #2b2b2b 0.55rem, transparent 0.55rem calc(100% - 0.55rem), #2b2b2b 0) bottom / 100% var(--rail) no-repeat,
      var(--metal) top / 100% var(--rail) no-repeat,
      var(--metal) bottom / 100% var(--rail) no-repeat;
  }
  .site[data-look="painter"] .pt-ladder li { padding: 1.4rem 1.25rem; border-left: var(--rung) solid var(--alu); }
  .site[data-look="painter"] .pt-ladder li:last-child { border-right: var(--rung) solid var(--alu); }
}

/* --- Claims on strips of tape -------------------------------------------- */
.site[data-look="painter"] .pt-trust { padding-block: clamp(1.75rem, 3vw, 2.5rem); }
.site[data-look="painter"] .pt-trust .trust-list { gap: 0.9rem 1.25rem; }
.site[data-look="painter"] .pt-trust li { padding: 0.4rem 1.1rem; font-family: var(--hand); font-weight: 400; font-size: 1.15rem; color: var(--tape-ink); rotate: -0.8deg; box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); }
.site[data-look="painter"] .pt-trust li:nth-child(even) { rotate: 0.7deg; }
.site[data-look="painter"] .pt-trust li::after { content: none; }

/* --- Call to action: a zandgeel field ------------------------------------ */
.site[data-look="painter"] .pt-cta { background: var(--field); color: var(--on-field); --text: var(--on-field); --muted: color-mix(in srgb, var(--on-field) 82%, var(--field)); padding-block: clamp(3.25rem, 8vw, 7rem); }
.site[data-look="painter"] .pt-cta :is(h1, h2) { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.75rem); max-width: 15ch; }
.site[data-look="painter"] .pt-cta .btn-primary { box-shadow: 0 0 0 2px var(--on-field); }

/* --- FAQ ----------------------------------------------------------------- */
.site[data-look="painter"] .s-faq .wrap { display: grid; gap: 1rem clamp(2rem, 5vw, 5rem); }
@media (min-width: 52rem) {
  .site[data-look="painter"] .s-faq .wrap { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
  .site[data-look="painter"] .s-faq .wrap > :is(h1, h2) { position: sticky; top: 6rem; }
}
/* The questions on scaffold planks (steigerplanken: pine with galvanised end
   bands), laid across two standards of the steiger. */
.site[data-look="painter"] .s-faq .faq-items {
  --tube: linear-gradient(90deg, #8d9093, #e1e3e3 40%, #a5a8aa 70%, #7c7f82);
  margin-top: 0; max-width: none; display: grid; gap: 0.9rem; padding: 1.25rem 0;
  background: var(--tube) left 1.6rem top / 0.95rem 100% no-repeat, var(--tube) right 1.6rem top / 0.95rem 100% no-repeat;
}
.site[data-look="painter"] .s-faq .faq-items > :is(details, div) {
  --plank: #e3c99a; --band: 1.5rem;
  position: relative; margin: 0; border: 0; color: #1b1d1e; --text: #1b1d1e; --muted: #1b1d1e;
  background-color: var(--plank);
  background-image:
    linear-gradient(90deg, #a9adaf 0, #dfe1e1 calc(0.4 * var(--band)), #9ea2a4 var(--band), transparent var(--band) calc(100% - var(--band)), #9ea2a4 calc(100% - var(--band)), #dfe1e1 calc(100% - 0.6 * var(--band)), #a9adaf 100%),
    repeating-linear-gradient(178.6deg, rgb(130 85 35 / 0.09) 0 1.5px, transparent 1.5px 11px),
    linear-gradient(180deg, rgb(255 255 255 / 0.25), transparent 30%, rgb(120 80 30 / 0.12));
  box-shadow: 0 2px 0 rgb(80 55 20 / 0.35);
}
.site[data-look="painter"] .s-faq .faq-items details:first-child { border-top: 0; }
.site[data-look="painter"] .faq-items summary { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); min-height: 4.5rem; padding: 0.6rem calc(1.5rem + 1rem); }
.site[data-look="painter"] .faq-items details p, .site[data-look="painter"] .faq-items :is(dt, dd) { color: #1b1d1e; padding-inline: calc(1.5rem + 1rem); }
.site[data-look="painter"] .faq-items details p { margin: 0; padding-bottom: 1.25rem; max-width: none; }
.site[data-look="painter"] .faq-items dt { margin: 0; padding-top: 1.1rem; }
.site[data-look="painter"] .faq-items dd { margin: 0.25rem 0 0; padding-bottom: 1.1rem; }
/* The plus on a tin lid; it turns to a cross when the answer is open. */
.site[data-look="painter"] .faq-items summary::after {
  content: '+'; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: radial-gradient(circle, #4a5257 0 52%, #383e42 53% 60%, #5b6469 61%); color: #f7f9ef; font-size: 1.5rem; font-weight: 500;
}
.site[data-look="painter"] .faq-items details[open] summary::after { content: '+'; rotate: 45deg; }
@media (prefers-reduced-motion: no-preference) { .site[data-look="painter"] .faq-items summary::after { transition: rotate 0.25s; } }
@media (max-width: 47.99rem) {
  .site[data-look="painter"] .s-faq .faq-items { background-position: left 0.9rem top, right 0.9rem top; background-size: 0.7rem 100%; }
  .site[data-look="painter"] .s-faq .faq-items > :is(details, div) { --band: 0.9rem; }
  .site[data-look="painter"] .faq-items summary, .site[data-look="painter"] .faq-items details p, .site[data-look="painter"] .faq-items :is(dt, dd) { padding-inline: 1.6rem; }
}

/* --- Contact: details on a dennengroen field, the form on the wall -------- */
.site[data-look="painter"] .s-contact { --field: #27352a; --on-field: #f7f9ef; padding-block: 0; }
.site[data-look="painter"] .contact-inner { gap: 0; }
.site[data-look="painter"] .contact-details {
  --text: var(--on-field); --muted: #c9d2c9; --border: rgb(247 249 239 / 0.28);
  color: var(--text); background: var(--field); padding-block: var(--section-pad);
  box-shadow: 0 0 0 100vmax var(--field); clip-path: inset(0 -100vmax);
}
.site[data-look="painter"] .contact-details { position: relative; }
.site[data-look="painter"] .contact-details :is(h1, h2) { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.75rem); }
.site[data-look="painter"] .contact-list { border-top: 2px solid var(--text); }
.site[data-look="painter"] .contact-form { padding-block: var(--section-pad); border-top: 0; }
@media (min-width: 52rem) {
  .site[data-look="painter"] .contact-form_and_details { background: linear-gradient(90deg, var(--field) 50%, var(--bg) 50%); }
  .site[data-look="painter"] .contact-form_and_details .contact-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site[data-look="painter"] .contact-form_and_details .contact-details { box-shadow: none; clip-path: none; padding-right: clamp(2.5rem, 5vw, 5rem); }
  .site[data-look="painter"] .contact-form_and_details .contact-form { padding-left: clamp(2.5rem, 5vw, 5rem); }
  .site[data-look="painter"] .contact-form_and_details::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: calc(50% - 0.8rem); width: 1.6rem; z-index: 1;
    background-color: var(--tape);
    background-image: repeating-linear-gradient(0deg, rgb(80 60 20 / 0.06) 0 1px, transparent 1px 4px);
  }
}
.site[data-look="painter"] :is(.contact-form, .request-form) .btn { min-height: 56px; }

/* --- Forms elsewhere (request form, booking) ------------------------------ */
.site[data-look="painter"] .request-form { border-top: 0; background: #ffffff; padding: clamp(1.25rem, 3vw, 2.25rem); border: 1px solid var(--border); --bg: #ffffff; }
.site[data-look="painter"] .request-form { position: relative; box-shadow: 0 10px 22px -14px rgb(60 45 20 / 0.45); }
.site[data-look="painter"] .request-form::before,
.site[data-look="painter"] .request-form::after {
  content: ''; position: absolute; top: -0.7rem; width: 5rem; height: 1.4rem;
  background-color: var(--tape);
  background-image: repeating-linear-gradient(90deg, rgb(80 60 20 / 0.06) 0 1px, transparent 1px 4px), linear-gradient(180deg, rgb(255 255 255 / 0.35), transparent 40%, rgb(80 60 20 / 0.07));
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.18);
  clip-path: polygon(0 8%, 4% 0, 96% 6%, 100% 0, 98% 50%, 100% 94%, 95% 100%, 3% 92%, 0 100%, 2% 50%);
}
.site[data-look="painter"] .request-form::before { left: 1.5rem; rotate: -3deg; }
.site[data-look="painter"] .request-form::after { right: 1.5rem; rotate: 2.5deg; }

/* --- Footer: gitzwart ---------------------------------------------------- */
.site[data-look="painter"] .site-footer { --deep: #0e0e10; --deep-muted: #c3c6c3; background: #0e0e10; }
.site[data-look="painter"] .site-footer .footer-name { font-weight: 850; letter-spacing: -0.03em; }

/* --- Phones: the quick bar on the wall, a tape line on top -------------- */
@media (max-width: 51.99rem) {
  .site[data-look="painter"] .quickbar { --on-deep: var(--text); background: var(--bg); border-top: 0; box-shadow: 0 -0.4rem 0 var(--tape); }
}

/* --- The street: Dutch gevels in their classic colours, above the footer -- */
.site[data-look="painter"] .pt-street { overflow: clip; padding-top: clamp(3rem, 6vw, 5rem); background: var(--bg); }
.site[data-look="painter"] .pt-houses { display: flex; justify-content: center; align-items: flex-end; }
.site[data-look="painter"] .pt-house { flex: none; width: min(calc(100vw / 8), 15rem); display: flex; flex-direction: column; }
@media (min-width: 48rem) and (max-width: 79.99rem) {
  .site[data-look="painter"] .pt-house { width: calc(100vw / 6); }
  .site[data-look="painter"] .pt-house:nth-child(n + 7) { display: none; }
}
.site[data-look="painter"] .pt-house svg { display: block; width: 100%; height: auto; }
.site[data-look="painter"] .pt-house-label {
  margin: 0; padding: 0.9rem 0.6rem 0.4rem; height: 5.2rem; overflow: hidden; background: #0e0e10; color: #f7f9ef;
  display: grid; align-content: start; gap: 0.3rem; font-size: 0.72rem; line-height: 1.25; letter-spacing: 0.01em;
}
.site[data-look="painter"] .pt-house-label span { display: grid; grid-template-columns: 0.8rem minmax(0, 1fr); gap: 0.4rem; align-items: start; }
.site[data-look="painter"] .pt-house-label span::before { content: ''; height: 0.8rem; margin-top: 0.05rem; background: var(--sw); box-shadow: 0 0 0 1px rgb(247 249 239 / 0.45); }
@media (max-width: 47.99rem) {
  .site[data-look="painter"] .pt-house { width: calc(100vw / 3); }
  .site[data-look="painter"] .pt-house:nth-child(n + 4) { display: none; }
  .site[data-look="painter"] .pt-house-label { font-size: 0.68rem; padding-inline: 0.4rem; height: 5.6rem; }
}

/* --- Booking: the bookable jobs as sample cards ------------------------- */
.site[data-look="painter"] .s-booking { background: var(--surface); }
.site[data-look="painter"] .s-booking .booking-inner > * { max-width: none; }
.site[data-look="painter"] .s-booking .booking-inner > :is(h1, h2, .lead) { max-width: 40rem; }
.site[data-look="painter"] .booking-services { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); border: 0; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.site[data-look="painter"] .booking-services li { border: 1px solid var(--border); background: #ffffff; }
.site[data-look="painter"] .booking-services a { --text: #1b1d1e; padding: 1.1rem 1.25rem; min-height: 5.5rem; border-top: 1.6rem solid var(--chip, #27352a); }
.site[data-look="painter"] .booking-services li:nth-child(6n + 1) { --chip: #e9e0d2; }
.site[data-look="painter"] .booking-services li:nth-child(6n + 2) { --chip: #27352a; }
.site[data-look="painter"] .booking-services li:nth-child(6n + 3) { --chip: #383e42; }
.site[data-look="painter"] .booking-services li:nth-child(6n + 4) { --chip: #59191f; }
.site[data-look="painter"] .booking-services li:nth-child(6n + 5) { --chip: #1a2b3c; }
.site[data-look="painter"] .booking-services li:nth-child(6n) { --chip: #5d7a5a; }
@media (prefers-reduced-motion: no-preference) {
  .site[data-look="painter"] .booking-services li { transition: translate 0.2s; }
  .site[data-look="painter"] .booking-services li:hover { translate: 0 -0.25rem; }
}
.site[data-look="painter"] .booking-name { font-size: 1.15rem; font-weight: 760; letter-spacing: -0.015em; }
.site[data-look="painter"] .booking-meta { color: #4f5254; }

/* --- Opening hours: the label on a paint tin ------------------------------ */
.site[data-look="painter"] .pt-hours { padding-block: clamp(3.5rem, 9vw, 8rem); background: var(--surface); }
.site[data-look="painter"] .pt-hours-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem clamp(2rem, 6vw, 6rem); align-items: center; }
@media (min-width: 52rem) { .site[data-look="painter"] .pt-hours-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.site[data-look="painter"] .pt-hours-intro :is(h1, h2) { margin-top: 0; }
.site[data-look="painter"] .pt-hours-intro .hours-place { font-size: var(--fs-lead); line-height: 1.5; }
.site[data-look="painter"] .pt-hours-intro .hours-call a { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; color: var(--text); text-underline-offset: 0.18em; text-decoration-thickness: 2px; }
.site[data-look="painter"] .pt-tin { position: relative; width: min(100%, 28rem); justify-self: center; padding-top: 3.6rem; }
/* The bail: a wire handle in an arc over the lid. */
.site[data-look="painter"] .pt-tin-bail {
  position: absolute; top: 0; left: 6%; right: 6%; height: 5.4rem;
  border: 3px solid #7d8083; border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.site[data-look="painter"] .pt-tin-body {
  --text: #1b1d1e; --muted: #4f5254; color: var(--text);
  position: relative; padding: 3.4rem 0 3.2rem; border: 0; border-radius: 0.5rem / 0.35rem;
  background: linear-gradient(90deg, #8a8d8f, #d9dbd9 18%, #f2f3f1 30%, #c4c7c6 58%, #9a9d9f 82%, #7a7d80);
  box-shadow: 0 18px 30px -18px rgb(0 0 0 / 0.55);
}
/* The rim of the lid and the bottom seam. */
.site[data-look="painter"] .pt-tin-body::before,
.site[data-look="painter"] .pt-tin-body::after {
  content: ''; position: absolute; left: -0.35rem; right: -0.35rem; height: 1rem; border-radius: 0.4rem;
  background: linear-gradient(90deg, #6f7275, #c9cbca 18%, #ffffff 30%, #b3b6b6 58%, #868a8c 82%, #63666a);
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.2);
}
.site[data-look="painter"] .pt-tin-body::before { top: -0.5rem; }
.site[data-look="painter"] .pt-tin-body::after { bottom: -0.35rem; height: 0.7rem; }
.site[data-look="painter"] .pt-tin-label { background: #f7f9ef; margin-inline: -0.01rem; padding: 1.5rem 1.75rem 1.4rem; box-shadow: inset 0 1px 0 rgb(0 0 0 / 0.08), inset 0 -1px 0 rgb(0 0 0 / 0.08); }
.site[data-look="painter"] .pt-tin-name { margin: 0 0 0.7rem; font-weight: 860; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); line-height: 1.02; letter-spacing: -0.035em; overflow-wrap: break-word; hyphens: manual; }
.site[data-look="painter"] .pt-tin-band { margin: 0 -1.75rem 1rem; padding: 2.4rem 1.75rem 0.5rem; background: var(--field); color: var(--on-field); font-size: 0.85rem; font-weight: 700; white-space: nowrap; }
.site[data-look="painter"] .pt-tin .hours-table { width: 100%; font-variant-numeric: tabular-nums; }
.site[data-look="painter"] .pt-tin .hours-table :is(th, td) { padding: 0.45rem 0; border-color: rgb(27 29 30 / 0.15); }
.site[data-look="painter"] .pt-tin .hours-table td { text-align: right; white-space: nowrap; }
.site[data-look="painter"] .pt-tin .hours-table { font-size: 1.05rem; }
.site[data-look="painter"] .pt-tin .hours-table th { white-space: normal; }
.site[data-look="painter"] .pt-tin .hours-table th::after { margin-left: 0.4rem; }
@media (max-width: 29.99rem) {
  .site[data-look="painter"] .pt-tin-label { padding-inline: 1.1rem; }
  .site[data-look="painter"] .pt-tin-band { margin-inline: -1.1rem; padding-inline: 1.1rem; }
  .site[data-look="painter"] .pt-tin .hours-table { font-size: 1rem; }
}

/* --- The quote form: fields like taped-off panels, focus a stroke of paint */
.site[data-look="painter"] .contact-form :is(input, textarea) { border: 2px solid #1b1d1e; border-radius: 0; background: #ffffff; padding: 0.75rem 0.9rem; font-size: 1.05rem; }
.site[data-look="painter"] .contact-form :is(input, textarea):focus { outline: 0; border-color: #114232; box-shadow: inset 0 -0.35rem 0 #114232; }
.site[data-look="painter"] .contact-form label { font-weight: 750; }
@media (max-width: 47.99rem) { .site[data-look="painter"] .pt-samples blockquote { min-height: 0; } }
@media (max-width: 51.99rem) { .site[data-look="painter"] .pt-hero.no-photo .pt-fan { --len: clamp(5.5rem, 13svh, 8rem); --blade: 1.6rem; left: 2rem; bottom: 1rem; } }