/*
Theme Name: HYPNOSYSTEMIC Editorial vNext
Theme URI: https://hypnosystemic.de/
Author: Richard Kammermeier
Description: HYPNOSYSTEMIC BUILD-09A Visual Prototype. Baut auf rc18 auf und ergänzt eine klar-menschliche Editorial-Formensprache für die Startseite mit echten Buchcovern und Originalportrait.
Version: 0.2.0-rc131
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: hypnosystemic
License: GNU General Public License v2 or later
*/

:root {
  --hs-content: 760px;
  --hs-wide: 1180px;
  --hs-reading: 690px;
  --hs-header-height: 76px;
}

html { scroll-behavior: smooth; }

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a {
  text-underline-offset: 0.16em;
  text-decoration-thickness: 1px;
}

a:hover,
a:focus-visible {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 4px;
}

.hs-site-header {
  border-bottom: 1px solid var(--wp--preset--color--line);
}

.hs-site-header .wp-block-site-title a {
  text-decoration: none;
  letter-spacing: 0.035em;
}

.hs-kicker {
  /* WEB-BUILD-03 rc11: mirror the actual homepage eyebrow, which is a
     standard paragraph block: standard/body size, regular weight, normal
     tracking and 1.5 line-height. The text itself is already uppercase in
     the deployed content, so no synthetic text-transform is needed. */
  font-family: inherit;
  font-size: var(--wp--preset--font-size--md);
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  font-weight: 400;
}

.hs-hero {
  padding-top: clamp(3.75rem, 9vw, 8rem);
  padding-bottom: clamp(3.5rem, 8vw, 7rem);
}

.hs-hero h1 {
  max-width: 16ch;
  text-wrap: balance;
}

.hs-hero-copy {
  max-width: 42rem;
}

.hs-section {
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.hs-section + .hs-section {
  border-top: 1px solid var(--wp--preset--color--line);
}

.hs-reading {
  max-width: var(--hs-reading);
}

/* WEB-BUILD-02: narrower reading copy must share the left edge of its
   section heading rather than being auto-centered inside the 760 px column. */
.hs-section > .hs-reading {
  width: min(100%, var(--hs-reading));
  max-width: var(--hs-reading);
  margin-left: 0 !important;
  margin-right: auto !important;
  justify-self: start;
}


/* WEB-BUILD-02 rc7: editorial vertical rhythm on inner pages.
   Give explanatory copy breathing room after H1/H2, while tightening the
   disproportionately large whitespace after the copy and between sections.
   The start page keeps its established, more generous rhythm. */
body:not(.home) .wp-block-post-content > .hs-section {
  padding-top: clamp(3rem, 5vw, 4rem);
  padding-bottom: clamp(2rem, 3.5vw, 3rem);
}

body:not(.home) .wp-block-post-content > .hs-section:first-child {
  padding-top: clamp(3.75rem, 7vw, 6rem);
}

/* WEB-BUILD-03 rc10: inner-page H1s previously inherited the global 3XL
   display size while the homepage hero deliberately uses 2XL. That made
   detail-page headlines dominate their editorial eyebrow. Keep the same
   hierarchy as the homepage: eyebrow at body scale, H1 at 2XL. */
body:not(.home) .wp-block-post-content > .hs-section:first-child > h1 {
  font-size: var(--wp--preset--font-size--2-xl);
}

body:not(.home) .wp-block-post-content > .hs-section > h1 + .hs-reading,
body:not(.home) .wp-block-post-content > .hs-section > h2 + .hs-reading {
  margin-block-start: 24px !important;
}

body:not(.home) .wp-block-post-content > .hs-section > .hs-reading + .hs-reading {
  margin-block-start: 12px !important;
}

body:not(.home) .wp-block-post-content > .hs-section > .hs-reading:last-child {
  margin-bottom: 0 !important;
}

/* Keep long German competency headings intact rather than allowing emergency
   character-level wrapping in narrow columns. */
.hs-competency-grid h3 {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: manual;
}

/* Arbeitsweise: three paired principle rows (2 + 2 + 2).  This is visual
   tabular rhythm using semantic Gutenberg columns, not an HTML data table. */
.hs-principle-row {
  margin-top: 0 !important;
  padding-top: 1.15rem;
  border-top: 1px solid var(--wp--preset--color--line);
}

.hs-principle-row + .hs-principle-row {
  margin-top: var(--wp--preset--spacing--48, 3rem) !important;
}

.hs-principle-row .hs-card {
  border-top: 0;
  padding-top: 0;
}

/* Über mich: the three competence perspectives need more horizontal room
   than the normal reading column, while remaining centered and responsive. */
.hs-competency-section {
  width: min(100%, 960px);
  max-width: 960px !important;
}

.hs-competency-grid {
  width: 100%;
  max-width: 960px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.hs-competency-grid > .wp-block-column {
  min-width: 0;
}

/* Contact Form 7: integrate the native form into the editorial system. */
.hs-contact-form-section .wpcf7 {
  width: min(100%, var(--hs-reading));
  max-width: var(--hs-reading);
  margin-left: 0;
  margin-right: auto;
}

.hs-contact-form-section .wpcf7-form p {
  margin: 0 0 1.15rem;
}

.hs-contact-form-section .wpcf7-form label {
  display: block;
  font-weight: 600;
}

.hs-contact-form-section .wpcf7-form-control-wrap {
  display: block;
  margin-top: .4rem;
}

.hs-contact-form-section input[type="text"],
.hs-contact-form-section input[type="email"],
.hs-contact-form-section input[type="tel"],
.hs-contact-form-section input[type="url"],
.hs-contact-form-section select,
.hs-contact-form-section textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: .75rem .8rem;
  border: 1px solid var(--wp--preset--color--ink);
  border-radius: 0;
  background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--ink);
  font: inherit;
  line-height: 1.45;
}

.hs-contact-form-section textarea {
  min-height: 10rem;
  resize: vertical;
}

.hs-contact-form-section input[type="submit"] {
  appearance: none;
  border: 1px solid var(--wp--preset--color--ink);
  border-radius: 0;
  padding: .8rem 1.1rem;
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--white);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.hs-contact-form-section input[type="submit"]:hover,
.hs-contact-form-section input[type="submit"]:focus-visible {
  background: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
}

.hs-rule-dot {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: min(220px, 48vw);
  margin-block: 1.5rem 2rem;
}

.hs-rule-dot::before,
.hs-rule-dot::after {
  content: "";
  height: 1px;
  background: var(--wp--preset--color--line);
  flex: 1;
}

.hs-rule-dot::marker { display: none; }

.hs-rule-dot > span,
.hs-dot {
  width: .48rem;
  height: .48rem;
  background: var(--wp--preset--color--accent);
  border-radius: 50%;
  flex: 0 0 auto;
}

.hs-card {
  border-top: 1px solid var(--wp--preset--color--ink);
  padding-top: 1rem;
}

.hs-card h3 {
  margin-top: 0;
}

.hs-cta {
  padding: clamp(2rem, 5vw, 3.5rem);
  border-top: 1px solid var(--wp--preset--color--ink);
  border-bottom: 1px solid var(--wp--preset--color--ink);
}

.hs-cta p {
  max-width: 42rem;
}

.hs-book {
  align-items: center;
}

.hs-book-cover img {
  box-shadow: 0 10px 30px rgba(31,37,42,.10);
}

.hs-muted {
  color: var(--wp--preset--color--muted);
}

.hs-site-footer {
  margin-top: clamp(4rem, 8vw, 8rem);
  border-top: 1px solid var(--wp--preset--color--line);
  padding-block: 2.5rem;
}

.wp-block-button .wp-block-button__link {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.wp-block-button .wp-block-button__link:hover {
  background: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
}

.wp-block-navigation__responsive-container.is-menu-open {
  padding: 1.5rem;
  background: var(--wp--preset--color--ivory);
  color: var(--wp--preset--color--ink);
}

/* WEB-BUILD-03 rc14: the 900px rc13 measure still left a single-word
   widow ("nutzen.") in the reference headline on page 103. On genuinely
   wide desktop viewports, widen only the first inner-page H1 to 1020px and
   balance its lines. The reading copy, eyebrow and all tablet/mobile layouts
   remain on their established measures; no manual line breaks are used. */
@media (min-width: 1280px) {
  body:not(.home) .wp-block-post-content > .hs-section:first-child > h1 {
    width: min(1020px, calc(100% + 260px));
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none;
    text-wrap: balance;
  }
}

@media (max-width: 781px) {
  :root { --hs-header-height: 64px; }

  .hs-hero {
    padding-top: 3.25rem;
    padding-bottom: 3.25rem;
  }

  .hs-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .hs-card {
    padding-top: .85rem;
  }

  .hs-book {
    gap: 1.75rem !important;
  }

  .hs-competency-section {
    width: 100%;
  }

  .hs-competency-grid {
    gap: 2rem !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
    padding-top: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* WEB-BUILD-03 rc16: page 110 (Führung & Organisation) has a comparatively
   short hero headline. On the rc14 wide-desktop measure it stretches too far
   horizontally and loses the editorial rhythm seen on the other offer hubs.
   Narrow only this page's first H1 on genuinely wide desktop viewports.
   Eyebrow, intro copy, all other pages and tablet/mobile remain unchanged. */
@media (min-width: 1280px) {
  body.page-id-110 .wp-block-post-content > .hs-section:first-child > h1 {
    width: min(820px, calc(100% + 60px));
    max-width: 820px !important;
    text-wrap: balance;
  }
}


/* WEB-BUILD-05 rc17: book detail pages need a denser editorial hierarchy.
   The global 2XL H2 scale is appropriate for offer/professional pages, but
   makes short book-detail sections feel oversized and leaves too much visual
   emptiness. Scope the smaller XL scale only to child pages of /buecher/
   (parent page ID 118). The books landing page itself and all non-book pages
   remain unchanged. */
body.parent-pageid-118 .wp-block-post-content h2 {
  font-size: var(--wp--preset--font-size--xl);
  line-height: 1.10;
}


/* WEB-BUILD-05 rc18: matrix labels on book detail pages need to behave as
   compact editorial labels rather than section-scale H2s. Keep the matrix
   architecture, but reduce only those three left-column labels. Also pull
   the list in "Was Sie darin finden" left so its markers sit closer to the
   content axis. Non-book pages and the books landing page remain unchanged. */
body.parent-pageid-118 .hs-book-facts .hs-book-fact-row h2 {
  font-size: var(--wp--preset--font-size--lg);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

body.parent-pageid-118 .hs-book-facts .hs-book-fact-row .wp-block-list {
  margin-left: 0;
  padding-left: 1rem;
}

body.parent-pageid-118 .hs-book-facts .hs-book-fact-row .wp-block-list li {
  padding-left: 0;
}

/* ================================================================
   WEB-BUILD-09A rc19 — STARTSEITE VISUAL PROTOTYPE
   Scope: visual system for page 100 / home only, plus restrained
   HYPNOSYSTEMIC brand lockup in header/footer.
   ================================================================ */

:root {
  --hs09-navy: #0b3452;
  --hs09-red: #d92520;
  --hs09-paper: #f8f5ed;
  --hs09-paper-2: #f2eee5;
  --hs09-line: rgba(11, 52, 82, .20);
  --hs09-muted: #66717a;
}

.hs-brand-lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 12.5rem;
}

.hs-brand-name {
  position: relative;
  display: inline-block;
  color: var(--hs09-navy);
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(1.15rem, 1.1rem + .25vw, 1.4rem);
  line-height: 1;
  letter-spacing: .055em;
  text-decoration: none;
  text-transform: uppercase;
}

.hs-brand-name::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: .5rem;
  background: linear-gradient(to right, var(--hs09-navy) 0 44%, transparent 44% 49%, var(--hs09-red) 49% 54%, transparent 54% 59%, var(--hs09-navy) 59% 100%);
}

.hs-brand-tagline {
  margin-top: .45rem;
  color: var(--hs09-navy);
  font-family: var(--wp--preset--font-family--sans);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}

.hs-site-header {
  background: rgba(248,245,237,.96);
  backdrop-filter: blur(8px);
}

.hs-site-header > .wp-block-group.alignwide {
  min-height: 78px;
}

.hs-site-footer .hs-brand-lockup {
  margin-bottom: .5rem;
}

body.home {
  background: var(--hs09-paper);
  color: var(--hs09-navy);
}

body.home .wp-block-post-content {
  margin-top: 0;
}

body.home .wp-block-post-content > .hs09-home {
  margin-block-start: 0 !important;
}

.hs09-home {
  --hs09-max: 1180px;
  color: var(--hs09-navy);
}

.hs09-home p,
.hs09-home li {
  color: var(--hs09-navy);
}

.hs09-home a {
  color: var(--hs09-navy);
}

.hs09-shell {
  width: min(calc(100% - 2.3rem), var(--hs09-max));
  margin-inline: auto;
}

.hs09-kicker {
  margin: 0 0 1rem;
  font-family: var(--wp--preset--font-family--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .15em;
  line-height: 1.35;
  text-transform: uppercase;
}

.hs09-section-label {
  margin: 0 0 .8rem;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hs09-rule {
  width: 2rem;
  height: 2px;
  margin: 1.15rem 0 1.35rem;
  background: var(--hs09-red);
}

/* HERO · BUILD-09B HOTFIX
   One shared compositional field: copy and quote stay in the foreground,
   while the architectural image sits behind them and the arc may cross
   the text/image boundary. This prevents the image from acting as a narrow
   middle column and preserves the chosen B1 headline rhythm. */
.hs09-hero {
  background: var(--hs09-paper);
  border-bottom: 1px solid rgba(11,52,82,.10);
}

.hs09-hero-grid {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, .30fr);
  column-gap: clamp(2rem, 4vw, 4.5rem);
  align-items: stretch;
  min-height: clamp(570px, 58vw, 690px);
  overflow: hidden;
}

.hs09-hero-copy {
  position: relative;
  z-index: 3;
  grid-column: 1;
  align-self: center;
  width: min(560px, 52vw);
  padding: clamp(3.6rem, 6.2vw, 6rem) 0 clamp(3.2rem, 5vw, 5rem);
}

.hs09-hero h1 {
  max-width: none;
  margin: 0;
  color: var(--hs09-navy);
  font-size: clamp(3rem, 4.65vw, 4.95rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.hs09-hero-intro {
  max-width: 42rem;
  margin: 0 0 1.35rem;
  font-size: clamp(1rem, .96rem + .18vw, 1.15rem);
  line-height: 1.55;
}

.hs09-hero .wp-block-buttons {
  gap: .75rem;
  margin-top: 1.45rem;
}

.hs09-home .wp-block-button__link {
  border-color: var(--hs09-navy);
  background: var(--hs09-navy);
  color: #fff;
  font-weight: 500;
}

.hs09-home .is-style-outline > .wp-block-button__link,
.hs09-home .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--hs09-navy);
}

.hs09-home .wp-block-button__link:hover,
.hs09-home .wp-block-button__link:focus-visible {
  border-color: var(--hs09-red);
  background: var(--hs09-red);
  color: #fff;
}

.hs09-hero-visual {
  position: absolute;
  z-index: 0;
  inset: 0 13% 0 31%;
  min-height: 0;
  overflow: visible;
  background-image:
    linear-gradient(90deg, rgba(248,245,237,.90) 0%, rgba(248,245,237,.42) 16%, rgba(248,245,237,0) 34%),
    url('assets/images/hero-architecture.webp');
  background-position: center, center 48%;
  background-size: cover, cover;
  background-repeat: no-repeat;
}

/* the quiet matte above the arc: architectural depth, not decoration */
.hs09-hero-visual::before {
  content: "";
  position: absolute;
  inset: 0 0 52% 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(11,52,82,.09), rgba(11,52,82,.018));
  pointer-events: none;
}

/* open circle = possibility space / movement; deliberately crosses the
   paper/image boundary rather than being clipped inside an image column */
.hs09-hero-visual::after {
  content: "";
  position: absolute;
  width: clamp(330px, 38vw, 500px);
  aspect-ratio: 1;
  left: -18%;
  top: 13%;
  z-index: 2;
  border: 1.25px solid var(--hs09-navy);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(-27deg);
  opacity: .82;
  pointer-events: none;
}

.hs09-hero-dot {
  position: absolute;
  left: -1.3%;
  top: 49.2%;
  z-index: 4;
  width: .68rem;
  height: .68rem;
  border-radius: 50%;
  background: var(--hs09-red);
  box-shadow: 0 0 0 4px rgba(248,245,237,.28);
}

.hs09-hero-quote {
  position: relative;
  z-index: 3;
  grid-column: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  padding: clamp(2rem, 4vw, 4rem) 0 clamp(2rem, 4vw, 4rem) clamp(1.4rem, 2.2vw, 2.4rem);
  border-left: 1px solid rgba(11,52,82,.10);
  background: linear-gradient(90deg, rgba(248,245,237,.32), rgba(248,245,237,.78) 52%, rgba(248,245,237,.93));
}

.hs09-quote {
  margin: 0;
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(1.12rem, 1rem + .45vw, 1.55rem);
  font-style: italic;
  line-height: 1.2;
}

.hs09-quote-author {
  margin-top: 1.35rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* THREE ACCESS DOORS */
.hs09-access {
  padding: clamp(2.25rem, 4vw, 3.75rem) 0;
  background: #fbf9f4;
  border-bottom: 1px solid rgba(11,52,82,.10);
}

.hs09-access-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(220px, .85fr);
}

.hs09-access-card,
.hs09-access-quote {
  min-width: 0;
  padding: 0 clamp(1rem, 2.5vw, 2rem);
}

.hs09-access-card:first-child { padding-left: 0; }
.hs09-access-quote { padding-right: 0; }

.hs09-access-card + .hs09-access-card,
.hs09-access-quote {
  border-left: 1px solid var(--hs09-line);
}

.hs09-index {
  display: inline-block;
  margin-right: .6rem;
  color: var(--hs09-red);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.hs09-access-card h2 {
  margin: .8rem 0 .8rem;
  color: var(--hs09-navy);
  font-size: clamp(1.6rem, 1.3rem + .85vw, 2.15rem);
  line-height: 1.02;
}

.hs09-access-card p {
  margin-bottom: .9rem;
  font-size: .98rem;
  line-height: 1.5;
}

.hs09-text-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .92rem;
  text-decoration: underline;
  text-underline-offset: .25em;
}

.hs09-access-quote {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hs09-access-quote .hs09-quote {
  font-size: clamp(1.15rem, 1rem + .4vw, 1.45rem);
}

/* Symbol grammar */
.hs09-symbol {
  position: relative;
  width: 64px;
  height: 64px;
  margin-bottom: .25rem;
}

.hs09-symbol::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hs09-red);
}

.hs09-symbol--self::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1.5px solid var(--hs09-navy);
  border-right-color: transparent;
  border-radius: 50%;
  transform: rotate(-18deg);
}
.hs09-symbol--self::after { right: 4px; bottom: 10px; }

.hs09-symbol--transition::before,
.hs09-symbol--transition span::before {
  content: "";
  position: absolute;
  top: 9px;
  width: 42px;
  height: 42px;
  border: 1.5px solid var(--hs09-navy);
  border-radius: 50%;
}
.hs09-symbol--transition::before { left: 2px; }
.hs09-symbol--transition span::before { right: 2px; }
.hs09-symbol--transition::after { left: 28px; top: 26px; }

.hs09-symbol--structure::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 6px;
  width: 50px;
  height: 50px;
  background: var(--hs09-navy);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.hs09-symbol--structure span::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  width: 44px;
  height: 44px;
  z-index: 1;
  background: #fbf9f4;
  clip-path: polygon(50% 4%, 96% 96%, 4% 96%);
}
.hs09-symbol--structure::after { left: 28px; top: 35px; z-index: 2; }

/* PROCESS */
.hs09-process {
  background: var(--hs09-paper-2);
}

.hs09-process-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(360px, 1.05fr) minmax(155px, .36fr);
  min-height: 360px;
}

.hs09-process-copy {
  padding: clamp(2.8rem, 5vw, 5rem) clamp(1.5rem, 4vw, 4rem) clamp(2.8rem, 5vw, 5rem) 0;
  align-self: center;
}

.hs09-process h2,
.hs09-selfreg h2,
.hs09-org h2,
.hs09-books h2,
.hs09-author h2 {
  margin: 0;
  color: var(--hs09-navy);
  font-size: clamp(2rem, 1.6rem + 1.35vw, 3.15rem);
  line-height: 1.02;
  letter-spacing: -.025em;
}

.hs09-process-copy p {
  max-width: 40rem;
  margin-top: 1.1rem;
  line-height: 1.55;
}

.hs09-process-visual {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  background-image: url('assets/images/process-rock.webp');
  background-position: center;
  background-size: cover;
}

/* quiet recurrence of the hero arc */
.hs09-process-visual::after {
  content: "";
  position: absolute;
  width: 330px;
  height: 330px;
  left: -155px;
  bottom: -130px;
  border: 1px solid rgba(11,52,82,.35);
  border-right-color: transparent;
  border-radius: 50%;
  transform: rotate(18deg);
}

.hs09-process-legend {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .75rem;
  padding-left: clamp(1.4rem, 2.4vw, 2.4rem);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.hs09-process-legend::after {
  content: "";
  width: 2rem;
  height: 1px;
  margin-top: .2rem;
  background: var(--hs09-navy);
}

/* SELF REGULATION + ORGANISATION */
.hs09-dual {
  background: #fbf9f4;
  border-top: 1px solid rgba(11,52,82,.08);
  border-bottom: 1px solid rgba(11,52,82,.08);
}

.hs09-dual-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(300px, .78fr) minmax(0, .9fr);
  align-items: stretch;
}

.hs09-selfreg,
.hs09-org {
  padding: clamp(2.8rem, 4.8vw, 4.5rem) clamp(1.5rem, 3vw, 3.2rem);
}

.hs09-selfreg { padding-left: 0; }
.hs09-org { padding-right: 0; }

.hs09-selfreg p,
.hs09-org p {
  margin-top: 1rem;
  line-height: 1.55;
}

.hs09-cable {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  background-image: url('assets/images/selfreg-cable.webp');
  background-position: center;
  background-size: cover;
}

.hs09-cable::after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  left: -185px;
  bottom: -125px;
  border: 1px solid rgba(11,52,82,.34);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(8deg);
  pointer-events: none;
}

.hs09-org-model {
  position: relative;
  width: min(100%, 315px);
  height: 205px;
  margin: 1.35rem auto 0;
}

.hs09-org-model .node {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  border: 1px solid rgba(11,52,82,.15);
  border-radius: 50%;
  background: rgba(196,205,209,.22);
  font-size: .73rem;
  text-align: center;
}

.hs09-org-model .n1 { left: 102px; top: 0; }
.hs09-org-model .n2 { left: 0; top: 55px; }
.hs09-org-model .n3 { right: 0; top: 55px; }
.hs09-org-model .n4 { left: 48px; bottom: 0; }
.hs09-org-model .n5 { right: 48px; bottom: 0; }
.hs09-org-model .center {
  left: 101px;
  top: 57px;
  z-index: 2;
  background: rgba(215,219,218,.72);
  font-family: var(--wp--preset--font-family--serif);
  font-size: .88rem;
}

.hs09-small-quote {
  margin-top: 1rem;
  padding-left: 1rem;
  border-left: 2px solid var(--hs09-red);
  font-family: var(--wp--preset--font-family--serif);
  font-style: italic;
  line-height: 1.35;
}

/* BOOKS */
.hs09-books {
  padding: clamp(3rem, 5vw, 5rem) 0;
  background: var(--hs09-paper);
}

.hs09-books-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.hs09-books-head p {
  max-width: 38rem;
  margin: .75rem 0 0;
}

.hs09-books-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 3.4rem);
}

.hs09-book-card {
  min-width: 0;
}

.hs09-book-cover {
  width: min(100%, 175px);
  aspect-ratio: 1000 / 1419;
  margin-bottom: 1rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: 0 10px 30px rgba(11,52,82,.08);
}

.hs09-book--124 { background-image: url('assets/images/book-124-selbsthypnose.webp'); }
.hs09-book--143 { background-image: url('assets/images/book-143-prozessnavigation.webp'); }
.hs09-book--130 { background-image: url('assets/images/book-130-pendulation.webp'); }
.hs09-book--140 { background-image: url('assets/images/book-140-neu-in-fuehrung.webp'); aspect-ratio: 1000 / 1519; }

.hs09-book-card h3 {
  margin: 0 0 .5rem;
  color: var(--hs09-navy);
  font-size: clamp(1.2rem, 1.1rem + .3vw, 1.45rem);
  line-height: 1.12;
}

.hs09-book-card p {
  margin-bottom: .7rem;
  font-size: .92rem;
  line-height: 1.45;
}

/* AUTHOR */
.hs09-author {
  background: #f1eee7;
  border-top: 1px solid rgba(11,52,82,.08);
}

.hs09-author-grid {
  display: grid;
  grid-template-columns: 205px minmax(0, 1fr) minmax(245px, .62fr);
  align-items: stretch;
}

.hs09-author-photo {
  min-height: 205px;
  background-image: url('assets/images/richard-kammermeier-original.jpeg');
  background-position: center;
  background-size: cover;
}

.hs09-author-copy,
.hs09-author-quote {
  padding: clamp(2rem, 3.5vw, 3rem);
}

.hs09-author-copy p {
  max-width: 42rem;
  margin-top: .8rem;
}

.hs09-author-quote {
  display: flex;
  align-items: center;
  border-left: 1px solid var(--hs09-line);
}

.hs09-author-quote .hs09-quote {
  font-size: clamp(1rem, .95rem + .25vw, 1.28rem);
}

