/* The pedicure look: everything here is scoped to .site[data-look="pedicure"]. Appended after base.css (bun run --filter @platform/sections css).
   The page is the practice: linen and white, care green, ink. The cliëntkaart
   in the hero, the tarievenkaart with the appointment book's quarter hours,
   the name plate on the green practice door, the home-visit round, the
   appointment card. Everything one size up: many clients are older. */

.site[data-look="pedicure"] {
  --wrap: 80rem;
  --fs-base: 1.1875rem;
  --fs-sm: 1.03rem;
  --fs-lead: clamp(1.25rem, 1.12rem + 0.45vw, 1.5rem);
  --fs-h1: clamp(3.5rem, 1.9rem + 5vw, 6.4rem);
  --fs-h2: clamp(2.35rem, 1.55rem + 2.9vw, 4.5rem);
  --fs-h3: 1.3rem;
  --ped-pad: clamp(4.25rem, 9vw, 8.5rem);
  --ped-hair: color-mix(in srgb, var(--text) 16%, transparent);
  --ped-header: 5.25rem;
  /* Linen, as the towel on the treatment chair: a fine cross weave. */
  --ped-weave: repeating-linear-gradient(0deg, rgb(30 42 51 / 0.028) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgb(30 42 51 / 0.022) 0 1px, transparent 1px 4px);
  line-height: 1.62;
  hyphens: manual;
}
@media (max-width: 40rem) {
  .site[data-look="pedicure"] { --fs-base: 1.125rem; --fs-sm: 1rem; --ped-header: 3.9rem; }
}
.site[data-look="pedicure"] :is(h1, h2) { letter-spacing: -0.025em; line-height: 1.02; }
.site[data-look="pedicure"] h2 { margin-bottom: 0.45em; }
.site[data-look="pedicure"] main > .s + .s { border-top: 0; }
.site[data-look="pedicure"] .s { padding-block: var(--ped-pad); }
.site[data-look="pedicure"] .lead { color: var(--text); }
.site[data-look="pedicure"] :focus-visible { outline-color: var(--care); }

/* Buttons: the practice's green, big enough for any hand. */
.site[data-look="pedicure"] .btn { min-height: 3.6rem; padding: 0.85rem 1.7rem; border-radius: 999px; font-size: 1.15rem; transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease; }
.site[data-look="pedicure"] .btn-primary:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--primary) 80%, black); }
.site[data-look="pedicure"] .btn .cta-detail { font-variant-numeric: tabular-nums; }
.site[data-look="pedicure"] .cta-alt { font-weight: 500; }

