/* Second direction: independent composition, not just a colour swap. */
/* Hoogland: a technical specification sheet, cool blue and precise linework. */
.installer {
  --paper: #f8fbfd;
  --ink: #16384e;
  --muted: #506677;
  --accent: #196b8e;
  --soft: #eaf3f8;
  --line: #cedfe9;
  --radius: 0px;
}
.installer .brand strong {
  font-family: Outfit, sans-serif;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.installer .button {
  border-radius: 0;
  background: #206e92;
}
.installer .header {
  border-bottom: 2px solid var(--ink);
}
.installer .split-hero {
  grid-template-columns: 1.05fr 0.95fr;
  gap: 90px;
  padding-block: 85px 65px;
}
.installer h1 {
  font-size: 46px;
  line-height: 1.12;
  font-weight: 400;
}
.installer .installer-visual {
  padding: 18px 0 30px 22px;
  background-image:
    linear-gradient(#d6e6ef 1px, transparent 1px),
    linear-gradient(90deg, #d6e6ef 1px, transparent 1px);
  background-size: 24px 24px;
}
.installer .photo {
  aspect-ratio: 1.1;
  border-radius: 0;
}
.installer .installation-note {
  left: 0;
  bottom: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 18px 24px;
}
.installer .benefits {
  justify-content: space-between;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 24px;
}
.installer #diensten {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 90px;
}
.installer #diensten .section-head {
  display: block;
  margin: 0;
}
.installer #diensten .section-head > p {
  margin-top: 25px;
  max-width: 370px;
}
.installer #diensten .service-grid {
  display: block;
}
.installer #diensten article {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 10px 26px;
  border-top: 1px solid var(--line);
  padding: 28px 0;
}
.installer #diensten .service-icon {
  grid-column: 1;
  grid-row: 1/4;
  width: 52px;
  height: 52px;
  margin: 0;
}
.installer #diensten h3 {
  grid-column: 2;
  font-size: 23px;
}
.installer #diensten article > p {
  grid-column: 2;
  margin: 4px 0;
  max-width: none;
  font-size: 15px;
}
.installer #diensten .text-link {
  grid-column: 2;
  margin-top: 9px;
}
.installer .diagram-area {
  background-image:
    linear-gradient(#d8e6ed 1px, transparent 1px),
    linear-gradient(90deg, #d8e6ed 1px, transparent 1px);
  background-size: 30px 30px;
}
.installer .contact {
  background: var(--ink);
}
/* Linde: soft skin tones, an arched treatment photograph, an editorial treatment menu. */
.salon {
  --paper: #fcf6ef;
  --ink: #65463a;
  --muted: #715d50;
  --accent: #825139;
  --soft: #f1e2d5;
  --line: #e2cebd;
}
.salon .header {
  border-bottom: 0;
}
.salon .brand strong {
  font-style: italic;
}
.salon .button {
  background: #8c5f48;
  border-radius: 24px;
}
.salon .salon-main-photo {
  border-radius: 220px 220px 12px 12px;
  aspect-ratio: 2.4;
}
.salon .salon-image {
  max-width: 1000px;
  margin-top: 48px;
}
.salon .salon-seal {
  background: #ecdbc8;
  right: -32px;
  bottom: -18px;
}
.salon #behandelingen {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 100px;
}
.salon #behandelingen .section-head {
  margin: 0;
  display: block;
}
.salon #behandelingen .treatments {
  display: block;
}
.salon .treatments article {
  display: grid;
  grid-template-columns: 35px 1fr 110px;
  gap: 16px 20px;
  padding: 25px 0;
}
.salon .treatment-number {
  grid-column: 1;
  grid-row: 1/3;
  margin: 4px 0;
}
.salon .treatments h3 {
  grid-column: 2;
  font-size: 27px;
}
.salon .treatments article > p {
  grid-column: 2;
  grid-row: 2;
  font-size: 15px;
  margin: 0;
  max-width: 440px;
}
.salon .treatment-price {
  grid-column: 3;
  grid-row: 1/3;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  margin: 0;
  padding: 0;
  width: auto;
  justify-content: flex-start;
}
.salon .treatments .button {
  grid-column: 2;
  width: auto;
  justify-self: start;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  min-height: 34px;
}
.salon .salon-about .about-photo {
  border-radius: 12px 120px 12px 12px;
}
.salon .contact {
  background: #65463a;
}
.salon .salon-ritual {
  display: none;
}
/* Ruben: athletic direction, numbered coaching goals instead of generic icon cards. */
.trainer {
  --paper: #f6f6f1;
  --ink: #232b29;
  --muted: #57635b;
  --accent: #4f6338;
  --soft: #ebeee5;
  --line: #d2d8ca;
}
.trainer .trainer-top {
  background: #202b28;
}
.trainer .trainer-top .split-hero {
  grid-template-columns: 0.92fr 1.08fr;
  gap: 100px;
  padding-block: 76px;
}
.trainer .trainer-top h1 {
  font-size: 48px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.04em;
}
.trainer .trainer-portrait img {
  border-radius: 0;
  aspect-ratio: 1.1;
}
.trainer .button {
  border-radius: 0;
}
.trainer #aanpak {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 100px;
}
.trainer #aanpak .section-head {
  display: block;
  margin: 0;
}
.trainer #aanpak .service-grid {
  display: block;
  counter-reset: goal;
}
.trainer #aanpak article {
  position: relative;
  padding: 25px 0 25px 62px;
  border-top: 1px solid var(--line);
  display: block;
  counter-increment: goal;
}
.trainer #aanpak article:before {
  content: '0' counter(goal);
  position: absolute;
  left: 0;
  top: 27px;
  color: var(--accent);
  font-size: 14px;
}
.trainer #aanpak .service-icon {
  display: none;
}
.trainer #aanpak h3 {
  font-size: 25px;
}
.trainer #aanpak article > p {
  font-size: 16px;
  max-width: none;
  margin-top: 15px;
}
.trainer #aanpak .text-link {
  margin-top: 18px;
}
.trainer .trainer-story {
  background: #dce5c8;
}
.trainer .trainer-story .about-photo {
  border-radius: 0;
}
.trainer #training .training-options article {
  border-top: 1px solid #b9c4ad;
}
.trainer .contact {
  background: #202b28;
}
/* Marlo: an organised financial workspace and a readable package ledger. */
.administration {
  --paper: #fff;
  --ink: #203a56;
  --muted: #526a80;
  --accent: #3c6689;
  --soft: #edf3f8;
  --line: #d9e4ed;
}
.administration .split-hero {
  display: block;
  text-align: center;
  padding-top: 70px;
  padding-bottom: 50px;
}
.administration .hero-copy {
  max-width: 830px;
  margin: auto;
}
.administration h1 {
  font-size: 43px;
  font-weight: 500;
  line-height: 1.18;
}
.administration .hero-copy .lead {
  max-width: 620px;
  margin-inline: auto;
}
.administration .actions {
  justify-content: center;
}
.administration .finance-visual {
  max-width: 850px;
  margin: 48px auto 0;
  padding: 25px 60px 35px;
  background: #edf3f8;
  border-radius: 12px;
}
.administration .finance-board {
  transform: none;
  border-radius: 6px;
  padding: 25px 34px;
  box-shadow: 0 12px 30px #203a560b;
}
.administration .board-totals {
  margin-top: 20px;
}
.administration .chart-bars {
  height: 95px;
}
.administration .finance-note {
  left: auto;
  right: -20px;
  bottom: 22px;
}
.administration .packages {
  display: block;
  border-top: 1px solid var(--line);
}
.administration .package {
  display: grid;
  grid-template-columns: 38px 1.1fr 0.7fr 1.4fr auto;
  gap: 12px 25px;
  align-items: start;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 35px 24px;
}
.administration .package-index {
  grid-column: 1;
  grid-row: 1/3;
  margin: 5px 0;
}
.administration .package h3 {
  grid-column: 2;
  font-size: 27px;
}
.administration .package > p {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-size: 14px;
}
.administration .package-price {
  grid-column: 3;
  grid-row: 1/3;
  font-size: 36px;
  margin: 0;
  line-height: 1.15;
}
.administration .package-price span {
  display: block;
  font-size: 11px;
  margin: 8px 0 0;
}
.administration .package ul {
  grid-column: 4;
  grid-row: 1/3;
  margin: 0;
  padding: 0;
  border: 0;
}
.administration .package li {
  font-size: 12px;
  margin-bottom: 12px;
}
.administration .package .button {
  grid-column: 5;
  grid-row: 1/3;
  align-self: center;
  font-size: 11px;
  padding: 11px 15px;
  white-space: nowrap;
}
.administration .package.featured {
  background: #edf3f8;
}
.administration #werkwijze .service-icon {
  width: 45px;
  height: 42px;
}
.administration .contact {
  background: #203a56;
}
/* Van Dalen: retain sketch-to-real hero; garden projects gain an editorial rhythm. */
.garden .garden-projects {
  grid-template-columns: 1.2fr 0.8fr;
  gap: 70px;
  align-items: start;
}
.garden .garden-projects figure:nth-child(2) {
  margin-top: 95px;
}
.garden .garden-projects figure:nth-child(2) .project-photo {
  height: 360px;
}
.garden .garden-projects .project-photo {
  border-radius: 0;
}
.garden .steps {
  grid-template-columns: 1fr 1fr;
  gap: 38px 90px;
}
.garden .steps li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px 20px;
}
.garden .step-num {
  grid-row: 1/3;
  margin: 0;
  padding-top: 5px;
}
.garden .steps h3 {
  grid-column: 2;
}
.garden .steps p {
  grid-column: 2;
  margin: 0;
  max-width: 440px;
}
@media (max-width: 1250px) {
  .installer .split-hero,
  .installer #diensten,
  .salon #behandelingen,
  .trainer #aanpak {
    gap: 60px;
  }
  .installer h1 {
    font-size: 40px;
  }
  .trainer .trainer-top .split-hero {
    gap: 60px;
  }
  .trainer .trainer-top h1 {
    font-size: 43px;
  }
  .administration .package {
    gap: 12px 20px;
    padding-inline: 15px;
    grid-template-columns: 25px 1fr 0.65fr 1.4fr;
  }
  .administration .package .button {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    width: auto;
  }
  .administration .finance-visual {
    max-width: 780px;
  }
  .garden .garden-projects {
    gap: 45px;
  }
  .garden .garden-projects figure:nth-child(2) .project-photo {
    height: 300px;
  }
}
@media (max-width: 900px) {
  .installer #diensten {
    gap: 35px;
    grid-template-columns: 0.8fr 1.2fr;
  }
  .salon #behandelingen {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .trainer #aanpak {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .administration .finance-visual {
    padding: 25px 35px;
  }
  .administration .finance-note {
    right: -10px;
    font-size: 9px;
  }
  .administration .package {
    grid-template-columns: 22px 1fr 0.6fr 1.3fr;
    gap: 12px 14px;
  }
  .administration .package h3 {
    font-size: 24px;
  }
  .administration .package-price {
    font-size: 32px;
  }
  .garden .garden-projects {
    gap: 30px;
  }
  .garden .garden-projects figure:nth-child(2) {
    margin-top: 60px;
  }
}
@media (max-width: 700px) {
  .installer .split-hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-block: 50px;
  }
  .installer h1 {
    font-size: 36px;
  }
  .installer .installer-visual {
    padding: 12px 0 22px 14px;
  }
  .installer .installation-note {
    padding: 13px 18px;
  }
  .installer .photo {
    aspect-ratio: 1.2;
  }
  .installer .benefits {
    padding-block: 20px;
  }
  .installer #diensten {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .installer #diensten .service-grid {
    display: block;
  }
  .installer #diensten article {
    grid-template-columns: 40px 1fr;
    gap: 12px 18px;
    padding-block: 24px;
  }
  .installer #diensten .service-icon {
    width: 34px;
    height: 40px;
  }
  .installer #diensten h3 {
    font-size: 21px;
  }
  .installer #diensten article > p {
    font-size: 14px;
  }
  .salon .salon-image {
    margin-top: 35px;
  }
  .salon .salon-main-photo {
    aspect-ratio: 1.4;
    border-radius: 100px 100px 8px 8px;
  }
  .salon .salon-seal {
    right: -12px;
    bottom: -20px;
  }
  .salon .treatments article {
    grid-template-columns: 22px 1fr 68px;
    gap: 12px;
    padding-block: 23px;
  }
  .salon .treatments h3 {
    font-size: 23px;
  }
  .salon .treatments article > p {
    grid-column: 2/4;
    font-size: 14px;
  }
  .salon .treatment-price {
    grid-row: 1;
    font-size: 10px;
  }
  .salon .treatment-price strong {
    font-size: 24px;
  }
  .salon .treatments .button {
    grid-column: 2/4;
    font-size: 11px;
  }
  .trainer .trainer-top .split-hero {
    grid-template-columns: 1fr;
    gap: 35px;
    padding-block: 52px;
  }
  .trainer .trainer-top h1 {
    font-size: 37px;
  }
  .trainer .trainer-portrait img {
    aspect-ratio: 1.2;
  }
  .trainer #aanpak article {
    padding: 24px 0 24px 43px;
  }
  .trainer #aanpak h3 {
    font-size: 22px;
  }
  .trainer #aanpak article > p {
    font-size: 15px;
  }
  .trainer #aanpak article:before {
    font-size: 12px;
  }
  .administration .split-hero {
    padding-top: 48px;
    padding-bottom: 30px;
  }
  .administration h1 {
    font-size: 34px;
  }
  .administration .finance-visual {
    padding: 14px 12px 35px;
    margin-top: 35px;
    border-radius: 7px;
  }
  .administration .finance-board {
    padding: 17px;
  }
  .administration .finance-note {
    right: 3px;
    bottom: 0;
    font-size: 8px;
    padding: 10px 13px;
  }
  .administration .finance-note strong {
    font-size: 10px;
  }
  .administration .chart-bars {
    height: 85px;
  }
  .administration .package {
    grid-template-columns: 1fr auto;
    padding: 25px 10px;
    gap: 16px 22px;
  }
  .administration .package-index {
    display: none;
  }
  .administration .package h3 {
    grid-column: 1;
    grid-row: 1;
  }
  .administration .package > p {
    grid-column: 1;
    grid-row: 2;
    font-size: 13px;
  }
  .administration .package-price {
    grid-column: 2;
    grid-row: 1/3;
    text-align: right;
    font-size: 32px;
  }
  .administration .package ul {
    grid-column: 1/-1;
    grid-row: 3;
    margin-top: 5px;
  }
  .administration .package li {
    font-size: 13px;
  }
  .administration .package .button {
    grid-column: 1/-1;
    grid-row: 4;
    font-size: 12px;
    justify-self: start;
  }
  .garden .garden-projects {
    grid-template-columns: 1fr;
    gap: 38px;
  }
  .garden .garden-projects figure:nth-child(2) {
    margin-top: 0;
  }
  .garden .garden-projects figure:nth-child(2) .project-photo {
    height: auto;
  }
  .garden .steps {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .garden .steps li {
    gap: 8px 15px;
  }
  .garden .step-num {
    padding-top: 3px;
  }
}
.installer .contact .button {
  background: #fff;
  color: var(--ink);
}
.salon .treatments .button {
  background: transparent;
  color: var(--ink);
}