@media (max-width: 980px) {
  .hs09-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(145px, .26fr);
    column-gap: clamp(1.25rem, 3vw, 2.25rem);
    min-height: 600px;
  }
  .hs09-hero-copy {
    width: min(500px, 58vw);
  }
  .hs09-hero h1 {
    font-size: clamp(2.85rem, 5.5vw, 4.15rem);
  }
  .hs09-hero-visual {
    inset: 0 12% 0 34%;
  }
  .hs09-hero-quote {
    grid-column: 2;
    padding: 2rem 0 2rem 1.25rem;
    border-left: 1px solid rgba(11,52,82,.10);
    border-top: 0;
  }
  .hs09-access-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
  .hs09-access-quote {
    grid-column: 1 / -1;
    margin-top: 2rem;
    padding: 1.7rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--hs09-line);
  }
  .hs09-process-grid {
    grid-template-columns: minmax(0, 1fr) minmax(330px, .95fr);
  }
  .hs09-process-legend {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 1.4rem 0;
    border-top: 1px solid var(--hs09-line);
  }
  .hs09-dual-grid {
    grid-template-columns: 1fr 1fr;
  }
  .hs09-org { grid-column: 1 / -1; padding-left: 0; }
  .hs09-books-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs09-author-grid { grid-template-columns: 180px 1fr; }
  .hs09-author-quote { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--hs09-line); }
}

@media (max-width: 700px) {
  .hs-site-header > .wp-block-group.alignwide {
    min-height: 68px;
  }
  .hs-brand-tagline { font-size: .52rem; letter-spacing: .12em; }
  .hs09-shell { width: min(calc(100% - 2rem), var(--hs09-max)); }
  .hs09-access-grid,
  .hs09-process-grid,
  .hs09-dual-grid,
  .hs09-author-grid {
    grid-template-columns: 1fr;
  }
  .hs09-hero-grid {
    display: block;
    min-height: 0;
    overflow: visible;
  }
  .hs09-hero-copy {
    width: auto;
    padding: 3.1rem 0 2.4rem;
  }
  .hs09-hero h1 {
    max-width: 13ch;
    font-size: clamp(2.65rem, 11vw, 4.1rem);
  }
  .hs09-hero-visual {
    position: relative;
    inset: auto;
    min-height: 390px;
    margin-inline: calc(50% - 50vw);
    background-image: url('assets/images/hero-architecture.webp');
    background-position: center 48%;
    background-size: cover;
    overflow: hidden;
  }
  .hs09-hero-visual::after {
    width: 330px;
    left: -90px;
    top: 10%;
  }
  .hs09-hero-dot { left: 17px; top: 50%; }
  .hs09-hero-quote {
    display: flex;
    grid-column: auto;
    padding: 1.5rem 0 2.2rem;
    border-left: 0;
    border-top: 1px solid var(--hs09-line);
    background: transparent;
  }
  .hs09-access-card,
  .hs09-access-card:first-child,
  .hs09-access-quote {
    padding: 1.65rem 0;
    border-left: 0;
  }
  .hs09-access-card + .hs09-access-card,
  .hs09-access-quote {
    border-top: 1px solid var(--hs09-line);
  }
  .hs09-process-copy,
  .hs09-selfreg,
  .hs09-org {
    padding: 2.7rem 0;
  }
  .hs09-process-visual,
  .hs09-cable {
    min-height: 330px;
  }
  .hs09-process-legend {
    flex-direction: column;
    gap: .55rem;
  }
  .hs09-org { grid-column: auto; }
  .hs09-books-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .hs09-books-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.2rem;
  }
  .hs09-book-cover { width: min(100%, 145px); }
  .hs09-author-photo {
    width: 160px;
    min-height: 160px;
    margin-top: 2rem;
  }
  .hs09-author-copy,
  .hs09-author-quote { padding: 1.5rem 0 2rem; }
}


/* ================================================================
   BUILD-09C rc21 — HERO COMPOSITION + RESPONSIVE SYSTEM
   Desktop and mobile are deliberately composed as different states.
   The architectural image is a broad background field, not a grid column.
   ================================================================ */

/* Desktop / wide tablet: editorial overlay, three-line B1 rhythm. */
.hs09-hero-grid {
  position: relative;
  isolation: isolate;
  display: block;
  min-height: clamp(500px, 46vw, 610px);
  overflow: hidden;
}

.hs09-hero-copy {
  position: relative;
  z-index: 4;
  width: min(49%, 575px);
  max-width: none;
  padding: clamp(3.8rem, 6vw, 5.7rem) 0 clamp(3.2rem, 5vw, 4.8rem);
}

.hs09-hero h1 {
  max-width: 11.9ch;
  margin: 0;
  font-size: clamp(2.6rem, 3.75vw, 4rem);
  line-height: 1.01;
  letter-spacing: -.032em;
  text-wrap: normal;
}

.hs09-hero-intro {
  max-width: 39rem;
  font-size: clamp(.98rem, .93rem + .18vw, 1.12rem);
}

.hs09-hero .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .72rem;
}

.hs09-hero .wp-block-button,
.hs09-hero .wp-block-button__link {
  min-width: 0;
}

.hs09-hero-visual {
  position: absolute;
  z-index: 0;
  inset: 0 0 0 42%;
  min-height: 0;
  overflow: visible;
  background-image:
    linear-gradient(90deg, rgba(248,245,237,.96) 0%, rgba(248,245,237,.66) 9%, rgba(248,245,237,.18) 23%, rgba(248,245,237,0) 36%),
    url('assets/images/hero-architecture.webp');
  background-position: center, center 48%;
  background-size: cover, cover;
  background-repeat: no-repeat;
}

/* quiet matte above the arc / upper architectural field */
.hs09-hero-visual::before {
  content: "";
  position: absolute;
  inset: 0 0 48% 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(11,52,82,.075), rgba(11,52,82,.012));
  pointer-events: none;
}

/* open possibility-space arc: mostly in image, only lightly entering copy */
.hs09-hero-visual::after {
  content: "";
  position: absolute;
  width: clamp(300px, 31vw, 430px);
  aspect-ratio: 1;
  left: -8%;
  top: 13%;
  z-index: 2;
  border: 1.15px solid var(--hs09-navy);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(-22deg);
  opacity: .78;
  pointer-events: none;
}

.hs09-hero-dot {
  position: absolute;
  left: -1.5%;
  top: 49%;
  z-index: 3;
  width: .62rem;
  height: .62rem;
  border-radius: 50%;
  background: var(--hs09-red);
  box-shadow: 0 0 0 3px rgba(248,245,237,.24);
}

/* quote is part of the architectural field, not a separate fourth column */
.hs09-hero-quote {
  position: absolute;
  z-index: 5;
  right: 1.5%;
  top: 31%;
  width: min(16.5%, 190px);
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
}

.hs09-hero-quote .hs09-quote {
  font-size: clamp(1.05rem, .93rem + .35vw, 1.34rem);
  line-height: 1.18;
}

.hs09-hero-quote .hs09-rule {
  margin: 1rem 0 1rem;
}

.hs09-hero-quote .hs09-quote-author {
  margin-top: 0;
  font-size: .62rem;
  line-height: 1.35;
}

/* Keep the access row elegant: four columns only when there is real room. */
@media (max-width: 1100px) and (min-width: 761px) {
  .hs09-hero-grid {
    min-height: clamp(485px, 56vw, 560px);
  }
  .hs09-hero-copy {
    width: min(53%, 520px);
    padding: 3.5rem 0 3.2rem;
  }
  .hs09-hero h1 {
    max-width: 12.2ch;
    font-size: clamp(2.5rem, 4.4vw, 3.25rem);
  }
  .hs09-hero-visual {
    inset: 0 0 0 45%;
  }
  .hs09-hero-visual::after {
    width: clamp(280px, 34vw, 370px);
    left: -9%;
    top: 15%;
  }
  .hs09-hero-dot {
    left: -2%;
    top: 49%;
  }
  .hs09-hero-quote {
    right: 1.25%;
    top: 30%;
    width: min(17.5%, 165px);
  }
  .hs09-access-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
  .hs09-access-quote {
    grid-column: 1 / -1;
    margin-top: 1.8rem;
    padding: 1.55rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--hs09-line);
  }
  .hs09-access-card h2 {
    font-size: clamp(1.55rem, 2.6vw, 1.9rem);
  }
}

/* Mobile: intentionally vertical, not a shrunken desktop overlay. */
@media (max-width: 760px) {
  .hs09-shell {
    width: min(calc(100% - 2rem), var(--hs09-max));
  }

  .hs09-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(315px, 72vw);
    min-height: 0;
    overflow: visible;
  }

  .hs09-hero-copy {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    padding: 2.7rem 0 2.25rem;
  }

  .hs09-kicker {
    margin-bottom: .8rem;
    font-size: .68rem;
    letter-spacing: .13em;
  }

  .hs09-hero h1 {
    max-width: 10.8ch;
    font-size: clamp(2.35rem, 10.8vw, 3.15rem);
    line-height: .99;
    letter-spacing: -.03em;
  }

  .hs09-hero-intro {
    max-width: 33rem;
    font-size: 1rem;
    line-height: 1.52;
  }

  .hs09-hero .wp-block-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
  }

  .hs09-hero .wp-block-button,
  .hs09-hero .wp-block-button__link {
    width: 100%;
    box-sizing: border-box;
  }

  .hs09-hero-visual {
    position: relative;
    grid-column: 1;
    grid-row: 2;
    inset: auto;
    min-height: 315px;
    margin-inline: calc(50% - 50vw);
    overflow: hidden;
    background-image:
      linear-gradient(90deg, rgba(248,245,237,.18), rgba(248,245,237,0) 35%),
      url('assets/images/hero-architecture.webp');
    background-position: center, center 48%;
    background-size: cover, cover;
  }

  .hs09-hero-visual::before {
    inset: 0 0 52% 0;
    background: linear-gradient(180deg, rgba(11,52,82,.07), rgba(11,52,82,.01));
  }

  .hs09-hero-visual::after {
    width: min(78vw, 320px);
    left: -16vw;
    top: 9%;
    border-width: 1px;
  }

  .hs09-hero-dot {
    left: 8%;
    top: 50%;
    width: .58rem;
    height: .58rem;
  }

  .hs09-hero-quote {
    position: relative;
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    justify-self: start;
    right: auto;
    top: auto;
    width: min(54%, 205px);
    margin: 0 0 1rem 0;
    padding: .8rem .9rem .85rem;
    background: rgba(248,245,237,.88);
    backdrop-filter: blur(3px);
  }

  .hs09-hero-quote .hs09-quote {
    font-size: 1.04rem;
    line-height: 1.18;
  }

  .hs09-hero-quote .hs09-rule {
    margin: .7rem 0 .65rem;
  }

  .hs09-hero-quote .hs09-quote-author {
    font-size: .58rem;
  }

  .hs09-access-grid,
  .hs09-process-grid,
  .hs09-dual-grid,
  .hs09-author-grid {
    grid-template-columns: 1fr;
  }

  .hs09-access-card,
  .hs09-access-card:first-child,
  .hs09-access-quote {
    padding: 1.55rem 0;
    border-left: 0;
  }

  .hs09-access-card + .hs09-access-card,
  .hs09-access-quote {
    border-top: 1px solid var(--hs09-line);
  }

  .hs09-access-card h2 {
    font-size: clamp(1.65rem, 7vw, 2rem);
  }
}

@media (max-width: 520px) {
  .hs09-books-grid {
    grid-template-columns: 1fr;
  }
  .hs09-book-cover {
    width: min(52vw, 175px);
  }
}


/* ================================================================
   BUILD-09D rc22 — HOMEPAGE CANVAS / WORDPRESS CONSTRAINED-LAYOUT FIX
   The front-page template deliberately keeps a 760px reading column for
   ordinary pages. On the homepage, that constrained Post Content wrapper
   was also capping the visual prototype, so a nominal 1180px .hs09-shell
   could never become wider than the 760px parent. Escape that constraint
   only on the homepage; inner pages keep the editorial reading width.
   ================================================================ */
body.home main.wp-block-group > .wp-block-post-content,
body.home .wp-block-post-content {
  width: 100% !important;
  max-width: none !important;
}

body.home .wp-block-post-content > .hs09-home {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.home .hs09-home .hs09-shell {
  box-sizing: border-box;
  width: min(calc(100% - 2.3rem), var(--hs09-max)) !important;
  max-width: var(--hs09-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 760px) {
  body.home .hs09-home .hs09-shell {
    width: min(calc(100% - 2rem), var(--hs09-max)) !important;
  }
}


/* ==========================================================
   BUILD-09E / rc23 — HERO ARC + DOT COUPLING
   The arc and red orientation point are now one geometric unit.
   The empty .hs09-hero-dot element draws the arc; its ::after
   draws the point on the arc. This prevents independent drift.
   ========================================================== */

.hs09-hero-visual::after {
  content: none !important;
  display: none !important;
}

.hs09-hero-dot {
  position: absolute;
  width: clamp(300px, 31vw, 430px);
  height: auto;
  aspect-ratio: 1;
  left: -8%;
  top: 13%;
  z-index: 3;
  border: 1.15px solid var(--hs09-navy);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  transform: rotate(-22deg);
  opacity: .78;
  pointer-events: none;
}

.hs09-hero-dot::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: .62rem;
  height: .62rem;
  border-radius: 50%;
  background: var(--hs09-red);
  box-shadow: 0 0 0 3px rgba(248,245,237,.24);
  transform: translate(-50%, -50%);
}

@media (max-width: 899px) and (min-width: 641px) {
  .hs09-hero-dot {
    width: clamp(280px, 34vw, 370px);
    left: -9%;
    top: 15%;
  }
}

@media (max-width: 640px) {
  .hs09-hero-dot {
    width: min(78vw, 320px);
    left: -16vw;
    top: 9%;
    border-width: 1px;
  }
  .hs09-hero-dot::after {
    width: .58rem;
    height: .58rem;
  }
}


/* ================================================================
   BUILD-09F / rc24 — TARGET-REFERENCE GEOMETRY
   Reference: the approved B1 composition. Desktop geometry is rebuilt
   around one full-width architectural field masked under the copy,
   rather than a narrow image strip. Mobile remains a deliberately
   different vertical composition.
   ================================================================ */

@media (min-width: 1101px) {
  .hs09-hero-grid {
    min-height: clamp(410px, 35vw, 475px);
  }

  .hs09-hero-copy {
    width: min(49%, 590px);
    padding: clamp(2.55rem, 3.8vw, 3.35rem) 0 clamp(2.15rem, 3.2vw, 2.8rem);
  }

  .hs09-hero .hs09-kicker {
    margin-bottom: .72rem;
    font-size: .72rem;
    letter-spacing: .14em;
  }

  .hs09-hero h1 {
    max-width: 19ch;
    font-size: clamp(2.55rem, 3.35vw, 3.7rem);
    line-height: .99;
    letter-spacing: -.03em;
  }

  .hs09-hero .hs09-rule {
    width: 1.65rem;
    margin: .78rem 0 .92rem;
  }

  .hs09-hero-intro {
    max-width: 35rem;
    margin-bottom: .9rem;
    font-size: clamp(.91rem, .86rem + .12vw, 1rem);
    line-height: 1.48;
  }

  .hs09-hero .wp-block-buttons {
    gap: .72rem;
    margin-top: .9rem;
  }

  /* Full hero image field. The left side is optically returned to paper
     by the mask, so the person sits at the same horizontal weight as in
     the approved reference while the architecture can still live behind
     the text and arc. */
  .hs09-hero-visual {
    inset: 0;
    background-image:
      linear-gradient(90deg,
        rgba(248,245,237,1) 0%,
        rgba(248,245,237,1) 35%,
        rgba(248,245,237,.96) 40%,
        rgba(248,245,237,.72) 45%,
        rgba(248,245,237,.24) 51%,
        rgba(248,245,237,0) 57%),
      url('assets/images/hero-architecture.webp');
    background-position: center, center 52%;
    background-size: cover, cover;
  }

  .hs09-hero-visual::before {
    inset: 0 0 48% 42%;
    background: linear-gradient(180deg, rgba(11,52,82,.065), rgba(11,52,82,.008));
  }

  /* Arc + point remain one unit (rc23), but are positioned from the
     full hero canvas so the point lands at the paper/image transition. */
  .hs09-hero-dot {
    width: clamp(315px, 31.5vw, 415px);
    left: 45.5%;
    top: 10.5%;
    border-width: 1.1px;
  }

  .hs09-hero-dot::after {
    width: .62rem;
    height: .62rem;
    box-shadow: 0 0 0 2px rgba(248,245,237,.20);
  }

  .hs09-hero-quote {
    right: 1.2%;
    top: 30%;
    width: min(16%, 180px);
  }

  .hs09-hero-quote .hs09-quote {
    font-size: clamp(1rem, .9rem + .3vw, 1.25rem);
    line-height: 1.16;
  }

  .hs09-hero-quote .hs09-rule {
    width: 1.55rem;
    margin: .85rem 0 .85rem;
  }

  /* Reference row: four calm, equally weighted doors. */
  .hs09-access {
    padding: clamp(1.65rem, 2.5vw, 2.35rem) 0;
  }

  .hs09-access-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hs09-access-card,
  .hs09-access-quote {
    padding-left: clamp(1.15rem, 1.8vw, 1.65rem);
    padding-right: clamp(1.15rem, 1.8vw, 1.65rem);
  }

  .hs09-access-card:first-child {
    padding-left: 0;
  }

  .hs09-access-quote {
    padding-right: 0;
  }

  .hs09-access-card h2 {
    margin: .62rem 0 .62rem;
    font-size: clamp(1.45rem, 1.25rem + .55vw, 1.82rem);
    line-height: 1.01;
  }

  .hs09-access-card p {
    margin-bottom: .7rem;
    font-size: .89rem;
    line-height: 1.43;
  }

  .hs09-access-quote .hs09-quote {
    font-size: clamp(1.02rem, .94rem + .26vw, 1.22rem);
    line-height: 1.16;
  }

  .hs09-symbol {
    width: 58px;
    height: 58px;
  }

  /* Process band follows the same horizontal proportions as the approved
     reference: generous copy, image as evidence, narrow legend. */
  .hs09-process-grid {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr) minmax(145px, .31fr);
    min-height: 345px;
  }

  .hs09-process-copy {
    padding: clamp(2.4rem, 3.8vw, 3.5rem) clamp(1.8rem, 3vw, 3rem) clamp(2.4rem, 3.8vw, 3.5rem) 0;
  }

  .hs09-process h2 {
    font-size: clamp(2rem, 1.7rem + .9vw, 2.75rem);
  }

  .hs09-process-copy p {
    font-size: .95rem;
    line-height: 1.48;
  }

  .hs09-process-visual {
    min-height: 345px;
  }
}

/* Mid-size desktop/tablet: preserve the same semantic geometry, but keep
   the headline comfortable rather than forcing the wide desktop rhythm. */
@media (max-width: 1100px) and (min-width: 761px) {
  .hs09-hero-grid {
    min-height: clamp(430px, 49vw, 520px);
  }

  .hs09-hero-copy {
    width: min(52%, 520px);
    padding: 3rem 0 2.8rem;
  }

  .hs09-hero h1 {
    max-width: 17.5ch;
    font-size: clamp(2.45rem, 4.1vw, 3.15rem);
  }

  .hs09-hero-visual {
    inset: 0;
    background-image:
      linear-gradient(90deg,
        rgba(248,245,237,1) 0%,
        rgba(248,245,237,.98) 37%,
        rgba(248,245,237,.76) 44%,
        rgba(248,245,237,.22) 52%,
        rgba(248,245,237,0) 59%),
      url('assets/images/hero-architecture.webp');
    background-position: center, center 52%;
    background-size: cover, cover;
  }

  .hs09-hero-visual::before {
    inset: 0 0 49% 43%;
  }

  .hs09-hero-dot {
    width: clamp(285px, 34vw, 355px);
    left: 43.5%;
    top: 11.5%;
  }

  .hs09-hero-quote {
    right: 1.2%;
    top: 29%;
    width: min(17%, 165px);
  }
}

/* Mobile stays intentionally vertical. The point remains coupled to its arc;
   no desktop absolute geometry is inherited. */
@media (max-width: 760px) {
  .hs09-hero h1 {
    max-width: 12.5ch;
  }

  .hs09-hero-dot {
    left: -16vw;
    top: 9%;
  }
}


/* ================================================================
   BUILD-09G / rc25 — HERO VISUAL TUNING
   Approved B1 geometry remains unchanged. This pass gives the open arc
   its semantic second layer: a quiet frosted virtual continuation, keeps
   the person inside the imagined wheel, strengthens the orientation point,
   opens the transition symbol, and restores the secondary CTA as a calm
   outline button. No content or structural layout changes.
   ================================================================ */

/* Secondary hero CTA: explicitly render as a quiet outline control. */
.hs09-hero .wp-block-button.is-style-outline > .wp-block-button__link,
.hs09-hero .wp-block-button.is-style-outline .wp-block-button__link {
  box-sizing: border-box;
  border: 1px solid var(--hs09-navy) !important;
  background: rgba(248,245,237,.72) !important;
  color: var(--hs09-navy) !important;
  box-shadow: none !important;
}

.hs09-hero .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.hs09-hero .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible,
.hs09-hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
.hs09-hero .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
  border-color: var(--hs09-red) !important;
  background: var(--hs09-red) !important;
  color: #fff !important;
}

/* Transition sign: two distinguishable fields, still clearly overlapping. */
.hs09-symbol--transition::before { left: -1px; }
.hs09-symbol--transition span::before { right: -1px; }
.hs09-symbol--transition::after { left: 28px; top: 26px; }

@media (min-width: 1101px) {
  /* Frosted virtual continuation of the wheel. The disc and line share
     exactly the same box, so the missing part of the drawn circle remains
     perceptually present without turning into a literal full outline. */
  .hs09-hero-visual::before {
    inset: auto;
    width: clamp(315px, 31.5vw, 415px);
    aspect-ratio: 1;
    left: 45.5%;
    top: 10.5%;
    z-index: 1;
    border-radius: 50%;
    background: linear-gradient(115deg,
      rgba(248,245,237,.05) 5%,
      rgba(248,245,237,.10) 42%,
      rgba(248,245,237,.22) 72%,
      rgba(248,245,237,.30) 100%);
    -webkit-backdrop-filter: blur(2.2px) saturate(.88);
    backdrop-filter: blur(2.2px) saturate(.88);
    box-shadow: inset 0 0 0 1px rgba(248,245,237,.05);
    pointer-events: none;
  }

  .hs09-hero-dot::after {
    width: .78rem;
    height: .78rem;
    box-shadow: 0 0 0 2px rgba(248,245,237,.18);
  }

  .hs09-hero-quote {
    right: .6%;
  }
}

@media (max-width: 1100px) and (min-width: 761px) {
  .hs09-hero-visual::before {
    inset: auto;
    width: clamp(285px, 34vw, 355px);
    aspect-ratio: 1;
    left: 43.5%;
    top: 11.5%;
    z-index: 1;
    border-radius: 50%;
    background: linear-gradient(115deg,
      rgba(248,245,237,.04),
      rgba(248,245,237,.12) 55%,
      rgba(248,245,237,.26));
    -webkit-backdrop-filter: blur(1.8px) saturate(.9);
    backdrop-filter: blur(1.8px) saturate(.9);
    pointer-events: none;
  }

  .hs09-hero-dot::after {
    width: .72rem;
    height: .72rem;
  }
}

@media (max-width: 760px) {
  /* On mobile the metaphor remains, but stays subordinate to reading flow. */
  .hs09-hero-visual::before {
    inset: auto;
    width: min(78vw, 320px);
    aspect-ratio: 1;
    left: -16vw;
    top: 9%;
    z-index: 1;
    border-radius: 50%;
    background: linear-gradient(115deg,
      rgba(248,245,237,.03),
      rgba(248,245,237,.13) 60%,
      rgba(248,245,237,.22));
    -webkit-backdrop-filter: blur(1.4px) saturate(.92);
    backdrop-filter: blur(1.4px) saturate(.92);
    pointer-events: none;
  }

  .hs09-hero-dot::after {
    width: .64rem;
    height: .64rem;
  }
}


/* ================================================================
   BUILD-09H / rc26 — LENS CLARITY METAPHOR
   The hero arc is read as a lens: the image remains naturally clear
   inside the imagined circle, while only a restrained upper-right
   outside field receives a frosted/softened veil. The effect therefore
   supports "klarer sehen" and "ein anderer Blick" without turning the
   whole hero into a filter effect. Existing geometry and content stay.
   ================================================================ */