/* --- Header: the name, and the number to ring ------------------------------- */
.site[data-look="pedicure"] .ped-header { background: var(--bg); border-bottom: 1px solid var(--ped-hair); }
.site[data-look="pedicure"] .ped-header .header-inner { min-height: var(--ped-header); gap: 0.5rem 2.5rem; }
.site[data-look="pedicure"] .ped-header .brand { font-size: clamp(1.2rem, 1rem + 0.6vw, 1.6rem); letter-spacing: -0.015em; }
.site[data-look="pedicure"] .ped-header nav a { font-size: 1.05rem; }
.site[data-look="pedicure"] .ped-header-call { display: grid; justify-items: end; text-decoration: none; line-height: 1.15; padding-block: 0.3rem; }
.site[data-look="pedicure"] .ped-header-call-label { font-size: 1rem; color: var(--muted); }
.site[data-look="pedicure"] .ped-header-call-number { font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.site[data-look="pedicure"] .ped-header-call:hover .ped-header-call-number { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
@media (max-width: 40rem) {
  .site[data-look="pedicure"]:has(.quickbar) .ped-header-call { display: none; }
}

/* --- Hero: the cliëntkaart on the linen of the treatment chair ---------------- */
.site[data-look="pedicure"] .ped-hero {
  background-color: var(--surface); background-image: var(--ped-weave);
  min-height: min(calc(100svh - var(--ped-header)), 58rem); display: flex; align-items: center;
  padding-block: clamp(2.25rem, 5vw, 4.5rem);
}
.site[data-look="pedicure"] .ped-hero .hero-inner { width: min(100% - 2 * var(--gap), var(--wrap)); gap: clamp(2.25rem, 5vw, 5.5rem); }
@media (min-width: 60rem) {
  .site[data-look="pedicure"] .ped-hero-card .hero-inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
.site[data-look="pedicure"] .ped-hero h1 { font-size: var(--fs-h1); max-width: 11ch; line-height: 0.96; letter-spacing: -0.035em; margin-bottom: 0.32em; text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
/* A long practice name in a headline: the type shrinks until the longest
   piece that can't break (--ped-longest, set in parts.tsx) fits the column,
   so "Voetverzorgings-praktijk" splits at its soft hyphen, never mid-word.
   Short headlines keep the full size. */
.site[data-look="pedicure"] .ped-hero .hero-text { container-type: inline-size; }
.site[data-look="pedicure"] .ped-hero h1 { font-size: min(var(--fs-h1), calc(100cqi / (var(--ped-longest, 8) * 0.6))); max-width: max(11ch, calc(var(--ped-longest, 8) * 1ch + 1ch)); }
.site[data-look="pedicure"] .ped-hero .lead { font-size: var(--fs-lead); max-width: 30rem; }
.site[data-look="pedicure"] .ped-hero .actions { margin-top: 2.1rem; }
.site[data-look="pedicure"] .ped-hero-where { display: flex; flex-wrap: wrap; gap: 0.3rem 2rem; margin-top: 2.4rem; padding-top: 1.1rem; border-top: 1px solid var(--ped-hair); max-width: 30rem; font-size: var(--fs-sm); }
.site[data-look="pedicure"] .ped-where-label { color: var(--muted); }
/* Phones: the headline, the words and the call button fill the first
   screen above the quick bar; the card waits just below. */
@media (max-width: 59.99rem) {
  .site[data-look="pedicure"] .ped-hero { min-height: 0; display: block; padding-block: clamp(2rem, 7vw, 3.5rem); }
}
@media (max-width: 40rem) {
  .site[data-look="pedicure"] .ped-hero .actions .btn { width: 100%; }
}

/* The card itself: white card stock, the form's green header printed on it. */
.site[data-look="pedicure"] .ped-card {
  --text: var(--on-chart); --muted: var(--chart-muted);
  container-type: inline-size; margin: 0; padding: 0; overflow: hidden;
  background: var(--chart); color: var(--on-chart); border: 1px solid var(--outline); border-radius: 6px;
  box-shadow: 0 1px 1px rgb(30 42 51 / 0.05), 0 28px 50px -30px rgb(30 42 51 / 0.45);
}
.site[data-look="pedicure"] .ped-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1rem; margin: 0; padding: 0.85rem clamp(1rem, 4cqi, 1.6rem); border-bottom: 3px double var(--outline); }
.site[data-look="pedicure"] .ped-card-form { flex-basis: 100%; color: var(--care); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
.site[data-look="pedicure"] .ped-card .foot-card-name { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.15rem, 4cqi, 1.5rem); line-height: 1.15; margin-right: auto; min-width: 0; overflow-wrap: break-word; }
.site[data-look="pedicure"] .ped-card-phone { font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; font-size: 1.05rem; }
.site[data-look="pedicure"] .ped-card-phone:hover { text-decoration: underline; }
.site[data-look="pedicure"] .ped-card-fields { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.5rem; margin: 0; padding: 0.9rem clamp(1rem, 4cqi, 1.6rem) 0; color: var(--chart-muted); font-size: 0.85rem; }
.site[data-look="pedicure"] .ped-card-fields span { display: flex; gap: 0.5rem; align-items: baseline; }
.site[data-look="pedicure"] .ped-card-fields span::after { content: ''; flex: 1; border-bottom: 1px dotted var(--outline); }

/* The chart: wide (two feet, labels both sides) by default. */
.site[data-look="pedicure"] .ped-chart { display: block; position: relative; aspect-ratio: 640 / 380; margin: clamp(0.75rem, 3cqi, 1.5rem) clamp(0.75rem, 3cqi, 1.6rem) clamp(1rem, 3cqi, 1.6rem); }
.site[data-look="pedicure"] .ped-chart svg { position: absolute; inset: 0; grid-column: 1 / -1; grid-row: 1 / -1; width: 100%; height: 100%; overflow: visible; }
.site[data-look="pedicure"] .ped-narrow { display: none; }
.site[data-look="pedicure"] .ped-sole, .site[data-look="pedicure"] .ped-toe { fill: var(--linen); stroke: var(--outline); stroke-width: 2.2; stroke-linejoin: round; }
.site[data-look="pedicure"] .ped-crease { fill: none; stroke: var(--outline); stroke-width: 1.2; stroke-dasharray: 2 5; stroke-linecap: round; }
.site[data-look="pedicure"] .ped-side { fill: var(--chart-muted); font-family: var(--font-body); font-size: 13px; letter-spacing: 0.06em; }
.site[data-look="pedicure"] .ped-leader polyline { fill: none; stroke: var(--care); stroke-width: 1.6; stroke-linejoin: round; }
.site[data-look="pedicure"] .ped-leader circle { fill: var(--chart); stroke: var(--care); stroke-width: 2.5; }
.site[data-look="pedicure"] .ped-chart .foot-label {
  position: absolute; width: calc(24.7% - 0.45rem); margin: 0; transform: translateY(-50%);
  color: var(--care); font-weight: 600; font-size: clamp(0.82rem, 2.55cqi, 1.08rem); line-height: 1.22; hyphens: manual; overflow-wrap: break-word;
}
.site[data-look="pedicure"] .ped-chart .foot-left { left: 0; text-align: right; }
.site[data-look="pedicure"] .ped-chart .foot-right { right: 0; text-align: left; }
/* The label heights are the leader heights in chart.tsx (y / 380). */
.site[data-look="pedicure"] .ped-chart .foot-label[style*="--row:1"] { top: 5.79%; transform: translateY(-62%); }
.site[data-look="pedicure"] .ped-chart .foot-left[style*="--row:2"] { top: 37.37%; }
.site[data-look="pedicure"] .ped-chart .foot-right[style*="--row:2"] { top: 57.89%; }
.site[data-look="pedicure"] .ped-chart .foot-label[style*="--row:3"] { top: 84.74%; }
/* Narrow card: one foot, every label on its outer side, one row each. */
@container (max-width: 33rem) {
  .site[data-look="pedicure"] .ped-chart { display: grid; grid-template-columns: 51.8% minmax(0, 1fr); grid-template-rows: repeat(var(--n), minmax(0, 1fr)); aspect-ratio: 340 / 380; }
  .site[data-look="pedicure"] .ped-wide { display: none; }
  .site[data-look="pedicure"] .ped-narrow { display: block; }
  .site[data-look="pedicure"] .ped-chart .foot-label { position: static; grid-column: 2; grid-row: auto; align-self: center; width: auto; transform: none !important; text-align: left !important; padding-left: 0.45rem; font-size: clamp(0.9rem, 4.6cqi, 1.1rem); }
}

/* The practice behind the card: the treatment chair, the card laid over it. */
.site[data-look="pedicure"] .ped-practice { margin: 0; border-radius: 6px; overflow: hidden; background: var(--surface); box-shadow: 0 30px 60px -40px rgb(30 42 51 / 0.45); }
.site[data-look="pedicure"] .ped-practice-img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 60rem) {
  .site[data-look="pedicure"] .hero-media.has-practice { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  /* The chair stands on the right; the card lies over its foot rest, lower left. */
  .site[data-look="pedicure"] .has-practice .ped-practice { grid-column: 4 / -1; grid-row: 1; aspect-ratio: 4 / 5; max-height: min(80svh, 48rem); justify-self: end; width: 100%; }
  .site[data-look="pedicure"] .has-practice .ped-card { grid-column: 1 / 9; grid-row: 1; margin-bottom: clamp(-2.5rem, -3vw, -1rem); transform: rotate(-1.5deg); box-shadow: 0 28px 50px -26px rgb(30 42 51 / 0.5); position: relative; z-index: 1; }
}
@media (max-width: 59.99rem) {
  .site[data-look="pedicure"] .has-practice .ped-practice { margin-inline: calc(-1 * var(--gap)); border-radius: 0; aspect-ratio: 4 / 3; max-height: 62svh; }
  .site[data-look="pedicure"] .has-practice .ped-practice-img { object-position: 50% 14%; }
  .site[data-look="pedicure"] .has-practice .ped-card { position: relative; margin-top: -3.25rem; margin-inline: 0.4rem; box-shadow: 0 18px 30px -20px rgb(30 42 51 / 0.45); }
}

/* Booking online, under the buttons: a plain, generous link. */
.site[data-look="pedicure"] .ped-hero-book { margin-top: 1rem; font-size: var(--fs-sm); }
.site[data-look="pedicure"] .ped-hero-book a { color: var(--text); font-weight: 600; text-underline-offset: 0.2em; }

/* The pen lies across the card's lower corner (wide screens only). */
.site[data-look="pedicure"] .ped-hero-card .hero-media { position: relative; }
.site[data-look="pedicure"] .ped-pen { display: none; }
@media (min-width: 60rem) {
  .site[data-look="pedicure"] .ped-pen { display: block; position: absolute; right: 7%; bottom: -0.9rem; width: 42%; height: auto; transform: rotate(-11deg); transform-origin: center; filter: drop-shadow(0 10px 8px rgb(30 42 51 / 0.22)); pointer-events: none; }
  .site[data-look="pedicure"] .has-practice .ped-pen { right: auto; left: 30%; bottom: -3.4rem; width: 30%; z-index: 2; }
}
.site[data-look="pedicure"] .ped-pen-body { fill: var(--on-chart); }
.site[data-look="pedicure"] .ped-pen-grip { fill: #3a4852; }
.site[data-look="pedicure"] .ped-pen-tip { fill: #b9c2c6; }
.site[data-look="pedicure"] .ped-pen-band { fill: #c9d0d3; }
.site[data-look="pedicure"] .ped-pen-clip { fill: #dfe4e6; stroke: #9aa5aa; stroke-width: 1; }

/* Photo hero (the customer's own): the photo to the page's right edge. */
.site[data-look="pedicure"] .ped-hero-photo { position: relative; overflow: clip; }
.site[data-look="pedicure"] .ped-hero-photo .hero-img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; max-height: none; }
@media (min-width: 60rem) {
  .site[data-look="pedicure"] .ped-hero-photo .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site[data-look="pedicure"] .ped-hero-photo .hero-media { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; }
  .site[data-look="pedicure"] .ped-hero-photo .hero-text { padding-right: clamp(1rem, 3vw, 3rem); }
}
@media (max-width: 59.99rem) {
  .site[data-look="pedicure"] .ped-hero-photo .hero-media { margin-inline: calc(-1 * var(--gap)); }
  .site[data-look="pedicure"] .ped-hero-photo .hero-img { aspect-ratio: 4 / 3; height: auto; max-height: 70svh; }
}

/* --- Services: the tarievenkaart -------------------------------------------- */
.site[data-look="pedicure"] .ped-services { background: var(--bg); }
.site[data-look="pedicure"] .ped-services-inner { display: grid; gap: clamp(2.5rem, 6vw, 6.5rem); align-items: start; }
@media (min-width: 60rem) {
  .site[data-look="pedicure"] .ped-services-inner { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); }
  .site[data-look="pedicure"] .ped-services-side { position: sticky; top: calc(var(--ped-header) + 2rem); }
}
.site[data-look="pedicure"] .ped-services .sheet-head { max-width: 30rem; }
.site[data-look="pedicure"] .ped-services .sheet-head .lead { margin-top: 1.2rem; }
.site[data-look="pedicure"] .ped-services-photo { margin-top: clamp(2rem, 4vw, 3rem); }
.site[data-look="pedicure"] .ped-photo { width: 100%; object-fit: cover; border-radius: 4px; background: var(--surface); }
.site[data-look="pedicure"] .ped-services-photo .ped-photo { aspect-ratio: 5 / 4; max-height: 46svh; }
@media (max-width: 59.99rem) { .site[data-look="pedicure"] .ped-services-photo { display: none; } }
.site[data-look="pedicure"] .ped-tarieven { min-width: 0; }
.site[data-look="pedicure"] .ped-tarieven .service-list { margin: 0; border-top: 2px solid var(--text); }
.site[data-look="pedicure"] .ped-tarieven .service { position: relative; padding: clamp(1.15rem, 2.2vw, 1.6rem) 0; border-bottom: 1px solid var(--ped-hair); transition: background-color 200ms ease, padding 200ms ease; }
@media (hover: hover) {
  .site[data-look="pedicure"] .ped-tarieven .service:hover { background: var(--surface); padding-inline: 1rem; }
}
.site[data-look="pedicure"] .ped-tarieven .price-row { display: grid; grid-template-columns: minmax(0, auto) auto auto minmax(1rem, 1fr) auto; align-items: baseline; column-gap: 0.85rem; }
.site[data-look="pedicure"] .ped-tarieven .price-row > :is(h2, h3) { font-family: var(--font-body); font-weight: 600; font-size: clamp(1.2rem, 1.1rem + 0.35vw, 1.42rem); letter-spacing: -0.01em; line-height: 1.25; text-wrap: pretty; }
.site[data-look="pedicure"] .ped-tarieven .price-row:not(:has(.minutes)) { grid-template-columns: minmax(0, auto) minmax(1rem, 1fr) auto; }
.site[data-look="pedicure"] .ped-tarieven .minutes { color: var(--muted); font-size: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.site[data-look="pedicure"] .ped-tarieven .leader { align-self: center; border-bottom: 1.5px dotted var(--outline); height: 0; }
.site[data-look="pedicure"] .ped-tarieven .price { font-size: clamp(1.2rem, 1.1rem + 0.35vw, 1.42rem); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; text-align: right; }
.site[data-look="pedicure"] .ped-tarieven .price-from { font-size: 0.8em; font-weight: 400; color: var(--muted); }
.site[data-look="pedicure"] .ped-tarieven .service-note { color: var(--muted); font-size: 1.05rem; max-width: 34rem; margin-top: 0.35rem; }
/* The quarter hours a treatment takes in the appointment book. */
.site[data-look="pedicure"] .ped-quarters { display: inline-flex; align-self: center; border: 1.5px solid var(--outline); border-radius: 3px; overflow: hidden; }
.site[data-look="pedicure"] .ped-quarters i { width: 0.8rem; height: 0.95rem; background: var(--chart); }
.site[data-look="pedicure"] .ped-quarters i + i { border-left: 1px solid var(--outline); }
.site[data-look="pedicure"] .ped-quarters i:nth-child(4n + 1):not(:first-child) { border-left: 1.5px solid var(--chart-muted); }
.site[data-look="pedicure"] .ped-quarters i.is-on { background: var(--care); }
.site[data-look="pedicure"] .ped-tarieven .price-row:not(:has(.price)) { grid-template-columns: minmax(0, auto) auto auto 1fr; }
.site[data-look="pedicure"] .ped-tarieven .price-row:not(:has(.price)):not(:has(.minutes)) { display: block; }
@media (max-width: 40rem) {
  .site[data-look="pedicure"] .ped-tarieven .price-row:is(*, :not(:has(.minutes)), :not(:has(.price))) { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.25rem; }
  .site[data-look="pedicure"] .ped-tarieven .price-row > :is(h2, h3) { grid-column: 1; }
  .site[data-look="pedicure"] .ped-tarieven .price { grid-column: 2; grid-row: 1; }
  .site[data-look="pedicure"] .ped-tarieven .minutes { grid-column: 1; grid-row: 2; display: inline-flex; gap: 0.6rem; }
  .site[data-look="pedicure"] .ped-tarieven .ped-quarters { grid-column: 1; grid-row: 2; justify-self: start; margin-left: 4.6rem; }
  .site[data-look="pedicure"] .ped-tarieven .leader { display: none; }
}
/* Home visits: their own panel on the card. */
.site[data-look="pedicure"] .ped-home { margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.25rem, 3vw, 2rem) clamp(1.1rem, 3vw, 2rem) clamp(0.5rem, 1.5vw, 1rem); background-color: var(--surface); background-image: var(--ped-weave); border-radius: 6px; }
.site[data-look="pedicure"] .ped-home .list-label { margin: 0 0 0.9rem; font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); letter-spacing: -0.02em; line-height: 1.1; color: var(--text); }
.site[data-look="pedicure"] .ped-home .service-list { border-top-width: 1px; }
.site[data-look="pedicure"] .ped-home .service:last-child { border-bottom: 0; }
@media (hover: hover) { .site[data-look="pedicure"] .ped-home .service:hover { background: var(--bg); } }

/* --- Hours: the name plate on the green practice door ------------------------- */
.site[data-look="pedicure"] .ped-hours {
  --text: var(--on-primary); --muted: var(--on-primary);
  background-color: var(--primary); color: var(--on-primary);
  /* The door's vertical boards. */
  background-image: repeating-linear-gradient(90deg, rgb(0 0 0 / 0.07) 0 1px, transparent 1px 7.5rem), linear-gradient(90deg, rgb(255 255 255 / 0.05), transparent 60%);
}
.site[data-look="pedicure"] .ped-hours .hours-inner { align-items: center; }
@media (min-width: 52rem) { .site[data-look="pedicure"] .ped-hours .hours-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
/* Phones: a compact door (it was a long green band): less padding, the
   call line left to the quick bar, the plate straight after the address. */
@media (max-width: 40rem) {
  .site[data-look="pedicure"] .ped-hours { padding-block: 2.5rem; }
  .site[data-look="pedicure"] .ped-hours .hours-inner { gap: 1.5rem; }
  .site[data-look="pedicure"] .ped-hours .hours-place { font-size: var(--fs-base); }
  .site[data-look="pedicure"]:has(.quickbar) .ped-hours .hours-call { display: none; }
}
.site[data-look="pedicure"] .ped-hours .hours-place { color: inherit; font-size: var(--fs-lead); line-height: 1.45; max-width: 26rem; }
.site[data-look="pedicure"] .ped-hours .hours-place a, .site[data-look="pedicure"] .ped-hours .hours-call a { color: inherit; }
.site[data-look="pedicure"] .ped-hours .hours-place a { font-size: var(--fs-base); }
.site[data-look="pedicure"] .ped-hours .hours-call { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem); font-weight: 600; margin-top: 1.75rem; }
.site[data-look="pedicure"] .ped-hours-home { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, currentColor 35%, transparent); max-width: 26rem; }
/* The plate: white acrylic, four screws, the practice's name engraved. */
.site[data-look="pedicure"] .ped-plate {
  --text: var(--on-chart); --muted: var(--chart-muted); --border: color-mix(in srgb, var(--outline) 70%, transparent);
  position: relative; justify-self: end; width: 100%; max-width: 34rem;
  background: var(--chart); color: var(--on-chart); border-radius: 8px;
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.4rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2rem);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.9), inset 0 -2px 0 rgb(30 42 51 / 0.06), 0 2px 0 rgb(0 0 0 / 0.12), 0 30px 50px -30px rgb(0 0 0 / 0.55);
}
.site[data-look="pedicure"] .ped-plate::before {
  content: ''; position: absolute; inset: 0.9rem; pointer-events: none;
  background:
    radial-gradient(circle at 0.45rem 0.45rem, #8d989d 0 0.18rem, #c9d0d3 0.19rem 0.42rem, transparent 0.44rem) top left / 0.9rem 0.9rem no-repeat,
    radial-gradient(circle at 0.45rem 0.45rem, #8d989d 0 0.18rem, #c9d0d3 0.19rem 0.42rem, transparent 0.44rem) top right / 0.9rem 0.9rem no-repeat,
    radial-gradient(circle at 0.45rem 0.45rem, #8d989d 0 0.18rem, #c9d0d3 0.19rem 0.42rem, transparent 0.44rem) bottom left / 0.9rem 0.9rem no-repeat,
    radial-gradient(circle at 0.45rem 0.45rem, #8d989d 0 0.18rem, #c9d0d3 0.19rem 0.42rem, transparent 0.44rem) bottom right / 0.9rem 0.9rem no-repeat;
}
.site[data-look="pedicure"] .ped-plate-name { margin: 0 0 1.1rem; padding: 0 1.4rem 1rem; border-bottom: 1px solid var(--outline); text-align: center; font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.65rem); line-height: 1.15; color: var(--care); text-wrap: balance; overflow-wrap: break-word; }
.site[data-look="pedicure"] .ped-plate .hours-table { font-size: 1.12rem; }
.site[data-look="pedicure"] .ped-plate .hours-table th, .site[data-look="pedicure"] .ped-plate .hours-table td { padding-block: 0.62rem; }
.site[data-look="pedicure"] .ped-plate .hours-table tr:last-child :is(th, td) { border-bottom: 0; }
.site[data-look="pedicure"] .ped-plate .hours-table th::before { background: var(--care) !important; left: -0.75rem; }
.site[data-look="pedicure"] .ped-plate .hours-table th::after { background: var(--care); color: var(--chart); border-radius: 999px; padding-inline: 0.55rem; letter-spacing: 0.04em; }
@media (max-width: 40rem) {
  .site[data-look="pedicure"] .ped-plate .hours-table { font-size: 1.02rem; }
  .site[data-look="pedicure"] .ped-plate .hours-table td { white-space: nowrap; }
  .site[data-look="pedicure"] .ped-plate .hours-table th { white-space: normal; }
}
@media (max-width: 24rem) {
  .site[data-look="pedicure"] .ped-plate { padding-inline: 1.1rem; }
  .site[data-look="pedicure"] .ped-plate .hours-table { font-size: 0.97rem; }
  .site[data-look="pedicure"] .ped-plate .hours-table th { padding-right: 0.5rem; }
}

/* --- About: the practice, the photo to the page's edge ------------------------ */
.site[data-look="pedicure"] .ped-about { background: var(--bg); max-width: none; }
.site[data-look="pedicure"] .ped-about .about-inner > .about-text { max-width: 36rem; }
.site[data-look="pedicure"] .ped-about .about-inner > .about-text > p { font-size: var(--fs-base); }
.site[data-look="pedicure"] .ped-about .about-inner > .about-text > h1 + p, .site[data-look="pedicure"] .ped-about .about-inner > .about-text > h2 + p { font-size: var(--fs-lead); line-height: 1.5; }
.site[data-look="pedicure"] .ped-since { margin: 2rem 0 0 !important; padding-top: 1.1rem; border-top: 1px solid var(--ped-hair); font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem) !important; letter-spacing: -0.02em; color: var(--care); }
.site[data-look="pedicure"] .ped-about.has-photo { padding: 0; display: grid; }
.site[data-look="pedicure"] .ped-about.has-photo .about-media { min-height: 22rem; }
.site[data-look="pedicure"] .ped-about.has-photo .about-img { width: 100%; height: 100%; aspect-ratio: auto; max-height: none; object-fit: cover; background: var(--surface); }
.site[data-look="pedicure"] .ped-about.has-photo .about-inner { display: block; width: auto; margin: 0; padding: var(--ped-pad) var(--gap); }
@media (min-width: 52rem) {
  .site[data-look="pedicure"] .ped-about.has-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(52rem, 92svh); }
  .site[data-look="pedicure"] .ped-about.has-photo.about-image_right .about-media { order: 2; }
  .site[data-look="pedicure"] .ped-about.has-photo .about-inner { align-self: center; padding-inline: clamp(2.5rem, 6vw, 7rem) max(var(--gap), calc((100vw - var(--wrap)) / 2)); }
  .site[data-look="pedicure"] .ped-about.has-photo.about-image_right .about-inner { padding-inline: max(var(--gap), calc((100vw - var(--wrap)) / 2)) clamp(2.5rem, 6vw, 7rem); }
}
@media (max-width: 51.99rem) { .site[data-look="pedicure"] .ped-about.has-photo .about-media { aspect-ratio: 4 / 3; min-height: 0; } }
@media (min-width: 52rem) {
  .site[data-look="pedicure"] .ped-about:not(.has-photo) .about-inner { display: block; }
  .site[data-look="pedicure"] .ped-about:not(.has-photo) .about-inner > .about-text { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: clamp(2.5rem, 6vw, 6rem); }
  .site[data-look="pedicure"] .ped-about:not(.has-photo) .about-inner > .about-text > * { grid-column: 2; max-width: 38rem; }
  .site[data-look="pedicure"] .ped-about:not(.has-photo) .about-inner > .about-text > :is(h1, h2) { grid-column: 1; grid-row: 1 / span 9; }
}

/* --- Reviews: set large, in Dutch quotes, on linen ---------------------------- */
/* On ink: the one dark band in the page before the footer, the quotes in white. */
.site[data-look="pedicure"] .ped-reviews { --text: var(--on-deep); --muted: var(--deep-muted); background: var(--deep); color: var(--on-deep); }
.site[data-look="pedicure"] .ped-reviews .quote-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4rem) clamp(2.5rem, 6vw, 6rem); margin-top: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 52rem) {
  .site[data-look="pedicure"] .ped-reviews .quote-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site[data-look="pedicure"] .ped-reviews .quote-list > li:first-child { grid-column: 1 / -1; }
  .site[data-look="pedicure"] .ped-reviews .quote-list > li:first-child:nth-last-child(2) + li { grid-column: 1 / -1; padding-left: 33%; }
}
.site[data-look="pedicure"] .ped-reviews figure { margin: 0; padding: 0; border: 0; }
.site[data-look="pedicure"] .ped-reviews blockquote { margin: 0 0 1rem; font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2.15rem); line-height: 1.24; letter-spacing: -0.015em; text-wrap: pretty; }
.site[data-look="pedicure"] .ped-reviews li:first-child blockquote { font-size: clamp(1.75rem, 1.15rem + 2.4vw, 3.4rem); line-height: 1.14; letter-spacing: -0.025em; max-width: 26ch; }
.site[data-look="pedicure"] .ped-reviews blockquote p { position: relative; }
/* Hanging punctuation: the opening quote stands in the margin. */
.site[data-look="pedicure"] .ped-q { position: absolute; right: 100%; padding-right: 0.06em; color: var(--outline); }
@media (max-width: 40rem) { .site[data-look="pedicure"] .ped-q { position: static; padding: 0; } }
.site[data-look="pedicure"] .ped-reviews figcaption { font-size: 1.05rem; font-weight: 500; color: var(--muted); }
.site[data-look="pedicure"] .ped-reviews figcaption::before { content: '— '; }

