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

   The whole page stands on a Dutch building site (looks/contractor.tsx):
   bouwbord, funderingsbalk, steiger against kalkzandsteen, plywood
   hoarding, yellow route signs on asphalt, the gate sign on the bouwhek,
   the banner on the fence, and a brick facade with gevelsteen and trasraam.
   Materials are drawn (CSS gradients and small inline SVG tiles), never
   photos, so nothing passes for the business's own work. Type: Archivo
   (heavy capitals, as on the board) with Archivo Narrow for the markings. */

.site[data-look="contractor"] {
  --ct-ink: #141414;
  --ct-white: #ffffff;
  --ct-concrete: #e8e6e0;
  --ct-steel: linear-gradient(90deg, #6f777d, #d9dee1 38%, #a3aaaf 62%, #6d7479);
  --ct-steel-h: linear-gradient(180deg, #6f777d, #d9dee1 38%, #a3aaaf 62%, #6d7479);
  /* Steigerhout: the pale spruce of a scaffold board. */
  --ct-plank: #d8c194;
  --ct-on-plank: #17140f;
  --ct-plank-muted: #4a3d29;
  /* Underlayment plywood of the hoarding. */
  --ct-ply: #e3cba1;
  --ct-on-ply: #17140f;
  --ct-ply-muted: #4f4129;
  /* Yellow temporary route signs, black letters. */
  --ct-sign: #f5c400;
  --ct-on-sign: #111111;
  --ct-asphalt: #26272a;
  --ct-on-asphalt: #f3f2ee;
  --ct-asphalt-muted: #bdbcb6;
  /* Poured concrete of the funderingsbalk. */
  --ct-beam: #4a4946;
  --ct-on-beam: #f6f5f1;
  /* Gevelsteen: a carved sandstone plaque. */
  --ct-stone: #ddd5c4;
  --ct-on-stone: #221e18;
  --ct-stone-muted: #4f483c;
  --ct-narrow: "Archivo Narrow", "Archivo Narrow fallback", "Arial Narrow", var(--font-body);
  /* Kalkzandsteen lijmblokken in half bond: thin glue joints, pale blocks
     with a faint difference in tone. Drawn with gradients (the stylesheet
     carries no url() but fonts); the brick facade's tiles are inline SVG
     on the footer itself (looks/contractor.tsx). */
  --ct-kzs:
    linear-gradient(#cfccc4 0 3px, transparent 3px) 0 0 / 100% 100px,
    conic-gradient(at 3px 100px, transparent 0 270deg, #cfccc4 0) 0 0 / 220px 200px,
    conic-gradient(at 3px 100px, transparent 0 270deg, #cfccc4 0) 110px 100px / 220px 200px,
    linear-gradient(90deg, rgb(0 0 0 / 0.018) 0 220px, transparent 0) 0 0 / 660px 100px,
    linear-gradient(90deg, rgb(255 255 255 / 0.25) 0 220px, transparent 0) 330px 100px / 880px 200px,
    #e6e4de;
  --fs-base: 1.125rem;
  --fs-lead: clamp(1.2rem, 1.08rem + 0.45vw, 1.45rem);
  --fs-h2: clamp(2.35rem, 1.3rem + 3.6vw, 5rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.75vw, 1.85rem);
  --wrap: 78rem;
  font-feature-settings: "kern";
  hyphens: manual;
}
@media (max-width: 40rem) { .site[data-look="contractor"] { --fs-base: 1.0625rem; } }
.site[data-look="contractor"] main > .s + .s { border-top: 0; }
.site[data-look="contractor"] :is(h1, h2) { font-weight: 900; letter-spacing: -0.02em; line-height: 0.95; }
.site[data-look="contractor"] :is(h3, .h3) { font-weight: 800; letter-spacing: -0.005em; }
.site[data-look="contractor"] .lead { color: var(--muted); }
.site[data-look="contractor"] :focus-visible { outline: 3px solid var(--ct-ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--ct-sign); }

/* Buttons: heavy capitals, a hard edge that presses in like a stamp. */
.site[data-look="contractor"] .btn {
  min-height: 56px; padding: 0.85rem 1.5rem; border: 3px solid var(--ct-ink);
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; font-size: 1.05rem;
  box-shadow: 4px 4px 0 var(--ct-ink);
}
.site[data-look="contractor"] .btn:hover { text-decoration: none; }
.site[data-look="contractor"] .btn:active { box-shadow: 0 0 0 var(--ct-ink); translate: 4px 4px; }
@media (prefers-reduced-motion: no-preference) {
  .site[data-look="contractor"] .btn { transition: translate 0.12s ease, box-shadow 0.12s ease; }
  .site[data-look="contractor"] .btn:hover { translate: -2px -2px; box-shadow: 6px 6px 0 var(--ct-ink); }
}
.site[data-look="contractor"] .cta-alt { font-weight: 700; text-decoration-thickness: 2px; }

/* --- Header: the name on a small board, an orange top band. ------------- */
.site[data-look="contractor"] .site-header { background: var(--bg); border-bottom: 3px solid var(--ct-ink); }
.site[data-look="contractor"] .brand { font-weight: 900; letter-spacing: -0.01em; }
.site[data-look="contractor"] .brand-name { display: inline-block; background: var(--ct-white); border: 2px solid var(--ct-ink); border-top: 7px solid var(--primary); padding: 0.3rem 0.6rem 0.25rem; }
.site[data-look="contractor"] .site-header nav a { font-family: var(--ct-narrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.05rem; }
.site[data-look="contractor"] .site-header .btn { min-height: 46px; padding: 0.45rem 1rem; box-shadow: 3px 3px 0 var(--ct-ink); font-size: 0.95rem; }

/* --- Hero: the bouwbord in front of the site photo ----------------------- */
.site[data-look="contractor"] .ct-hero { padding: 0; position: relative; overflow: clip; background: var(--ct-kzs); }
.site[data-look="contractor"] .ct-hero-photo { position: absolute; inset: 0; }
.site[data-look="contractor"] .ct-hero-photo .hero-img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; background: var(--surface); }
.site[data-look="contractor"] .ct-hero-inner { position: relative; z-index: 1; display: flex; align-items: flex-end; min-height: calc(100svh - 4.6rem); padding-top: clamp(1.5rem, 5vh, 4rem); }
.site[data-look="contractor"] .ct-board { width: min(100%, 52rem); filter: drop-shadow(0 18px 24px rgb(0 0 0 / 0.28)); }
.site[data-look="contractor"] .ct-board-panel {
  --text: var(--on-board); --muted: var(--board-muted);
  container-type: inline-size;
  background: var(--board); color: var(--on-board); border: 4px solid var(--on-board);
}
.site[data-look="contractor"] .ct-board-band { background: var(--primary); color: var(--on-primary); padding: clamp(1rem, 3.4cqi, 1.8rem) clamp(1rem, 4cqi, 2.2rem) clamp(0.9rem, 2.8cqi, 1.5rem); border-bottom: 4px solid var(--on-board); }
.site[data-look="contractor"] .ct-board-band :is(h1, h2) {
  margin: 0; max-width: none; color: inherit;
  font-size: clamp(2.5rem, 11.4cqi, 6.4rem); line-height: 0.88; letter-spacing: -0.035em; font-weight: 900;
  overflow-wrap: break-word; hyphens: auto; word-spacing: 0.06em;
}
.site[data-look="contractor"] .ct-board-band.is-long :is(h1, h2) { font-size: clamp(2.1rem, 8.4cqi, 4.6rem); line-height: 0.92; }
.site[data-look="contractor"] .ct-board-lead { margin: 0; padding: 0.85rem clamp(1rem, 4cqi, 2.2rem); font-size: clamp(1.1rem, 0.95rem + 0.4vw, 1.25rem); line-height: 1.4; border-bottom: 2px solid var(--on-board); max-width: none; }
.site[data-look="contractor"] .ct-board-fields { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site[data-look="contractor"] .ct-board-fields > div { display: grid; align-content: start; gap: 0.1rem; padding: 0.5rem clamp(1rem, 4cqi, 2.2rem) 0.6rem; border-bottom: 1px solid var(--on-board); min-width: 0; }
.site[data-look="contractor"] .ct-board-fields > div:nth-child(even) { border-left: 1px solid var(--on-board); }
.site[data-look="contractor"] .ct-board-fields > [data-field="name"] { grid-column: 1 / -1; border-left: 0; }
.site[data-look="contractor"] .ct-board-fields > [data-field="name"] ~ div:nth-child(even) { border-left: 0; }
.site[data-look="contractor"] .ct-board-fields > [data-field="name"] ~ div:nth-child(odd) { border-left: 1px solid var(--on-board); }
.site[data-look="contractor"] .ct-board-fields dt { font-family: var(--ct-narrow); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.site[data-look="contractor"] .ct-board-fields dd { margin: 0; font-weight: 800; font-size: clamp(1rem, 0.94rem + 0.3vw, 1.2rem); line-height: 1.25; overflow-wrap: break-word; }
.site[data-look="contractor"] .ct-board-fields [data-field="name"] dd { font-size: clamp(1.35rem, 5cqi, 2.1rem); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.05; hyphens: auto; }
.site[data-look="contractor"] .ct-board-fields [data-field="phone"] dd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.site[data-look="contractor"] .ct-board-fields a { text-decoration: none; }
/* An odd number of half-width fields: the last one runs across. */
.site[data-look="contractor"] .ct-board-fields > [data-field="name"] ~ div:last-child:nth-child(even) { grid-column: 1 / -1; border-left: 0; }
.site[data-look="contractor"] .ct-board-fields:not(:has([data-field="name"])) > div:last-child:nth-child(odd) { grid-column: 1 / -1; border-left: 0; }
.site[data-look="contractor"] .ct-board .actions { margin: 0; padding: 1rem clamp(1rem, 4cqi, 2.2rem) 1.15rem; }
/* The customer's highlights: one more field, across the board. */
.site[data-look="contractor"] .ct-board-notes { display: grid; gap: 0.1rem; padding: 0.5rem clamp(1rem, 4cqi, 2.2rem) 0.6rem; border-bottom: 1px solid var(--on-board); }
.site[data-look="contractor"] .ct-board-notes-label { margin: 0; font-family: var(--ct-narrow); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.site[data-look="contractor"] .ct-board-notes-text { margin: 0; max-width: none; font-weight: 800; font-size: clamp(1rem, 0.94rem + 0.3vw, 1.2rem); line-height: 1.3; overflow-wrap: break-word; }
/* Two galvanised posts down to the ground. */
.site[data-look="contractor"] .ct-posts {
  display: block; height: clamp(2rem, 6vh, 5rem); margin-inline: 12%;
  background: var(--ct-steel) left / 18px 100% no-repeat, var(--ct-steel) right / 18px 100% no-repeat;
}
.site[data-look="contractor"] .ct-hero:not(.has-photo) .ct-hero-inner { min-height: 0; padding-top: clamp(3rem, 8vw, 6rem); }
@media (prefers-reduced-motion: no-preference) {
  .site[data-look="contractor"] .ct-board-panel { animation: ct-hoist 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  @keyframes ct-hoist { from { translate: 0 2.5rem; } }
}
@media (max-width: 51.99rem) {
  .site[data-look="contractor"] .ct-hero-photo { position: relative; height: 31svh; min-height: 13rem; }
  .site[data-look="contractor"] .ct-hero-inner { min-height: 0; padding-top: 0; margin-top: -4.5rem; }
  .site[data-look="contractor"] .ct-hero:not(.has-photo) .ct-hero-inner { margin-top: 0; padding-top: 2rem; }
  .site[data-look="contractor"] .ct-board { filter: drop-shadow(0 10px 14px rgb(0 0 0 / 0.25)); }
  .site[data-look="contractor"] .ct-board-panel { border-width: 3px; }
  .site[data-look="contractor"] .ct-board-band { border-bottom-width: 3px; }
  .site[data-look="contractor"] .ct-board-band :is(h1, h2) { font-size: clamp(2.3rem, 12.5cqi, 4rem); }
  .site[data-look="contractor"] .ct-board-lead { font-size: 1.05rem; padding-block: 0.75rem; }
  .site[data-look="contractor"] .ct-board-fields > div { padding-block: 0.45rem 0.5rem; }
  .site[data-look="contractor"] .ct-board-fields dt { font-size: 0.72rem; }
  .site[data-look="contractor"] .ct-board-fields dd { font-size: 0.98rem; }
  .site[data-look="contractor"] .ct-board .actions { padding-block: 0.9rem 1rem; gap: 0.5rem 1rem; }
  .site[data-look="contractor"] .ct-posts { height: 1.5rem; }
  /* On a phone the call comes first, the board's details under it. */
  .site[data-look="contractor"] .ct-board-panel { display: flex; flex-direction: column; }
  .site[data-look="contractor"] .ct-board-fields { order: 3; border-top: 2px solid var(--on-board); }
  .site[data-look="contractor"] .ct-board .actions { order: 2; }
  .site[data-look="contractor"] .ct-board-fields > div:last-child { border-bottom: 0; }
  .site[data-look="contractor"] .ct-board-notes { order: 4; border-bottom: 0; border-top: 1px solid var(--on-board); padding-block: 0.45rem 0.6rem; }
  .site[data-look="contractor"] .ct-board-notes-label { font-size: 0.72rem; }
  .site[data-look="contractor"] .ct-board-notes-text { font-size: 0.98rem; }
  .site[data-look="contractor"] .ct-scaffold { --std: 12px; --bay-pad: 0.85rem; }
  .site[data-look="contractor"] .ct-plank { padding-inline: 1.6rem; }
  .site[data-look="contractor"] .ct-plank::before, .site[data-look="contractor"] .ct-plank::after { width: 0.75rem; }
}

/* --- Trust strip: only on a page without a hero (else the claims are on the
   bouwbord): one plain line on the funderingsbalk. --------------------------- */
.site[data-look="contractor"] .ct-foundation {
  padding-block: clamp(1.1rem, 2.5vw, 1.8rem);
  background:
    linear-gradient(180deg, #6a6864 0 3px, transparent 3px),
    repeating-linear-gradient(180deg, transparent 0 22px, rgb(0 0 0 / 0.09) 22px 23px),
    var(--ct-beam);
  color: var(--ct-on-beam);
  border-top: 0 !important;
}
.site[data-look="contractor"] .ct-claims { display: flex; flex-wrap: wrap; gap: 0.25rem 2rem; font-weight: 700; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); line-height: 1.3; }

/* --- Services: steigerplanken on a scaffold against kalkzandsteen ---------- */
.site[data-look="contractor"] .ct-wall { background: var(--ct-kzs); padding-block: clamp(4rem, 9vw, 7.5rem) 0; overflow: clip; }
.site[data-look="contractor"] .ct-wall-head { max-width: 50rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.site[data-look="contractor"] .ct-wall-head :is(h1, h2) { margin-bottom: 0.25em; }
.site[data-look="contractor"] .ct-wall-head .lead { margin: 0; color: #3b3a36; }
.site[data-look="contractor"] .ct-scaffold {
  --std: 18px; --bay-pad: clamp(1.4rem, 3vw, 2.6rem); --brace: linear-gradient(to top right, transparent calc(50% - 8px), #7c8389 calc(50% - 8px), #cfd4d7 calc(50% - 2px), #8e959a calc(50% + 6px), transparent calc(50% + 6px));
  position: relative; padding: 0 var(--bay-pad) clamp(3rem, 7vw, 5rem);
  /* The diagonal brace (schoor) across the bay, behind the planks. */
  background: var(--brace) var(--std) 0 / calc(100% - 2 * var(--std)) 100% no-repeat;
}
.site[data-look="contractor"] .ct-two-bays { background: var(--brace) 0 0 / 50% 100% no-repeat, var(--brace) 100% 0 / 50% 100% no-repeat; }
/* The standards (staanders), with a base plate on the ground. */
.site[data-look="contractor"] .ct-scaffold::before {
  content: ''; position: absolute; inset: -1.25rem 0 0 0; pointer-events: none;
  background: var(--ct-steel) 0 0 / var(--std) 100% no-repeat, var(--ct-steel) 100% 0 / var(--std) 100% no-repeat;
}
.site[data-look="contractor"] .ct-scaffold::after { content: ''; position: absolute; left: -12px; right: -12px; bottom: 0; height: 12px; background: linear-gradient(90deg, #2d2c29 0 42px, transparent 42px calc(100% - 42px), #2d2c29 calc(100% - 42px)); }
.site[data-look="contractor"] .ct-two-bays::before { background: var(--ct-steel) 0 0 / var(--std) 100% no-repeat, var(--ct-steel) 50% 0 / var(--std) 100% no-repeat, var(--ct-steel) 100% 0 / var(--std) 100% no-repeat; }
.site[data-look="contractor"] .ct-lifts { display: grid; gap: clamp(1.6rem, 3vw, 2.4rem) 0; margin: 0; border: 0; }
.site[data-look="contractor"] .ct-lift { position: relative; padding: 0 0 11px; border: 0; }
/* The ledger (the horizontal tube) under each plank, clamped to the standards. */
.site[data-look="contractor"] .ct-lift::after {
  content: ''; position: absolute; left: calc(-1 * var(--bay-pad)); right: calc(-1 * var(--bay-pad)); bottom: 0; height: 12px;
  background:
    linear-gradient(90deg, #2f3336 0 26px, transparent 26px calc(100% - 26px), #2f3336 calc(100% - 26px)) center / 100% 70% no-repeat,
    var(--ct-steel-h);
}
.site[data-look="contractor"] .ct-plank {
  --text: var(--on-plank); --muted: var(--ct-plank-muted);
  position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 2rem;
  padding: clamp(0.95rem, 2vw, 1.4rem) clamp(2.2rem, 4vw, 3rem) clamp(1.1rem, 2.2vw, 1.55rem);
  color: var(--ct-on-plank);
  background:
    repeating-linear-gradient(178.6deg, transparent 0 9px, rgb(110 78 30 / 0.07) 9px 10px, transparent 10px 23px, rgb(110 78 30 / 0.05) 23px 25px),
    repeating-linear-gradient(181.2deg, transparent 0 31px, rgb(90 60 20 / 0.06) 31px 33px),
    linear-gradient(90deg, rgb(255 255 255 / 0.12), transparent 30%, rgb(0 0 0 / 0.04) 70%, rgb(255 255 255 / 0.08)),
    var(--ct-plank);
  box-shadow: inset 0 -6px 0 #b39563, inset 0 1px 0 rgb(255 255 255 / 0.45);
}
/* The galvanised end bands of a scaffold board, with their rivets. */
.site[data-look="contractor"] .ct-plank::before,
.site[data-look="contractor"] .ct-plank::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: clamp(0.9rem, 1.6vw, 1.25rem);
  background: radial-gradient(circle, #5e6569 0 2px, transparent 2.5px) 50% 30% / 100% 40% no-repeat, radial-gradient(circle, #5e6569 0 2px, transparent 2.5px) 50% 70% / 100% 40% no-repeat, var(--ct-steel-h);
}
.site[data-look="contractor"] .ct-plank::before { left: 0; }
.site[data-look="contractor"] .ct-plank::after { right: 0; }
.site[data-look="contractor"] .ct-plank-text { flex: 1 1 22rem; min-width: 0; }
.site[data-look="contractor"] .ct-plank :is(h2, h3) { margin: 0; font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2.15rem); font-weight: 900; text-transform: uppercase; letter-spacing: -0.015em; line-height: 1; overflow-wrap: break-word; hyphens: auto; }
.site[data-look="contractor"] .ct-plank .service-note { margin: 0.45rem 0 0; color: var(--ct-plank-muted); font-size: 1.02rem; line-height: 1.45; max-width: 44rem; }
.site[data-look="contractor"] .ct-plank .price { flex: none; margin: 0; font-family: var(--ct-narrow); font-weight: 700; font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; white-space: normal; text-align: right; }
.site[data-look="contractor"] .ct-plank .price-from, .site[data-look="contractor"] .ct-plank .price-unit { font-size: 0.72em; color: var(--ct-plank-muted); text-transform: uppercase; letter-spacing: 0.06em; }
@media (min-width: 52rem) {
  .site[data-look="contractor"] .ct-two-bays .ct-lifts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(2 * var(--bay-pad)); }
  .site[data-look="contractor"] .ct-two-bays .ct-lift::after { left: calc(-1 * var(--bay-pad)); right: calc(-1 * var(--bay-pad)); }
  .site[data-look="contractor"] .ct-two-bays .ct-plank { flex-direction: column; align-items: stretch; height: 100%; }
  .site[data-look="contractor"] .ct-two-bays .ct-plank-text { flex: 1 1 auto; }
  .site[data-look="contractor"] .ct-two-bays .ct-plank .price { text-align: left; }
}
@media (prefers-reduced-motion: no-preference) {
  .site[data-look="contractor"] .ct-plank { transition: transform 0.2s ease, box-shadow 0.2s ease; }
  .site[data-look="contractor"] .ct-lift:hover .ct-plank { transform: translateY(-4px); box-shadow: inset 0 -6px 0 #b39563, inset 0 1px 0 rgb(255 255 255 / 0.45), 0 6px 0 rgb(0 0 0 / 0.12); }
  @supports (animation-timeline: view()) {
    .site[data-look="contractor"] .ct-plank { animation: ct-slide linear forwards; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    @keyframes ct-slide { from { translate: -1.25rem 0; } }
  }
}

/* --- About: photo full-bleed, text on schoon beton ------------------------ */
.site[data-look="contractor"] .ct-about { max-width: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--ct-concrete); }
.site[data-look="contractor"] .ct-about-photo { min-width: 0; }
.site[data-look="contractor"] .ct-about-photo .about-img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; min-height: 22rem; max-height: none; }
.site[data-look="contractor"] .ct-about-text {
  padding: clamp(3rem, 7vw, 6.5rem) max(var(--gap), (100vw - var(--wrap)) / 2);
  /* Fair-faced concrete: formwork panel joints and the tie holes. */
  background:
    radial-gradient(circle, #a19e97 0 4px, #bdbab3 4px 5.5px, transparent 6px) -30px -30px / 360px 240px,
    linear-gradient(90deg, rgb(0 0 0 / 0.08) 1px, transparent 1px) 0 0 / 360px 100%,
    linear-gradient(180deg, rgb(0 0 0 / 0.08) 1px, transparent 1px) 0 0 / 100% 240px,
    linear-gradient(180deg, #d3d1cb, #cbc9c2);
  color: var(--ct-ink);
}
.site[data-look="contractor"] .ct-about-text > * { max-width: 38rem; }
.site[data-look="contractor"] .ct-about-text :is(h1, h2) { margin-bottom: 0.45em; }
.site[data-look="contractor"] .ct-about-text p { color: #26251f; }
.site[data-look="contractor"] .ct-about-text > p:first-of-type { font-size: clamp(1.35rem, 1.05rem + 1vw, 1.9rem); line-height: 1.3; font-weight: 600; color: var(--ct-ink); letter-spacing: -0.01em; }
@media (min-width: 52rem) {
  .site[data-look="contractor"] .ct-about.has-photo { grid-template-columns: 1fr 1fr; min-height: 38rem; }
  .site[data-look="contractor"] .ct-about.has-photo .ct-about-text { padding-inline: clamp(2.5rem, 5vw, 5rem) max(var(--gap), (100vw - var(--wrap)) / 2); align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
  .site[data-look="contractor"] .about-image_right.has-photo .ct-about-photo { order: 2; }
  .site[data-look="contractor"] .about-image_right.has-photo .ct-about-text { padding-inline: max(var(--gap), (100vw - var(--wrap)) / 2) clamp(2.5rem, 5vw, 5rem); }
}
@media (max-width: 51.99rem) { .site[data-look="contractor"] .ct-about-photo .about-img { height: 62vw; min-height: 14rem; } }

/* --- Reviews: painted on the plywood hoarding ------------------------------ */
.site[data-look="contractor"] .ct-hoarding {
  --text: var(--ct-on-ply); --muted: var(--ct-ply-muted);
  color: var(--ct-on-ply);
  padding-block: clamp(4rem, 8vw, 7rem);
  background:
    radial-gradient(circle, #6d6a63 0 2.5px, transparent 3px) -0.9rem 1.4rem / 30.5rem 9rem,
    linear-gradient(90deg, rgb(70 48 18 / 0.35) 2px, transparent 2px) -1px 0 / 30.5rem 100%,
    repeating-linear-gradient(91deg, transparent 0 17px, rgb(150 105 45 / 0.08) 17px 19px, transparent 19px 53px),
    repeating-linear-gradient(88.7deg, transparent 0 41px, rgb(120 80 30 / 0.07) 41px 44px, transparent 44px 97px),
    repeating-linear-gradient(90.4deg, transparent 0 7px, rgb(255 255 255 / 0.12) 7px 8px, transparent 8px 29px),
    var(--ct-ply);
}
.site[data-look="contractor"] .ct-hoarding :is(h1, h2) { max-width: 20ch; }
.site[data-look="contractor"] .ct-boards { display: grid; gap: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 6vw, 6rem); margin-top: clamp(2rem, 4vw, 3rem); grid-template-columns: minmax(0, 1fr); quotes: '„' '”' '‚' '’'; }
@media (min-width: 52rem) { .site[data-look="contractor"] .ct-hoarding:not(.is-single) .ct-boards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.site[data-look="contractor"] .ct-boards figure { margin: 0; padding: 0; border: 0; }
.site[data-look="contractor"] .ct-boards blockquote { margin: 0 0 1.25rem; font-size: clamp(1.45rem, 1.05rem + 1.5vw, 2.45rem); line-height: 1.16; font-weight: 800; letter-spacing: -0.015em; text-wrap: pretty; }
.site[data-look="contractor"] .ct-hoarding.is-single blockquote { font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3.6rem); max-width: 30ch; }
.site[data-look="contractor"] .ct-boards blockquote p { margin: 0; }
.site[data-look="contractor"] .ct-boards blockquote p::before { content: open-quote; }
.site[data-look="contractor"] .ct-boards blockquote p::after { content: close-quote; }
.site[data-look="contractor"] .ct-boards figcaption { font-family: var(--ct-narrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.05rem; color: var(--ct-ply-muted); }
.site[data-look="contractor"] .ct-boards figcaption::before { content: ''; display: inline-block; width: 2.2rem; height: 3px; background: currentColor; vertical-align: 0.3em; margin-right: 0.7rem; }

/* --- Werkgebied: yellow route signs on the asphalt ------------------------ */
.site[data-look="contractor"] .ct-route {
  --text: var(--ct-on-asphalt); --muted: var(--ct-asphalt-muted);
  color: var(--ct-on-asphalt);
  padding-block: clamp(4rem, 8vw, 6.5rem) clamp(5rem, 9vw, 7.5rem);
  background:
    repeating-linear-gradient(90deg, #ecebe6 0 3.5rem, transparent 3.5rem 6rem) 0 calc(100% - 1.6rem) / 100% 10px no-repeat,
    var(--ct-asphalt);
}
.site[data-look="contractor"] .ct-route-inner { display: grid; gap: 2rem clamp(2rem, 5vw, 5rem); align-items: start; }
@media (min-width: 52rem) { .site[data-look="contractor"] .ct-route-inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.site[data-look="contractor"] .ct-route .area-body { color: var(--ct-asphalt-muted); font-size: var(--fs-lead); max-width: 30rem; }
/* The signs on one mast, pointing either way; a long list of places
   (eight or more) is set as a row of loose signs instead. */
.site[data-look="contractor"] .ct-signs { --tip: 1.5rem; position: relative; display: grid; gap: 0.75rem; margin: 0; padding: 0.5rem 0 3.5rem; font-size: 1rem; }
.site[data-look="contractor"] .ct-signs::before { content: ''; position: absolute; top: -1rem; bottom: 0; left: calc(50% - 9px); width: 18px; background: var(--ct-steel); }
.site[data-look="contractor"] .ct-signs li { position: relative; min-width: 0; justify-self: start; max-width: calc(50% + 0.5rem); margin-left: calc(50% - 0.5rem); padding: 4px; background: var(--ct-on-sign); clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%); }
.site[data-look="contractor"] .ct-signs li::after { content: none !important; }
.site[data-look="contractor"] .ct-signs span {
  display: block; padding: 0.6rem calc(var(--tip) + 0.7rem) 0.55rem 1.1rem;
  background: var(--ct-sign); color: var(--ct-on-sign);
  clip-path: polygon(0 0, calc(100% - var(--tip) + 2px) 0, calc(100% - 3px) 50%, calc(100% - var(--tip) + 2px) 100%, 0 100%);
  font-family: var(--ct-narrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: clamp(1.35rem, 1rem + 1.2vw, 2.1rem); line-height: 1.05; overflow-wrap: anywhere; white-space: normal;
}
.site[data-look="contractor"] .ct-signs li:nth-child(even) { justify-self: end; margin-left: 0; margin-right: calc(50% - 0.5rem); clip-path: polygon(var(--tip) 0, 100% 0, 100% 100%, var(--tip) 100%, 0 50%); }
.site[data-look="contractor"] .ct-signs li:nth-child(even) span { padding: 0.6rem 1.1rem 0.55rem calc(var(--tip) + 0.7rem); clip-path: polygon(calc(var(--tip) - 2px) 0, 100% 0, 100% 100%, calc(var(--tip) - 2px) 100%, 3px 50%); }
@media (max-width: 40rem) {
  .site[data-look="contractor"] .ct-signs::before { left: 0.6rem; }
  .site[data-look="contractor"] .ct-signs li, .site[data-look="contractor"] .ct-signs li:nth-child(even) { justify-self: start; margin: 0 0 0 1.1rem; max-width: calc(100% - 1.1rem); clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%); }
  .site[data-look="contractor"] .ct-signs li:nth-child(even) span { padding: 0.6rem calc(var(--tip) + 0.7rem) 0.55rem 1.1rem; clip-path: polygon(0 0, calc(100% - var(--tip) + 2px) 0, calc(100% - 3px) 50%, calc(100% - var(--tip) + 2px) 100%, 0 100%); }
}
.site[data-look="contractor"] .ct-signs:has(> li:nth-child(8)) { display: flex; flex-wrap: wrap; gap: 0.8rem; padding-bottom: 1rem; }
.site[data-look="contractor"] .ct-signs:has(> li:nth-child(8))::before { content: none; }
.site[data-look="contractor"] .ct-signs:has(> li:nth-child(8)) li { margin: 0 !important; max-width: 100%; clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%) !important; }
.site[data-look="contractor"] .ct-signs:has(> li:nth-child(8)) li span { padding: 0.5rem calc(var(--tip) + 0.6rem) 0.45rem 0.9rem !important; clip-path: polygon(0 0, calc(100% - var(--tip) + 2px) 0, calc(100% - 3px) 50%, calc(100% - var(--tip) + 2px) 100%, 0 100%) !important; font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.4rem); }
@media (prefers-reduced-motion: no-preference) {
  .site[data-look="contractor"] .ct-signs li { transition: translate 0.18s ease; }
  .site[data-look="contractor"] .ct-signs li:hover { translate: 0.4rem 0; }
}

/* --- Hours: the sign at the gate, wired to the bouwhek mesh ---------------- */
.site[data-look="contractor"] .ct-gate {
  padding-block: clamp(3.5rem, 7vw, 6rem);
  background:
    linear-gradient(90deg, #8b9297 2px, transparent 2px) 0 0 / 1.6rem 100%,
    linear-gradient(180deg, #8b9297 2px, transparent 2px) 0 0 / 100% 4.4rem,
    var(--ct-concrete);
}
.site[data-look="contractor"] .ct-gate-inner { display: grid; gap: 2rem clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 52rem) { .site[data-look="contractor"] .ct-gate-inner { grid-template-columns: minmax(0, 36rem) minmax(0, 26rem); } }
.site[data-look="contractor"] .ct-gate-sign {
  container-type: inline-size; position: relative; background: var(--ct-white); color: var(--ct-ink); border: 4px solid var(--ct-ink);
  padding: 0 clamp(1.1rem, 3vw, 2rem) 0.8rem;
}
/* Binders twisted round the mesh at the sign's corners. */
.site[data-look="contractor"] .ct-gate-sign::before,
.site[data-look="contractor"] .ct-gate-sign::after { content: ''; position: absolute; top: -10px; width: 8px; height: 22px; background: #1d1d1d; border-radius: 2px; }
.site[data-look="contractor"] .ct-gate-sign::before { left: 1.2rem; }
.site[data-look="contractor"] .ct-gate-sign::after { right: 1.2rem; }
.site[data-look="contractor"] .ct-gate-sign :is(h1, h2) { margin: 0 calc(-1 * clamp(1.1rem, 3vw, 2rem)) 0.4rem; padding: 0.8rem clamp(1.1rem, 3vw, 2rem) 0.7rem; background: var(--primary); color: var(--on-primary); border-bottom: 4px solid var(--ct-ink); font-size: clamp(1.6rem, 8.5cqi, 3rem); overflow-wrap: break-word; hyphens: auto; }
.site[data-look="contractor"] .ct-gate .hours-table { font-size: 1.2rem; }
.site[data-look="contractor"] .ct-gate .hours-table th { font-weight: 800; text-transform: uppercase; font-size: 1rem; letter-spacing: 0.02em; }
.site[data-look="contractor"] .ct-gate .hours-table td { font-family: var(--ct-narrow); font-weight: 700; font-size: 1.25rem; }
.site[data-look="contractor"] .ct-gate .hours-table :is(th, td) { border-bottom-color: #c9c6be; }
.site[data-look="contractor"] .ct-gate .hours-table tr:last-child :is(th, td) { border-bottom: 0; }
.site[data-look="contractor"] .ct-gate .hours-table th::after { background: var(--primary); color: var(--on-primary); }
.site[data-look="contractor"] .ct-gate .hours-table th::before { background: var(--primary) !important; width: 6px !important; }
@media (max-width: 40rem) {
  .site[data-look="contractor"] .ct-gate .hours-table th { white-space: normal; }
  .site[data-look="contractor"] .ct-gate .hours-table th::after { display: block; width: fit-content; margin: 0.3rem 0 0; }
  .site[data-look="contractor"] .ct-gate .hours-table td { white-space: nowrap; font-size: 1.1rem; }
}
.site[data-look="contractor"] .ct-gate-note { position: relative; justify-self: start; background: var(--ct-white); color: var(--ct-ink); padding: 1.25rem clamp(1.1rem, 3vw, 1.75rem); border: 4px solid var(--ct-ink); max-width: 30rem; }
.site[data-look="contractor"] .ct-gate-note::before, .site[data-look="contractor"] .ct-gate-note::after { content: ''; position: absolute; top: -10px; width: 8px; height: 22px; background: #1d1d1d; border-radius: 2px; }
.site[data-look="contractor"] .ct-gate-note::before { left: 1.2rem; }
.site[data-look="contractor"] .ct-gate-note::after { right: 1.2rem; }
.site[data-look="contractor"] .ct-gate-note .hours-place { color: #3b3a36; margin-bottom: 0.75rem; }
.site[data-look="contractor"] .ct-gate-note .hours-call { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight: 900; }
.site[data-look="contractor"] .ct-gate-note .hours-call a { text-decoration: none; }

/* --- FAQ: on the bestektekening, heavy rules, the plus on a yellow nut --- */
.site[data-look="contractor"] .s-faq {
  background:
    linear-gradient(90deg, rgb(40 70 90 / 0.1) 1px, transparent 1px) 0 0 / 6rem 6rem,
    linear-gradient(180deg, rgb(40 70 90 / 0.1) 1px, transparent 1px) 0 0 / 6rem 6rem,
    linear-gradient(90deg, rgb(40 70 90 / 0.045) 1px, transparent 1px) 0 0 / 1.2rem 1.2rem,
    linear-gradient(180deg, rgb(40 70 90 / 0.045) 1px, transparent 1px) 0 0 / 1.2rem 1.2rem,
    #f7f7f4;
  padding-block: clamp(4rem, 8vw, 7rem);
}
.site[data-look="contractor"] .s-faq .faq-items { max-width: 58rem; }
@media (min-width: 60rem) {
  .site[data-look="contractor"] .s-faq .wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .site[data-look="contractor"] .s-faq .wrap > :is(h1, h2) { position: sticky; top: 7rem; }
  .site[data-look="contractor"] .s-faq .faq-items { margin-top: 0; }
}
.site[data-look="contractor"] .s-faq details { border-bottom: 3px solid var(--ct-ink); }
.site[data-look="contractor"] .s-faq details:first-child { border-top: 6px solid var(--ct-ink); }
.site[data-look="contractor"] .s-faq summary { min-height: 4.5rem; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); font-weight: 800; padding-block: 0.9rem; line-height: 1.25; }
.site[data-look="contractor"] .s-faq summary::after {
  content: '+'; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; font-weight: 800; font-size: 1.6rem;
  background: var(--ct-sign); color: var(--ct-on-sign);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.site[data-look="contractor"] .s-faq details[open] summary::after { content: '\2212'; }
.site[data-look="contractor"] .s-faq details p { color: #3b3a36; font-size: 1.1rem; }
.site[data-look="contractor"] .s-faq dt { font-size: 1.3rem; font-weight: 800; margin-top: 1.6rem; padding-top: 1rem; border-top: 3px solid var(--ct-ink); }
.site[data-look="contractor"] .s-faq dd { color: #3b3a36; }

/* --- Call to action: the banner on the bouwhekken -------------------------- */
.site[data-look="contractor"] .ct-fence { padding: clamp(9rem, 22vw, 17rem) 0 0; position: relative; overflow: clip; background: #9fb4c2; }
.site[data-look="contractor"] .ct-fence-behind { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.site[data-look="contractor"] .ct-fence-run {
  position: relative; padding-block: 1.4rem 0;
  /* The fence: galvanised mesh between top and bottom rails, posts per panel. */
  background:
    var(--ct-steel-h) 0 0 / 100% 10px no-repeat,
    linear-gradient(90deg, #b9c0c4 0 8px, transparent 8px) -4px 0 / clamp(14rem, 25vw, 22rem) 100%,
    linear-gradient(90deg, rgb(205 211 214 / 0.9) 1.5px, transparent 1.5px) 0 0 / 1.6rem 100%,
    linear-gradient(180deg, rgb(205 211 214 / 0.9) 1.5px, transparent 1.5px) 0 0 / 100% 4.4rem,
    rgb(40 42 44 / 0.25);
}
.site[data-look="contractor"] .ct-banner {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem;
  padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1.25rem, 4vw, 3.5rem);
  background: var(--primary); color: var(--on-primary);
  box-shadow: 0 6px 0 rgb(0 0 0 / 0.18);
}
/* Tie wraps along the edges of the banner. */
.site[data-look="contractor"] .ct-banner::before,
.site[data-look="contractor"] .ct-banner::after { content: ''; position: absolute; left: 0; right: 0; height: 12px; background: radial-gradient(circle, #1b1b1b 0 4px, transparent 4.5px) 1rem 50% / 6rem 100% repeat-x; }
.site[data-look="contractor"] .ct-banner::before { top: 0.35rem; }
.site[data-look="contractor"] .ct-banner::after { bottom: 0.35rem; }
.site[data-look="contractor"] .ct-banner-text { max-width: 44rem; min-width: 0; }
.site[data-look="contractor"] .ct-banner :is(h1, h2) { margin: 0 0 0.3em; color: inherit; font-size: clamp(2.3rem, 1.2rem + 4.2vw, 5.4rem); line-height: 0.92; overflow-wrap: break-word; hyphens: auto; }
.site[data-look="contractor"] .ct-banner p { margin: 0; font-size: var(--fs-lead); color: inherit; }
.site[data-look="contractor"] .ct-banner .btn { background: var(--ct-ink); color: var(--ct-white); border-color: var(--ct-ink); box-shadow: 4px 4px 0 rgb(0 0 0 / 0.35); font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); min-height: 64px; padding-inline: 1.75rem; white-space: normal; text-align: left; }
.site[data-look="contractor"] .ct-banner .cta-detail { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The concrete feet the fence panels stand in. */
.site[data-look="contractor"] .ct-feet {
  display: block; height: 2.6rem; margin-top: 1.4rem;
  background:
    linear-gradient(180deg, #8d8b86, #6e6c67) -3rem 100% / clamp(14rem, 25vw, 22rem) 1.6rem repeat-x;
  -webkit-mask: linear-gradient(90deg, transparent 0 calc(50% - 3.2rem), #000 calc(50% - 3.2rem) calc(50% + 3.2rem), transparent 0) 0 0 / clamp(14rem, 25vw, 22rem) 100%;
  mask: linear-gradient(90deg, #000 0 6.4rem, transparent 6.4rem) -3.2rem 0 / clamp(14rem, 25vw, 22rem) 100%;
}
.site[data-look="contractor"] .ct-fence-run::after { content: ''; display: block; height: 0.9rem; background: #3a3936; }

/* --- Contact: the bouwbord again, the number as its biggest field ------- */
.site[data-look="contractor"] .s-contact { background: var(--ct-kzs); padding-block: clamp(4rem, 8vw, 7rem); }
.site[data-look="contractor"] .s-contact .contact-details { container-type: inline-size; display: block; background: var(--ct-white); color: var(--ct-ink); border: 4px solid var(--ct-ink); box-shadow: 0 16px 24px -12px rgb(0 0 0 / 0.3); min-width: 0; }
.site[data-look="contractor"] .s-contact .contact-details > :is(h1, h2) { margin: 0; padding: clamp(1rem, 2.5vw, 1.6rem) clamp(1rem, 3vw, 2.2rem) clamp(0.85rem, 2vw, 1.3rem); background: var(--primary); color: var(--on-primary); border-bottom: 4px solid var(--ct-ink); font-size: clamp(2.4rem, 1.2rem + 4.6vw, 6.2rem); line-height: 0.9; overflow-wrap: break-word; hyphens: auto; }
.site[data-look="contractor"] .s-contact .contact-details > .lead { margin: 0; padding: 1rem clamp(1rem, 3vw, 2.2rem); max-width: none; color: #3b3a36; border-bottom: 2px solid var(--ct-ink); }
.site[data-look="contractor"] .s-contact .contact-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border: 0; }
.site[data-look="contractor"] .s-contact .contact-list li:last-child:nth-child(even) { grid-column: 1 / -1; border-left: 0 !important; }
.site[data-look="contractor"] .s-contact .contact-list li { padding-inline: clamp(1rem, 3vw, 2.2rem); border-bottom: 0; border-top: 1px solid var(--ct-ink); min-width: 0; }
.site[data-look="contractor"] .s-contact .contact-list li:first-child { grid-column: 1 / -1; border-top: 0; }
.site[data-look="contractor"] .s-contact .contact-list li:nth-child(odd):not(:first-child) { border-left: 1px solid var(--ct-ink); }
.site[data-look="contractor"] .s-contact .contact-link { padding-block: 1rem 1.15rem; }
.site[data-look="contractor"] .s-contact .contact-label { font-family: var(--ct-narrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; color: #4a4843; }
.site[data-look="contractor"] .s-contact .contact-value { font-weight: 900; letter-spacing: -0.02em; font-size: clamp(1.3rem, 1.05rem + 1vw, 2rem); }
.site[data-look="contractor"] .s-contact .contact-list li:first-child .contact-value { white-space: nowrap; font-size: clamp(1.9rem, 11.5cqi, 6.4rem); line-height: 0.95; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.site[data-look="contractor"] .s-contact .contact-also, .site[data-look="contractor"] .s-contact .contact-note { font-weight: 700; }
.site[data-look="contractor"] .s-contact .contact-also { margin-top: -0.6rem; margin-bottom: 0.7rem; }
@media (max-width: 40rem) { .site[data-look="contractor"] .s-contact .contact-list { grid-template-columns: minmax(0, 1fr); } .site[data-look="contractor"] .s-contact .contact-list li { border-left: 0 !important; } }
@media (min-width: 52rem) {
  .site[data-look="contractor"] .contact-form_and_details .contact-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .site[data-look="contractor"] .contact-form_and_details .contact-list { grid-template-columns: minmax(0, 1fr); }
  .site[data-look="contractor"] .contact-form_and_details .contact-list li { border-left: 0 !important; grid-column: 1 / -1; }
}

/* After the request form (also on the wall), the contact board stands on plain concrete. */
.site[data-look="contractor"] .s-request + .s-contact { background: var(--ct-concrete); }
.site[data-look="contractor"] .ct-banner.is-long :is(h1, h2) { font-size: clamp(2rem, 1.1rem + 2.8vw, 3.8rem); }

/* --- Forms (contact form, request form, booking): the werkbon on a board -- */
.site[data-look="contractor"] :is(.contact-form, .request-form) {
  background: var(--ct-white); --bg: var(--ct-white); color: var(--ct-ink);
  border: 4px solid var(--ct-ink); border-top: 18px solid var(--primary); box-shadow: inset 0 3px 0 var(--ct-ink);
  padding: clamp(1.25rem, 3.5vw, 2.25rem);
}
.site[data-look="contractor"] :where(.site form) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select) { border: 2px solid var(--ct-ink); border-radius: 0; }
.site[data-look="contractor"] :is(.contact-form, .request-form) label, .site[data-look="contractor"] .request-form legend { font-weight: 800; }
.site[data-look="contractor"] .request-step > legend { font-weight: 900; text-transform: uppercase; }
.site[data-look="contractor"] .s-request { background: var(--ct-kzs); padding-block: clamp(4rem, 8vw, 6.5rem); }
.site[data-look="contractor"] .s-booking { background: var(--ct-concrete); }
.site[data-look="contractor"] .s-booking .booking-services { background: var(--ct-white); border: 4px solid var(--ct-ink); border-top: 18px solid var(--primary); padding-inline: clamp(1rem, 3vw, 1.75rem); }
.site[data-look="contractor"] .booking-services li:last-child { border-bottom: 0; }
.site[data-look="contractor"] .booking-name { font-weight: 800; text-transform: uppercase; font-size: 1.1rem; }

/* --- Projects (the customer's own photos): each with its plate ------------- */
.site[data-look="contractor"] .ct-projects .gallery-items { gap: clamp(1rem, 2.5vw, 2rem); }
.site[data-look="contractor"] .ct-projects .gallery-items li { background: none; }
.site[data-look="contractor"] .ct-projects figure { margin: 0; height: 100%; display: flex; flex-direction: column; }
.site[data-look="contractor"] .ct-projects img { border: 4px solid var(--ct-ink); border-bottom: 0; flex: 1; object-fit: cover; }
.site[data-look="contractor"] .ct-plate { margin: 0; padding: 0.65rem 0.9rem; background: var(--ct-white); color: var(--ct-ink); border: 4px solid var(--ct-ink); border-top-width: 3px; font-weight: 800; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.02em; line-height: 1.3; }

/* --- Footer: brick facade, gevelsteen, trasraam ----------------------------- */
.site[data-look="contractor"] .ct-facade { padding: 0; background: var(--deep); font-size: 1rem; }
.site[data-look="contractor"] .ct-brick { padding-block: clamp(3.5rem, 8vw, 6.5rem); background: var(--ct-brick, none) 0 0 / 396px 108px, #8a3a22; }
.site[data-look="contractor"] .ct-stone {
  --text: var(--ct-on-stone); --muted: var(--ct-stone-muted);
  width: fit-content; max-width: 100%; margin-inline: auto; text-align: center;
  padding: clamp(1.25rem, 3.5vw, 2.25rem) clamp(1.5rem, 5vw, 3.5rem);
  color: var(--ct-on-stone);
  background: linear-gradient(160deg, #e6dfcf, #d4cbb8);
  box-shadow: 0 0 0 5px #bdb5a6, inset 0 0 0 6px #e9e3d5, inset 0 0 0 8px #a69d8b, 0 10px 18px rgb(0 0 0 / 0.35);
}
.site[data-look="contractor"] .ct-stone p { margin: 0; color: var(--ct-on-stone); text-shadow: 0 1px 0 rgb(255 255 255 / 0.55); }
.site[data-look="contractor"] .ct-stone .footer-name { font-family: var(--font-heading); font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(1.35rem, 1rem + 1.4vw, 2.2rem); line-height: 1.1; color: var(--ct-on-stone); overflow-wrap: break-word; hyphens: auto; margin-bottom: 0.15em; }
.site[data-look="contractor"] .ct-anno { font-family: var(--ct-narrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.3em; font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.5rem); }
.site[data-look="contractor"] .ct-stone-small { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.1rem 1.2rem; margin-top: 0.8rem !important; padding-top: 0.7rem; border-top: 1px solid #a69d8b; font-size: 0.95rem; color: var(--ct-stone-muted) !important; }
.site[data-look="contractor"] .ct-tras { position: relative; padding-top: calc(60px * 0.6 + clamp(2rem, 5vw, 3rem)); }
.site[data-look="contractor"] .ct-tras::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: calc(60px * 0.6); background: var(--ct-tras, none) 0 0 / 396px 36px, #3b2a26; border-bottom: 4px solid #6f6a61; }
.site[data-look="contractor"] .ct-facade .footer-inner { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.site[data-look="contractor"] .ct-facade .footer-title { font-family: var(--ct-narrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--deep-muted); }
.site[data-look="contractor"] .ct-facade .footer-col a { font-weight: 600; font-size: 1.05rem; }

/* --- Phones: the quick bar in ink and orange --------------------------------- */
@media (max-width: 51.99rem) {
  .site[data-look="contractor"] .quickbar { --on-deep: var(--ct-white); background: var(--ct-ink); border-top: 3px solid var(--ct-ink); }
  .site[data-look="contractor"] .quick { font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ct-white); }
  .site[data-look="contractor"] .quick-primary { color: var(--on-primary); }
}
/* Narrow phones: the board's fields one under the other. */
@media (max-width: 30rem) {
  .site[data-look="contractor"] .ct-board-fields { grid-template-columns: minmax(0, 1fr); }
  .site[data-look="contractor"] .ct-board-fields > div { border-left: 0 !important; grid-column: 1 / -1; }
}