@media (min-width: 1101px) {
  /* Replace rc25's frosted DISC with a small frosted OUTSIDE field.
     Three alpha masks intersect: top fade, right fade, and a circular
     clear aperture aligned to the imagined wheel/lens. */
  .hs09-hero-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    left: auto;
    top: auto;
    border-radius: 0;
    background: rgba(248,245,237,.16);
    -webkit-backdrop-filter: blur(2.6px) saturate(.90);
    backdrop-filter: blur(2.6px) saturate(.90);
    box-shadow: none;
    pointer-events: none;

    -webkit-mask-image:
      linear-gradient(to bottom, #000 0 25%, rgba(0,0,0,.88) 31%, transparent 42%),
      linear-gradient(to left, #000 0 25%, rgba(0,0,0,.88) 32%, transparent 43%),
      radial-gradient(circle clamp(157px, 15.75vw, 207px) at 61.25% 52%, transparent 0 97%, rgba(0,0,0,.22) 99%, #000 100%);
    -webkit-mask-composite: source-in, source-in;

    mask-image:
      linear-gradient(to bottom, #000 0 25%, rgba(0,0,0,.88) 31%, transparent 42%),
      linear-gradient(to left, #000 0 25%, rgba(0,0,0,.88) 32%, transparent 43%),
      radial-gradient(circle clamp(157px, 15.75vw, 207px) at 61.25% 52%, transparent 0 97%, rgba(0,0,0,.22) 99%, #000 100%);
    mask-composite: intersect, intersect;
  }
}

@media (max-width: 1100px) and (min-width: 761px) {
  .hs09-hero-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    left: auto;
    top: auto;
    border-radius: 0;
    background: rgba(248,245,237,.15);
    -webkit-backdrop-filter: blur(2.2px) saturate(.91);
    backdrop-filter: blur(2.2px) saturate(.91);
    box-shadow: none;
    pointer-events: none;

    -webkit-mask-image:
      linear-gradient(to bottom, #000 0 26%, rgba(0,0,0,.86) 32%, transparent 43%),
      linear-gradient(to left, #000 0 27%, rgba(0,0,0,.86) 34%, transparent 46%),
      radial-gradient(circle clamp(142px, 17vw, 178px) at 60.5% 51%, transparent 0 97%, rgba(0,0,0,.20) 99%, #000 100%);
    -webkit-mask-composite: source-in, source-in;

    mask-image:
      linear-gradient(to bottom, #000 0 26%, rgba(0,0,0,.86) 32%, transparent 43%),
      linear-gradient(to left, #000 0 27%, rgba(0,0,0,.86) 34%, transparent 46%),
      radial-gradient(circle clamp(142px, 17vw, 178px) at 60.5% 51%, transparent 0 97%, rgba(0,0,0,.20) 99%, #000 100%);
    mask-composite: intersect, intersect;
  }
}

@media (max-width: 760px) {
  /* Mobile keeps the same idea but reduces it to a small, quiet veil in
     the upper-right image field; the off-centre lens itself stays clear. */
  .hs09-hero-visual::before {
    content: "";
    position: absolute;
    inset: 0 0 auto auto;
    z-index: 1;
    width: 38%;
    height: 34%;
    aspect-ratio: auto;
    left: auto;
    top: 0;
    border-radius: 0 0 0 72%;
    background: linear-gradient(225deg, rgba(248,245,237,.18), rgba(248,245,237,.08) 62%, rgba(248,245,237,0));
    -webkit-backdrop-filter: blur(1.8px) saturate(.92);
    backdrop-filter: blur(1.8px) saturate(.92);
    box-shadow: none;
    -webkit-mask-image: none;
    mask-image: none;
    pointer-events: none;
  }
}


/* ================================================================
   BUILD-09I / rc27 — HERO + SYMBOL SYSTEM FINAL
   Locks the approved top two bands into reusable vector CI assets.
   - Header signet becomes a real SVG lockup with the corrected claim:
     KLAR SEHEN. EIGENE WEGE GEHEN.
   - Hero arc + orientation point become one SVG asset.
   - The three access symbols become SVG assets; transition point sits
     exactly in the geometric centre of the overlap.
   - Lens logic: the source image remains naturally sharp. Only a small,
     neutral upper-right wall field OUTSIDE the imagined circle receives
     a very light frosted blur. No glow, sunlight or reflection effect.
   ================================================================ */

/* Header signet asset */
.hs-site-header .hs-brand-lockup {
  display: block;
  min-width: 0;
}
.hs-site-header .hs-brand-signet {
  display: block;
  width: clamp(220px, 18vw, 265px);
  line-height: 0;
  text-decoration: none;
}
.hs-site-header .hs-brand-signet img {
  display: block;
  width: 100%;
  height: auto;
}

/* Vector symbol grammar: geometry is frozen in SVG, not reconstructed
   by CSS. Existing empty helper spans are deliberately suppressed. */
.hs09-symbol {
  width: 58px;
  height: 58px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.hs09-symbol::before,
.hs09-symbol::after,
.hs09-symbol span::before,
.hs09-symbol span::after {
  content: none !important;
  display: none !important;
}
.hs09-symbol--self {
  background-image: url('assets/svg/symbol-selbstregulation.svg');
}
.hs09-symbol--transition {
  background-image: url('assets/svg/symbol-uebergaenge.svg');
}
.hs09-symbol--structure {
  background-image: url('assets/svg/symbol-organisation.svg');
}

/* The large hero arc is one SVG: arc and red point can no longer drift. */
.hs09-hero-dot {
  border: 0 !important;
  border-radius: 0 !important;
  background: url('assets/svg/hero-arc.svg') center / contain no-repeat !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
}
.hs09-hero-dot::before,
.hs09-hero-dot::after {
  content: none !important;
  display: none !important;
}

/* Neutral frosted wall only. The circular aperture is aligned with the
   imagined lens; inside the lens the original concrete texture remains
   untouched. No gradient lighting, glare, or reflective highlight. */
@media (min-width: 1101px) {
  .hs09-hero-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    width: auto;
    height: auto;
    left: auto;
    top: auto;
    border-radius: 0;
    background: rgba(248,245,237,.085);
    -webkit-backdrop-filter: blur(1.35px) saturate(.98);
    backdrop-filter: blur(1.35px) saturate(.98);
    box-shadow: none;
    pointer-events: none;
    /* first mask: only the upper-right wall strip; second mask: keep the
       imagined circular lens itself fully clear */
    -webkit-mask-image:
      linear-gradient(to left, #000 0 20%, rgba(0,0,0,.82) 26%, transparent 35%),
      linear-gradient(to bottom, #000 0 34%, rgba(0,0,0,.70) 39%, transparent 47%),
      radial-gradient(circle clamp(157px,15.75vw,207px) at 61.25% 51.5%, transparent 0 98%, #000 100%);
    -webkit-mask-composite: source-in, source-in;
    mask-image:
      linear-gradient(to left, #000 0 20%, rgba(0,0,0,.82) 26%, transparent 35%),
      linear-gradient(to bottom, #000 0 34%, rgba(0,0,0,.70) 39%, transparent 47%),
      radial-gradient(circle clamp(157px,15.75vw,207px) at 61.25% 51.5%, transparent 0 98%, #000 100%);
    mask-composite: intersect, intersect;
  }
}

@media (max-width: 1100px) and (min-width: 761px) {
  .hs09-hero-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(248,245,237,.075);
    -webkit-backdrop-filter: blur(1.15px) saturate(.98);
    backdrop-filter: blur(1.15px) saturate(.98);
    box-shadow: none;
    pointer-events: none;
    -webkit-mask-image:
      linear-gradient(to left, #000 0 21%, rgba(0,0,0,.80) 27%, transparent 36%),
      linear-gradient(to bottom, #000 0 33%, rgba(0,0,0,.68) 39%, transparent 48%),
      radial-gradient(circle clamp(142px,17vw,178px) at 60.5% 51%, transparent 0 98%, #000 100%);
    -webkit-mask-composite: source-in, source-in;
    mask-image:
      linear-gradient(to left, #000 0 21%, rgba(0,0,0,.80) 27%, transparent 36%),
      linear-gradient(to bottom, #000 0 33%, rgba(0,0,0,.68) 39%, transparent 48%),
      radial-gradient(circle clamp(142px,17vw,178px) at 60.5% 51%, transparent 0 98%, #000 100%);
    mask-composite: intersect, intersect;
  }
}

@media (max-width: 760px) {
  .hs-site-header .hs-brand-signet {
    width: min(210px, 58vw);
  }
  /* Mobile keeps the metaphor deliberately quiet: a small neutral wall
     haze outside the circle, no theatrical blur. */
  .hs09-hero-visual::before {
    content: "";
    position: absolute;
    inset: 0 0 auto auto;
    width: 31%;
    height: 27%;
    z-index: 1;
    border-radius: 0;
    background: rgba(248,245,237,.07);
    -webkit-backdrop-filter: blur(.9px) saturate(.99);
    backdrop-filter: blur(.9px) saturate(.99);
    box-shadow: none;
    -webkit-mask-image: none;
    mask-image: none;
    pointer-events: none;
  }
}


/* ================================================================
   BUILD-09K / rc29 — HERO ARC REFERENCE LOCK
   Surgical pass only: no image, copy, signet, or access-band changes.
   Geometry follows the approved remembered hero reference:
   - open circular arc, visibly left-weighted
   - upper end stops above/left of the figure
   - lower end runs down toward the floor and stays left of the feet
   - right half remains completely un-drawn and is completed mentally
   - red orientation point sits slightly below the horizontal midline
   ================================================================ */
@media (min-width: 1101px) {
  .hs09-hero-dot {
    width: clamp(305px, 29.5vw, 390px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    left: 44.2% !important;
    top: 8.5% !important;
  }
}

@media (max-width: 1100px) and (min-width: 761px) {
  .hs09-hero-dot {
    width: clamp(278px, 32vw, 340px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    left: 42.8% !important;
    top: 9.5% !important;
  }
}

@media (max-width: 760px) {
  .hs09-hero-dot {
    width: min(78vw, 330px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    left: -11vw !important;
    top: 8% !important;
  }
}


/* ================================================================
   BUILD-09L / rc30 — HERO ARC POSITION FIX
   Surgical geometry correction against the approved hero reference.
   No image, text, signet, icon, or content changes.
   The arc is shifted left as one intact SVG unit so the figure sits
   inside the mentally completed circle while the drawn right side
   remains open.
   ================================================================ */
@media (min-width: 1101px) {
  .hs09-hero-dot {
    left: 39.2% !important;
  }
}

@media (max-width: 1100px) and (min-width: 761px) {
  .hs09-hero-dot {
    left: 38.0% !important;
  }
}


/* ================================================================
   BUILD-09M / rc31 — HERO SCALE + ARC REFERENCE GEOMETRY
   Surgical geometry pass only. No copy, icon, signet, content, or
   source-image replacement.
   Goals:
   - enlarge the sharp architectural base image modestly so the figure
     returns to the visual weight of the approved reference
   - enlarge the open arc as one intact SVG unit
   - keep the arc left-weighted and the right side mentally completed
   - H1/arc collision, if any, is intentionally deferred to the next
     micro-pass after geometry approval
   ================================================================ */
@media (min-width: 1101px) {
  .hs09-hero-visual {
    background-position: center, 49% 52% !important;
    background-size: cover, 118% auto !important;
  }

  .hs09-hero-dot {
    width: clamp(360px, 35.0vw, 465px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    left: 34.2% !important;
    top: 5.2% !important;
  }
}

@media (max-width: 1100px) and (min-width: 761px) {
  .hs09-hero-visual {
    background-position: center, 49% 52% !important;
    background-size: cover, 114% auto !important;
  }

  .hs09-hero-dot {
    width: clamp(324px, 37vw, 392px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    left: 33.8% !important;
    top: 6.5% !important;
  }
}


/* ================================================================
   BUILD-09N / rc32 — HERO ARC MICRO-GEOMETRY
   Final surgical arc adjustment after rc31 scale pass.
   The sharp base image zoom from rc31 is retained unchanged.
   Arc only:
   - ~9% smaller than rc31
   - ~40px rightward at desktop reference width
   - lower arc end remains visibly left of the figure's feet
   - upper end remains open and clear of the figure
   - no copy, image, signet, icon, or content changes
   ================================================================ */
@media (min-width: 1101px) {
  .hs09-hero-dot {
    width: clamp(330px, 31.9vw, 423px) !important;
    left: 37.7% !important;
    top: 6.2% !important;
  }
}

@media (max-width: 1100px) and (min-width: 761px) {
  .hs09-hero-dot {
    width: clamp(298px, 33.7vw, 358px) !important;
    left: 37.1% !important;
    top: 7.2% !important;
  }
}


/* ================================================================
   BUILD-09O / rc33 — HERO ALIGNMENT
   Alignment-only pass against the locked hero reference.
   The sharp rc31/rc32 base-image zoom is retained.
   Changes:
   - nudge architectural image/figure slightly right
   - nudge arc overlay right without changing rendered arc size
   - use the refined open-circle SVG geometry: earlier upper ending,
     lower ending clearly left of the feet, right side remains absent
   - no copy, signet, access-symbol, or content changes
   ================================================================ */
@media (min-width: 1101px) {
  .hs09-hero-visual {
    background-position: center, 33% 52% !important;
  }

  .hs09-hero-dot {
    left: 41.3% !important;
    top: 6.2% !important;
  }
}

@media (max-width: 1100px) and (min-width: 761px) {
  .hs09-hero-visual {
    background-position: center, 35% 52% !important;
  }

  .hs09-hero-dot {
    left: 40.2% !important;
    top: 7.2% !important;
  }
}


/* ================================================================
   BUILD-09P / rc34 — HERO COPY WIDTH + MICRO ALIGNMENT
   Micro-tuning only after rc33 alignment.
   Goals:
   - preserve the established figure/image/arc relation
   - let the intro copy wrap naturally to 2–3 lines
   - move the arc only a few pixels right so it just clears the H1
   - reduce H1 size only slightly on laptop/mid-width screens
   - no source-image, SVG, signet, icon, or content changes
   ================================================================ */
@media (min-width: 1301px) {
  .hs09-hero-intro {
    max-width: 31rem !important;
  }

  .hs09-hero-dot {
    left: 42.2% !important;
  }
}

@media (min-width: 1101px) and (max-width: 1300px) {
  .hs09-hero h1 {
    font-size: clamp(2.50rem, 3.27vw, 3.62rem) !important;
  }

  .hs09-hero-intro {
    max-width: 29rem !important;
  }

  .hs09-hero-dot {
    left: 42.3% !important;
  }
}

@media (max-width: 1100px) and (min-width: 761px) {
  .hs09-hero h1 {
    font-size: clamp(2.40rem, 4.00vw, 3.08rem) !important;
  }

  .hs09-hero-intro {
    max-width: 27rem !important;
  }

  .hs09-hero-dot {
    left: 41.3% !important;
  }
}


/* ================================================================
   BUILD-09Q / rc35 — RESPONSIVE H1 MICRO-SCALE
   Final typography-only micro-pass after rc34.
   Goal:
   - keep the approved hero image/figure/arc geometry untouched
   - preserve the intro width from rc34
   - reduce H1 only slightly at laptop/mid-width desktop sizes so the
     arc clears the headline with a little more breathing room
   - large desktop, tablet/mobile composition otherwise unchanged
   ================================================================ */
@media (min-width: 1101px) and (max-width: 1300px) {
  .hs09-hero h1 {
    font-size: clamp(2.35rem, 3.10vw, 3.45rem) !important;
  }
}


/* ================================================================
   BUILD-09S / rc37 — HERO COPY HARD BOUNDARY
   Live base: rc35. Supersedes the unused rc36 H1-only experiment.
   Principle:
   - the copy has a responsive hard right edge before the visible arc
   - H1 size stays at the rc35 scale; wrapping is controlled by width
   - intro may wrap more freely and remains slightly narrower
   - hero image / figure / arc geometry are untouched
   ================================================================ */

/* laptop / compact desktop: hard copy edge before the arc */
@media (min-width: 761px) and (max-width: 1100px) {
  .hs09-hero-copy {
    width: min(39vw, 470px) !important;
    max-width: min(39vw, 470px) !important;
  }
  .hs09-hero h1 {
    max-width: 100% !important;
  }
  .hs09-hero-intro {
    max-width: min(100%, 26rem) !important;
  }
}

/* mid desktop: keep a visible safety gap before the arc */
@media (min-width: 1101px) and (max-width: 1300px) {
  .hs09-hero-copy {
    width: min(40vw, 500px) !important;
    max-width: min(40vw, 500px) !important;
  }
  .hs09-hero h1 {
    max-width: 100% !important;
  }
  .hs09-hero-intro {
    max-width: min(100%, 28rem) !important;
  }
}

/* wide desktop: preserve the approved large composition, but keep a
   small explicit copy/arc safety gap instead of allowing uncontrolled
   text expansion. */
@media (min-width: 1301px) and (max-width: 1500px) {
  .hs09-hero-copy {
    width: min(41vw, 540px) !important;
    max-width: min(41vw, 540px) !important;
  }
  .hs09-hero h1 {
    max-width: 100% !important;
  }
  .hs09-hero-intro {
    max-width: min(100%, 30rem) !important;
  }
}


/* ================================================================
   BUILD-09T / rc38 — HERO VISUAL COORDINATE LOCK
   Live base: rc37.
   Purpose: image and hero arc now share one invariant coordinate frame.
   The architectural source is 1875 × 839. The visual is therefore kept
   at that exact aspect ratio and anchored to the hero's right edge.
   The arc is positioned inside that visual frame and referenced to the
   figure's standing point near the floor, rather than to viewport text.
   Result: resizing the browser may reflow copy, but the relation
   figure ↔ feet ↔ arc ↔ red point remains stable.
   No copy, content, signet, access-symbol, or source-image changes.
   ================================================================ */

@media (min-width: 761px) {
  .hs09-hero-visual {
    /* One fixed image coordinate system. Height follows the hero; width
       follows the source-image ratio, so the image is never re-cropped
       differently as the viewport changes. */
    inset: 0 0 auto auto !important;
    height: 100% !important;
    width: auto !important;
    aspect-ratio: 1875 / 839 !important;
    background-position: center, center !important;
    background-size: cover, 100% 100% !important;
  }

  .hs09-hero-dot {
    /* Anchor geometry in the same coordinate system as the figure.
       The lower path end sits just left of the feet; the red point stays
       slightly below the horizontal circle midline. */
    height: 86% !important;
    width: auto !important;
    aspect-ratio: 1 / 1 !important;
    left: 39.3% !important;
    top: -1.0% !important;
    right: auto !important;
    bottom: auto !important;
  }
}

/* Compact desktop / tablet keeps the exact same figure-to-arc geometry.
   Only the copy area is allowed to reflow independently. */
@media (min-width: 761px) and (max-width: 1100px) {
  .hs09-hero-visual {
    inset: 0 0 auto auto !important;
    height: 100% !important;
    width: auto !important;
    aspect-ratio: 1875 / 839 !important;
    background-position: center, center !important;
    background-size: cover, 100% 100% !important;
  }

  .hs09-hero-dot {
    height: 86% !important;
    width: auto !important;
    left: 39.3% !important;
    top: -1.0% !important;
  }
}


/* ================================================================
   BUILD-09U / rc39 — RESPONSIVE HERO ROW SWITCH
   Live base: rc38 coordinate lock.
   Purpose:
   - keep image ↔ figure ↔ arc in one locked coordinate frame
   - when the hero becomes too narrow, stop forcing copy and visual into
     the same row and move the visual into a dedicated second row
   - preserve the desktop composition above the switch point
   - preserve the existing mobile composition below 760px
   ================================================================ */
@media (min-width: 761px) and (max-width: 980px) {
  .hs09-hero-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    row-gap: 0 !important;
  }

  .hs09-hero-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: min(100%, 620px) !important;
    max-width: min(100%, 620px) !important;
    padding: 2.9rem 0 2.3rem !important;
  }

  .hs09-hero h1 {
    max-width: 100% !important;
  }

  .hs09-hero-intro {
    max-width: 30rem !important;
  }

  .hs09-hero-visual {
    position: relative !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1875 / 839 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background-position: center, center !important;
    background-size: cover, 100% 100% !important;
  }

  .hs09-hero-dot {
    height: 86% !important;
    width: auto !important;
    aspect-ratio: 1 / 1 !important;
    left: 39.3% !important;
    top: -1% !important;
  }

  .hs09-hero-quote {
    position: relative !important;
    z-index: 4 !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: center !important;
    justify-self: end !important;
    right: auto !important;
    top: auto !important;
    width: min(31%, 210px) !important;
    margin-right: 2.2% !important;
    padding: 1rem 1.1rem 1.05rem !important;
    border-left: 0 !important;
    background: rgba(248,245,237,.72) !important;
  }
}

/* ================================================================
   BUILD-09V / rc40 — TOP TWO BANDS LOCK · ARC CLIPPING FIX
   Live base: rc39.
   Final visual-only closure for the first two homepage bands.
   - preserve locked image ↔ figure ↔ arc geometry
   - preserve all responsive row-switch behaviour
   - allow the SVG arc to extend beyond the visual box at top/left
     without clipping; the photo background itself remains bounded
   - mobile clipping behaviour remains unchanged
   ================================================================ */
@media (min-width: 761px) {
  .hs09-hero-grid {
    overflow: visible !important;
  }

  .hs09-hero-visual {
    overflow: visible !important;
  }
}


/* =========================================================
   BUILD-10A · LAYER 3 · DESIGN LOCK
   Prozess vor Lieblingsmethode
   ========================================================= */

.hs09-process.hs10a-process {
  background: #fbf9f4;
  border-top: 1px solid rgba(11,52,82,.08);
  border-bottom: 1px solid rgba(11,52,82,.08);
}

.hs10a-process-grid {
  display: grid;
  grid-template-columns:
    minmax(280px, .76fr)
    minmax(500px, 1.42fr)
    minmax(225px, .56fr);
  align-items: stretch;
  min-height: 345px;
}

.hs10a-process-copy {
  align-self: center;
  padding:
    clamp(2.2rem, 3.4vw, 3.4rem)
    clamp(1.8rem, 2.8vw, 2.8rem)
    clamp(2.2rem, 3.4vw, 3.4rem)
    0;
}

.hs10a-process-copy h2 {
  margin: 0;
  color: var(--hs09-navy);
  font-size: clamp(2rem, 1.7rem + .9vw, 2.75rem);
  line-height: 1.02;
  letter-spacing: -.025em;
}

.hs10a-process-copy > p:not(.hs09-section-label) {
  max-width: 34rem;
  margin: .7rem 0 .55rem;
  font-size: .95rem;
  line-height: 1.42;
}

.hs10a-process-visual {
  position: relative;
  min-height: 345px;
  overflow: hidden;
  background-image: url('assets/images/process-rock-clean-700x490.webp');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.hs10a-process-curve {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hs10a-process-curve path {
  fill: none;
  stroke: var(--hs09-navy);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

.hs10a-process-curve circle {
  fill: #ef2424;
  stroke: none;
  vector-effect: non-scaling-stroke;
}

.hs10a-process-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding:
    clamp(1.8rem, 2.8vw, 2.8rem)
    0
    clamp(1.8rem, 2.8vw, 2.8rem)
    clamp(1.6rem, 2.5vw, 2.5rem);
  border-left: 1px solid rgba(11,52,82,.14);
}

.hs10a-process-steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hs10a-process-steps::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--hs09-navy);
}

.hs10a-process-steps li {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 39px;
  gap: 1rem;
  color: var(--hs09-navy);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
}

.hs10a-step-dot {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 17px;
  height: 17px;
  border: 1.5px solid var(--hs09-navy);
  border-radius: 50%;
  background: #fbf9f4;
}

.hs10a-process-quote {
  position: relative;
  margin: 1.25rem 0 0;
  padding: 1.2rem 0 1.05rem;
  border-top: 1px solid rgba(11,52,82,.58);
  color: var(--hs09-navy);
  font-family: var(--wp--preset--font-family--serif, Georgia, serif);
  font-size: clamp(1.02rem, .96rem + .18vw, 1.18rem);
  font-style: italic;
  line-height: 1.28;
}

.hs10a-process-quote::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.15rem;
  height: 2px;
  background: #ef2424;
}

/* Laptop / compact desktop:
   Text + Bild bleiben die primäre Einheit;
   Prozesslegende darf in die zweite Zeile wechseln. */
@media (max-width: 1180px) and (min-width: 701px) {
  .hs10a-process-grid {
    grid-template-columns:
      minmax(280px, .82fr)
      minmax(390px, 1.18fr);
  }

  .hs10a-process-side {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr);
    gap: 2rem;
    align-items: center;
    padding: 1.4rem 0;
    border-left: 0;
    border-top: 1px solid rgba(11,52,82,.14);
  }

  .hs10a-process-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
  }

  .hs10a-process-steps::before {
    left: 8px;
    right: 8px;
    top: 8px;
    bottom: auto;
    width: auto;
    height: 1px;
  }

  .hs10a-process-steps li {
    display: grid;
    grid-template-rows: 17px auto;
    align-items: start;
    gap: .55rem;
    min-height: 0;
    padding-right: .7rem;
    font-size: .65rem;
  }

  .hs10a-process-quote {
    margin: 0;
  }
}

/* Mobile:
   Text -> Bild -> Prozess/Quote.
   Bild und SVG bleiben eine untrennbare Einheit. */
@media (max-width: 700px) {
  .hs10a-process-grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .hs10a-process-copy {
    padding: 2.7rem 0 2.25rem;
  }

  .hs10a-process-copy h2 {
    font-size: clamp(2rem, 9vw, 2.65rem);
  }

  .hs10a-process-visual {
    min-height: 300px;
  }

  .hs10a-process-side {
    padding: 1.8rem 0 2.6rem;
    border-left: 0;
    border-top: 1px solid rgba(11,52,82,.14);
  }

  .hs10a-process-steps li {
    min-height: 34px;
  }

  .hs10a-process-quote {
    max-width: 28rem;
  }
}

/* BUILD-10A rc43 · Layer 3 optical refinement */
@media (min-width: 1181px) {
  .hs10a-process-grid {
    grid-template-columns: minmax(340px,.85fr) minmax(460px,1.35fr) minmax(220px,.55fr);
  }

  .hs10a-process-copy h2 {
    font-size: clamp(2rem,1.65rem + .75vw,2.55rem);
  }
}

.hs10a-process-visual::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 95px;
  pointer-events: none;
  background: linear-gradient(
    to right,
    #fbf9f4 0%,
    rgba(251,249,244,.88) 35%,
    rgba(251,249,244,0) 100%
  );
}

.hs10a-process-curve {
  z-index: 2;
}

/* BUILD-10A rc44 · Layer 2 right meaning-zone aligned to Layer 3 */
@media (min-width: 1181px) {
  .hs09-access-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr)
      minmax(0, 1fr)
      minmax(0, .75fr);
  }
}

/* BUILD-10A rc46 · Hero: full architectural field + quote on image */
@media (min-width: 1181px) {
  .hs09-hero-visual {
    inset: 0;
  }

  .hs09-hero-quote {
    right: 1.6%;
    top: 29%;
    width: min(17%, 190px);
    color: #f8f5ed;
  }

  .hs09-hero-quote .hs09-quote,
  .hs09-hero-quote .hs09-quote-author {
    color: #f8f5ed;
  }
}

/* rc47 · desktop hero wide-image candidate */
@media (min-width: 1181px) {
  .hs09-hero-visual {
    background-image:
      linear-gradient(90deg,
        rgba(248,245,237,1) 0%,
        rgba(248,245,237,1) 35%,
        rgba(248,245,237,.96) 40%,
        rgba(248,245,237,.72) 45%,
        rgba(248,245,237,.24) 51%,
        rgba(248,245,237,0) 57%),
      url('assets/images/hero-architecture-wide.webp');
  }
}

/* rc48 · Hero visual unit uses the free right-hand space */
@media (min-width: 1181px) {
  .hs09-hero-visual {
    transform: translateX(8%);
  }
}

/* rc50 · Hero desktop fixed crop B · no percentage translation */
@media (min-width: 1181px) {
  .hs09-hero-visual {
    transform: none;
    background-image:
      linear-gradient(90deg,
        rgba(248,245,237,1) 0%,
        rgba(248,245,237,1) 35%,
        rgba(248,245,237,.96) 40%,
        rgba(248,245,237,.72) 45%,
        rgba(248,245,237,.24) 51%,
        rgba(248,245,237,0) 57%),
      url('assets/images/hero-architecture-desktop-D.webp');
    background-position: center, center 52%;
    background-size: cover, cover;
  }
}

/* rc55 · Hero right-wall edge continuation
   Approved Hero geometry remains untouched.
   The outermost genuine right-edge pixels continue calmly to viewport edge.
   No mirroring, no generated architecture, no translateX. */
@media (min-width: 1101px) {
  .hs09-hero {
    background-color: var(--hs09-paper);
    background-image: url('assets/images/hero-wall-extension-edge.webp');
    background-repeat: no-repeat;
    background-position: right 52%;
    background-size:
      calc(
        (100vw - min(calc(100vw - 2.3rem), var(--hs09-max))) / 2
      )
      114%;
  }
}

/* ================================================================
   BUILD-10B / rc56 · LAYER 4 · SELBSTREGULATION UNTER DRUCK
   DESIGN LOCK: concrete stair / continued process line / one red point
   ================================================================ */

.hs10-selfreg {
  background: #fbf9f4;
  border-top: 1px solid rgba(11,52,82,.08);
  border-bottom: 1px solid rgba(11,52,82,.08);
}

.hs10-selfreg-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,.78fr) minmax(0,1.48fr) minmax(225px,.62fr);
  min-height: 390px;
  overflow: hidden;
}

.hs10-selfreg-copy {
  position: relative;
  z-index: 4;
  align-self: stretch;
  padding: clamp(2.6rem,4vw,4rem) clamp(1.8rem,3vw,3rem) clamp(2.5rem,4vw,3.7rem) 0;
  background:
    linear-gradient(90deg,
      rgba(251,249,244,1) 0%,
      rgba(251,249,244,1) 72%,
      rgba(251,249,244,.96) 84%,
      rgba(251,249,244,0) 100%);
}

.hs10-selfreg-copy h2 {
  margin: 0;
  color: var(--hs09-navy);
  font-size: clamp(2rem,1.6rem + 1.35vw,3.15rem);
  line-height: 1.02;
  letter-spacing: -.025em;
}

.hs10-selfreg-copy > p:not(.hs09-section-label) {
  max-width: 30rem;
  margin: 1rem 0 0;
  line-height: 1.55;
}

.hs10-selfreg-cta {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  margin-top: 1.35rem;
  padding: .72rem 1rem;
  border: 1px solid var(--hs09-navy);
  background: var(--hs09-navy);
  color: #fff !important;
  font-size: .9rem;
  text-decoration: none;
}

.hs10-selfreg-cta:hover,
.hs10-selfreg-cta:focus-visible {
  border-color: var(--hs09-red);
  background: var(--hs09-red);
  color: #fff !important;
}

.hs10-selfreg-visual {
  position: relative;
  z-index: 1;
  min-height: 390px;
  background-image:
    linear-gradient(90deg,
      rgba(251,249,244,.82) 0%,
      rgba(251,249,244,.35) 12%,
      rgba(251,249,244,0) 28%),
    url('assets/images/selfreg-stairs-lock.webp');
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: cover, cover;
}

.hs10-selfreg-flow {
  position: absolute;
  z-index: 3;
  left: 27%;
  top: 3%;
  width: 51%;
  height: 92%;
  overflow: visible;
  pointer-events: none;
}

.hs10-selfreg-flow path {
  fill: none;
  stroke: var(--hs09-navy);
  stroke-width: 1.55;
  vector-effect: non-scaling-stroke;
}

.hs10-selfreg-flow circle {
  fill: var(--hs09-red);
}

.hs10-selfreg-quote {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem,4vw,3.8rem) 0 clamp(2.5rem,4vw,3.8rem) clamp(1.55rem,2.5vw,2.5rem);
  border-left: 1px solid rgba(11,52,82,.20);
  background: #fbf9f4;
}

.hs10-selfreg-quote blockquote {
  margin: 0;
  color: var(--hs09-navy);
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(1.08rem,.98rem + .35vw,1.42rem);
  font-style: italic;
  line-height: 1.18;
}

.hs10-selfreg-quote-rule {
  width: 2rem;
  height: 1px;
  margin-top: 1.15rem;
  background: var(--hs09-red);
}

@media (max-width: 980px) {
  .hs10-selfreg-grid {
    grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
  }

  .hs10-selfreg-quote {
    grid-column: 1 / -1;
    min-height: 0;
    padding: 1.8rem 0;
    border-left: 0;
    border-top: 1px solid rgba(11,52,82,.16);
  }

  .hs10-selfreg-flow {
    left: 43%;
    width: 52%;
    height: 70%;
  }
}

@media (max-width: 700px) {
  .hs10-selfreg-grid {
    display: block;
  }

  .hs10-selfreg-copy {
    padding: 2.8rem 0 2.2rem;
    background: #fbf9f4;
  }

  .hs10-selfreg-visual {
    min-height: 330px;
  }

  .hs10-selfreg-flow {
    left: 4%;
    top: 41%;
    width: 88%;
    height: 32%;
  }

  .hs10-selfreg-quote {
    padding: 2rem 0 2.5rem;
  }
}

/* rc57 · Layer 4 final transition
   Let the stair architecture continue beneath the existing copy fade.
   No change to text, process line, red point or quote geometry. */
@media (min-width: 981px) {
  .hs10-selfreg-visual {
    left: -90px;
    width: calc(100% + 90px);
  }
}


/* rc58 · Layer 4 right-edge alignment with Layer 3
   Keep left boundary unchanged; move only image/quote boundary slightly right. */
@media (min-width: 981px) {
  .hs10-selfreg-grid {
    grid-template-columns:
      minmax(0,.78fr)
      minmax(0,1.50fr)
      minmax(225px,.60fr);
  }
}


/* rc59 · Layer 4 final right-edge alignment */
@media (min-width: 981px) {
  .hs10-selfreg-grid {
    grid-template-columns:
      minmax(0,.78fr)
      minmax(0,1.52fr)
      minmax(225px,.58fr);
  }
}


/* ================================================================
   BUILD-10C / rc60 · LAYER 5 · BLIND TO THERAPIST
   protected content / open door / concealed sphere / process continues
   ================================================================ */

.hs10-b2t {
  background: #fbf9f4;
  border-top: 1px solid rgba(11,52,82,.08);
  border-bottom: 1px solid rgba(11,52,82,.10);
}

.hs10-b2t-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,.96fr) minmax(0,1.66fr) minmax(225px,.62fr);
  min-height: 455px;
  overflow: hidden;
}

.hs10-b2t-copy {
  position: relative;
  z-index: 5;
  padding: clamp(2.8rem,4.2vw,4.2rem) clamp(1.8rem,3vw,3rem) clamp(2.7rem,4vw,4rem) 0;
  background:
    linear-gradient(90deg,
      rgba(251,249,244,1) 0%,
      rgba(251,249,244,1) 68%,
      rgba(251,249,244,.95) 82%,
      rgba(251,249,244,0) 100%);
}

.hs10-b2t-copy h2 {
  margin: 0;
  color: var(--hs09-navy);
  font-size: clamp(2.35rem,1.9rem + 1.7vw,3.95rem);
  line-height: .98;
  letter-spacing: -.03em;
}

.hs10-b2t-lead {
  margin: .9rem 0 0;
  color: var(--hs09-navy);
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(1.32rem,1.12rem + .56vw,1.92rem);
  line-height: 1.12;
}

.hs10-b2t-copy > p:not(.hs09-section-label):not(.hs10-b2t-lead) {
  max-width: 34rem;
  margin: 1rem 0 0;
  line-height: 1.52;
}

.hs10-b2t-cta {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  margin-top: 1.3rem;
  padding: .76rem 1.05rem;
  border: 1px solid var(--hs09-navy);
  background: var(--hs09-navy);
  color: #fff !important;
  font-size: .9rem;
  text-decoration: none;
}

.hs10-b2t-visual {
  position: relative;
  z-index: 1;
  min-height: 455px;
  background-image:
    linear-gradient(90deg,
      rgba(251,249,244,.58) 0%,
      rgba(251,249,244,.12) 15%,
      rgba(251,249,244,0) 30%),
    url('assets/images/b2t-room-clean-lock.webp');
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: cover, cover;
}

.hs10-b2t-statement {
  position: absolute;
  z-index: 4;
  top: 16%;
  right: 8%;
  max-width: 9ch;
  color: rgba(11,52,82,.80);
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(1.15rem,1rem + .42vw,1.58rem);
  line-height: 1.08;
}

.hs10-b2t-statement-rule {
  position: absolute;
  z-index: 4;
  top: 41%;
  right: 17%;
  width: 2rem;
  height: 1px;
  background: rgba(11,52,82,.55);
}

.hs10-b2t-flow {
  position: absolute;
  z-index: 3;
  left: 28%;
  top: 7%;
  width: 53%;
  height: 78%;
  overflow: visible;
  pointer-events: none;
}

.hs10-b2t-flow path {
  fill: none;
  stroke: var(--hs09-navy);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.hs10-b2t-flow circle {
  fill: var(--hs09-red);
}

.hs10-b2t-process {
  position: relative;
  z-index: 5;
  padding: clamp(2.5rem,4vw,3.8rem) 0 clamp(2.5rem,4vw,3.8rem) clamp(1.55rem,2.5vw,2.5rem);
  border-left: 1px solid rgba(11,52,82,.18);
  background: #fbf9f4;
}

.hs10-b2t-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.12rem;
  margin: 0;
  padding: 0 0 0 2rem;
  list-style: none;
}

.hs10-b2t-steps::before {
  content: "";
  position: absolute;
  left: .43rem;
  top: .45rem;
  bottom: .45rem;
  width: 1px;
  background: var(--hs09-navy);
}

.hs10-b2t-steps li {
  position: relative;
  color: var(--hs09-navy);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
}

.hs10-b2t-steps li::before {
  content: "";
  position: absolute;
  left: -2rem;
  top: 50%;
  width: .78rem;
  height: .78rem;
  border: 1.35px solid var(--hs09-navy);
  border-radius: 50%;
  background: #fbf9f4;
  transform: translateY(-50%);
}

.hs10-b2t-steps li.is-active::before {
  border-color: var(--hs09-red);
  background: var(--hs09-red);
}

.hs10-b2t-divider {
  width: 2.6rem;
  height: 1px;
  margin: 2rem 0 1.45rem;
  background: var(--hs09-navy);
}

.hs10-b2t-process blockquote {
  margin: 0;
  color: var(--hs09-navy);
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(1.02rem,.94rem + .28vw,1.3rem);
  font-style: italic;
  line-height: 1.2;
}

.hs10-b2t-quote-rule {
  width: 2rem;
  height: 2px;
  margin-top: 1.1rem;
  background: var(--hs09-red);
}

.hs10-b2t-signature {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 54px;
  color: rgba(11,52,82,.78);
  font-size: .7rem;
  letter-spacing: .21em;
  text-transform: uppercase;
}

.hs10-b2t-signature-line {
  width: 2rem;
  height: 1px;
  background: rgba(11,52,82,.55);
}

.hs10-b2t-signature-dot {
  position: absolute;
  bottom: 6px;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--hs09-red);
}

@media (max-width: 980px) {
  .hs10-b2t-grid {
    grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr);
  }

  .hs10-b2t-process {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 2rem;
    padding: 1.8rem 0;
    border-left: 0;
    border-top: 1px solid rgba(11,52,82,.16);
  }

  .hs10-b2t-flow {
    left: 43%;
    width: 50%;
    height: 66%;
  }
}

@media (max-width: 700px) {
  .hs10-b2t-grid {
    display: block;
  }

  .hs10-b2t-copy {
    padding: 2.8rem 0 2.2rem;
    background: #fbf9f4;
  }

  .hs10-b2t-visual {
    min-height: 340px;
  }

  .hs10-b2t-flow {
    left: 5%;
    top: 43%;
    width: 86%;
    height: 28%;
  }

  .hs10-b2t-process {
    display: block;
    padding: 2rem 0 2.5rem;
  }

  .hs10-b2t-process blockquote {
    margin-top: 1.8rem;
  }

  .hs10-b2t-signature {
    flex-wrap: wrap;
    gap: .5rem .8rem;
    padding: .8rem 1rem 1rem;
    text-align: center;
  }
}

/* ================================================================
   rc61 · Layer 5 geometry correction
   Wider copy / sphere visible / open door retained / calmer sidebar
   ================================================================ */

@media (min-width: 981px) {

  .hs10-b2t-grid {
    grid-template-columns:
      minmax(355px, 1.05fr)
      minmax(0, 1.45fr)
      minmax(240px, .66fr);
  }

  .hs10-b2t-copy {
    padding-right: clamp(1.4rem, 2.2vw, 2.3rem);
  }

  .hs10-b2t-copy h2 {
    font-size: clamp(2.3rem, 1.85rem + 1.35vw, 3.45rem);
  }

  /* Do not let cover crop the concealed sphere away.
     Keep the genuine right side of the photograph visible. */
  .hs10-b2t-visual {
    left: -55px;
    width: calc(100% + 55px);

    background-position:
      center,
      right center;

    background-size:
      100% 100%,
      auto 100%;
  }

  /* The secondary statement belongs on the quiet concrete wall,
     not in the bright doorway. */
  .hs10-b2t-statement {
    top: 15%;
    right: 5%;
    max-width: 9ch;
  }

  .hs10-b2t-statement-rule {
    top: 40%;
    right: 15%;
  }

  .hs10-b2t-process {
    padding-left: clamp(1.8rem, 2.7vw, 2.7rem);
  }

  .hs10-b2t-flow {
    left: 27%;
    width: 55%;
  }
}


/* ================================================================
   rc62 · Layer 5 · Hero echo / protected space
   Wide copy + full architectural field + process overlay
   ================================================================ */

@media (min-width: 981px) {

  .hs10-b2t-grid {
    position: relative;
    display: grid;
    grid-template-columns:
      minmax(390px, .92fr)
      minmax(0, 1.72fr);
    min-height: 420px;
  }

  /* More editorial width: reduce unnecessary line breaks. */
  .hs10-b2t-copy {
    grid-column: 1;
    z-index: 6;
    padding:
      clamp(2.6rem, 3.8vw, 3.8rem)
      clamp(2rem, 3vw, 3rem)
      clamp(2.5rem, 3.8vw, 3.6rem)
      0;

    background:
      linear-gradient(90deg,
        rgba(251,249,244,1) 0%,
        rgba(251,249,244,1) 70%,
        rgba(251,249,244,.96) 82%,
        rgba(251,249,244,.60) 92%,
        rgba(251,249,244,0) 100%);
  }

  .hs10-b2t-copy h2 {
    max-width: 11.5ch;
    font-size: clamp(2.4rem, 1.9rem + 1.45vw, 3.55rem);
  }

  .hs10-b2t-copy > p:not(.hs09-section-label):not(.hs10-b2t-lead) {
    max-width: 39rem;
  }

  /* The photograph becomes one broad architectural field,
     analogous to the Hero rather than a narrow center column. */
  .hs10-b2t-visual {
    grid-column: 2;
    position: relative;
    left: -65px;
    width: calc(100% + 65px);
    min-height: 420px;

    background-image:
      linear-gradient(90deg,
        rgba(251,249,244,.68) 0%,
        rgba(251,249,244,.22) 12%,
        rgba(251,249,244,0) 25%),
      url('assets/images/b2t-room-clean-lock.webp');

    background-position:
      center,
      right center;

    background-size:
      100% 100%,
      auto 100%;
  }

  /* Hero echo: concise meaning is written into the architecture. */
  .hs10-b2t-statement {
    top: 17%;
    right: 18%;
    max-width: 9ch;
    color: rgba(248,245,237,.96);
    font-size: clamp(1.18rem, 1.04rem + .42vw, 1.58rem);
    line-height: 1.08;
    text-shadow: 0 1px 5px rgba(11,32,45,.22);
  }

  .hs10-b2t-statement-rule {
    top: 42%;
    right: 24%;
    background: rgba(248,245,237,.82);
  }

  /* Process rail no longer forms a separate white third column.
     It sits quietly on the right-hand architectural field. */
  .hs10-b2t-process {
    position: absolute;
    z-index: 7;
    top: 0;
    right: 0;
    bottom: 0;
    width: 225px;

    box-sizing: border-box;
    padding:
      clamp(2.3rem, 3.5vw, 3.4rem)
      0
      clamp(2.3rem, 3.5vw, 3.4rem)
      clamp(1.65rem, 2.2vw, 2.25rem);

    border-left: 1px solid rgba(248,245,237,.42);

    background:
      linear-gradient(90deg,
        rgba(248,245,237,.08) 0%,
        rgba(248,245,237,.64) 34%,
        rgba(248,245,237,.93) 100%);
  }

  /* Let the process remain legible without turning into a card. */
  .hs10-b2t-process blockquote,
  .hs10-b2t-steps li {
    color: var(--hs09-navy);
  }

  /* Line flows through the protected space despite hidden content. */
  .hs10-b2t-flow {
    left: 28%;
    top: 7%;
    width: 55%;
    height: 78%;
  }

  /* This intermediate signature made L5 look like a standalone poster. */
  .hs10-b2t-signature {
    display: none;
  }
}


/* rc63 · Layer 5 final micro-alignment
   Copy moves left; process point marks the threshold and line exits
   through the architectural opening. */
@media (min-width: 981px) {
  .hs10-b2t-copy {
    left: -28px;
    width: calc(100% + 28px);
  }
}


/* ================================================================
   rc64 · Layer 5 · three final harmony corrections
   1 copy may extend left without clipping
   2 wall quote returns to quiet concrete
   3 image flows beneath process rail without hard divider
   ================================================================ */

@media (min-width: 981px) {

  /* rc63 intentionally moved the copy left.
     Allow that movement instead of clipping it at the shell edge. */
  .hs10-b2t-grid {
    overflow: visible;
  }

  /* Keep the wanted leftward shift. */
  .hs10-b2t-copy {
    left: -28px;
    width: calc(100% + 28px);
  }

  /* Return the concise statement to the quiet concrete wall. */
  .hs10-b2t-statement {
    top: 16%;
    right: 34%;
    max-width: 9ch;
  }

  .hs10-b2t-statement-rule {
    top: 41%;
    right: 41%;
  }

  /* No visible vertical partition.
     Architecture continues underneath and fades into paper. */
  .hs10-b2t-process {
    width: 215px;
    border-left: 0;

    background:
      linear-gradient(90deg,
        rgba(251,249,244,0) 0%,
        rgba(251,249,244,.30) 22%,
        rgba(251,249,244,.68) 52%,
        rgba(251,249,244,.92) 100%);
  }
}


/* rc65 · Layer 5 final wall-quote placement
   Keep quote fully on the quiet concrete wall, away from the bright doorway. */
@media (min-width: 981px) {
  .hs10-b2t-statement {
    right: 24%;
  }

  .hs10-b2t-statement-rule {
    right: 31%;
  }
}


/* ================================================================
   rc66 · HERO · soft right fade
   Real architecture fades into paper; no artificial wall extension.
   ================================================================ */

@media (min-width: 1101px) {

  .hs09-hero {
    position: relative;

    /* remove the artificial right-wall continuation */
    background-image: none;
    background-color: var(--hs09-paper);
    overflow: hidden;
  }

  .hs09-hero::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;

    /* right outer gutter + ca. 220px fade inside the real photograph */
    width: calc(
      (100vw - min(calc(100vw - 2.3rem), var(--hs09-max))) / 2
      + 220px
    );

    background:
      linear-gradient(
        90deg,
        rgba(248,245,237,0) 0%,
        rgba(248,245,237,.10) 18%,
        rgba(248,245,237,.32) 38%,
        rgba(248,245,237,.66) 66%,
        rgba(248,245,237,.92) 86%,
        rgba(248,245,237,1) 100%
      );

    pointer-events: none;
  }
}


/* ================================================================
   BUILD-10D / rc67 · LAYER 6 · PERSON · BEZIEHUNG · ORGANISATION
   concrete prefiguration of Layer-7 symbols
   ================================================================ */

.hs10-l6 {
  background: #fbf9f4;
  border-top: 1px solid rgba(11,52,82,.08);
  border-bottom: 1px solid rgba(11,52,82,.10);
}

.hs10-l6-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(330px,.92fr) minmax(0,1.55fr) minmax(225px,.62fr);
  min-height: 405px;
  overflow: hidden;
}

.hs10-l6-copy {
  position: relative;
  z-index: 5;
  padding: clamp(2.6rem,3.8vw,3.8rem) clamp(1.8rem,2.8vw,2.7rem) clamp(2.4rem,3.5vw,3.4rem) 0;
  background:
    linear-gradient(90deg,
      rgba(251,249,244,1) 0%,
      rgba(251,249,244,1) 72%,
      rgba(251,249,244,.94) 84%,
      rgba(251,249,244,0) 100%);
}

.hs10-l6-copy h2 {
  margin: 0;
  color: var(--hs09-navy);
  font-size: clamp(2.35rem,1.9rem + 1.45vw,3.55rem);
  line-height: .98;
  letter-spacing: -.03em;
}

.hs10-l6-lead {
  margin: .9rem 0 0;
  color: var(--hs09-navy);
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(1.25rem,1.08rem + .45vw,1.7rem);
  line-height: 1.16;
}

.hs10-l6-copy > p:not(.hs09-section-label):not(.hs10-l6-lead) {
  max-width: 31rem;
  margin: .95rem 0 0;
  line-height: 1.5;
}

.hs10-l6-cta {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  margin-top: 1.25rem;
  padding: .74rem 1rem;
  border: 1px solid var(--hs09-navy);
  background: var(--hs09-navy);
  color: #fff !important;
  font-size: .9rem;
  text-decoration: none;
}

.hs10-l6-visual {
  position: relative;
  z-index: 1;
  min-height: 405px;
  background-image:
    linear-gradient(90deg,
      rgba(251,249,244,.66) 0%,
      rgba(251,249,244,.15) 14%,
      rgba(251,249,244,0) 29%),
    url('assets/images/layer6-person-beziehung-organisation-clean.webp');
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: cover, cover;
}

.hs10-l6-label {
  position: absolute;
  z-index: 5;
  top: 8%;
  transform: translateX(-50%);
  color: var(--hs09-navy);
  text-align: center;
  line-height: 1.12;
}

.hs10-l6-label strong,
.hs10-l6-label span {
  display: block;
}

.hs10-l6-label strong {
  font-size: .72rem;
  letter-spacing: .11em;
}

.hs10-l6-label span {
  margin-top: .18rem;
  font-family: var(--wp--preset--font-family--serif);
  font-size: .92rem;
}

.hs10-l6-label::after {
  content: "";
  display: block;
  width: 1px;
  height: 64px;
  margin: .55rem auto 0;
  background: rgba(11,52,82,.65);
}

.hs10-l6-label-a { left: 26%; }
.hs10-l6-label-b { left: 52%; }
.hs10-l6-label-c { left: 79%; }

.hs10-l6-flow {
  position: absolute;
  z-index: 4;
  left: 28%;
  top: 9%;
  width: 55%;
  height: 76%;
  overflow: visible;
  pointer-events: none;
}

.hs10-l6-flow path {
  fill: none;
  stroke: var(--hs09-navy);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.hs10-l6-flow circle {
  fill: var(--hs09-red);
}

.hs10-l6-process {
  position: relative;
  z-index: 6;
  padding: clamp(2.4rem,3.7vw,3.5rem) 0 clamp(2.4rem,3.7vw,3.5rem) clamp(1.7rem,2.4vw,2.4rem);
  border-left: 1px solid rgba(11,52,82,.16);
  background: #fbf9f4;
}

.hs10-l6-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.12rem;
  margin: 0;
  padding: 0 0 0 2rem;
  list-style: none;
}

.hs10-l6-steps::before {
  content: "";
  position: absolute;
  left: .43rem;
  top: .45rem;
  bottom: .45rem;
  width: 1px;
  background: var(--hs09-navy);
}

.hs10-l6-steps li {
  position: relative;
  color: var(--hs09-navy);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
}

.hs10-l6-steps li::before {
  content: "";
  position: absolute;
  left: -2rem;
  top: 50%;
  width: .78rem;
  height: .78rem;
  border: 1.35px solid var(--hs09-navy);
  border-radius: 50%;
  background: #fbf9f4;
  transform: translateY(-50%);
}

.hs10-l6-steps li.is-active::before {
  border-color: var(--hs09-red);
  background: var(--hs09-red);
}

.hs10-l6-divider {
  width: 2.6rem;
  height: 1px;
  margin: 2rem 0 1.35rem;
  background: var(--hs09-navy);
}

.hs10-l6-process blockquote {
  margin: 0;
  color: var(--hs09-navy);
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(1.02rem,.94rem + .28vw,1.3rem);
  font-style: italic;
  line-height: 1.2;
}

.hs10-l6-quote-rule {
  width: 2rem;
  height: 2px;
  margin-top: 1rem;
  background: var(--hs09-red);
}

@media (max-width: 980px) {
  .hs10-l6-grid {
    grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr);
  }

  .hs10-l6-process {
    grid-column: 1 / -1;
    padding: 1.8rem 0;
    border-left: 0;
    border-top: 1px solid rgba(11,52,82,.16);
  }

  .hs10-l6-flow {
    left: 43%;
    width: 50%;
    height: 65%;
  }
}

@media (max-width: 700px) {
  .hs10-l6-grid {
    display: block;
  }

  .hs10-l6-copy {
    padding: 2.7rem 0 2.2rem;
    background: #fbf9f4;
  }

  .hs10-l6-visual {
    min-height: 330px;
  }

  .hs10-l6-label {
    top: 7%;
  }

  .hs10-l6-label::after {
    height: 46px;
  }

  .hs10-l6-flow {
    left: 5%;
    top: 44%;
    width: 88%;
    height: 28%;
  }

  .hs10-l6-process {
    padding: 2rem 0 2.5rem;
  }
}

/* ================================================================
   rc68 · Layer 6 · architectural field fades through process rail
   Same spatial grammar as Hero and Layer 5.
   ================================================================ */

@media (min-width: 981px) {

  /* Let the architectural field continue underneath the process rail. */
  .hs10-l6-visual {
    width: calc(100% + 225px);
    z-index: 1;
  }

  /* Process rail becomes an overlay, not a separate white card. */
  .hs10-l6-process {
    z-index: 7;
    border-left: 0;

    background:
      linear-gradient(
        90deg,
        rgba(251,249,244,0) 0%,
        rgba(251,249,244,.18) 18%,
        rgba(251,249,244,.46) 42%,
        rgba(251,249,244,.78) 70%,
        rgba(251,249,244,.96) 100%
      );
  }
}


/* ================================================================
   rc69 · Layer 6 · soft left image transition
   Architecture continues beneath copy and fades into paper.
   ================================================================ */

@media (min-width: 981px) {

  .hs10-l6-visual {
    left: -85px;

    /* rc68 already extends 225px to the right;
       add 85px overlap beneath the copy */
    width: calc(100% + 310px);
  }

  .hs10-l6-copy {
    background:
      linear-gradient(
        90deg,
        rgba(251,249,244,1) 0%,
        rgba(251,249,244,1) 64%,
        rgba(251,249,244,.96) 76%,
        rgba(251,249,244,.72) 87%,
        rgba(251,249,244,.25) 96%,
        rgba(251,249,244,0) 100%
      );
  }
}


/* ================================================================
   BUILD-10E / rc70 · LAYER 6+7 REBALANCE
   L6 = spatial map; L7 = concrete offer fields + process rail
   ================================================================ */

@media (min-width: 981px) {
  .hs10-l6-grid {
    grid-template-columns: minmax(330px,.92fr) minmax(0,2.17fr);
    overflow: hidden;
  }

  .hs10-l6-visual {
    left: -85px;
    width: calc(100% + 85px);
  }

  .hs10-l6-copy {
    background:
      linear-gradient(
        90deg,
        rgba(251,249,244,1) 0%,
        rgba(251,249,244,1) 64%,
        rgba(251,249,244,.96) 76%,
        rgba(251,249,244,.72) 87%,
        rgba(251,249,244,.25) 96%,
        rgba(251,249,244,0) 100%
      );
  }

  .hs10-l6-visual::after {
    content: "";
    position: absolute;
    z-index: 6;
    top: 0;
    right: 0;
    bottom: 0;
    width: 190px;
    background:
      linear-gradient(
        90deg,
        rgba(251,249,244,0) 0%,
        rgba(251,249,244,.14) 24%,
        rgba(251,249,244,.44) 52%,
        rgba(251,249,244,.78) 78%,
        rgba(251,249,244,.98) 100%
      );
    pointer-events: none;
  }

  .hs10-l6-flow {
    left: 28%;
    width: 68%;
  }

  .hs10-l6-process {
    display: none !important;
  }
}

.hs10-l7 {
  background: #fbf9f4;
  border-bottom: 1px solid rgba(11,52,82,.10);
}

.hs10-l7-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(190px,.56fr);
  align-items: stretch;
}

.hs10-l7-card,
.hs10-l7-process {
  min-width: 0;
  padding: clamp(2.25rem,3.2vw,3.25rem) clamp(1.35rem,2.3vw,2.35rem) clamp(2.3rem,3.2vw,3.25rem);
}

.hs10-l7-card {
  position: relative;
  border-right: 1px solid rgba(11,52,82,.18);
}

.hs10-l7-card:first-child {
  padding-left: 0;
}

.hs10-l7-number {
  margin-bottom: .35rem;
  color: var(--hs09-red);
  font-size: .84rem;
  font-weight: 700;
}

.hs10-l7-symbol {
  display: block;
  width: 76px;
  height: 62px;
  margin-bottom: .65rem;
  overflow: visible;
}

.hs10-l7-symbol .outline {
  fill: none;
  stroke: var(--hs09-navy);
  stroke-width: 1.6;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.hs10-l7-symbol .dash {
  fill: none;
  stroke: var(--hs09-navy);
  stroke-width: 1.25;
  stroke-dasharray: 4 3;
}

.hs10-l7-symbol .dot {
  fill: var(--hs09-red);
  stroke: none;
}

.hs10-l7-card h3 {
  margin: 0;
  color: var(--hs09-navy);
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(1.45rem,1.22rem + .55vw,2rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.02em;
}

.hs10-l7-card > p:not(.hs10-l7-services-label) {
  margin: .75rem 0 0;
  color: var(--hs09-navy);
  font-size: .92rem;
  line-height: 1.45;
}

.hs10-l7-rule {
  width: 2rem;
  height: 1px;
  margin: 1.15rem 0 .9rem;
  background: rgba(11,52,82,.48);
}

.hs10-l7-services-label {
  margin: 0 0 .6rem;
  color: var(--hs09-navy);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .15em;
}

.hs10-l7-services {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hs10-l7-services li {
  position: relative;
  margin: .22rem 0;
  padding-left: .85rem;
  color: var(--hs09-navy);
  font-size: .86rem;
  line-height: 1.34;
}

.hs10-l7-services li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 0;
}

.hs10-l7-link {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1.15rem;
  color: var(--hs09-navy);
  border-bottom: 1px solid rgba(11,52,82,.48);
  text-decoration: none;
  font-size: .88rem;
}

.hs10-l7-process {
  padding-right: 0;
  border-right: 0;
}

.hs10-l7-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
  margin: 0;
  padding: 0 0 0 2rem;
  list-style: none;
}

.hs10-l7-steps::before {
  content: "";
  position: absolute;
  left: .43rem;
  top: .45rem;
  bottom: .45rem;
  width: 1px;
  background: var(--hs09-navy);
}

.hs10-l7-steps li {
  position: relative;
  color: var(--hs09-navy);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .13em;
}

.hs10-l7-steps li::before {
  content: "";
  position: absolute;
  left: -2rem;
  top: 50%;
  width: .78rem;
  height: .78rem;
  border: 1.35px solid var(--hs09-navy);
  border-radius: 50%;
  background: #fbf9f4;
  transform: translateY(-50%);
}

.hs10-l7-steps li.is-active::before {
  border-color: var(--hs09-red);
  background: var(--hs09-red);
}

.hs10-l7-divider {
  width: 2.6rem;
  height: 1px;
  margin: 1.8rem 0 1.25rem;
  background: var(--hs09-navy);
}

.hs10-l7-process blockquote {
  margin: 0;
  color: var(--hs09-navy);
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(.98rem,.92rem + .22vw,1.22rem);
  font-style: italic;
  line-height: 1.2;
}

.hs10-l7-quote-rule {
  width: 2rem;
  height: 2px;
  margin-top: 1rem;
  background: var(--hs09-red);
}

@media (max-width: 980px) {
  .hs10-l7-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .hs10-l7-card:first-child {
    padding-left: clamp(1.35rem,2.3vw,2.35rem);
  }

  .hs10-l7-process {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(11,52,82,.16);
  }
}

@media (max-width: 700px) {
  .hs10-l7-grid {
    display: block;
  }

  .hs10-l7-card,
  .hs10-l7-process {
    padding: 2.1rem 0;
    border-right: 0;
    border-bottom: 1px solid rgba(11,52,82,.14);
  }

  .hs10-l7-card:first-child {
    padding-left: 0;
  }
}

/* ================================================================
   rc71 · CTA HIERARCHY CLEANUP
   Editorial continuation links in Layers 4–6 are text links.
   Filled buttons remain reserved for primary actions/conversion.
   ================================================================ */

.hs10-selfreg-cta,
.hs10-b2t-cta,
.hs10-l6-cta {
  display: inline-flex;
  align-items: center;
  gap: .7rem;

  width: fit-content;
  margin-top: 1.2rem;
  padding: 0 0 .18rem;

  border: 0;
  border-bottom: 1px solid rgba(11,52,82,.52);
  border-radius: 0;

  background: transparent;
  color: var(--hs09-navy) !important;

  font-size: .88rem;
  font-weight: 400;
  line-height: 1.3;
  text-decoration: none;
}

.hs10-selfreg-cta:hover,
.hs10-selfreg-cta:focus-visible,
.hs10-b2t-cta:hover,
.hs10-b2t-cta:focus-visible,
.hs10-l6-cta:hover,
.hs10-l6-cta:focus-visible {
  border-color: var(--hs09-red);
  background: transparent;
  color: var(--hs09-navy) !important;
}


/* rc72 · Hero right fade final tuning
   Shorter, controlled transition from architecture into paper. */
@media (min-width: 1101px) {
  .hs09-hero::after {
    width: calc(
      (100vw - min(calc(100vw - 2.3rem), var(--hs09-max))) / 2
      + 150px
    );

    background:
      linear-gradient(
        90deg,
        rgba(248,245,237,0) 0%,
        rgba(248,245,237,.08) 20%,
        rgba(248,245,237,.28) 42%,
        rgba(248,245,237,.62) 68%,
        rgba(248,245,237,.90) 88%,
        rgba(248,245,237,1) 100%
      );
  }
}

/* ================================================================
   rc73 · HERO · real right-edge fade inside the image field
   Fade belongs to .hs09-hero-visual, not to the outer hero section.
   ================================================================ */

@media (min-width: 1181px) {

  /* disable ineffective outer overlay from rc66/rc72 */
  .hs09-hero::after {
    display: none;
  }

  .hs09-hero-visual {
    background-image:

      /* RIGHT FADE: architecture -> paper */
      linear-gradient(
        90deg,
        rgba(248,245,237,0) 0%,
        rgba(248,245,237,0) 78%,
        rgba(248,245,237,.10) 83%,
        rgba(248,245,237,.30) 88%,
        rgba(248,245,237,.62) 93%,
        rgba(248,245,237,.90) 97%,
        rgba(248,245,237,1) 100%
      ),

      /* existing LEFT transition beneath copy */
      linear-gradient(
        90deg,
        rgba(248,245,237,1) 0%,
        rgba(248,245,237,1) 35%,
        rgba(248,245,237,.96) 40%,
        rgba(248,245,237,.72) 45%,
        rgba(248,245,237,.24) 51%,
        rgba(248,245,237,0) 57%
      ),

      url('assets/images/hero-architecture-desktop-D.webp');

    background-position:
      center,
      center,
      center 52%;

    background-size:
      cover,
      cover,
      cover;

    background-repeat: no-repeat;
  }
}


/* rc74 · Hero quote dark on fading architecture */
@media (min-width: 1181px) {
  .hs09-hero-quote .hs09-quote {
    color: rgba(11,52,82,.92);
    text-shadow: none;
  }

  .hs09-hero-quote .hs09-quote-author {
    color: rgba(11,52,82,.76);
  }
}

/* ================================================================
   BUILD-10F / rc75 · LAYER 8 · WERKBAHN
   Books as workspaces; editorial, not card-grid.
   ================================================================ */

.hs10-books {
  padding: clamp(3.4rem,5.5vw,5.5rem) 0 clamp(3.2rem,5vw,5rem);
  background: var(--hs09-paper);
  border-top: 1px solid rgba(11,52,82,.08);
  border-bottom: 1px solid rgba(11,52,82,.10);
}

.hs10-books-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: end;
  gap: 2rem;
  margin-bottom: clamp(2.2rem,3.5vw,3.4rem);
}

.hs10-books-intro {
  max-width: 47rem;
}

.hs10-books-intro h2 {
  margin: 0;
  color: var(--hs09-navy);
  font-size: clamp(2.55rem,2rem + 1.8vw,4.25rem);
  line-height: .98;
  letter-spacing: -.03em;
}

.hs10-books-intro > p:not(.hs09-section-label) {
  max-width: 42rem;
  margin: .9rem 0 0;
  line-height: 1.52;
}

.hs10-books-all,
.hs10-book-link {
  color: var(--hs09-navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(11,52,82,.48);
}

.hs10-books-all {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding-bottom: .18rem;
  font-size: .9rem;
  white-space: nowrap;
}

.hs10-books-rail {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: clamp(1.4rem,2.7vw,2.8rem);
  align-items: start;
}

.hs10-book {
  min-width: 0;
}

.hs10-book-coverlink {
  display: block;
  width: min(100%, 175px);
  margin-bottom: 1rem;
  text-decoration: none;
}

.hs10-book-coverlink img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  box-shadow: 0 10px 28px rgba(11,52,82,.09);
}

.hs10-book-field {
  margin: 0 0 .5rem;
  color: var(--hs09-red);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.3;
  text-transform: uppercase;
}

.hs10-book h3 {
  margin: 0;
  color: var(--hs09-navy);
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(1.2rem,1.08rem + .35vw,1.48rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.015em;
}

.hs10-book > p:not(.hs10-book-field) {
  margin: .62rem 0 0;
  color: var(--hs09-navy);
  font-size: .86rem;
  line-height: 1.43;
}

.hs10-book-link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: .8rem;
  padding-bottom: .15rem;
  font-size: .84rem;
}

.hs10-books-all:hover,
.hs10-books-all:focus-visible,
.hs10-book-link:hover,
.hs10-book-link:focus-visible {
  border-color: var(--hs09-red);
}

.hs10-books-progress {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 1.15rem;
  margin-top: clamp(2.5rem,4vw,4rem);
}

.hs10-books-count {
  display: flex;
  align-items: baseline;
  gap: .25rem;
  color: var(--hs09-navy);
  font-size: .78rem;
}

.hs10-books-count strong {
  color: var(--hs09-red);
  font-size: .95rem;
}

.hs10-books-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(15,1fr);
  align-items: center;
  height: 18px;
}

.hs10-books-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(11,52,82,.26);
  transform: translateY(-50%);
}

.hs10-books-track span {
  position: relative;
  z-index: 2;
  justify-self: center;
  width: 5px;
  height: 5px;
  border: 1px solid rgba(11,52,82,.54);
  border-radius: 50%;
  background: var(--hs09-paper);
}

.hs10-books-track span.is-active {
  width: 8px;
  height: 8px;
  border-color: var(--hs09-red);
  background: var(--hs09-red);
}

@media (max-width: 1100px) {
  .hs10-books-rail {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}

@media (max-width: 700px) {
  .hs10-books-head {
    display: block;
  }

  .hs10-books-all {
    margin-top: 1.2rem;
  }

  .hs10-books-rail {
    display: flex;
    gap: 1.4rem;
    overflow-x: auto;
    padding-bottom: .75rem;
    scroll-snap-type: x proximity;
  }

  .hs10-book {
    flex: 0 0 min(72vw,230px);
    scroll-snap-align: start;
  }
}

/* ================================================================
   BUILD-10G / rc76 · LAYER 8 · 3D BOOK INLAY
   One work is present; the series remains a quiet horizon.
   ================================================================ */

.hs10-books-3d .hs10-books-head {
  margin-bottom: clamp(1.9rem,3vw,2.7rem);
}

.hs10-book3d-layout {
  display: grid;
  grid-template-columns: minmax(360px,1.18fr) minmax(300px,.82fr);
  align-items: center;
  gap: clamp(2.5rem,6vw,6.5rem);
  min-height: 440px;
  padding: clamp(1rem,2vw,1.8rem) 0 clamp(1.7rem,3vw,2.8rem);
}

.hs10-book3d-stage {
  --book-w: 212px;
  --book-h: 303px;
  --book-d: 28px;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 400px;
  perspective: 1300px;
  cursor: grab;
  touch-action: none;
  outline: none;
}

.hs10-book3d-stage:active { cursor: grabbing; }

.hs10-book3d-stage:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(11,52,82,.28);
}

.hs10-book3d {
  --book-ry: -12deg;
  --book-rx: 0deg;
  position: relative;
  width: var(--book-w);
  height: var(--book-h);
  transform-style: preserve-3d;
  transform: rotateX(var(--book-rx)) rotateY(var(--book-ry));
  will-change: transform;
}

.hs10-book3d.is-settling {
  transition: transform .55s cubic-bezier(.2,.72,.25,1);
}

.hs10-book3d.is-intro {
  animation: hs10-book-intro 1.8s cubic-bezier(.2,.72,.25,1) both;
}

@keyframes hs10-book-intro {
  0%   { transform: rotateX(0deg) rotateY(-12deg); }
  45%  { transform: rotateX(-2deg) rotateY(-26deg); }
  100% { transform: rotateX(0deg) rotateY(-12deg); }
}

.hs10-book3d-face {
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  background-repeat: no-repeat;
}

.hs10-book3d-front,
.hs10-book3d-back {
  width: var(--book-w);
  height: var(--book-h);
  background-size: cover;
  background-color: #f5f1e9;
  box-shadow: 0 0 0 1px rgba(11,52,82,.10);
}

.hs10-book3d-front {
  transform: translateZ(calc(var(--book-d) / 2));
}

.hs10-book3d-back {
  transform: rotateY(180deg) translateZ(calc(var(--book-d) / 2));
  background-size: auto 100%;
}

.hs10-book3d-spine {
  width: var(--book-d);
  height: var(--book-h);
  left: calc((var(--book-w) - var(--book-d)) / -2);
  transform: rotateY(-90deg) translateZ(calc(var(--book-w) / 2));
  transform-origin: center center;
  background-size: auto 100%;
  background-color: var(--hs09-navy);
}

.hs10-book3d-pages {
  width: var(--book-d);
  height: calc(var(--book-h) - 8px);
  left: calc(var(--book-w) - (var(--book-d) / 2));
  top: 4px;
  transform: rotateY(90deg) translateZ(calc(var(--book-w) / 2));
  transform-origin: center center;
  background: repeating-linear-gradient(
    180deg,
    #f6f1e7 0 2px,
    #e9e1d4 2px 3px
  );
}

.hs10-book3d-top,
.hs10-book3d-bottom {
  width: var(--book-w);
  height: var(--book-d);
  left: 0;
  background: repeating-linear-gradient(
    90deg,
    #f6f1e7 0 3px,
    #e8dfd2 3px 4px
  );
}

.hs10-book3d-top {
  top: calc(var(--book-d) / -2);
  transform: rotateX(90deg) translateZ(calc(var(--book-h) / 2));
}

.hs10-book3d-bottom {
  top: calc(var(--book-h) - (var(--book-d) / 2));
  transform: rotateX(-90deg) translateZ(calc(var(--book-h) / 2));
}

.hs10-book3d-shadow {
  position: absolute;
  width: 265px;
  height: 38px;
  top: calc(50% + 165px);
  left: 50%;
  border-radius: 50%;
  background: rgba(11,52,82,.13);
  filter: blur(15px);
  transform: translateX(-50%);
}

.hs10-book3d-hint {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  margin: 0;
  color: rgba(11,52,82,.56);
  font-size: .68rem;
  letter-spacing: .08em;
  white-space: nowrap;
}

.hs10-book3d-copy {
  max-width: 31rem;
  padding-right: clamp(0rem,3vw,2.5rem);
}

.hs10-book3d-copy h3 {
  margin: 0;
  color: var(--hs09-navy);
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(2rem,1.6rem + 1.4vw,3.25rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.025em;
}

.hs10-book3d-copy > p:not(.hs10-book-field) {
  max-width: 30rem;
  margin: 1rem 0 0;
  color: var(--hs09-navy);
  line-height: 1.55;
}

.hs10-book3d-copy .hs10-book-link {
  margin-top: 1.15rem;
}

.hs10-books-selector {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  border-top: 1px solid rgba(11,52,82,.16);
  border-bottom: 1px solid rgba(11,52,82,.16);
}

.hs10-books-selector-item {
  appearance: none;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .68rem;
  min-height: 76px;
  padding: 1rem clamp(.75rem,1.6vw,1.3rem);
  border: 0;
  border-right: 1px solid rgba(11,52,82,.12);
  background: transparent;
  color: var(--hs09-navy);
  text-align: left;
  cursor: pointer;
}

.hs10-books-selector-item:last-child {
  border-right: 0;
}

.hs10-books-selector-item span {
  color: rgba(11,52,82,.46);
  font-size: .68rem;
  line-height: 1.4;
}

.hs10-books-selector-item strong {
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.3;
}

.hs10-books-selector-item:hover,
.hs10-books-selector-item:focus-visible {
  background: rgba(11,52,82,.025);
  outline: none;
}

.hs10-books-selector-item.is-active {
  background: rgba(11,52,82,.045);
}

.hs10-books-selector-item.is-active span {
  color: var(--hs09-red);
}

.hs10-books-3d .hs10-books-progress {
  margin-top: clamp(1.8rem,3vw,2.8rem);
}

@media (max-width: 900px) {
  .hs10-book3d-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .hs10-book3d-copy {
    max-width: 38rem;
    padding-right: 0;
  }

  .hs10-books-selector {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .hs10-books-selector-item {
    border-bottom: 1px solid rgba(11,52,82,.12);
  }
}

@media (max-width: 560px) {
  .hs10-book3d-stage {
    --book-w: 174px;
    --book-h: 249px;
    --book-d: 23px;
    min-height: 335px;
  }

  .hs10-book3d-shadow {
    width: 220px;
    top: calc(50% + 138px);
  }

  .hs10-books-selector {
    grid-template-columns: 1fr;
  }

  .hs10-books-selector-item {
    min-height: 0;
    border-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs10-book3d,
  .hs10-book3d.is-settling,
  .hs10-book3d.is-intro {
    animation: none !important;
    transition: none !important;
  }
}

/* ================================================================
   BUILD-10I / rc78 · LAYER 8
   Connected 3D geometry + immediately visible multi-book horizon.
   ================================================================ */

.hs10-book3d-layout {
  grid-template-columns: minmax(430px,1.18fr) minmax(300px,.82fr);
}

.hs10-book3d-visualcol {
  min-width: 0;
}

/* corrected cuboid geometry */
.hs10-book3d-stage {
  --book-w: 212px;
  --book-h: 303px;
  --book-d: 27px;
  min-height: 390px;
  perspective: 1450px;
}

.hs10-book3d-front {
  left: 0;
  top: 0;
  transform: translateZ(calc(var(--book-d) / 2));
}

.hs10-book3d-back {
  left: 0;
  top: 0;
  transform: rotateY(180deg) translateZ(calc(var(--book-d) / 2));
}

.hs10-book3d-spine,
.hs10-book3d-pages {
  left: calc(50% - (var(--book-d) / 2));
  top: 0;
  width: var(--book-d);
  height: var(--book-h);
  transform-origin: center center;
}

.hs10-book3d-spine {
  transform: rotateY(-90deg) translateZ(calc(var(--book-w) / 2));
  background-size: auto 100%;
  background-position: center center !important;
}

.hs10-book3d-pages {
  transform: rotateY(90deg) translateZ(calc(var(--book-w) / 2));
}

.hs10-book3d-top,
.hs10-book3d-bottom {
  left: 0;
  top: calc(50% - (var(--book-d) / 2));
  width: var(--book-w);
  height: var(--book-d);
  transform-origin: center center;
}

.hs10-book3d-top {
  transform: rotateX(90deg) translateZ(calc(var(--book-h) / 2));
}

.hs10-book3d-bottom {
  transform: rotateX(-90deg) translateZ(calc(var(--book-h) / 2));
}

.hs10-book3d {
  --book-ry: -16deg;
}

@keyframes hs10-book-intro {
  0%   { transform: rotateX(0deg) rotateY(-16deg); }
  45%  { transform: rotateX(-1.5deg) rotateY(-27deg); }
  100% { transform: rotateX(0deg) rotateY(-16deg); }
}

.hs10-book3d-shadow {
  width: 245px;
  height: 29px;
  top: calc(50% + 164px);
  opacity: .74;
  filter: blur(14px);
}

.hs10-book3d-hint {
  bottom: 0;
}

/* multi-book horizon directly under the 3D object */
.hs10-books-selector {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: clamp(.55rem,1.2vw,.9rem);
  width: min(100%,560px);
  margin: .8rem auto 0;
  padding: 0;
  border: 0;
}

.hs10-books-selector-item {
  appearance: none;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: .32rem;
  min-width: 0;
  min-height: 0;
  padding: .45rem .35rem .55rem;
  border: 0;
  background: transparent;
  color: var(--hs09-navy);
  text-align: center;
  cursor: pointer;
  opacity: .68;
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}

.hs10-books-selector-item:last-child {
  border-right: 0;
}

.hs10-books-selector-item img {
  display: block;
  width: clamp(42px,4.5vw,58px);
  height: auto;
  max-height: 82px;
  object-fit: contain;
  box-shadow: 0 5px 14px rgba(11,52,82,.10);
}

.hs10-books-selector-item span {
  color: rgba(11,52,82,.50);
  font-size: .58rem;
  line-height: 1;
}

.hs10-books-selector-item strong {
  max-width: 7rem;
  font-size: .61rem;
  font-weight: 600;
  line-height: 1.15;
}

.hs10-books-selector-item:hover,
.hs10-books-selector-item:focus-visible {
  opacity: 1;
  background: rgba(11,52,82,.025);
  transform: translateY(-2px);
  outline: none;
}

.hs10-books-selector-item.is-active {
  opacity: 1;
  background: rgba(11,52,82,.035);
}

.hs10-books-selector-item.is-active img {
  box-shadow:
    0 7px 18px rgba(11,52,82,.13),
    0 0 0 1px rgba(194,45,39,.30);
}

.hs10-books-selector-item.is-active span {
  color: var(--hs09-red);
}

@media (max-width: 900px) {
  .hs10-book3d-layout {
    grid-template-columns: 1fr;
  }

  .hs10-books-selector {
    width: min(100%,520px);
  }
}

@media (max-width: 560px) {
  .hs10-book3d-stage {
    --book-w: 174px;
    --book-h: 249px;
    --book-d: 22px;
    min-height: 330px;
  }

  .hs10-books-selector {
    display: flex;
    justify-content: flex-start;
    gap: .45rem;
    overflow-x: auto;
    width: 100%;
    padding-bottom: .45rem;
    scrollbar-width: thin;
  }

  .hs10-books-selector-item {
    flex: 0 0 82px;
  }

  .hs10-books-selector-item img {
    width: 44px;
  }
}

/* ================================================================
   rc79 · HEADER / NAVIGATION STACKING
   Open menus must always stay above hero imagery and overlays.
   ================================================================ */

.hs-site-header {
  position: relative;
  z-index: 1000;
  overflow: visible;
}

.hs-site-header .wp-block-navigation {
  position: relative;
  z-index: 1010;
}

/* Desktop dropdowns */
.hs-site-header .wp-block-navigation__submenu-container {
  z-index: 1100 !important;
}

/* WordPress mobile / overlay navigation */
.hs-site-header .wp-block-navigation__responsive-container,
.hs-site-header .wp-block-navigation__responsive-container.is-menu-open {
  z-index: 1200 !important;
}

/* Hero stays below navigation stack */
.hs09-hero {
  z-index: 1;
}

.hs09-hero-visual,
.hs09-hero::after {
  z-index: 1;
}


/* ================================================================
   BUILD-10J / rc80 · LAYER 10 · DARK CLOSING
   Ein Mensch hinter der Arbeit.
   Original portrait only. No generated portrait.
   ================================================================ */

.hs10-closing {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      90deg,
      #0a2f4a 0%,
      #0a2f4a 58%,
      #092b44 72%,
      #071f31 100%
    );
  color: #f8f5ed;
  border-top: 1px solid rgba(248,245,237,.08);
}

.hs10-closing-grid {
  display: grid;
  grid-template-columns:
    minmax(360px,1.02fr)
    minmax(240px,.64fr)
    minmax(300px,.82fr);
  align-items: stretch;
  min-height: 520px;
}

.hs10-closing-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding:
    clamp(3.5rem,6vw,6.2rem)
    clamp(2rem,4vw,4.7rem)
    clamp(3.5rem,6vw,6.2rem)
    0;
}

.hs10-closing-label {
  margin: 0 0 1rem;
  color: rgba(248,245,237,.72);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hs10-closing h2 {
  margin: 0;
  color: #f8f5ed;
  font-size: clamp(3rem,2.25rem + 2.25vw,5rem);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.035em;
}

.hs10-closing-lead {
  max-width: 34rem;
  margin: 1.45rem 0 0;
  color: #f8f5ed;
  font-size: clamp(1.05rem,.98rem + .25vw,1.28rem);
  line-height: 1.48;
}

.hs10-closing-copy > p:not(.hs10-closing-label):not(.hs10-closing-lead) {
  max-width: 37rem;
  margin: 1rem 0 0;
  color: rgba(248,245,237,.78);
  line-height: 1.58;
}

.hs10-closing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 1.65rem;
}

.hs10-closing-primary,
.hs10-closing-secondary {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 44px;
  padding: .72rem 1rem;
  text-decoration: none;
  transition:
    background .18s ease,
    color .18s ease,
    border-color .18s ease;
}

.hs10-closing-primary {
  background: #f8f5ed;
  border: 1px solid #f8f5ed;
  color: #0b3452;
}

.hs10-closing-primary:hover,
.hs10-closing-primary:focus-visible {
  background: #ffffff;
  border-color: #ffffff;
  color: #0b3452;
}

.hs10-closing-secondary {
  background: transparent;
  border: 1px solid rgba(248,245,237,.54);
  color: #f8f5ed;
}

.hs10-closing-secondary:hover,
.hs10-closing-secondary:focus-visible {
  border-color: #f8f5ed;
  color: #ffffff;
}

.hs10-closing-note {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.4rem;
  padding:
    clamp(3rem,5vw,5.5rem)
    clamp(1.8rem,3vw,3rem);
  border-left: 1px solid rgba(248,245,237,.13);
}

.hs10-closing-note blockquote {
  margin: 0;
  color: rgba(248,245,237,.92);
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(1rem,.92rem + .35vw,1.3rem);
  font-style: italic;
  line-height: 1.38;
}

.hs10-closing-note blockquote::after {
  content: "";
  display: block;
  width: 2.2rem;
  height: 2px;
  margin-top: 1.25rem;
  background: var(--hs09-red);
}

.hs10-closing-signature {
  color: rgba(248,245,237,.58);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
}

.hs10-closing-portrait {
  position: relative;
  min-height: 520px;
  margin: 0;
  overflow: hidden;
  background: #061b2a;
}

.hs10-closing-portrait::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: 42%;
  background:
    linear-gradient(
      90deg,
      #092b44 0%,
      rgba(9,43,68,.82) 26%,
      rgba(9,43,68,.30) 68%,
      rgba(9,43,68,0) 100%
    );
  pointer-events: none;
}

.hs10-closing-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  object-position: center top;
}

/* quiet process-line echo at the end of the page */
.hs10-closing::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 1.3rem;
  width: 18%;
  height: 1px;
  background: rgba(248,245,237,.26);
  pointer-events: none;
}

@media (max-width: 980px) {
  .hs10-closing-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hs10-closing-copy {
    grid-column: 1 / -1;
    padding-right: 0;
  }

  .hs10-closing-note {
    border-left: 0;
    border-top: 1px solid rgba(248,245,237,.13);
  }

  .hs10-closing-portrait {
    min-height: 420px;
  }

  .hs10-closing-portrait img {
    min-height: 420px;
  }
}

@media (max-width: 700px) {
  .hs10-closing-grid {
    grid-template-columns: 1fr;
  }

  .hs10-closing-copy,
  .hs10-closing-note {
    padding-left: 0;
    padding-right: 0;
  }

  .hs10-closing-note {
    border-top: 1px solid rgba(248,245,237,.13);
  }

  .hs10-closing-portrait {
    min-height: 380px;
  }

  .hs10-closing-portrait img {
    min-height: 380px;
    object-position: center top;
  }

  .hs10-closing-portrait::before {
    width: 100%;
    height: 24%;
    inset: 0 0 auto;
    background:
      linear-gradient(
        180deg,
        #092b44 0%,
        rgba(9,43,68,.65) 45%,
        rgba(9,43,68,0) 100%
      );
  }
}

/* ================================================================
   BUILD-10K / rc81 · LAYER 10 · CONTRAST FIX
   No geometry changes.
   ================================================================ */

.hs10-closing .hs10-closing-label {
  color: rgba(248,245,237,.72) !important;
}

.hs10-closing .hs10-closing-lead {
  color: rgba(248,245,237,.86) !important;
}

.hs10-closing .hs10-closing-secondary,
.hs10-closing .hs10-closing-secondary:link,
.hs10-closing .hs10-closing-secondary:visited,
.hs10-closing .hs10-closing-secondary span {
  color: #f8f5ed !important;
}

.hs10-closing .hs10-closing-secondary:hover,
.hs10-closing .hs10-closing-secondary:focus-visible,
.hs10-closing .hs10-closing-secondary:hover span,
.hs10-closing .hs10-closing-secondary:focus-visible span {
  color: #ffffff !important;
  border-color: rgba(248,245,237,.92) !important;
}


/* ================================================================
   BUILD-10L / rc82 · LAYER 8 · FULL 15-BOOK WORK RUNWAY
   Five-ish covers visible, all 15 swipe/scroll/selectable.
   ================================================================ */

.hs10-books-browser {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr) 30px;
  align-items: center;
  gap: .55rem;
  width: min(100%, 620px);
  margin: .8rem auto 0;
}

.hs10-books-selector-viewport {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(11,52,82,.24) transparent;
}

.hs10-books-selector-viewport::-webkit-scrollbar {
  height: 4px;
}

.hs10-books-selector-viewport::-webkit-scrollbar-track {
  background: transparent;
}

.hs10-books-selector-viewport::-webkit-scrollbar-thumb {
  background: rgba(11,52,82,.22);
  border-radius: 999px;
}

.hs10-books-3d .hs10-books-selector {
  display: flex;
  gap: clamp(.55rem,1vw,.85rem);
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: .15rem .1rem .55rem;
  border: 0;
}

.hs10-books-3d .hs10-books-selector-item {
  flex: 0 0 94px;
  width: 94px;
  scroll-snap-align: center;
  padding: .4rem .35rem .5rem;
}

.hs10-books-3d .hs10-books-selector-item img {
  width: 48px;
  max-height: 72px;
}

.hs10-books-3d .hs10-books-selector-item strong {
  max-width: 86px;
  min-height: 2.3em;
  overflow-wrap: anywhere;
}

.hs10-books-nav {
  appearance: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 42px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(11,52,82,.44);
  background: transparent;
  color: var(--hs09-navy);
  font-size: 1rem;
  cursor: pointer;
}

.hs10-books-nav:hover,
.hs10-books-nav:focus-visible {
  border-color: var(--hs09-red);
  outline: none;
}

.hs10-books-nav:disabled {
  opacity: .22;
  cursor: default;
  border-color: rgba(11,52,82,.20);
}

.hs10-books-3d .hs10-books-progress {
  margin-top: clamp(1.65rem,2.8vw,2.4rem);
}

@media (max-width: 700px) {
  .hs10-books-browser {
    grid-template-columns: 26px minmax(0,1fr) 26px;
    gap: .35rem;
    width: 100%;
  }

  .hs10-books-nav {
    width: 26px;
  }

  .hs10-books-3d .hs10-books-selector-item {
    flex-basis: 82px;
    width: 82px;
  }

  .hs10-books-3d .hs10-books-selector-item img {
    width: 44px;
  }
}


/* ================================================================
   BUILD-10M / rc83 · LAYER 8 · NAVIGATION FIX
   Arrows + 15-point work runway are interactive.
   ================================================================ */

.hs10-books-track button {
  appearance: none;
  position: relative;
  z-index: 2;
  justify-self: center;
  width: 7px;
  height: 7px;
  padding: 0;
  border: 1px solid rgba(11,52,82,.54);
  border-radius: 50%;
  background: var(--hs09-paper);
  cursor: pointer;
}

.hs10-books-track button:hover,
.hs10-books-track button:focus-visible {
  width: 9px;
  height: 9px;
  border-color: var(--hs09-red);
  outline: none;
}

.hs10-books-track button.is-active {
  width: 10px;
  height: 10px;
  border-color: var(--hs09-red);
  background: var(--hs09-red);
}

.hs10-books-track button[aria-current="true"] {
  border-color: var(--hs09-red);
  background: var(--hs09-red);
}


/* ================================================================
   BUILD-10O / rc85 · LAYER 9 · PROFESSIONALS / WORKROOM
   Concrete + warm oak + real HYPNOSYSTEMIC books.
   Shelf is architecture/background; content remains independent.
   ================================================================ */

.hs10-pro {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.72), transparent 32%),
    linear-gradient(115deg, #f4f0e8 0%, #eee9df 58%, #e8e2d7 100%);
  border-top: 1px solid rgba(11,52,82,.09);
  border-bottom: 1px solid rgba(11,52,82,.11);
}

.hs10-pro-shell {
  position: relative;
  min-height: 520px;
  padding-top: clamp(3.8rem,6vw,6rem);
  padding-bottom: clamp(3.2rem,5vw,4.7rem);
}

.hs10-pro-room {
  position: absolute;
  z-index: 0;
  inset: 0 -7vw 0 38%;
  pointer-events: none;
}

.hs10-pro-niche {
  position: absolute;
  top: clamp(3.1rem,5vw,5rem);
  right: 0;
  width: min(760px,72vw);
  height: 250px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 22%),
    linear-gradient(90deg, #ba8d5a 0%, #d0a66f 44%, #bd8d55 100%);
  box-shadow:
    inset 0 0 0 10px rgba(112,75,39,.15),
    inset 0 12px 28px rgba(56,35,18,.15),
    0 15px 42px rgba(55,45,35,.07);
}

.hs10-pro-niche::before,
.hs10-pro-niche::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 11px;
  background: linear-gradient(90deg,#9e7043,#c79a64 55%,#9f7043);
  box-shadow: 0 2px 4px rgba(65,44,27,.15);
}

.hs10-pro-niche::before { top: 0; }
.hs10-pro-niche::after { bottom: 0; }

.hs10-pro-niche-light {
  position: absolute;
  inset: 10px 10px auto;
  height: 32px;
  background: linear-gradient(180deg,rgba(255,239,196,.58),rgba(255,239,196,0));
  filter: blur(4px);
}

.hs10-pro-bench {
  position: absolute;
  right: -4vw;
  bottom: 0;
  width: min(860px,78vw);
  height: 74px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.16),transparent 20%),
    linear-gradient(90deg,#b78652,#d6ac73 45%,#bb8850);
  box-shadow: 0 -1px 0 rgba(75,49,30,.16), 0 -14px 40px rgba(55,45,35,.05);
}