/* --- Service area: the home-visit round, footsteps between the stops ------- */
.site[data-look="pedicure"] .ped-area { background: var(--bg); }
.site[data-look="pedicure"] .ped-area-inner { display: grid; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
@media (min-width: 52rem) { .site[data-look="pedicure"] .ped-area.has-photo .ped-area-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.site[data-look="pedicure"] .ped-area .area-body { font-size: var(--fs-lead); line-height: 1.5; max-width: 32rem; }
.site[data-look="pedicure"] ul.ped-round {
  position: relative; display: grid; gap: 0; margin-top: clamp(1.75rem, 3vw, 2.5rem); padding-left: 3.6rem; font-size: inherit; font-weight: inherit;
}
/* The trail: a pair of footprints from each stop to the next (inline SVG). */
.site[data-look="pedicure"] .ped-steps { position: absolute; left: -3.1rem; top: calc(50% + 1rem); width: 1.5rem; height: calc(100% - 2rem); fill: var(--outline); overflow: visible; }
.site[data-look="pedicure"] ul.ped-round li { position: relative; padding-block: 1.45rem; font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.6rem); line-height: 1.15; letter-spacing: -0.02em; white-space: normal; overflow-wrap: break-word; }
.site[data-look="pedicure"] ul.ped-round li::after { display: none; }
.site[data-look="pedicure"] ul.ped-round li::before { content: ''; position: absolute; left: -3.05rem; top: 50%; width: 1.2rem; height: 1.2rem; margin-top: -0.6rem; border-radius: 50%; background: var(--bg); border: 3px solid var(--care); box-shadow: 0 0 0 5px var(--bg); }
.site[data-look="pedicure"] ul.ped-round li:first-child::before { background: var(--care); }
@media (min-width: 40rem) {
  .site[data-look="pedicure"] ul.ped-round.is-long { grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 4.5rem; padding-left: 0; }
  .site[data-look="pedicure"] ul.ped-round.is-long .ped-steps { display: none; }
  .site[data-look="pedicure"] ul.ped-round.is-long li { padding-left: 1.9rem; font-size: clamp(1.45rem, 1.2rem + 0.9vw, 2rem); }
  .site[data-look="pedicure"] ul.ped-round.is-long li::before { left: 0; }
}
.site[data-look="pedicure"] .ped-area .area-places { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height: 1.3; max-width: 36rem; }
.site[data-look="pedicure"] .ped-area-photo .ped-photo { aspect-ratio: 4 / 5; max-height: 40rem; object-position: 60% 45%; }
@media (max-width: 51.99rem) { .site[data-look="pedicure"] .ped-area-photo .ped-photo { aspect-ratio: 16 / 10; } }

/* --- FAQ: the questions people ask on the phone ------------------------------ */
.site[data-look="pedicure"] .ped-faq { background-color: var(--surface); background-image: var(--ped-weave); }
.site[data-look="pedicure"] .ped-faq-inner { display: grid; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
@media (min-width: 52rem) {
  .site[data-look="pedicure"] .ped-faq-inner { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); }
  .site[data-look="pedicure"] .ped-faq-head { position: sticky; top: calc(var(--ped-header) + 2rem); }
}
.site[data-look="pedicure"] .ped-faq-call { font-size: var(--fs-lead); line-height: 1.45; max-width: 22rem; }
.site[data-look="pedicure"] .ped-faq-call a { font-weight: 600; white-space: nowrap; }
.site[data-look="pedicure"] .ped-faq .faq-items { margin: 0; max-width: none; border-top: 2px solid var(--text); }
.site[data-look="pedicure"] .ped-faq .faq-items details { border-bottom: 1px solid var(--ped-hair); }
.site[data-look="pedicure"] .ped-faq .faq-items details:first-child { border-top: 0; }
.site[data-look="pedicure"] .ped-faq .faq-items summary { min-height: 4.75rem; padding-block: 1.1rem; font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.3rem, 1.12rem + 0.6vw, 1.7rem); line-height: 1.2; letter-spacing: -0.015em; }
.site[data-look="pedicure"] .ped-faq .faq-items summary::after {
  content: ''; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1.5px solid var(--outline);
  background: linear-gradient(var(--care), var(--care)) center / 0.9rem 2px no-repeat, linear-gradient(var(--care), var(--care)) center / 2px 0.9rem no-repeat, var(--bg);
  transition: transform 200ms ease, background-color 200ms ease;
}
.site[data-look="pedicure"] .ped-faq .faq-items details[open] summary::after { content: ''; background: linear-gradient(var(--care), var(--care)) center / 0.9rem 2px no-repeat, var(--bg); transform: rotate(180deg); }
.site[data-look="pedicure"] .ped-faq .faq-items summary:hover::after { border-color: var(--care); }
.site[data-look="pedicure"] .ped-faq .faq-items details p { color: var(--text); font-size: var(--fs-base); max-width: 38rem; margin: -0.2rem 0 1.6rem; }
.site[data-look="pedicure"] .ped-faq dl.faq-items > div { padding-block: 1.25rem; border-bottom: 1px solid var(--ped-hair); }
.site[data-look="pedicure"] .ped-faq dl.faq-items dt { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.3rem, 1.12rem + 0.6vw, 1.7rem); line-height: 1.2; }
.site[data-look="pedicure"] .ped-faq dl.faq-items dd { margin: 0.5rem 0 0; color: var(--text); max-width: 38rem; }

