/* Page-specific composition, using the existing site's type and materials. */
.company-page main > .section { margin-inline: var(--page-gutter); }
.company-page main > .section > .wrap,
.company-page .vacation-wrapper {
  width: min(calc(100% - 2 * var(--page-gutter)), var(--content-rail-width));
  margin: 0 auto;
}
.company-page .section-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: end;
  gap: 1.25rem clamp(2rem, 5vw, 5rem);
  margin: 0 0 clamp(1.75rem, 3vw, 2.75rem);
}
.company-page .section-intro::before { margin: 0; }
.company-page .section-intro h2 {
  max-width: 18ch;
  margin: 0;
  text-wrap: balance;
}
.company-page .section-intro > p {
  max-width: 38ch;
  margin: 0;
  line-height: 1.6;
}
.company-page .vacation-box { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.company-page .vacation-image { position: relative; min-height: 30rem; }
.company-page .vacation-image img { position: absolute; inset: 0; }
.company-page .vacation-content .inner { padding: clamp(1.5rem, 3.5vw, 3.5rem); }
.company-eyebrow { display: block; margin-bottom: 1.5rem; }
.company-page .vacation-title { max-width: 16ch; margin: 0 0 1.5rem; font-size: clamp(2.35rem, 3.7vw, 4rem); }
.company-page .vacation-content p { max-width: 48ch; margin: 0 0 1rem; line-height: 1.6; }
.company-page .vacation-content .vacation-lead { margin: 0 0 1.25rem; font-weight: 600; }
.company-page .vacation-content .site-button { margin-top: .75rem; white-space: normal; }



.company-page .company-pricing {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-columns: auto;
  overflow: visible;
  padding: 0;
  mask-image: none;
  -webkit-mask-image: none;
  scroll-snap-type: none;
}
.company-page .company-pricing .pricing-card { min-width: 0; width: auto; }
.company-page .company-pricing h3 { font-size: clamp(1.65rem, 2vw, 2.25rem); }
.company-page .company-pricing .site-button { white-space: normal; }
.company-page #pricing { background: var(--color-bg); }
@media (max-width: 1100px) {
  .company-page .company-pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .company-page .section-intro { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .company-page .section-intro h2 { max-width: 18ch; }
  .company-page .vacation-box { grid-template-columns: minmax(0, 1fr); }
  .company-page .vacation-image { min-height: 0; aspect-ratio: 4 / 3; }
  .company-page .vacation-content .inner { padding: 1.5rem; }
  .company-page .company-pricing { grid-template-columns: minmax(0, 1fr); }
}


/* Restore the original image-and-copy composition for the starting steps. */
@media (min-width: 768px) {
  .company-page .company-start .vacation-box--reverse {
    grid-template-columns: minmax(0, .64fr) minmax(0, .36fr);
  }
}
.company-page .company-start .vacation-points p { margin: 0; }

/* Keep card spacing balanced after removing the small headings. */
.company-page .company-pricing .pricing-card {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 1.5rem;
  padding: clamp(1.25rem, 2vw, 1.75rem);
}
.company-page .company-pricing .pricing-card__heading {
  display: block;
  min-height: 0;
}
.company-page .company-pricing h3 {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 1.15;
}
.company-page .company-pricing .pricing-card__copy {
  display: block;
  min-height: 0;
  margin: 0;
  overflow: visible;
  line-height: 1.55;
  -webkit-line-clamp: unset;
}
.company-page .company-pricing .pricing-lead {
  gap: .5rem;
  padding: 0;
}
.company-page .company-pricing .pricing-lead span,
.company-page .company-pricing .pricing-lead small { line-height: 1.45; }
.company-page .company-pricing .site-button { margin: 0; }

/* Use the homepage FAQ heading spacing and shared accordion styling. */
.company-page #faq .section-intro { margin-bottom: 0; }
.company-page #faq .section-intro h2 { max-width: 12ch; }


/* One heading, a compact text group and a single action in the introduction. */
.company-page .company-overview .inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.75rem;
  padding: clamp(1.5rem, 3.5vw, 3.5rem);
}
.company-page .company-overview .vacation-title {
  margin: 0;
  font-size: clamp(2.25rem, 3.5vw, 3.75rem);
  line-height: 1.05;
}
.company-overview__copy { display: grid; gap: 1rem; max-width: 44ch; }
.company-page .company-overview .company-overview__copy p { margin: 0; line-height: 1.6; }
.company-page .company-overview .site-button { margin: 0; }
@media (min-width: 768px) {
  .company-page .company-overview .vacation-box { grid-template-columns: minmax(0, .46fr) minmax(0, .54fr); }
  .company-page .company-overview .vacation-image { min-height: 27rem; }
}
@media (max-width: 767.98px) {
  .company-page .company-overview .inner { gap: 1.5rem; }
}

/* Image panels share the same outer rail as the other section panels. */
.company-page .company-overview .vacation-wrapper,
.company-page .company-start .vacation-wrapper {
  width: min(100%, var(--content-rail-width));
  margin-inline: auto;
}

/* Supporting business information follows the existing section rhythm. */
.company-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 4rem; margin: 0; }
.company-facts > div { border-top: 1px solid rgb(var(--color-ink-rgb) / .25); padding-top: 1.25rem; }
.company-facts dt, .company-session h3 { font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 560; line-height: 1.2; }
.company-facts dd { margin: .75rem 0 0; max-width: 48ch; line-height: 1.6; }
.company-price-note { max-width: 76ch; margin: 1.5rem 0 0; font-size: var(--type-body-note-size); line-height: 1.6; }
.company-example__intro { max-width: 60ch; margin: 0 0 2rem; line-height: 1.6; }
.company-session { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin: 0; padding: 0; list-style: none; }
.company-session li { border-top: 1px solid rgb(var(--color-ink-rgb) / .25); padding-top: 1.25rem; }
.company-session h3 { margin: .75rem 0; }
.company-session p { margin: 0; max-width: 36ch; line-height: 1.6; }
@media (max-width: 767.98px) {
  .company-facts, .company-session { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
}

/* Keep the homepage trainer component's heading spacing and panel padding. */
.company-page #about .section-intro { margin-bottom: 0; }

/* Original training steps, with photos added and the top rule removed. */
.company-session li { border-top: 0; padding-top: 0; }
.company-session li > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--section-panel-radius);
  margin-bottom: 1.25rem;
}