.hs10-pro-spines {
  position: absolute;
  bottom: 11px;
  display: flex;
  align-items: end;
  gap: 5px;
}

.hs10-pro-spines-left { left: 22px; }
.hs10-pro-spines-right { right: 20px; }

.hs10-pro-spine {
  display: block;
  width: 29px;
  height: 176px;
  background-size: auto 100%;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 1px 2px 5px rgba(45,35,25,.14);
  border-radius: 1px;
}

.hs10-pro-spine.s2 { height: 166px; width: 27px; }
.hs10-pro-spine.s3 { height: 171px; width: 30px; }
.hs10-pro-spine.s4 { height: 160px; width: 28px; }

.hs10-pro-stack {
  position: absolute;
  bottom: 20px;
  width: 170px;
  height: 116px;
}

.hs10-pro-stack-a { left: 34%; }
.hs10-pro-stack-b { left: 58%; transform: scale(.88); transform-origin: bottom left; }

.hs10-pro-back {
  position: absolute;
  display: block;
  width: 168px;
  height: 108px;
  overflow: hidden;
  border: 1px solid rgba(11,52,82,.08);
  background-size: auto 100%;
  background-position: left center;
  background-repeat: no-repeat;
  box-shadow: 0 6px 12px rgba(45,35,25,.10);
  transform-origin: center bottom;
}