/* --- Contact: ring first; the appointment card to take home -------------------- */
.site[data-look="pedicure"] .ped-contact { background: var(--bg); }
.site[data-look="pedicure"] .ped-contact .contact-inner { align-items: center; gap: clamp(2.5rem, 6vw, 6rem); }
@media (min-width: 52rem) { .site[data-look="pedicure"] .ped-contact .contact-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.site[data-look="pedicure"] .ped-contact .contact-details { display: block; }
.site[data-look="pedicure"] .ped-contact .lead { max-width: 30rem; }
.site[data-look="pedicure"] .ped-contact .contact-list { margin-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 2px solid var(--text); }
.site[data-look="pedicure"] .ped-contact .contact-list li { border-bottom-color: var(--ped-hair); }
.site[data-look="pedicure"] .ped-contact .contact-link { padding-block: 1rem; }
.site[data-look="pedicure"] .ped-contact .contact-label { font-size: 1.02rem; }
.site[data-look="pedicure"] .ped-contact .contact-value { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem); letter-spacing: -0.015em; }
.site[data-look="pedicure"] .ped-contact .ped-contact-call .contact-value { font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4.6rem); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: lining-nums; color: var(--care); }
.site[data-look="pedicure"] .ped-contact .ped-contact-call .contact-link { padding-block: 1.25rem 1.4rem; }
.site[data-look="pedicure"] .ped-contact .contact-also { margin-top: -0.9rem; }
/* The desk the card lies on, and the card. */
.site[data-look="pedicure"] .ped-contact-card { display: grid; place-items: center; padding: clamp(2rem, 6vw, 4.5rem) clamp(1rem, 4vw, 3.5rem); background-color: var(--surface); background-image: var(--ped-weave); border-radius: 6px; }
.site[data-look="pedicure"] .ped-appt {
  --text: var(--on-chart); --muted: var(--chart-muted);
  width: min(100%, 30rem); display: flex; flex-direction: column;
  padding: clamp(1.2rem, 3.5vw, 1.8rem) clamp(1.1rem, 3.5vw, 2rem) clamp(1rem, 3vw, 1.5rem);
  background: var(--chart); color: var(--on-chart); border: 1px solid var(--outline); border-radius: 10px;
  box-shadow: 0 1px 1px rgb(30 42 51 / 0.05), 0 22px 40px -26px rgb(30 42 51 / 0.45);
}
.site[data-look="pedicure"] .ped-appt p { margin: 0; }
.site[data-look="pedicure"] .ped-appt-name { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); line-height: 1.12; color: var(--care); overflow-wrap: break-word; }
.site[data-look="pedicure"] .ped-appt-meta { display: flex; flex-wrap: wrap; gap: 0 1rem; margin-top: 0.35rem !important; font-size: 0.9rem; color: var(--chart-muted); }
.site[data-look="pedicure"] .ped-appt-next { margin-top: 1.4rem !important; padding-top: 0.75rem; border-top: 3px double var(--outline); font-size: 0.95rem; font-weight: 600; }
.site[data-look="pedicure"] .ped-appt-table { display: grid; grid-template-columns: 1fr 1.2fr 0.9fr; margin-top: 0.5rem !important; font-size: 0.8rem; color: var(--chart-muted); }
.site[data-look="pedicure"] .ped-appt-table span { padding: 0.15rem 0 0.2rem 0.4rem; border-bottom: 1px solid var(--outline); }
.site[data-look="pedicure"] .ped-appt-table span:not(:nth-child(3n + 1)) { border-left: 1px solid var(--outline); }
.site[data-look="pedicure"] .ped-appt-table i { height: 2.1rem; border-bottom: 1px solid var(--outline); }
.site[data-look="pedicure"] .ped-appt-table i:not(:nth-child(3n + 1)) { border-left: 1px solid var(--outline); }
@media (max-width: 51.99rem) { .site[data-look="pedicure"] .ped-contact-card { margin-inline: calc(-1 * var(--gap)); border-radius: 0; } }
/* With the contact form: the form is the card. */
.site[data-look="pedicure"] .ped-contact .contact-form { align-self: start; border: 1px solid var(--outline); border-top: 4px solid var(--care); border-radius: 6px; padding: clamp(1.25rem, 3vw, 2rem); background: var(--bg); }