.company-page .main-banner .hero-image { object-position: center; }
@media (max-width: 767.98px) {
  .company-page .main-banner .hero-image { object-position: 72% center; }
}

/* Reuse the homepage form banner, including the business message field. */
.company-contact-message { grid-column: 1 / -1; }
.advice-form textarea {
  width: 100%; min-height: 7rem; padding: .85rem 1rem;
  border: 1px solid rgb(255 255 255 / .6); border-radius: .65rem;
  background: rgb(255 255 255 / .12); color: var(--color-white);
  font: inherit; line-height: 1.5; resize: vertical;
}
.advice-form textarea:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* Compact contact banner near the start of the company page. */
.company-page #bedrijfscontact .advice-panel {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(2rem, 3vw, 3rem);
  align-items: center;
}
.company-page #bedrijfscontact .advice-copy .section-intro { margin-bottom: 0; gap: .85rem; }
.company-page #bedrijfscontact .advice-copy h2 { font-size: clamp(2rem, 3.5vw, 3.5rem); max-width: 16ch; }
.company-page #bedrijfscontact .advice-copy > p { margin-bottom: 0; }
.company-page #bedrijfscontact .advice-form { gap: .9rem 1rem; padding: clamp(1.25rem, 2vw, 1.75rem); }
.company-page #bedrijfscontact .advice-form > .advice-field { grid-column: auto; }
.company-page #bedrijfscontact .advice-form > .company-contact-message { grid-column: 1 / -1; }
.company-contact-details { grid-column: 1 / -1; }
.company-contact-details > summary { cursor: pointer; font-size: .85rem; padding-block: .35rem; }
.company-contact-details__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; padding-top: .75rem; }
.company-page #bedrijfscontact .advice-submit { min-height: 2.75rem; padding-block: .7rem; }
.company-page #bedrijfscontact .advice-privacy { font-size: .72rem; line-height: 1.4; }
@media (max-width: 767.98px) {
  .company-page #bedrijfscontact .advice-panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  .company-contact-details__fields { grid-template-columns: minmax(0, 1fr); }
}

/* Reuse the contact form inside the closing photo banner. */
.company-page #call-to-action .company-closing-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  padding-block: clamp(2rem, 3vw, 3rem);
}
.company-page #call-to-action .cta-content { min-height: 0; padding-block: 0; margin: 0; }
.company-page #call-to-action .cta-content h2 { font-size: clamp(2.35rem, 4vw, 4rem); }
.company-page #call-to-action .advice-form { position: relative; z-index: 1; text-align: left; gap: .9rem 1rem; padding: clamp(1.25rem, 2vw, 1.75rem); }
.company-page #call-to-action .advice-form > .advice-field { grid-column: auto; }
@media (max-width: 767.98px) {
  .company-page #call-to-action .company-closing-layout { grid-template-columns: minmax(0, 1fr); }
}