.hs10-pro-stack-a .b1 { transform: perspective(520px) rotateX(67deg) rotateZ(-1.1deg); bottom: 0; }
.hs10-pro-stack-a .b2 { transform: perspective(520px) rotateX(67deg) rotateZ(.5deg); bottom: 13px; }
.hs10-pro-stack-a .b3 { transform: perspective(520px) rotateX(67deg) rotateZ(-.4deg); bottom: 26px; }

.hs10-pro-stack-b .b1 { transform: perspective(520px) rotateX(67deg) rotateZ(.8deg); bottom: 0; }
.hs10-pro-stack-b .b2 { transform: perspective(520px) rotateX(67deg) rotateZ(-.6deg); bottom: 14px; }

.hs10-pro-copy,
.hs10-pro-anchors,
.hs10-pro-cta {
  position: relative;
  z-index: 2;
}

.hs10-pro-copy {
  width: min(46%, 530px);
}

.hs10-pro-copy h2 {
  margin: 0;
  color: var(--hs09-navy);
  font-size: clamp(2.55rem,2rem + 1.65vw,4rem);
  font-weight: 500;
  line-height: .99;
  letter-spacing: -.03em;
}

.hs10-pro-copy > p:not(.hs09-section-label) {
  max-width: 36rem;
  margin: 1rem 0 0;
  color: var(--hs09-navy);
  line-height: 1.56;
}