/* --- Call to action: a green band ------------------------------------------- */
.site[data-look="pedicure"] .ped-cta { --text: var(--on-primary); --muted: var(--on-primary); background: var(--primary); color: var(--on-primary); padding-block: clamp(3.5rem, 7vw, 6rem); }
.site[data-look="pedicure"] .ped-cta .cta-inner { align-items: center; }
.site[data-look="pedicure"] .ped-cta p { color: inherit; }
.site[data-look="pedicure"] .ped-cta .btn-primary { background: var(--deep); color: var(--on-deep); border-color: var(--deep); }

/* --- Request form and booking: on the linen, the form as a card ------------- */
.site[data-look="pedicure"] :is(.s-request, .s-booking) { background-color: var(--surface); background-image: var(--ped-weave); }
.site[data-look="pedicure"] .request-form { border: 1px solid var(--outline); border-top: 4px solid var(--care); border-radius: 6px; padding: clamp(1.25rem, 3.5vw, 2.25rem); background: var(--bg); gap: 1.15rem; }
.site[data-look="pedicure"] .request-step > legend { font-size: 1.55rem; }
.site[data-look="pedicure"] :where(form) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select) { min-height: 3.25rem; font-size: 1.1rem; border-color: var(--chart-muted); border-radius: 4px; }
.site[data-look="pedicure"] .s-booking .booking-services { border-top: 2px solid var(--text); background: var(--bg); }
.site[data-look="pedicure"] .s-booking .booking-services a { padding: 1.15rem 1rem; transition: background-color 160ms ease; }
.site[data-look="pedicure"] .s-booking .booking-services a:hover { background: var(--chart); }
.site[data-look="pedicure"] .s-booking .booking-name { font-size: 1.25rem; }
.site[data-look="pedicure"] .s-booking .booking-go { color: var(--care); }
.site[data-look="pedicure"] .booking-choices a { min-height: 3.25rem; font-size: 1.1rem; }

