/* Internal-page variants of the approved nautical identity. */
.nautical-design :is(.canopy-page, .canopy-service-page) {
  background: var(--color-paper);
}

/* The nautical identity carries no atmosphere glows on any template. Scoped
   to the body so no page root can reintroduce them. */
.nautical-design .section-atmosphere {
  display: none;
}

.nautical-design .page-hero--nautical {
  padding-block: var(--section-padding-y);
  background: var(--color-mist);
  border-bottom: var(--nautical-hairline);
}

/* The internal hero takes the rose on its own: one mark, off the bottom
   corner, at the size and opacity the texture used to occupy. The shared
   white-wash pseudo-element is not part of this identity. */
.nautical-design .page-hero--nautical .page-hero__decor::before {
  display: none;
}

.nautical-design .page-hero--nautical .page-hero__course {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 62%;
  left: -6%;
  pointer-events: none;
  transform: translateY(-50%) rotate(4deg);
}

.nautical-design .page-hero--nautical .page-hero__course .nautical-flow {
  position: static;
  display: block;
  width: 100%;
  stroke: color-mix(in srgb,var(--color-sage-deep) 45%,transparent);
}

.nautical-design .page-hero--nautical .page-hero__course .nautical-flow > path {
  opacity: .28;
}

/* The page's rose: large, level with the heading, its right edge leaving
   the canvas so it reads as a mark the page sits on rather than an icon
   placed beside the text. Unmasked. Where the clear space to the right of
   the reading column runs out it drops to the bottom-right corner and
   bleeds off both edges; it is never hidden, so phones see it too. */
.nautical-design .page-hero--nautical .page-hero__decor .nautical-rose {
  position: absolute;
  top: 50%;
  right: calc(var(--nautical-hero-mark-size) * -0.26);
  width: var(--nautical-hero-mark-size);
  transform: translateY(-50%);
  opacity: var(--nautical-hero-mark-opacity);
}

.nautical-design .page-hero--nautical .page-hero__decor .nautical-rose > * {
  transform-box: view-box;
  transform-origin: center;
  animation: nautical-hero-rose-drift 30s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes nautical-hero-rose-drift {
  from { transform: rotate(-1.25deg); }
  to { transform: rotate(1.25deg); }
}

/* In the corner the rose lies under the copy rather than beside it, so it
   drops to a weight that cannot interfere with reading. */
@media (max-width: 80rem) {
  .nautical-design .page-hero--nautical .page-hero__decor .nautical-rose {
    top: auto;
    right: -22%;
    bottom: calc(-1 * var(--space-3xl));
    width: var(--nautical-hero-mark-size-small);
    opacity: var(--nautical-hero-mark-opacity-corner);
    transform: none;
  }
}

@media (max-width: 55rem) {
  .nautical-design .page-hero--nautical .page-hero__course { display: none; }
  .page-band__chart-mark { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nautical-design .page-hero--nautical .page-hero__decor .nautical-rose > * {
    animation: none;
    transform: none;
  }
}

.nautical-design .page-hero--nautical h1 {
  max-width: 16ch;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading-tight);
}

@media (max-width: 43rem) {
  /* A single long compound such as "Körperpsychotherapie" is wider than 16ch
     on a phone; the column is the only limit it needs there. */
  .nautical-design .page-hero--nautical h1 { max-width: none; hyphens: auto; }
}

.nautical-design .page-hero--nautical .page-hero__ornament {
  margin-top: var(--space-l);
}

.nautical-design .page-hero--nautical .page-hero__ornament::before,
.nautical-design .page-hero--nautical .page-hero__ornament::after {
  background: var(--color-line-medium);
}

.nautical-design .page-hero--nautical .page-hero__ornament i {
  background: var(--color-sage-deep);
}

.nautical-design .page-hero--nautical .page-hero__lede {
  color: var(--color-ink-soft);
  font-family: var(--font-family-body);
  font-size: var(--text-m);
  line-height: var(--line-height-body-tight);
}

.nautical-design .canopy-page > .location-section--nautical {
  background: var(--color-paper);
}

.nautical-design .page-hero--nautical .page-hero__media::before {
  border-color: var(--color-line-medium);
}

.nautical-design .page-hero--nautical .framed-media__image {
  aspect-ratio: var(--nautical-internal-hero-media-ratio);
  object-fit: cover;
}

.nautical-design .page-hero--nautical .page-nav__list {
  gap: var(--space-xs);
}

.nautical-design .page-hero--nautical .page-nav__list a {
  border: var(--nautical-hairline);
  /* A pill is a control: it sits on the page, not in the decoration. */
  background: var(--color-paper);
  color: var(--color-navy);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium);
}

.nautical-design .page-hero--nautical .page-nav__list a:is(:hover, :focus-visible) {
  background: var(--color-mist);
  border-color: var(--color-sage-deep);
}