.hs10-pro-anchors {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 0;
  width: min(66%,760px);
  margin-top: clamp(4rem,7vw,7rem);
  margin-left: auto;
  background: rgba(248,245,237,.78);
  backdrop-filter: blur(3px);
  border-top: 1px solid rgba(11,52,82,.13);
  border-bottom: 1px solid rgba(11,52,82,.13);
}

.hs10-pro-anchor {
  padding: 1.2rem clamp(1rem,2vw,1.7rem) 1.35rem;
  border-right: 1px solid rgba(11,52,82,.13);
}

.hs10-pro-anchor:last-child {
  border-right: 0;
}

.hs10-pro-anchor svg {
  width: 42px;
  height: 42px;
  margin-bottom: .65rem;
  color: var(--hs09-navy);
}

.hs10-pro-anchor svg circle {
  fill: var(--hs09-red);
}

.hs10-pro-anchor h3 {
  margin: 0;
  color: var(--hs09-navy);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hs10-pro-anchor p {
  margin: .5rem 0 0;
  color: var(--hs09-navy);
  font-size: .86rem;
  line-height: 1.42;
}

.hs10-pro-cta {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.15rem;
}

.hs10-pro-cta a {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: .82rem 1.05rem;
  background: var(--hs09-navy);
  border: 1px solid var(--hs09-navy);
  color: #f8f5ed !important;
  text-decoration: none;
}

.hs10-pro-cta a:hover,
.hs10-pro-cta a:focus-visible {
  background: #0f4267;
  border-color: #0f4267;
}

@media (max-width: 1050px) {
  .hs10-pro-room {
    inset: 0 -14vw 0 43%;
    opacity: .95;
  }

  .hs10-pro-copy {
    width: 53%;
  }

  .hs10-pro-anchors {
    width: 76%;
  }
}

@media (max-width: 800px) {
  .hs10-pro-shell {
    min-height: auto;
  }

  .hs10-pro-room {
    inset: 8rem -30vw auto 34%;
    height: 300px;
    opacity: .58;
  }

  .hs10-pro-niche {
    top: 0;
    width: 760px;
    height: 235px;
  }

  .hs10-pro-bench {
    display: none;
  }

  .hs10-pro-copy {
    width: min(100%,540px);
    padding-right: 1rem;
  }

  .hs10-pro-copy::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -1rem -2rem -1rem -100vw;
    background: linear-gradient(90deg,#f4f0e8 0%,rgba(244,240,232,.96) 78%,rgba(244,240,232,0) 100%);
  }

  .hs10-pro-anchors {
    width: 100%;
    margin-top: 10rem;
  }
}

@media (max-width: 620px) {
  .hs10-pro-room {
    inset: 9.5rem -85vw auto 20%;
    height: 240px;
    opacity: .42;
  }

  .hs10-pro-niche {
    transform: scale(.8);
    transform-origin: left top;
  }

  .hs10-pro-spines-right,
  .hs10-pro-stack-b {
    display: none;
  }

  .hs10-pro-anchors {
    grid-template-columns: 1fr;
    margin-top: 7.5rem;
    background: rgba(248,245,237,.90);
  }

  .hs10-pro-anchor {
    border-right: 0;
    border-bottom: 1px solid rgba(11,52,82,.12);
  }

  .hs10-pro-anchor:last-child {
    border-bottom: 0;
  }

  .hs10-pro-cta {
    justify-content: flex-start;
  }
}

/* ================================================================
   BUILD-10Q / rc87 · LAYER 8 · CONCRETE AMBIENCE
   The active 3D book gets an architectural stage:
   recessed concrete niche + warm light slit + concrete plinth.
   No extra books, no wood, no new content geometry.
   ================================================================ */

.hs10-books-3d .hs10-book3d-stage {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

/* recessed concrete niche */
.hs10-books-3d .hs10-book3d-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 3%;
  width: min(78%, 430px);
  height: 84%;
  transform: translateX(-50%);
  pointer-events: none;

  background:
    radial-gradient(
      circle at 78% 18%,
      rgba(255,255,255,.54) 0%,
      rgba(255,255,255,.18) 22%,
      rgba(255,255,255,0) 46%
    ),
    linear-gradient(
      115deg,
      rgba(255,255,255,.28) 0%,
      rgba(255,255,255,.06) 34%,
      rgba(11,52,82,.035) 100%
    ),
    #ece9e2;

  border: 1px solid rgba(11,52,82,.07);

  box-shadow:
    inset 18px 0 32px rgba(11,52,82,.035),
    inset -22px 0 32px rgba(11,52,82,.028),
    inset 0 18px 28px rgba(11,52,82,.03),
    0 18px 40px rgba(11,52,82,.035);
}

/* slim warm light slit on the right edge of the niche */
.hs10-books-3d .hs10-book3d-stage::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 8%;
  left: calc(50% + min(34%, 180px));
  width: 2px;
  height: 63%;
  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(219,183,121,0) 0%,
      rgba(219,183,121,.48) 16%,
      rgba(219,183,121,.68) 48%,
      rgba(219,183,121,.28) 84%,
      rgba(219,183,121,0) 100%
    );

  box-shadow:
    0 0 10px rgba(219,183,121,.22),
    0 0 24px rgba(219,183,121,.10);
}

/* connected 3D object above the architecture */
.hs10-books-3d .hs10-book3d,
.hs10-books-3d .hs10-book3d-shadow,
.hs10-books-3d .hs10-book3d-hint {
  position: relative;
  z-index: 3;
}

/* architectural plinth, separate from the interactive object */
.hs10-books-3d .hs10-book3d-shadow::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -9px;
  width: 286px;
  height: 18px;
  transform: translateX(-50%);
  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      #e8e5de 0%,
      #dedad1 62%,
      #d4d0c7 100%
    );

  border-top: 1px solid rgba(11,52,82,.08);
  border-bottom: 1px solid rgba(11,52,82,.06);

  box-shadow:
    0 8px 18px rgba(11,52,82,.06);
}

/* keep the selector visually separate from the room */
.hs10-books-3d .hs10-books-browser {
  position: relative;
  z-index: 4;
  margin-top: 1.15rem;
}

/* a very soft paper-to-room transition around the visual column */
.hs10-books-3d .hs10-book3d-visualcol {
  position: relative;
}

.hs10-books-3d .hs10-book3d-visualcol::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 2.2rem -1.8rem 5.1rem -1.8rem;
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(248,245,237,1) 0%,
      rgba(248,245,237,.18) 18%,
      rgba(248,245,237,0) 34%,
      rgba(248,245,237,0) 70%,
      rgba(248,245,237,.22) 88%,
      rgba(248,245,237,1) 100%
    );
}

/* tablet: smaller niche, still architectural */
@media (max-width: 900px) {
  .hs10-books-3d .hs10-book3d-stage::before {
    width: min(84%, 390px);
    height: 82%;
  }

  .hs10-books-3d .hs10-book3d-stage::after {
    left: calc(50% + min(36%, 155px));
  }
}

/* mobile: ambience remains, but becomes a quiet background plane */
@media (max-width: 560px) {
  .hs10-books-3d .hs10-book3d-stage::before {
    top: 5%;
    width: min(92%, 310px);
    height: 79%;

    box-shadow:
      inset 12px 0 22px rgba(11,52,82,.03),
      inset -14px 0 22px rgba(11,52,82,.025),
      0 12px 28px rgba(11,52,82,.03);
  }

  .hs10-books-3d .hs10-book3d-stage::after {
    left: auto;
    right: 8%;
    height: 55%;
  }

  .hs10-books-3d .hs10-book3d-shadow::before {
    width: 224px;
    height: 14px;
  }

  .hs10-books-3d .hs10-book3d-visualcol::before {
    inset: 1rem -.8rem 4.5rem -.8rem;
  }
}


/* ================================================================
   BUILD-10R / rc88 · LAYER 8 · PHOTOGRAPHIC CONCRETE STAGE
   The real architectural image becomes scenery only.
   3D book remains interactive HTML/CSS.
   Gallery/navigation stays a separate editorial UI below.
   ================================================================ */

/* retire the synthetic niche from rc87 */
.hs10-books-3d .hs10-book3d-stage::before,
.hs10-books-3d .hs10-book3d-stage::after,
.hs10-books-3d .hs10-book3d-shadow::before,
.hs10-books-3d .hs10-book3d-visualcol::before {
  content: none !important;
  display: none !important;
}

.hs10-books-3d .hs10-book3d-stage {
  --book-w: 220px;
  --book-h: 314px;
  --book-d: 28px;

  min-height: 470px;
  overflow: hidden;
  isolation: isolate;

  background:
    linear-gradient(
      90deg,
      rgba(248,245,237,.14) 0%,
      rgba(248,245,237,0) 16%,
      rgba(248,245,237,0) 84%,
      rgba(248,245,237,.10) 100%
    ),
    url('assets/images/book-worktable-desktop.webp');

  background-size: cover;
  background-position: center 58%;
  background-repeat: no-repeat;

  border: 1px solid rgba(11,52,82,.06);

  box-shadow:
    inset 0 0 42px rgba(248,245,237,.08),
    0 12px 34px rgba(11,52,82,.035);
}