/* --- Gallery: the customer's own photos -------------------------------------- */
.site[data-look="pedicure"] .s-gallery { background: var(--bg); }
.site[data-look="pedicure"] .gallery-items { gap: 0.75rem; }
.site[data-look="pedicure"] .gallery-items li { border-radius: 4px; overflow: hidden; }

/* --- Footer: the practice's name, large, on ink -------------------------------- */
.site[data-look="pedicure"] .ped-footer { padding-top: clamp(3.5rem, 7vw, 6rem); font-size: 1.02rem; }
.site[data-look="pedicure"] .ped-footer .footer-name { margin: 0 0 clamp(2rem, 4vw, 3rem); max-width: 18ch; font-family: var(--font-heading); font-weight: 600; font-size: clamp(2.3rem, 1.4rem + 3.6vw, 5.2rem); line-height: 1; letter-spacing: -0.03em; color: var(--text); overflow-wrap: break-word; hyphens: auto; text-wrap: balance; }
.site[data-look="pedicure"] .ped-footer .footer-inner { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); padding-top: 1.5rem; border-top: 1px solid var(--border); }
.site[data-look="pedicure"] .ped-footer .footer-title { color: var(--text); }

/* --- Quick bar: white, the call in green, larger words ---------------------- */
@media (max-width: 51.99rem) {
  .site[data-look="pedicure"] .quick { font-size: 1.15rem; min-height: 56px; }
}

/* --- Motion: the card is filled in; the rest comes up as it scrolls in ------- */
@media (prefers-reduced-motion: no-preference) {
  .site[data-look="pedicure"] .ped-card { animation: ped-lay 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .site[data-look="pedicure"] .ped-leader polyline { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ped-draw 700ms ease-out forwards; animation-delay: calc(500ms + var(--i, 0) * 140ms); }
  .site[data-look="pedicure"] .ped-chart .foot-label { animation: ped-nudge 500ms ease-out both; animation-delay: calc(700ms + var(--row, 1) * 120ms); }
  @supports (animation-timeline: view()) {
    .site[data-look="pedicure"] :is(.ped-tarieven .service, .ped-reviews .quote-list > li, ul.ped-round li, .ped-faq .faq-items > *, .ped-plate, .ped-appt) {
      animation: ped-rise linear forwards; animation-timeline: view(); animation-range: entry 0% entry 55%;
    }
  }
}
@keyframes ped-lay { from { transform: translateY(18px); } to { transform: none; } }
@keyframes ped-draw { to { stroke-dashoffset: 0; } }
@keyframes ped-nudge { from { translate: 0 8px; } to { translate: 0 0; } }
@keyframes ped-rise { from { transform: translateY(26px); } to { transform: none; } }