.nautical-design :is(.canopy-page, .canopy-service-page) .page-band {
  border-bottom: var(--nautical-hairline);
}

.nautical-design :is(.canopy-page, .canopy-service-page) .section-heading h2 {
  font-weight: var(--font-weight-regular);
}

.nautical-design :is(.canopy-page, .canopy-service-page) .editorial-split__media::before {
  background: var(--color-mist);
}

.nautical-design :is(.section-pattern--sage,.section-pattern--mist) .editorial-split__media::before {
  background: color-mix(in srgb,var(--color-sage-deep) 32%,var(--color-white));
}

.nautical-design :is(.canopy-page, .canopy-service-page) .editorial-split__media::after {
  border-color: var(--color-line-medium);
}

.nautical-design :is(.canopy-page, .canopy-service-page) .service-card {
  background: var(--color-white);
  border-color: var(--color-line-hairline);
  box-shadow: var(--shadow-small);
}

.nautical-design :is(.canopy-page, .canopy-service-page) .service-card__media::after {
  display: none;
}

.nautical-design :is(.canopy-page, .canopy-service-page) .service-card__media {
  height: auto;
  aspect-ratio: var(--nautical-card-media-ratio);
}

.nautical-design .canopy-page--about .page-hero--nautical {
  padding-block: var(--space-2xl);
}

/* Range rings with soundings: a bearing taken over the qualifications list.
   It sits in the band's upper corner and fades before it reaches the text. */
.page-band__chart-mark {
  position: absolute;
  z-index: -1;
  top: clamp(1.5rem,4vw,3.5rem);
  right: clamp(-7rem,-4vw,-3rem);
  width: clamp(18rem,26vw,26rem);
  aspect-ratio: 1;
  opacity: .4;
  pointer-events: none;
}

.page-band__range-rings {
  position: absolute;
  inset: 0 0 auto auto;
  width: 68%;
}

.page-band__range-rings .nautical-mark__limb {
  stroke: color-mix(in srgb,var(--color-sage-deep) 24%,transparent);
}

.page-band__range-rings .nautical-mark__decor {
  fill: color-mix(in srgb,var(--color-navy) 42%,transparent);
}

.page-band__soundings {
  position: absolute;
  inset: 20% 0 auto auto;
  width: 78%;
  -webkit-mask-image: linear-gradient(to left, transparent, #000 30%, #000 82%, transparent);
  mask-image: linear-gradient(to left, transparent, #000 30%, #000 82%, transparent);
}

.page-band__soundings .nautical-mark__figure { fill: color-mix(in srgb,var(--color-navy) 30%,transparent); }
.page-band__soundings .nautical-mark__decor { fill: color-mix(in srgb,var(--color-sage-deep) 34%,transparent); }

.nautical-design :is(.canopy-page, .canopy-service-page) .service-card__image {
  filter: none;
}

.nautical-design :is(.canopy-page, .canopy-service-page) .cta-section__card {
  border-color: var(--color-line-medium);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
}

/* Standalone quote band: a compass rose sits behind the card's edge, and the
   card lets it show through faintly. */
.page-band__quote-marks {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.page-band__quote-rose {
  position: absolute;
  top: 50%;
  aspect-ratio: 1;
  opacity: .4;
  left: calc(50% + min(28rem, 50%) - clamp(9rem, 12vw, 12rem));
  width: clamp(18rem, 28vw, 26rem);
  transform: translateY(-50%);
}

.page-band__quote-marks .nautical-mark__limb { stroke: color-mix(in srgb, var(--color-sage-deep) 28%, transparent); }
.page-band__quote-marks .nautical-mark__hairline { stroke: color-mix(in srgb, var(--color-sage-deep) 20%, transparent); }
.page-band__quote-marks .nautical-mark__hub { stroke: color-mix(in srgb, var(--color-sage-deep) 30%, transparent); }
.page-band__quote-marks .nautical-mark__ink { fill: color-mix(in srgb, var(--color-sage-deep) 16%, transparent); }
.page-band__quote-marks .nautical-mark__ink-soft { fill: color-mix(in srgb, var(--color-sage-deep) 9%, transparent); }
.page-band__quote-marks .nautical-mark__decor { fill: color-mix(in srgb, var(--color-sage-deep) 40%, transparent); }

.nautical-design .page-band--quote .card-row-quote {
  border-color: color-mix(in srgb, var(--color-sage-deep) 22%, transparent);
  background: color-mix(in srgb, var(--color-white) 78%, transparent);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.nautical-design .page-band--quote .card-row-quote::before { color: var(--color-sage-deep); }
.nautical-design .page-band--quote .card-row-quote cite { color: var(--color-sage-deep); }

@media (max-width: 55rem) {
  .page-band__quote-rose { left: auto; right: -30%; }
}