/* book should visibly stand on the table, not float in the room */
.hs10-books-3d .hs10-book3d {
  transform:
    translateY(-38px)
    rotateX(var(--book-rx))
    rotateY(var(--book-ry));
}

.hs10-books-3d .hs10-book3d.is-settling {
  transition: transform .55s cubic-bezier(.2,.72,.25,1);
}

@keyframes hs10-book-intro {
  0% {
    transform:
      translateY(-38px)
      rotateX(0deg)
      rotateY(-16deg);
  }
  45% {
    transform:
      translateY(-38px)
      rotateX(-1.5deg)
      rotateY(-27deg);
  }
  100% {
    transform:
      translateY(-38px)
      rotateX(0deg)
      rotateY(-16deg);
  }
}

/* compact floor/contact shadow on the photographed table */
.hs10-books-3d .hs10-book3d-shadow {
  width: 235px;
  height: 24px;
  top: calc(50% + 118px);
  opacity: .48;
  filter: blur(12px);
}

/* instruction sits at the lower edge of the photograph */
.hs10-books-3d .hs10-book3d-hint {
  bottom: 14px;
  padding: .28rem .55rem;
  background: rgba(248,245,237,.76);
  color: rgba(11,52,82,.70);
  backdrop-filter: blur(2px);
}

/* Gallery is deliberately outside the architectural stage */
.hs10-books-3d .hs10-books-browser {
  margin-top: 1.2rem;
  padding-top: .15rem;
  background: var(--hs09-paper);
}

/* Keep book copy visually editorial, not baked into the scene */
.hs10-books-3d .hs10-book3d-copy {
  align-self: center;
}

@media (max-width: 900px) {
  .hs10-books-3d .hs10-book3d-stage {
    --book-w: 198px;
    --book-h: 283px;
    --book-d: 25px;

    min-height: 425px;
    background-position: center 56%;
  }

  .hs10-books-3d .hs10-book3d {
    transform:
      translateY(-30px)
      rotateX(var(--book-rx))
      rotateY(var(--book-ry));
  }

  @keyframes hs10-book-intro {
    0% {
      transform:
        translateY(-30px)
        rotateX(0deg)
        rotateY(-16deg);
    }
    45% {
      transform:
        translateY(-30px)
        rotateX(-1.5deg)
        rotateY(-27deg);
    }
    100% {
      transform:
        translateY(-30px)
        rotateX(0deg)
        rotateY(-16deg);
    }
  }

  .hs10-books-3d .hs10-book3d-shadow {
    top: calc(50% + 108px);
  }
}

@media (max-width: 560px) {
  .hs10-books-3d .hs10-book3d-stage {
    --book-w: 174px;
    --book-h: 249px;
    --book-d: 22px;

    min-height: 365px;

    background:
      linear-gradient(
        180deg,
        rgba(248,245,237,.04) 0%,
        rgba(248,245,237,0) 72%,
        rgba(248,245,237,.12) 100%
      ),
      url('assets/images/book-worktable-mobile.webp');

    background-size: cover;
    background-position: center 54%;
  }

  .hs10-books-3d .hs10-book3d {
    transform:
      translateY(-24px)
      rotateX(var(--book-rx))
      rotateY(var(--book-ry));
  }

  @keyframes hs10-book-intro {
    0% {
      transform:
        translateY(-24px)
        rotateX(0deg)
        rotateY(-16deg);
    }
    45% {
      transform:
        translateY(-24px)
        rotateX(-1deg)
        rotateY(-25deg);
    }
    100% {
      transform:
        translateY(-24px)
        rotateX(0deg)
        rotateY(-16deg);
    }
  }

  .hs10-books-3d .hs10-book3d-shadow {
    width: 190px;
    height: 20px;
    top: calc(50% + 93px);
  }

  .hs10-books-3d .hs10-book3d-hint {
    bottom: 10px;
    font-size: .62rem;
  }
}


/* ================================================================
   BUILD-10S / rc89 · LAYER 8
   Wider photographic concrete stage + separate mineral gallery rail.
   ================================================================ */

@media (min-width: 901px) {

  /* Let stage, copy and gallery participate in one grid.
     This moves the gallery visually below BOTH upper columns
     without changing the HTML. */
  .hs10-books-3d .hs10-book3d-visualcol {
    display: contents;
  }

  .hs10-books-3d .hs10-book3d-layout {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(440px,1.18fr) minmax(320px,.82fr);
    grid-template-rows: auto auto;
    column-gap: clamp(2.2rem,5vw,5rem);
    row-gap: 1rem;
    min-height: 0;
    padding-top: .7rem;
    padding-bottom: 0;
  }

  /* Wide architectural field: it extends into the text column
     and dissolves into paper instead of ending as a hard rectangle. */
  .hs10-books-3d .hs10-book3d-layout::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    top: .7rem;
    width: 78%;
    height: 470px;
    pointer-events: none;

    background:
      linear-gradient(
        90deg,
        rgba(248,245,237,0) 0%,
        rgba(248,245,237,0) 68%,
        rgba(248,245,237,.18) 76%,
        rgba(248,245,237,.55) 86%,
        rgba(248,245,237,.88) 95%,
        rgba(248,245,237,1) 100%
      ),
      url('assets/images/book-worktable-desktop.webp');

    background-size: cover;
    background-position: center 58%;
    background-repeat: no-repeat;

    box-shadow:
      inset 0 0 38px rgba(248,245,237,.08);
  }

  /* The former image box becomes transparent: only the 3D book lives here. */
  .hs10-books-3d .hs10-book3d-stage {
    grid-column: 1;
    grid-row: 1;
    z-index: 2;

    min-height: 470px;
    overflow: visible;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .hs10-books-3d .hs10-book3d-copy {
    grid-column: 2;
    grid-row: 1;
    z-index: 3;
    align-self: center;

    /* a nearly invisible paper veil keeps long titles readable
       while the concrete still reaches behind the column */
    background:
      linear-gradient(
        90deg,
        rgba(248,245,237,.18) 0%,
        rgba(248,245,237,.72) 36%,
        rgba(248,245,237,.96) 82%
      );
    padding: 1.4rem 0 1.4rem 1rem;
  }

  /* Full-width gallery rail beneath architecture and book text. */
  .hs10-books-3d .hs10-books-browser {
    grid-column: 1 / -1;
    grid-row: 2;
    z-index: 4;

    width: 100%;
    margin: 0;
    padding: 1rem 1.15rem .75rem;

    background:
      linear-gradient(
        180deg,
        rgba(225,224,219,.92) 0%,
        rgba(232,230,224,.92) 100%
      );

    border-top: 1px solid rgba(11,52,82,.12);
    border-bottom: 1px solid rgba(11,52,82,.12);
  }

  /* Larger, less washed-out miniature covers. */
  .hs10-books-3d .hs10-books-selector {
    gap: clamp(.75rem,1.25vw,1.15rem);
    padding: .15rem .2rem .55rem;
  }

  .hs10-books-3d .hs10-books-selector-item {
    flex: 0 0 118px;
    width: 118px;
    min-height: 132px;
    padding: .55rem .45rem .65rem;

    opacity: .84;
    border-radius: 1px;
  }

  .hs10-books-3d .hs10-books-selector-item img {
    width: 62px;
    max-height: 94px;

    box-shadow:
      0 6px 15px rgba(11,52,82,.13);
  }

  .hs10-books-3d .hs10-books-selector-item strong {
    max-width: 104px;
    min-height: 2.2em;
    font-size: .67rem;
    line-height: 1.14;
  }

  .hs10-books-3d .hs10-books-selector-item span {
    font-size: .61rem;
  }

  .hs10-books-3d .hs10-books-selector-item.is-active {
    opacity: 1;
    background: rgba(248,245,237,.94);

    box-shadow:
      0 4px 16px rgba(11,52,82,.055);
  }

  .hs10-books-3d .hs10-books-selector-item.is-active img {
    box-shadow:
      0 8px 20px rgba(11,52,82,.16),
      0 0 0 1px rgba(194,45,39,.40);
  }

  .hs10-books-3d .hs10-books-nav {
    width: 34px;
    height: 48px;
    background: rgba(248,245,237,.42);
  }

  .hs10-books-3d .hs10-books-progress {
    margin-top: 1.6rem;
  }
}

/* Tablet: same concept, slightly less architecture behind copy. */
@media (min-width: 701px) and (max-width: 900px) {
  .hs10-books-3d .hs10-book3d-layout {
    position: relative;
  }

  .hs10-books-3d .hs10-book3d-stage {
    background:
      linear-gradient(
        90deg,
        rgba(248,245,237,0) 0%,
        rgba(248,245,237,0) 72%,
        rgba(248,245,237,.82) 100%
      ),
      url('assets/images/book-worktable-desktop.webp') !important;

    background-size: cover !important;
    background-position: center 56% !important;
  }

  .hs10-books-3d .hs10-books-browser {
    padding: .9rem .8rem .7rem;
    background: rgba(228,226,220,.92);
    border-top: 1px solid rgba(11,52,82,.11);
    border-bottom: 1px solid rgba(11,52,82,.11);
  }

  .hs10-books-3d .hs10-books-selector-item {
    flex-basis: 102px;
    width: 102px;
    opacity: .86;
  }

  .hs10-books-3d .hs10-books-selector-item img {
    width: 56px;
    max-height: 84px;
  }
}

/* Mobile: gallery becomes a stronger mineral strip, still swipeable. */
@media (max-width: 700px) {
  .hs10-books-3d .hs10-books-browser {
    margin-top: 1rem;
    padding: .8rem .45rem .65rem;

    background:
      linear-gradient(
        180deg,
        rgba(226,224,218,.96),
        rgba(235,232,226,.96)
      );

    border-top: 1px solid rgba(11,52,82,.11);
    border-bottom: 1px solid rgba(11,52,82,.11);
  }

  .hs10-books-3d .hs10-books-selector-item {
    flex: 0 0 92px;
    width: 92px;
    opacity: .88;
    padding: .45rem .3rem .55rem;
  }

  .hs10-books-3d .hs10-books-selector-item img {
    width: 50px;
    max-height: 76px;
  }

  .hs10-books-3d .hs10-books-selector-item.is-active {
    background: rgba(248,245,237,.95);
  }
}


/* ================================================================
   BUILD-10T / rc90 · LAYER 9 · PROFESSIONALS
   Compact concrete architecture; no wood, no shelf, no domestic feel.
   ================================================================ */

.hs10-pro99 {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      90deg,
      #f7f4ed 0%,
      #f3f0e9 47%,
      #eeeae2 100%
    );
  border-top: 1px solid rgba(11,52,82,.09);
  border-bottom: 1px solid rgba(11,52,82,.10);
}

.hs10-pro99-grid {
  display: grid;
  grid-template-columns: minmax(430px,.94fr) minmax(0,1.28fr);
  align-items: stretch;
  min-height: 430px;
}

.hs10-pro99-copy {
  position: relative;
  z-index: 3;
  padding:
    clamp(3.5rem,5.5vw,5.6rem)
    clamp(2.4rem,4vw,4.6rem)
    clamp(3.4rem,5vw,5rem)
    0;
}

.hs10-pro99-copy h2 {
  margin: 0;
  color: var(--hs09-navy);
  font-size: clamp(2.7rem,2.1rem + 1.75vw,4.3rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.032em;
}

.hs10-pro99-lead {
  max-width: 42rem;
  margin: 1rem 0 0;
  color: var(--hs09-navy);
  font-size: 1rem;
  line-height: 1.52;
}

.hs10-pro99-features {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 0;
  margin-top: 1.65rem;
  border-top: 1px solid rgba(11,52,82,.14);
  border-bottom: 1px solid rgba(11,52,82,.14);
}

.hs10-pro99-feature {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  gap: .7rem;
  padding: 1rem 1rem 1rem 0;
  border-right: 1px solid rgba(11,52,82,.13);
}

.hs10-pro99-feature + .hs10-pro99-feature {
  padding-left: 1rem;
}

.hs10-pro99-feature:last-child {
  border-right: 0;
  padding-right: 0;
}

.hs10-pro99-feature svg {
  width: 34px;
  height: 34px;
  color: var(--hs09-navy);
}

.hs10-pro99-feature svg circle[fill="currentColor"] {
  color: var(--hs09-red);
}

.hs10-pro99-feature h3 {
  margin: 0;
  color: var(--hs09-navy);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.25;
}

.hs10-pro99-feature p {
  margin: .28rem 0 0;
  color: rgba(11,52,82,.78);
  font-size: .76rem;
  line-height: 1.38;
}

.hs10-pro99-cta {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1.55rem;
  padding: .82rem 1.08rem;
  background: var(--hs09-navy);
  border: 1px solid var(--hs09-navy);
  color: #f8f5ed !important;
  text-decoration: none;
}

.hs10-pro99-cta:hover,
.hs10-pro99-cta:focus-visible {
  background: #0f4267;
  border-color: #0f4267;
  color: #ffffff !important;
}

/* -------- architectural right half -------- */

.hs10-pro99-scene {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  isolation: isolate;

  background:
    radial-gradient(circle at 76% 24%, rgba(255,255,255,.50), transparent 30%),
    linear-gradient(118deg, #dad8d2 0%, #efede7 54%, #d2d0cb 100%);
}

.hs10-pro99-scene::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  width: 22%;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      #f3f0e9 0%,
      rgba(243,240,233,.72) 40%,
      rgba(243,240,233,0) 100%
    );
}

.hs10-pro99-light {
  position: absolute;
  z-index: 0;
  top: -18%;
  right: 4%;
  width: 64%;
  height: 145%;
  transform: rotate(15deg);
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,.30) 24%,
      rgba(255,255,255,.58) 48%,
      rgba(255,255,255,.14) 70%,
      transparent 100%
    );
  filter: blur(12px);
}

/* concrete slabs */
.hs10-pro99-slab {
  position: absolute;
  z-index: 2;
  bottom: 0;
  width: 84px;

  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.23), transparent 32%),
    linear-gradient(100deg,#9f9e99 0%,#c2c0ba 48%,#8f8e89 100%);

  box-shadow:
    inset 8px 0 18px rgba(255,255,255,.16),
    inset -9px 0 18px rgba(11,52,82,.09),
    12px 12px 28px rgba(11,52,82,.08);

  transform-origin: bottom center;
}

.hs10-pro99-slab::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 0;
  width: 10px;
  height: 100%;
  background: #d9d7d1;
  box-shadow: inset -2px 0 5px rgba(11,52,82,.08);
}

.hs10-pro99-slab.slab-a {
  left: 20%;
  height: 67%;
  transform: skewY(-2deg);
}

.hs10-pro99-slab.slab-b {
  left: 39%;
  height: 89%;
  width: 96px;
}

.hs10-pro99-slab.slab-c {
  left: 61%;
  height: 75%;
  width: 88px;
}

.hs10-pro99-slab.slab-d {
  left: 79%;
  height: 58%;
  width: 74px;
}

.hs10-pro99-flow {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  color: #0b4e7a;
  pointer-events: none;
}

.hs10-pro99-flow circle {
  color: var(--hs09-red);
}

.hs10-pro99-note {
  position: absolute;
  z-index: 5;
  right: 5.5%;
  bottom: 10%;
  margin: 0;
  color: rgba(11,52,82,.78);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.55;
  text-transform: uppercase;
}

.hs10-pro99-note::after {
  content: "";
  display: block;
  width: 2.1rem;
  height: 2px;
  margin-top: .75rem;
  background: var(--hs09-red);
}

@media (max-width: 1050px) {
  .hs10-pro99-grid {
    grid-template-columns: minmax(390px,1fr) minmax(0,1fr);
  }

  .hs10-pro99-feature {
    grid-template-columns: 30px 1fr;
    gap: .55rem;
  }

  .hs10-pro99-feature svg {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 850px) {
  .hs10-pro99-grid {
    grid-template-columns: 1fr;
  }

  .hs10-pro99-copy {
    padding-right: 0;
  }

  .hs10-pro99-scene {
    min-height: 330px;
    margin: 0 -1.15rem;
  }

  .hs10-pro99-scene::after {
    width: 12%;
  }
}

@media (max-width: 620px) {
  .hs10-pro99-features {
    grid-template-columns: 1fr;
  }

  .hs10-pro99-feature,
  .hs10-pro99-feature + .hs10-pro99-feature {
    padding: .9rem 0;
    border-right: 0;
    border-bottom: 1px solid rgba(11,52,82,.12);
  }

  .hs10-pro99-feature:last-child {
    border-bottom: 0;
  }

  .hs10-pro99-scene {
    min-height: 270px;
  }

  .hs10-pro99-slab {
    width: 58px;
  }

  .hs10-pro99-slab.slab-b { width: 68px; }
  .hs10-pro99-slab.slab-c { width: 62px; }
  .hs10-pro99-slab.slab-d { width: 54px; }

  .hs10-pro99-note {
    right: 4%;
    bottom: 6%;
    font-size: .58rem;
  }
}


/* ================================================================
   BUILD-10U / rc91 · LAYER 9 · PROFESSIONALS PHOTO STRIP
   Deliberately lighter than L8 and L10.
   Real architectural image, narrow strip, concise pain points.
   ================================================================ */

.hs10-pro99.hs10-pro99-photo {
  min-height: 0;
  background: #f5f2eb;
  border-top: 1px solid rgba(11,52,82,.09);
  border-bottom: 1px solid rgba(11,52,82,.09);
}

.hs10-pro99-photo-grid {
  display: grid;
  grid-template-columns: minmax(360px,.78fr) minmax(0,1.22fr);
  align-items: stretch;
  min-height: 320px;
}

.hs10-pro99-photo-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding:
    clamp(2.4rem,3.6vw,3.5rem)
    clamp(2rem,3.5vw,3.8rem)
    clamp(2.3rem,3.4vw,3.3rem)
    0;
}

.hs10-pro99-photo-copy h2 {
  margin: 0;
  color: var(--hs09-navy);
  font-size: clamp(2.3rem,1.75rem + 1.3vw,3.65rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
}

.hs10-pro99-pains {
  margin-top: 1rem;
  max-width: 31rem;
}

.hs10-pro99-pains p {
  margin: .22rem 0;
  color: rgba(11,52,82,.86);
  font-size: .9rem;
  line-height: 1.4;
}

.hs10-pro99-status {
  display: inline-flex;
  align-items: center;
  gap: .48rem;
  margin-top: 1.35rem;
  color: rgba(11,52,82,.36);
  font-size: .75rem;
  letter-spacing: .06em;
}

.hs10-pro99-status span {
  cursor: default;
  pointer-events: none;
}

.hs10-pro99-status b {
  font-weight: 400;
  opacity: .8;
}

.hs10-pro99-photo-scene {
  position: relative;
  min-height: 320px;
  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      #f5f2eb 0%,
      rgba(245,242,235,.88) 5%,
      rgba(245,242,235,.20) 15%,
      rgba(245,242,235,0) 27%
    ),
    url('assets/images/professionals-concrete-passage-desktop.webp');

  background-size: cover;
  background-position: center 50%;
  background-repeat: no-repeat;
}

/* soft paper dissolve at the outer right keeps the strip editorial */
.hs10-pro99-photo-scene::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 7%;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(245,242,235,0),
    rgba(245,242,235,.38)
  );
}

@media (max-width: 900px) {
  .hs10-pro99-photo-grid {
    grid-template-columns: minmax(320px,.9fr) minmax(0,1.1fr);
    min-height: 300px;
  }

  .hs10-pro99-photo-scene {
    min-height: 300px;
    background-position: 58% 50%;
  }
}

@media (max-width: 720px) {
  .hs10-pro99-photo-grid {
    grid-template-columns: 1fr;
  }

  .hs10-pro99-photo-copy {
    padding-right: 0;
    padding-bottom: 1.8rem;
  }

  .hs10-pro99-photo-scene {
    min-height: 235px;
    margin: 0 -1rem;

    background:
      linear-gradient(
        180deg,
        #f5f2eb 0%,
        rgba(245,242,235,.22) 10%,
        rgba(245,242,235,0) 24%
      ),
      url('assets/images/professionals-concrete-passage-mobile.webp');

    background-size: cover;
    background-position: center 52%;
  }

  .hs10-pro99-photo-scene::after {
    display: none;
  }
}


/* ================================================================
   BUILD-10V2 / rc92 · FOOTER SIGNUM DIRECT
   Dedicated DOM marker; no pseudo-element, no dependence on footer clipping.
   ================================================================ */

.hs-footer-brand-lockup {
  position: relative !important;
  display: inline-block !important;
}

/* Keep the site's existing navy underline untouched.
   Place the dot visually on that line from inside the text box. */
.hs-footer-brand-lockup > .hs-footer-red-point {
  position: absolute !important;
  z-index: 999 !important;
  display: block !important;

  left: 50% !important;
  top: calc(100% + 9px) !important;

  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  min-height: 8px !important;

  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid #f5f2eb !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;

  background: #c3312d !important;
  transform: translate(-50%, -50%) !important;

  font-size: 0 !important;
  line-height: 0 !important;
  pointer-events: none !important;
  overflow: visible !important;
}

/* Neutralize only earlier experimental selectors, if cached CSS still contains them. */
.hs-footer-wordmark-dot::after,
.hs-footer-signum-word::after {
  content: none !important;
  display: none !important;
}


/* ================================================================
   BUILD-10V3 / rc93 · FOOTER RED POINT
   Increase marker size for a clearer HYPNOSYSTEMIC signum.
   ================================================================ */

.hs-footer-brand-lockup > .hs-footer-red-point {
  width: 11px !important;
  height: 11px !important;
  min-width: 11px !important;
  min-height: 11px !important;

  border-width: 2px !important;

  /* keep the visual centre on the existing underline */
  top: calc(100% + 9px) !important;
}


/* ================================================================
   BUILD-10Y / rc94 · MINERAL PAPER TEXTURE · TEST
   Extremely subtle global material layer.
   Intentionally low intensity for A/B judgement.
   ================================================================ */

body {
  position: relative;
}

/* visual material test:
   - mineral/uncoated-paper grain
   - no linen pattern
   - no coarse handmade-paper fibres
   - low enough opacity that typography remains crisp
*/
body::after {
  content: "";
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  pointer-events: none;

  background-image:
    url('assets/images/hypnosystemic-mineral-paper-texture.png');
  background-repeat: repeat;
  background-size: 384px 384px;

  opacity: .022;
  mix-blend-mode: multiply;
}

/* Utility class for instant browser-side A/B testing if needed. */
body.hs-paper-texture-off::after {
  display: none !important;
}


/* ================================================================
   BUILD-10Z / rc95 · MINERAL PAPER TEXTURE · VISIBLE TEST
   Increase the material presence enough to judge it on normal screens.
   ================================================================ */

body::after {
  opacity: .065 !important;
  background-size: 320px 320px !important;
  mix-blend-mode: multiply !important;
}

/* Keep the texture from becoming dirty in the dark closing layer. */
.hs10-closing {
  position: relative;
  isolation: isolate;
}

.hs10-closing::after {
  content: "";
  position: absolute;
  z-index: 50;
  inset: 0;
  pointer-events: none;
  background: rgba(11,52,82,.028);
}


/* ================================================================
   BUILD-10ZA / rc96 · PAPER TEXTURE · ACTUAL VISIBLE MATERIAL
   v1 was effectively double-transparent:
   low alpha in the PNG *and* low CSS opacity.
   v2 uses an opaque texture and controls strength only in CSS.
   ================================================================ */

body::after {
  background-image:
    url('assets/images/hypnosystemic-mineral-paper-texture-v2.jpg') !important;
  background-repeat: repeat !important;
  background-size: 420px 420px !important;

  /* One single visibility control. */
  opacity: .045 !important;
  mix-blend-mode: multiply !important;

  pointer-events: none !important;
}

/* Keep the global texture out of the dark personal closing layer. */
.hs10-closing {
  isolation: isolate;
}


/* ================================================================
   BUILD-10ZB / rc97 · PAPER AS MATERIAL, NOT SCREEN OVERLAY
   The earlier fixed overlay made the whole page feel visually submerged.
   Texture now belongs to the paper plane itself and sits BEHIND content.
   ================================================================ */

/* Remove the global "gauze" completely. */
body::after {
  content: none !important;
  display: none !important;
}

/* Keep the general canvas clean. */
body {
  background-color: #f5f2eb;
}

/* Test the material on editorial paper surfaces only.
   The texture PNG carries its own subtle transparency:
   no second opacity layer, no blend layer over typography. */
.hs09-hero,
.hs10-books,
.hs10-pro99.hs10-pro99-photo,
footer,
.site-footer,
.hs-site-footer {
  background-color: #f5f2eb !important;
  background-image: url('assets/images/hypnosystemic-paper-surface-v3.png') !important;
  background-repeat: repeat !important;
  background-size: 360px 360px !important;
  background-position: 0 0 !important;
}

/* Preserve photographic children and the dark closing layer as independent materials. */
.hs10-closing {
  background-image: none !important;
}

/* If the footer has its own light tone, retain the texture but do not alter content opacity. */
footer *,
.site-footer *,
.hs-site-footer * {
  opacity: inherit;
}


/* ================================================================
   BUILD-10ZC / rc98 · RESTORE L10
   Undo only the paper-test damage to the dark closing layer.
   Exact dark background + original end-line geometry restored.
   ================================================================ */

.hs10-closing {
  position: relative !important;
  overflow: hidden !important;

  background:
    linear-gradient(
      90deg,
      #0a2f4a 0%,
      #0a2f4a 58%,
      #092b44 72%,
      #071f31 100%
    ) !important;

  background-image:
    linear-gradient(
      90deg,
      #0a2f4a 0%,
      #0a2f4a 58%,
      #092b44 72%,
      #071f31 100%
    ) !important;

  color: #f8f5ed !important;
  border-top: 1px solid rgba(248,245,237,.08) !important;
  isolation: auto !important;
}

/* Restore original quiet process-line echo.
   This explicitly replaces the full-size rc95 test overlay. */
.hs10-closing::after {
  content: "" !important;
  position: absolute !important;
  z-index: auto !important;
  inset: auto auto 1.3rem 0 !important;
  left: 0 !important;
  right: auto !important;
  top: auto !important;
  bottom: 1.3rem !important;

  width: 18% !important;
  height: 1px !important;

  background: rgba(248,245,237,.26) !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* Protect the portrait material from paper-background rules. */
.hs10-closing-portrait {
  background-color: #061b2a !important;
  background-image: none !important;
}


/* ================================================================
   BUILD-10ZD / rc99 · MOBILE MENU STACKING FIX
   Mobile navigation must always sit above hero and page layers.
   ================================================================ */

@media (max-width: 900px) {

  /* Make the header the top-level stacking context. */
  .hs-site-header,
  header.hs-site-header,
  .site-header {
    position: relative !important;
    z-index: 2147482000 !important;
    overflow: visible !important;
    contain: none !important;
    transform: none !important;
    filter: none !important;
    isolation: auto !important;
  }

  /* Navigation containers must not be clipped by the header. */
  .hs-site-header nav,
  .hs-site-header .hs-site-nav,
  .hs-site-header .hs-nav,
  .hs-site-header .main-navigation,
  .hs-site-header .primary-navigation,
  .hs-site-header .menu-primary-menu-container,
  .hs-site-header .wp-block-navigation,
  .site-header nav {
    position: relative !important;
    z-index: 2147482100 !important;
    overflow: visible !important;
    contain: none !important;
    transform: none !important;
  }

  /* Every actual mobile panel / dropdown goes one level higher. */
  .hs-site-header .sub-menu,
  .hs-site-header .children,
  .hs-site-header .hs-mobile-menu,
  .hs-site-header .mobile-menu,
  .hs-site-header .menu-panel,
  .hs-site-header .nav-panel,
  .hs-site-header .wp-block-navigation__responsive-container,
  .site-header .sub-menu,
  .site-header .wp-block-navigation__responsive-container {
    z-index: 2147482200 !important;
    overflow: visible !important;
    contain: none !important;
  }

  /* WordPress responsive-navigation modal, if used. */
  .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    z-index: 2147482200 !important;
  }

  /* Keep the hero deliberately below navigation.
     Do not touch internal section stacking elsewhere. */
  .hs09-hero {
    position: relative !important;
    z-index: 1 !important;
  }

  .hs09-hero-visual,
  .hs09-hero::before,
  .hs09-hero::after {
    z-index: 1 !important;
  }
}


/* ================================================================
   BUILD-10ZE / rc100 · MOBILE MENU OPAQUE OVERLAY
   rc99 fixed z-index. This pass fixes the remaining transparency:
   the open mobile menu becomes its own full viewport paper surface.
   ================================================================ */

@media (max-width: 900px) {

  .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 2147483000 !important;

    background-color: #f5f2eb !important;
    background-image:
      url('assets/images/hypnosystemic-paper-surface-v3.png') !important;
    background-repeat: repeat !important;
    background-size: 360px 360px !important;

    opacity: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
    position: relative !important;
    z-index: 2 !important;

    min-height: 100dvh !important;
    width: 100% !important;

    padding:
      max(5.8rem, env(safe-area-inset-top))
      clamp(1.6rem, 7vw, 2.4rem)
      max(2rem, env(safe-area-inset-bottom)) !important;

    box-sizing: border-box !important;

    background-color: #f5f2eb !important;
    background-image:
      url('assets/images/hypnosystemic-paper-surface-v3.png') !important;
    background-repeat: repeat !important;
    background-size: 360px 360px !important;

    opacity: 1 !important;
  }

  /* The close button must stay on the same opaque surface. */
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close {
    position: fixed !important;
    z-index: 2147483200 !important;

    top: max(1.2rem, env(safe-area-inset-top)) !important;
    right: clamp(1.2rem, 6vw, 2rem) !important;

    color: #0b3452 !important;
  }

  /* Prevent any transparent descendant from revealing the hero. */
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container,
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item,
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
    position: relative;
    z-index: 3;
  }

  /* Generic fallback for custom responsive panels, only when visibly open. */
  .hs-mobile-menu.is-open,
  .hs-mobile-menu[aria-hidden="false"],
  .mobile-menu.is-open,
  .menu-panel.is-open,
  .nav-panel.is-open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;

    width: 100vw !important;
    min-height: 100dvh !important;

    background: #f5f2eb
      url('assets/images/hypnosystemic-paper-surface-v3.png')
      repeat !important;
    background-size: 360px 360px !important;

    opacity: 1 !important;
    overflow-y: auto !important;
  }
}


/* ================================================================
   BUILD-10ZF / rc101 · MOBILE MENU SHIELD
   Do not depend on the theme's menu-panel selector.
   JS detects the actual open state and this independent shield covers
   the page below the header/navigation.
   ================================================================ */

@media (max-width: 900px) {

  body.hs-mobile-menu-open {
    overflow: hidden !important;
  }

  body.hs-mobile-menu-open::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;

    z-index: 2147481500 !important;

    background-color: #f5f2eb !important;
    background-image:
      url('assets/images/hypnosystemic-paper-surface-v3.png') !important;
    background-repeat: repeat !important;
    background-size: 360px 360px !important;

    opacity: 1 !important;
    pointer-events: none !important;
  }

  /* Header/menu stays above the independent shield. */
  body.hs-mobile-menu-open .hs-site-header,
  body.hs-mobile-menu-open header.hs-site-header,
  body.hs-mobile-menu-open .site-header,
  body.hs-mobile-menu-open header.site-header {
    position: relative !important;
    z-index: 2147482500 !important;
    overflow: visible !important;
  }

  body.hs-mobile-menu-open .hs-site-header nav,
  body.hs-mobile-menu-open .site-header nav,
  body.hs-mobile-menu-open .wp-block-navigation__responsive-container,
  body.hs-mobile-menu-open .wp-block-navigation__responsive-container-content {
    z-index: 2147482700 !important;
  }

  /* Make the header itself opaque as well; this closes any seam between
     the top header band and the full-screen shield. */
  body.hs-mobile-menu-open .hs-site-header,
  body.hs-mobile-menu-open .site-header {
    background-color: #f5f2eb !important;
    background-image:
      url('assets/images/hypnosystemic-paper-surface-v3.png') !important;
    background-repeat: repeat !important;
    background-size: 360px 360px !important;
  }
}


/* ================================================================
   BUILD-11A / rc102 · HYPNOSYSTEMIC BULK VISUAL KIT
   Six reusable architectural motifs.
   This build installs the kit only; no page is changed yet.
   ================================================================ */

.hs-page-visual {
  --hs-page-visual: none;
  --hs-page-visual-position: center center;

  position: relative;
  min-height: clamp(210px, 24vw, 310px);
  overflow: hidden;

  background-color: #ece9e2;
  background-image:
    linear-gradient(
      90deg,
      rgba(245,242,235,.20) 0%,
      rgba(245,242,235,0) 16%,
      rgba(245,242,235,0) 84%,
      rgba(245,242,235,.20) 100%
    ),
    var(--hs-page-visual);
  background-size: cover;
  background-position: var(--hs-page-visual-position);
  background-repeat: no-repeat;

  border-top: 1px solid rgba(11,52,82,.07);
  border-bottom: 1px solid rgba(11,52,82,.07);
}

.hs-page-visual::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 22%;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(245,242,235,0),
    rgba(245,242,235,.12)
  );
}

/* 1 · Open circle */
.hs-visual-open-circle {
  --hs-page-visual: url('assets/images/hs-visual-open-circle.webp');
  --hs-page-visual-position: center 54%;
}

/* 2 · Offset levels */
.hs-visual-levels {
  --hs-page-visual: url('assets/images/hs-visual-levels.webp');
  --hs-page-visual-position: center 54%;
}

/* 3 · Concrete frame */
.hs-visual-frame {
  --hs-page-visual: url('assets/images/hs-visual-frame.webp');
  --hs-page-visual-position: center 50%;
}

/* 4 · Threshold / passage */
.hs-visual-passage {
  --hs-page-visual: url('assets/images/hs-visual-passage.webp');
  --hs-page-visual-position: center 52%;
}

/* 5 · Pendulation / two fields */
.hs-visual-pendulation {
  --hs-page-visual: url('assets/images/hs-visual-pendulation.webp');
  --hs-page-visual-position: center 52%;
}

/* 6 · Light gap / horizon */
.hs-visual-lightgap {
  --hs-page-visual: url('assets/images/hs-visual-lightgap.webp');
  --hs-page-visual-position: center 53%;
}

@media (max-width: 700px) {
  .hs-page-visual {
    min-height: 220px;
  }

  .hs-visual-open-circle { --hs-page-visual-position: 29% 52%; }
  .hs-visual-levels { --hs-page-visual-position: 31% 53%; }
  .hs-visual-frame { --hs-page-visual-position: 60% 50%; }
  .hs-visual-passage { --hs-page-visual-position: 52% 52%; }
  .hs-visual-pendulation { --hs-page-visual-position: 50% 52%; }
  .hs-visual-lightgap { --hs-page-visual-position: 24% 53%; }
}


/* ================================================================
   BUILD-11B / rc103 · BULK VISUAL KIT · PASS 1
   Deliberately lighter than homepage imagery.
   ================================================================ */

.hs-bulk-page-visual {
  position: relative;
  width: 100%;
  min-height: clamp(190px, 22vw, 285px);
  margin: clamp(1.2rem, 2.4vw, 2rem) 0 clamp(1.8rem, 3vw, 2.8rem);

  border-top: 1px solid rgba(11,52,82,.07);
  border-bottom: 1px solid rgba(11,52,82,.07);

  box-shadow: none;
}

/* Very restrained process-line signature:
   recognizable, but secondary to page content. */
.hs-bulk-page-visual-line {
  position: absolute;
  z-index: 3;
  left: 8%;
  bottom: 12%;
  width: 26%;
  height: 1px;
  background: rgba(15,76,116,.72);
  transform: rotate(-2deg);
  transform-origin: left center;
}

.hs-bulk-page-visual-dot {
  position: absolute;
  z-index: 4;
  left: 27%;
  bottom: calc(12% - 3px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c3312d;
  box-shadow: 0 0 0 2px rgba(245,242,235,.80);
}

/* Keep these utility visuals quieter than homepage layers. */
.hs-bulk-page-visual.hs-visual-open-circle,
.hs-bulk-page-visual.hs-visual-levels,
.hs-bulk-page-visual.hs-visual-frame,
.hs-bulk-page-visual.hs-visual-passage,
.hs-bulk-page-visual.hs-visual-pendulation,
.hs-bulk-page-visual.hs-visual-lightgap {
  background-color: #ece9e2;
}

@media (max-width: 700px) {
  .hs-bulk-page-visual {
    min-height: 205px;
    margin-top: 1rem;
    margin-bottom: 1.6rem;
  }

  .hs-bulk-page-visual-line {
    left: 7%;
    width: 31%;
    bottom: 11%;
  }

  .hs-bulk-page-visual-dot {
    left: 30%;
    bottom: calc(11% - 3px);
  }
}


/* ================================================================
   BUILD-11C / rc104 · BULK VISUAL KIT · PASS 2
   Small tuning for contact / neutral informational imagery.
   ================================================================ */

.page-id-120 .hs-bulk-page-visual {
  min-height: clamp(170px, 18vw, 235px);
}

.page-id-120 .hs-bulk-page-visual-line {
  width: 20%;
  opacity: .72;
}

@media (max-width: 700px) {
  .page-id-120 .hs-bulk-page-visual {
    min-height: 185px;
  }
}


/* ================================================================
   BUILD-12A / rc105 · ONLINE READER PILOT CTA
   ================================================================ */

.hs-reader-pilot-entry{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.4rem;
  margin:1.1rem 0 1.8rem;
  padding:1rem 1.1rem;
  border-top:1px solid rgba(11,52,82,.16);
  border-bottom:1px solid rgba(11,52,82,.16);
  background:rgba(245,242,235,.64);
}
.hs-reader-pilot-entry div{
  display:flex;
  flex-direction:column;
  gap:.18rem;
}
.hs-reader-pilot-entry span{
  color:rgba(11,52,82,.58);
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.14em;
}
.hs-reader-pilot-entry strong{
  color:#0b3452;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.05rem;
  font-weight:500;
}
.hs-reader-pilot-entry a{
  flex:0 0 auto;
  padding:.78rem 1rem;
  color:#f8f5ed !important;
  background:#0b3452;
  border:1px solid #0b3452;
  text-decoration:none !important;
  font-size:.82rem;
}
.hs-reader-pilot-entry a:hover,
.hs-reader-pilot-entry a:focus-visible{
  background:#0f4267;
  border-color:#0f4267;
}
@media(max-width:700px){
  .hs-reader-pilot-entry{
    align-items:flex-start;
    flex-direction:column;
    padding:.9rem;
  }
  .hs-reader-pilot-entry a{
    width:100%;
    text-align:center;
  }
}


/* BUILD-12B / rc106 · ONLINE READER · ALL BOOKS */

.hs-reader-book-entry{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.4rem;
  margin:1.1rem 0 1.8rem;
  padding:1rem 1.1rem;
  border-top:1px solid rgba(11,52,82,.16);
  border-bottom:1px solid rgba(11,52,82,.16);
  background:rgba(245,242,235,.64);
}
.hs-reader-book-entry div{
  display:flex;
  flex-direction:column;
  gap:.18rem;
}
.hs-reader-book-entry span{
  color:rgba(11,52,82,.58);
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.14em;
}
.hs-reader-book-entry strong{
  color:#0b3452;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.05rem;
  font-weight:500;
}
.hs-reader-book-entry a{
  flex:0 0 auto;
  padding:.78rem 1rem;
  color:#f8f5ed !important;
  background:#0b3452;
  border:1px solid #0b3452;
  text-decoration:none !important;
  font-size:.82rem;
}
.hs10-books-3d .hs-online-read-home{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:max-content;
  margin:.9rem 0 .65rem !important;
  padding:.72rem .92rem !important;
  color:#f8f5ed !important;
  background:#0b3452 !important;
  border:1px solid #0b3452 !important;
  text-decoration:none !important;
  font-size:.76rem !important;
}
@media(max-width:700px){
  .hs-reader-book-entry{
    align-items:flex-start;
    flex-direction:column;
    padding:.9rem;
  }
  .hs-reader-book-entry a,
  .hs10-books-3d .hs-online-read-home{
    width:100%;
    text-align:center;
  }
}

/* ================================================================
   BUILD-12C / rc107 · HOMEPAGE BOOK ACTION SPACING
   Give "Online lesen" and "Zum Buch" more breathing room.
   ================================================================ */

.hs10-books-3d .hs10-book3d-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hs10-books-3d .hs-online-read-home {
  margin-top: 1rem !important;
  margin-bottom: .85rem !important;
}

.hs10-books-3d .hs10-book3d-copy > a:not(.hs-online-read-home) {
  margin-top: .15rem !important;
}

@media (min-width: 701px) {
  .hs10-books-3d .hs-online-read-home {
    margin-right: 0 !important;
  }

  .hs10-books-3d .hs10-book3d-copy > a:not(.hs-online-read-home) {
    margin-left: 0 !important;
  }
}


/* ================================================================
   BUILD-14A / rc110 · EDITORIAL JOURNAL / IMPULSE
   Static core site remains dominant. Editorial area stays quiet.
   ================================================================ */

.hs-editorial-archive,
.hs-editorial-single{
  background:#f5f2eb;
  color:#0b3452;
}

.hs-editorial-hero,
.hs-editorial-single-head{
  padding:clamp(4.5rem,8vw,7.5rem) 0 clamp(2.8rem,5vw,4.5rem);
  border-bottom:1px solid rgba(11,52,82,.10);
  background:
    url('assets/images/hypnosystemic-paper-surface-v3.png') repeat,
    #f5f2eb;
  background-size:360px 360px;
}

.hs-editorial-hero h1,
.hs-editorial-single-head h1{
  max-width:900px;
  margin:.35rem 0 0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.8rem,4.8vw,5.3rem);
  font-weight:500;
  line-height:.98;
  letter-spacing:-.035em;
}

.hs-editorial-intro,
.hs-editorial-deck{
  max-width:760px;
  margin:1.25rem 0 0;
  font-size:clamp(1rem,1.3vw,1.14rem);
  line-height:1.62;
  color:rgba(11,52,82,.78);
}

.hs-editorial-list{
  padding:clamp(3rem,6vw,5.5rem) 0 clamp(4rem,8vw,7rem);
}

.hs-editorial-list-grid,
.hs-editorial-latest-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.2rem,2.2vw,2rem);
}

.hs-editorial-list-item,
.hs-editorial-card{
  padding:1.25rem 0 1.4rem;
  border-top:1px solid rgba(11,52,82,.18);
}

.hs-editorial-card-date{
  margin:0 0 .65rem;
  color:rgba(11,52,82,.46);
  font-size:.66rem;
  letter-spacing:.08em;
}

.hs-editorial-list-item h2,
.hs-editorial-card h3{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500;
  line-height:1.12;
}

.hs-editorial-list-item h2{
  font-size:clamp(1.5rem,2vw,2.1rem);
}

.hs-editorial-card h3{
  font-size:1.35rem;
}

.hs-editorial-list-item h2 a,
.hs-editorial-card h3 a{
  color:#0b3452;
  text-decoration:none;
}

.hs-editorial-list-item > p:not(.hs-editorial-card-date),
.hs-editorial-card > p:not(.hs-editorial-card-date){
  color:rgba(11,52,82,.74);
  line-height:1.55;
}

.hs-editorial-card-link{
  display:inline-block;
  margin-top:.55rem;
  color:#0b3452;
  text-decoration:none;
  font-size:.78rem;
}

.hs-editorial-single-body{
  padding:clamp(3rem,6vw,5.5rem) 1rem;
}

.hs-editorial-reading{
  max-width:760px;
  margin:0 auto;
  font-size:1.05rem;
  line-height:1.72;
}

.hs-editorial-reading h2,
.hs-editorial-reading h3{
  margin-top:2.2em;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500;
  line-height:1.18;
}

.hs-editorial-reading p{
  margin:0 0 1.25em;
}

.hs-editorial-reading blockquote{
  margin:2rem 0;
  padding:0 0 0 1.25rem;
  border-left:2px solid #c3312d;
  color:rgba(11,52,82,.82);
}

.hs-editorial-single-foot{
  padding:1.2rem 0 4rem;
  border-top:1px solid rgba(11,52,82,.10);
}

.hs-editorial-single-foot a{
  color:#0b3452;
  text-decoration:none;
}

.hs-editorial-latest{
  margin:clamp(3rem,6vw,5rem) 0;
}

.hs-editorial-latest-head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:1rem 2rem;
  align-items:end;
  margin-bottom:1.5rem;
}

.hs-editorial-latest-head .hs09-section-label{
  grid-column:1/-1;
  margin-bottom:-.4rem;
}

.hs-editorial-latest-head h2{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2rem,3.2vw,3.2rem);
  font-weight:500;
}

.hs-editorial-latest-head > a{
  color:#0b3452;
  text-decoration:none;
  font-size:.78rem;
}

.hs-editorial-pagination{
  margin-top:2.5rem;
}

@media(max-width:800px){
  .hs-editorial-list-grid,
  .hs-editorial-latest-grid{
    grid-template-columns:1fr;
  }

  .hs-editorial-latest-head{
    grid-template-columns:1fr;
  }
}


/* ================================================================
   BUILD-14B / rc111 · HERO MICRO GEOMETRY
   - Arc: 10° clockwise
   - Slightly lower / slightly right
   - Red point remains on its previous screen height, repositioned by JS
   - More breathing room between the two hero CTAs
   ================================================================ */

.hs09-hero .hs-hero-arc-finetuned{
  transform-box:fill-box !important;
  transform-origin:center center !important;
  transform:translate(18px, 10px) rotate(10deg) !important;
  transition:none !important;
  will-change:transform;
}

.hs09-hero .hs-hero-dot-finetuned{
  transition:none !important;
}

/* Clearer separation of the two actions. */
.hs09-hero .hs-hero-actions-finetuned{
  gap:14px !important;
}

.hs09-hero .hs-hero-primary-finetuned{
  margin-bottom:6px !important;
}

.hs09-hero .hs-hero-secondary-finetuned{
  margin-top:8px !important;
}

/* Fallback if both anchors are direct siblings and parent-gap is irrelevant. */
.hs09-hero .hs-hero-primary-finetuned + .hs-hero-secondary-finetuned{
  margin-top:14px !important;
}

@media(max-width:700px){
  /* Do not oversteer the mobile crop. */
  .hs09-hero .hs-hero-arc-finetuned{
    transform:translate(8px, 6px) rotate(6deg) !important;
  }

  .hs09-hero .hs-hero-actions-finetuned{
    gap:12px !important;
  }
}


/* ================================================================
   BUILD-14C / rc112 · HERO STABLE GEOMETRY
   rc111 runtime SVG geometry is intentionally retired:
   SVG transform-box/getScreenCTM produced browser/resolution variance.
   Arc + red point return to their original rc110 geometry.
   Only CTA spacing remains enhanced and is made deterministic.
   ================================================================ */

/* rc111 classes are no longer added by JS, but neutralize them defensively. */
.hs09-hero .hs-hero-arc-finetuned{
  transform:none !important;
  will-change:auto !important;
}

.hs09-hero .hs-hero-dot-finetuned{
  transform:none !important;
}

/* Desktop/tablet: explicit row, explicit gap. */
.hs09-hero .hs-hero-actions-stable{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  align-items:flex-start !important;
  gap:14px !important;
}

.hs09-hero .hs-hero-actions-stable .hs-hero-primary-finetuned,
.hs09-hero .hs-hero-actions-stable .hs-hero-secondary-finetuned{
  margin:0 !important;
}

/* Mobile: deliberate stack with the same controlled spacing. */
@media(max-width:700px){
  .hs09-hero .hs-hero-actions-stable{
    flex-direction:column !important;
    gap:12px !important;
  }

  .hs09-hero .hs-hero-actions-stable .hs-hero-primary-finetuned,
  .hs09-hero .hs-hero-actions-stable .hs-hero-secondary-finetuned{
    width:auto !important;
    max-width:100% !important;
    margin:0 !important;
  }
}


/* ================================================================
   BUILD-14D / rc113 · HERO FINAL MICRO GEOMETRY
   Stable SVG-attribute transform on desktop/tablet only.
   Mobile retains its established responsive geometry.
   ================================================================ */

/* Retire every older CSS transform path defensively. */
.hs09-hero .hs-hero-arc-finetuned,
.hs09-hero .hs-hero-arc-static{
  transform:none !important;
  transition:none !important;
  will-change:auto !important;
}

.hs09-hero .hs-hero-dot-finetuned,
.hs09-hero .hs-hero-dot-static{
  transition:none !important;
}

/* The button gap is now attached to the actual controls themselves,
   independent of their wrapper layout. */
.hs09-hero .hs-hero-primary-final,
.hs09-hero .hs-hero-secondary-final{
  display:inline-flex !important;
  box-sizing:border-box !important;
}

.hs09-hero .hs-hero-primary-final{
  margin-bottom:0 !important;
}

.hs09-hero .hs-hero-secondary-final{
  margin-top:14px !important;
}

/* If the theme happens to lay them in one row, use horizontal separation
   instead of accumulating a strange vertical offset. */
@media(min-width:701px){
  .hs09-hero .hs-hero-primary-final + .hs-hero-secondary-final{
    margin-left:14px !important;
    margin-top:0 !important;
  }
}

/* If the actual wrapper forces a stack at narrower desktop widths,
   the sibling relationship still gets explicit vertical air. */
@media(min-width:701px) and (max-width:1180px){
  .hs09-hero .hs-hero-primary-final + .hs-hero-secondary-final{
    margin-left:0 !important;
    margin-top:14px !important;
  }
}

/* Mobile keeps its intentionally different responsive geometry.
   Only the control spacing is standardized. */
@media(max-width:700px){
  .hs09-hero .hs-hero-primary-final,
  .hs09-hero .hs-hero-secondary-final{
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .hs09-hero .hs-hero-secondary-final{
    margin-top:12px !important;
  }
}


/* ================================================================
   BUILD-14E / rc114 · HERO STABILITY ROLLBACK
   rc113 SVG matrix is removed completely.
   Return to stable rc112 arc/dot geometry across browsers/resolutions.
   Keep only deterministic CTA spacing.
   ================================================================ */

/* Defensive neutralization of all prior hero-geometry classes. */
.hs09-hero .hs-hero-arc-finetuned,
.hs09-hero .hs-hero-arc-static{
  transform:none !important;
  transition:none !important;
  will-change:auto !important;
}

.hs09-hero .hs-hero-dot-finetuned,
.hs09-hero .hs-hero-dot-static{
  transform:none !important;
  transition:none !important;
}

/* One simple rule works for both layouts:
   - row: margin-right gives horizontal air
   - stack/wrap: margin-bottom gives vertical air
*/
.hs09-hero .hs-hero-primary-final{
  margin-top:0 !important;
  margin-left:0 !important;
  margin-right:14px !important;
  margin-bottom:14px !important;
}

.hs09-hero .hs-hero-secondary-final{
  margin:0 !important;
}

/* Remove rc113 breakpoint-specific spacing effects. */
@media(min-width:701px){
  .hs09-hero .hs-hero-primary-final + .hs-hero-secondary-final{
    margin-left:0 !important;
    margin-top:0 !important;
  }
}

@media(max-width:700px){
  .hs09-hero .hs-hero-primary-final{
    margin-right:0 !important;
    margin-bottom:12px !important;
  }

  .hs09-hero .hs-hero-secondary-final{
    margin:0 !important;
  }
}