/* Workshop page — isolated editorial redesign. Shared navigation and buttons stay untouched. */
.workshops-hero {
  position: relative;
  padding: clamp(5.5rem, 9vw, 8.5rem) 0 clamp(5rem, 8vw, 7.5rem);
  overflow: hidden;
  background: linear-gradient(90deg, #fff 0 57%, rgba(221, 235, 247, .46) 57% 100%);
}

.workshops-hero::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 43%;
  height: 6px;
  content: "";
  background: #ed7d31;
}

.workshop-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(480px, 1.18fr);
  gap: clamp(4.5rem, 9vw, 9rem);
  align-items: center;
}

.workshop-hero-copy { position: relative; z-index: 2; }

.workshops-hero .eyebrow {
  display: inline-block;
  margin-bottom: 1.35rem;
}

.workshops-hero h1 {
  max-width: 8ch;
  margin-bottom: 1.35rem;
  font-size: clamp(4.4rem, 6.8vw, 7rem);
  line-height: .9;
  letter-spacing: -.065em;
}

.workshops-hero .lead {
  max-width: 47ch;
  margin: 0;
  color: #425664;
  font-size: clamp(1.08rem, 1.45vw, 1.27rem);
  line-height: 1.68;
}

.workshops-hero .actions { margin-top: 2.1rem; }

.workshop-hero-visual {
  position: relative;
  isolation: isolate;
  margin: 0 0 0 clamp(1rem, 3vw, 3rem);
  padding: 0 clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.5rem) 0;
}

.workshop-hero-visual::before {
  position: absolute;
  inset: clamp(1.6rem, 3vw, 2.8rem) 0 0 clamp(1.6rem, 3vw, 2.8rem);
  z-index: -1;
  content: "";
  background: #ddebf7;
  border: 1px solid #bfd8ed;
}

.workshop-hero-visual::after {
  position: absolute;
  top: -6px;
  right: clamp(1rem, 2vw, 1.5rem);
  z-index: 2;
  width: 38%;
  height: 6px;
  content: "";
  background: #ed7d31;
}

.workshop-hero-visual img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
  border: 1px solid #bfd0dc;
  box-shadow: 18px 22px 0 rgba(35, 90, 128, .09);
}

.workshop-formats {
  position: relative;
  scroll-margin-top: 6rem;
  padding: clamp(4rem, 6vw, 6rem) 0;
  background: #f4f8fc;
}

.workshop-formats .section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid #a9becc;
}

.workshop-formats .section-head h2 {
  max-width: 24ch;
  margin-bottom: 0;
  font-size: clamp(2.6rem, 4.6vw, 4.6rem);
  line-height: 1.04;
}

.workshop-formats .section-head > .lead {
  max-width: 68ch;
  margin: 0;
  padding-left: 0;
  border-left: 0;
  font-size: clamp(1.05rem, 1.5vw, 1.24rem);
  line-height: 1.65;
}

.workshop-format-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.workshop-format-link {
  display: block;
  min-width: 0;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.workshop-format-link:focus-visible {
  outline: 3px solid #235a80;
  outline-offset: 5px;
}

.workshop-format-link:focus-visible .workshop-format {
  transform: translateY(-5px);
  box-shadow: 0 24px 52px rgba(35, 90, 128, .12);
}

.workshop-format-link:focus-visible .workshop-format::after { height: 100%; }

.workshop-format,
.workshop-format:nth-child(even) {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid #bfd0dc;
  box-shadow: 0 16px 42px rgba(35, 90, 128, .07);
  transition: transform .35s ease, box-shadow .35s ease;
}

.workshop-format:nth-child(even) .workshop-visual { order: 0; }

.workshop-format::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 0;
  content: "";
  background: #ed7d31;
  transition: height .35s ease;
}

.workshop-format:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 52px rgba(35, 90, 128, .12);
}

.workshop-format:hover::after { height: 100%; }

.workshop-visual {
  aspect-ratio: 16 / 9;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #ddebf7;
  border-bottom: 1px solid #bfd0dc;
}

.workshop-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s ease;
}

.workshop-format:hover .workshop-visual img { transform: scale(1.025); }

.workshop-format-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 385px;
  padding: clamp(2rem, 3.5vw, 3.25rem);
  background: #fff;
}

.workshop-format-copy .tag {
  align-self: flex-start;
  margin-bottom: 2rem;
  padding-bottom: .45rem;
  border-bottom: 3px solid #ed7d31;
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.workshop-format-copy h3 {
  max-width: 17ch;
  margin-bottom: 1rem;
  font-size: clamp(2rem, 3vw, 3.25rem);
  line-height: 1;
}

.workshop-format-copy p {
  max-width: 48ch;
  margin-bottom: 1.6rem;
  color: #425664;
  font-size: 1.02rem;
  line-height: 1.65;
}

.workshop-focus {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: auto;
}

.workshop-focus span {
  padding: .42rem .65rem;
  color: #163d58;
  background: #ddebf7;
  border-left: 3px solid #235a80;
  font-size: .77rem;
  font-weight: 750;
}

.workshop-cta-section {
  padding: clamp(6.5rem, 10vw, 9rem) 0;
  background: #fff;
}

.workshop-cta-section .cta-panel {
  position: relative;
  overflow: hidden;
  box-shadow: none;
}

.workshop-cta-section .cta-panel h2 {
  max-width: 20ch;
}

@media (min-width: 861px) {
  .workshop-cta-section .cta-panel {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 3rem !important;
  }

  .workshop-cta-section .cta-panel h2 {
    max-width: none;
  }
}

.workshop-cta-section .cta-panel::after {
  content: none;
  display: none;
}

.workshop-cta-section .cta-panel.cta-motion-ready,
.workshop-cta-section .cta-panel.cta-motion-ready > div > * {
  opacity: 1;
  transform: none;
  transition: none;
}

.workshop-cta-section .btn-primary {
  background-color: #ed7d31 !important;
  background-image: none !important;
  color: #17120e !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color .2s ease, transform .2s ease !important;
}

.workshop-cta-section .btn-primary::before,
.workshop-cta-section .btn-primary::after {
  content: none !important;
  display: none !important;
}

.workshop-cta-section .btn-primary:hover,
.workshop-cta-section .btn-primary:focus-visible {
  background-color: #ed7d31 !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: translateY(-2px) !important;
}

.workshop-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s ease, transform .65s ease;
}

.workshop-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1040px) {
  .workshop-hero-grid { grid-template-columns: minmax(0, .86fr) minmax(400px, 1.14fr); gap: 4rem; }
  .workshops-hero h1 { font-size: clamp(4rem, 8vw, 6rem); }
  .workshop-format-copy { min-height: 410px; }
}

@media (max-width: 860px) {
  .workshops-hero {
    padding: 5rem 0;
    background: linear-gradient(180deg, #fff 0 58%, rgba(221, 235, 247, .55) 58% 100%);
  }

  .workshops-hero::before { width: 100%; }
  .workshop-hero-grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .workshops-hero h1 { max-width: 9ch; }
  .workshops-hero .lead { max-width: 55ch; }
  .workshop-hero-visual { max-width: 680px; margin-left: 0; }

  .workshop-formats .section-head { grid-template-columns: 1fr; gap: 2rem; }
  .workshop-formats .section-head > .lead { max-width: 52ch; }
  .workshop-format-list { grid-template-columns: 1fr; }
  .workshop-format-copy { min-height: 0; }
  .workshop-format-copy h3 { max-width: 19ch; }
}

@media (max-width: 520px) {
  .workshops-hero { padding: 4.5rem 0 4rem; }
  .workshops-hero h1 { font-size: 3.65rem; }
  .workshops-hero .lead { font-size: 1.02rem; line-height: 1.62; }
  .workshops-hero .actions { flex-direction: column; align-items: stretch; }
  .workshops-hero .actions .btn { width: 100%; }
  .workshop-hero-grid { gap: 2.75rem; }
  .workshop-hero-visual { padding: 0 .65rem .9rem 0; }
  .workshop-hero-visual::before { inset: 1.2rem 0 0 1.2rem; }
  .workshop-hero-visual::after { right: .65rem; height: 5px; }
  .workshop-hero-visual img { aspect-ratio: 4 / 3; object-position: 55% center; box-shadow: 9px 12px 0 rgba(35, 90, 128, .09); }

  .workshop-formats { padding: 4.75rem 0; background: #f4f8fc; }
  .workshop-formats .section-head { margin-bottom: 2.75rem; }
  .workshop-formats .section-head h2 { font-size: clamp(2.1rem, 8.5vw, 2.75rem); }
  .workshop-formats .section-head > .lead { padding-left: 0; font-size: 1rem; }
  .workshop-format-list { gap: 1rem; }
  .workshop-visual { aspect-ratio: 4 / 3; }
  .workshop-format-copy { padding: 1.8rem 1.3rem 2rem; }
  .workshop-format-copy .tag { margin-bottom: 1.4rem; font-size: .68rem; }
  .workshop-format-copy h3 { font-size: 2.1rem; }
  .workshop-format-copy p { font-size: .96rem; line-height: 1.58; }
  .workshop-focus span { font-size: .7rem; }
  .workshop-cta-section { padding: 4.5rem 0; }
  .workshop-cta-section .cta-panel { min-height: 393px; }
  .workshop-cta-section .cta-panel h2 { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .workshop-format,
  .workshop-visual img,
  .workshop-reveal { transition: none; }

  .workshop-reveal { opacity: 1; transform: none; }
}

/* PM-Tool: same calm blue field and orange top rule as the workshop hero. */
body[data-page="product"] .hero {
  position: relative;
  background: linear-gradient(90deg, #fff 0 57%, rgba(221, 235, 247, .46) 57% 100%);
}
body[data-page="product"] .hero::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 43%;
  height: 6px;
  content: "";
  background: #ed7d31;
  pointer-events: none;
}
@media (max-width: 860px) {
  body[data-page="product"] .hero {
    background: linear-gradient(180deg, #fff 0 58%, rgba(221, 235, 247, .55) 58% 100%);
  }
  body[data-page="product"] .hero::before { width: 100%; }
}
/* PM-Tool: demo action right-aligned below the floating task. */
@media (min-width: 861px) {
  body[data-page="product"] .hero-grid > :first-child { align-self: end; }
  body[data-page="product"] .hero-balanced .signal-field {
    align-self: start;
    margin-top: clamp(1.5rem, 2.5vw, 3rem);
    min-height: 0;
  }
  body[data-page="product"] .hero .dash-stage {
    min-height: 490px;
    grid-template-rows: auto auto auto;
    align-content: start;
    align-items: start;
    padding-top: 1.5rem;
  }
  body[data-page="product"] .hero-grid > :first-child > .lead { margin-bottom: 0; }
}
@media (min-width: 561px) {
  body[data-page="product"] .hero .dash-stage { grid-template-rows: auto auto auto; align-content: start; }
  body[data-page="product"] .hero .dash-task-float {
    position: relative;
    right: auto;
    bottom: auto;
    justify-self: end;
    margin: -1.5rem 1% 0 0;
  }
  body[data-page="product"] .dash-stage > .actions {
    justify-self: end;
    justify-content: flex-end;
    align-self: start;
    margin: 2rem 1% 0 0;
    position: relative;
    z-index: 4;
  }
}
@media (max-width: 560px) {
  body[data-page="product"] .dash-stage > .actions { justify-content: center; margin: 2rem 0 0; }
}
/* Align the demo action with the bottom of the left-hand copy on desktop. */
@media (min-width: 861px) {
  body[data-page="product"] .hero-balanced .hero-grid { align-items: stretch; }
  body[data-page="product"] .hero-balanced .signal-field {
    align-self: stretch;
    display: flex;
  }
  body[data-page="product"] .hero .dash-stage {
    flex: 1;
    grid-template-rows: auto auto minmax(5.5rem, 1fr);
    align-content: stretch;
  }
  body[data-page="product"] .dash-stage > .actions {
    align-self: end;
    margin-top: 2rem;
  }
}
/* Match the demo button's right edge to the product window. */
@media (min-width: 861px) {
  body[data-page="product"] .dash-stage > .actions { margin-right: -5%; }
}
/* Contact invitation matches the personal contact layout. */
.faq-refined .faq-contact { max-width:none; padding:0 0 0 clamp(1.25rem,3vw,3rem); border-top:0; border-left:4px solid #ed7d31; text-align:left; }
.faq-refined .faq-contact::before { content:none; display:none; }
.faq-refined .faq-contact > p { max-width:42ch; margin:0 0 1.75rem; color:#5b6670; font-size:clamp(1rem,1.4vw,1.25rem); line-height:1.6; }
.faq-refined .faq-contact-options { display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem; }
.faq-refined .faq-contact a { max-width:none; border-bottom:0; }
.faq-refined .faq-contact .btn { display:inline-flex; color:#fff; }
.faq-refined .faq-contact-mail { display:block; }
.faq-refined .faq-contact-mail span { display:block; max-width:none; font-size:.67rem; }
.faq-refined .faq-contact-mail strong { font-size:.95rem; border-bottom:1px solid #bfd0dc; }
.footer-grid > div:first-child > p { color:#d9e1e6; }
/* Client references: clear company names and the commissioned work. */
.customer-hero h1 { max-width:18ch; }
.customer-references { background:#f4f8fc; }
.customer-reference { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,6vw,6rem); padding:clamp(2.5rem,5vw,4.5rem) 0; border-top:1px solid #b9ccd9; }
.customer-reference:last-child { border-bottom:1px solid #b9ccd9; }
.customer-reference h2 { margin:.7rem 0 0; font-size:clamp(2rem,3.6vw,3.6rem); }
.customer-reference h3 { font-size:clamp(1.35rem,2vw,1.8rem); }
.customer-reference p { color:#5b6670; max-width:44ch; }
.customer-reference a { display:inline-block; margin-top:1rem; font-weight:750; text-underline-offset:5px; }
@media(max-width:700px) { .customer-reference { grid-template-columns:1fr; gap:1.5rem; } }
/* Client editorial: commissioned work paired with original graphic compositions. */
.client-intro{padding:clamp(3rem,5vw,4.5rem) 0 3rem;background:#fff;border-bottom:1px solid #c6d6e1}
.client-intro-top{display:flex;justify-content:space-between;gap:2rem;align-items:start}
.client-intro-note{font-size:.83rem;line-height:1.5;color:#5b6670;border-left:3px solid #ed7d31;padding-left:1rem}
.client-intro h1{margin:1.5rem 0 1.75rem;font-size:clamp(3.4rem,6.8vw,6.6rem);line-height:.98;letter-spacing:-.055em;max-width:none}
.client-intro h1 span{color:#235a80}
.client-intro-bottom{display:flex;justify-content:space-between;align-items:end;gap:3rem}
.client-intro-bottom p{max-width:55ch;margin:0;color:#5b6670;font-size:1.1rem;line-height:1.65}
.client-intro-bottom a{flex-shrink:0;text-decoration:none;font-size:.85rem;font-weight:750;padding-bottom:.45rem;border-bottom:1px solid #aabfcd}
.client-intro-bottom a span{margin-left:1.5rem;color:#a84408}
.client-projects{padding:clamp(3rem,6vw,5rem) 0;background:#f4f8fc;scroll-margin-top:6rem}
.client-projects>.wrap{display:grid;gap:3rem}
.client-project{display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid #c5d6e2;min-width:0}
.client-art{position:relative;min-height:420px;overflow:hidden;padding:2rem;background:#ddebf7;color:#235a80;isolation:isolate}
.client-art-index{position:relative;z-index:2;font-size:.7rem;letter-spacing:.12em;font-weight:800}
.client-art-caption{position:absolute;bottom:1.8rem;left:2rem;right:2rem;font-size:.78rem;line-height:1.5}
.client-target{position:absolute;width:270px;height:270px;right:-30px;top:65px;border:1px solid #9ebed4;border-radius:50%;display:grid;place-items:center}
.client-target i{position:absolute;border:1px solid #9ebed4;border-radius:50%;width:75%;height:75%}
.client-target i:nth-child(2){width:50%;height:50%}.client-target i:nth-child(3){width:25%;height:25%;background:#ed7d31;border-color:#ed7d31}
.client-target b{font-size:3rem;color:#fff;z-index:1;font-weight:400}
.client-note{position:absolute;z-index:2;padding:1.1rem 1.3rem;font-weight:750;line-height:1.2;font-size:1.35rem;box-shadow:8px 10px 0 rgba(35,90,128,.09)}
.note-a{top:110px;left:10%;background:#fff;border-top:4px solid #ed7d31;transform:rotate(-6deg)}
.note-b{top:218px;left:15%;background:#235a80;color:#fff;transform:rotate(3deg)}
.client-project-copy{padding:clamp(2rem,4vw,3.5rem);display:flex;flex-direction:column;min-width:0}
.client-project-copy h2{font-size:clamp(2.3rem,3.8vw,3.7rem);line-height:1.02;letter-spacing:-.045em;margin:1.25rem 0 1.5rem}
.client-project-copy p{color:#5b6670;line-height:1.65;max-width:40ch}
.client-project-copy .client-service{font-size:.85rem;font-weight:750;color:#235a80;margin:0 0 .4rem}
.client-project-footer{margin-top:auto;padding-top:2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;border-top:1px solid #d9e3ea}
.client-project-footer strong{font-size:.9rem}.client-project-footer a{font-size:.8rem;text-decoration:none;font-weight:750}.client-project-footer a span{margin-left:.8rem;color:#a84408}
.client-project-dss .client-art{order:2;background:#235a80;color:#fff}
.client-workstreams{position:absolute;inset:95px 9% 90px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;transform:rotate(-8deg)}
.client-workstreams i{border:1px solid #62859d;background:rgba(221,235,247,.06);position:relative}
.client-workstreams b{position:absolute;left:12%;right:12%;height:30%;top:12%;background:#ddebf7;border-top:5px solid #ed7d31}
.client-workstreams i:nth-child(2) b{top:38%}.client-workstreams i:nth-child(3) b{top:58%;height:25%}
.note-c{top:140px;left:10%;background:#fff;color:#235a80;transform:rotate(3deg);font-size:1.6rem}
.client-contact{background:#fff;padding:clamp(3.5rem,7vw,6rem) 0}
.client-contact .wrap>div{display:flex;justify-content:space-between;align-items:center;gap:2rem;margin-top:1.4rem}
.client-contact h2{font-size:clamp(2.2rem,4vw,4rem);line-height:1.05;margin:0;letter-spacing:-.04em}
@media(max-width:760px){.client-intro-bottom{display:block}.client-intro-bottom a{display:inline-block;margin-top:1.5rem}.client-intro-note{display:none}.client-project{grid-template-columns:1fr}.client-project-dss .client-art{order:0}.client-art{min-height:350px}.client-project-footer{margin-top:1.5rem}.client-contact .wrap>div{align-items:start;flex-direction:column}.client-projects>.wrap{gap:2rem}.client-intro h1{font-size:clamp(3rem,10vw,4.5rem)}}
@media(max-width:380px){.client-project-copy{padding:1.5rem}.client-project-footer{align-items:start;flex-direction:column}.client-art{min-height:320px}.note-a{left:6%}.note-b{left:10%}}
.client-photo{margin:0;min-width:0;display:flex;flex-direction:column;background:#ddebf7}
.client-photo>img{width:100%;height:100%;min-height:360px;max-height:580px;object-fit:cover;flex:1;object-position:center}
.client-photo figcaption{padding:1rem 1.5rem;font-size:.75rem;line-height:1.5;color:#425664;border-top:4px solid #ed7d31}
.client-project-dss .client-photo{order:2}
.client-company-logo{display:block;width:auto;max-width:220px;height:60px;object-fit:contain;object-position:left center;margin-bottom:2rem}
.client-project-copy .client-person{font-size:.8rem;margin:0 0 1.5rem;color:#425664}
@media(max-width:760px){.client-project-dss .client-photo{order:0}.client-photo>img{min-height:0;height:auto;max-height:440px;aspect-ratio:4/3}.client-company-logo{max-width:190px;height:50px}}
/* Approved customer voices, kept separate from the service description. */
.client-testimonial{margin:1.5rem 0 2rem;padding:0 0 0 1.25rem;border-left:3px solid #ed7d31}
.client-testimonial blockquote{margin:0;padding:0;border:0;background:none}
.client-project-copy .client-testimonial blockquote p{margin:0 0 1rem;font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.6;color:#235a80;max-width:42ch}
.client-testimonial figcaption{display:grid;gap:.25rem;font-size:.8rem;line-height:1.5}
.client-testimonial figcaption strong{color:#15181b}
.client-testimonial figcaption span{color:#5b6670}
/* Compact references with company logos and approved testimonials. */
.client-projects>.wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem}
.client-project{display:block;min-height:0;border-top:4px solid #ed7d31}
.client-project-copy{height:100%;padding:clamp(1.5rem,2.7vw,2.5rem)}
.client-company-logo{height:48px;max-width:190px;margin-bottom:1.5rem}
.client-project-copy h2{font-size:clamp(2rem,2.8vw,2.8rem);margin:1rem 0}
.client-project-copy>p{font-size:.95rem;margin-bottom:1rem}
.client-testimonial{margin:1rem 0 1.5rem;padding-left:1rem}
.client-project-copy .client-testimonial blockquote p{font-size:1.05rem;line-height:1.55}
.client-project-footer{padding-top:1.25rem}
.client-intro{padding:clamp(2.5rem,4vw,3.5rem) 0 2.5rem}
.client-intro h1{font-size:clamp(3rem,5.5vw,5rem);margin:1.25rem 0 1.5rem}
.client-projects{padding:clamp(2.5rem,4vw,3.5rem) 0}
@media(max-width:760px){.client-projects>.wrap{grid-template-columns:1fr;gap:1.5rem}.client-project-copy{padding:1.75rem}}
/* Reference intro: connected services in the ReiCo palette. */
.client-intro{position:relative;background:linear-gradient(90deg,#fff 0 58%,#eef5fa 58%);overflow:hidden}
.client-intro::before{content:"";position:absolute;right:0;top:0;width:42%;height:6px;background:#ed7d31}
.client-intro-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;margin:1.75rem 0}
.client-intro-layout h1{font-size:clamp(3.2rem,5.5vw,5.5rem);margin:0;line-height:1.02}
.client-intro-layout h1 span{display:block}
.client-intro-graphic{position:relative;min-height:240px;isolation:isolate}
.client-graphic-label{position:absolute;left:7%;top:0;font-size:.63rem;letter-spacing:.15em;color:#425664;font-weight:800}
.client-graphic-orbit{position:absolute;inset:25px 9% 0;border:1px solid #a7c2d6;border-radius:50%;transform:rotate(-16deg)}
.client-graphic-node{position:absolute;padding:1.2rem 1.6rem;background:#fff;border:1px solid #b9cedd;box-shadow:8px 10px 0 #d6e5f0;color:#235a80;font-size:1.5rem;font-weight:800;line-height:1.25}
.client-graphic-node span{display:block;font-size:.78rem;font-weight:400;margin-top:.5rem}
.node-workshop{left:0;top:45px;border-top:4px solid #ed7d31;transform:rotate(-4deg)}
.node-advice{right:0;bottom:0;background:#235a80;color:#fff;transform:rotate(3deg)}
.client-graphic-plus{position:absolute;left:53%;top:45%;font-size:2rem;color:#ed7d31}
.client-contact .wrap.cta-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center;background:#ddebf7;border-left:8px solid #ed7d31;padding:clamp(2rem,4vw,4rem)}
.client-contact .wrap.cta-panel>div{display:block;margin:0}
.client-contact .cta-panel h2{font-size:clamp(2rem,3.7vw,3.6rem);margin:.75rem 0 1.5rem}
.client-contact .cta-panel p{max-width:53ch;font-size:1.1rem;color:#5b6670;line-height:1.65;margin:0}
#ueber-mich{scroll-margin-top:110px}
@media(max-width:760px){.client-intro{background:#fff}.client-intro-layout{grid-template-columns:1fr;gap:2rem}.client-intro-graphic{min-height:220px;max-width:420px;width:100%;margin:auto}.client-intro-bottom{margin-top:2rem}.client-contact .wrap.cta-panel{grid-template-columns:1fr}.client-graphic-node{font-size:1.2rem;padding:1rem 1.2rem}}
/* Client introduction: typography and real customer identities. */
.client-intro.client-intro-clean{background:#fff;padding:clamp(3rem,5vw,5rem) 0 0;border-bottom:0}
.client-intro-clean::before{display:none}
.client-clean-heading{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(250px,.7fr);gap:clamp(2rem,5vw,5rem);align-items:end;margin:1.25rem 0 2.75rem}
.client-intro-clean .client-clean-heading h1{margin:0;max-width:none;font-size:clamp(2.6rem,4vw,4rem);line-height:1.08;letter-spacing:-.045em}
.client-clean-heading h1 span{color:#235a80}
.client-clean-heading>p{margin:0 0 .2rem;color:#5b6670;font-size:1.05rem;line-height:1.65;max-width:35ch}
.client-logo-strip{display:flex;align-items:center;gap:clamp(2rem,5vw,5rem);padding:1.75rem 0;border-top:1px solid #c6d6e1}
.client-logo-strip>span{font-size:.75rem;color:#5b6670;letter-spacing:.04em}
.client-logo-strip a{display:flex;align-items:center;min-width:0;padding:.5rem}
.client-logo-strip img{width:auto;max-width:180px;height:52px;object-fit:contain}
#referenz-dss{scroll-margin-top:110px}
@media(max-width:760px){.client-clean-heading{grid-template-columns:1fr;gap:1.5rem;margin-bottom:2rem}.client-clean-heading>p{max-width:52ch}.client-logo-strip{flex-wrap:wrap;gap:1.25rem 2rem}.client-logo-strip>span{width:100%}.client-logo-strip img{height:42px;max-width:140px}.client-intro-clean .client-clean-heading h1{font-size:clamp(2rem,6.5vw,3rem)}}
/* Customer logo introduction with a clear typographic anchor. */
.client-logo-strip{border-top:0;background:#eef5fa;padding:1.5rem 2rem;margin-bottom:2rem;gap:clamp(2rem,4vw,4rem)}
.client-logo-strip>.client-logo-heading{position:relative;padding-left:1.25rem;font-size:.9rem;line-height:1.5;letter-spacing:0;color:#425664}
.client-logo-heading i{position:absolute;left:0;top:.15rem;bottom:.15rem;width:3px;background:#ed7d31}
.client-logo-heading strong{font-weight:750;color:#235a80}
@media(max-width:760px){.client-logo-strip{padding:1.5rem;gap:1.5rem}.client-logo-strip>.client-logo-heading{width:100%}}
/* Keep the introduction attached to its headline. */
.client-intro-clean .client-clean-heading{grid-template-columns:minmax(0,1fr);gap:1.25rem;margin-bottom:2rem}
.client-intro-clean .client-clean-heading>p{max-width:65ch;margin:0;font-size:1.08rem;line-height:1.65}
@media(max-width:760px){.client-intro-clean .client-clean-heading>p{font-size:1rem}}
/* Mobile QA: flexible tracks and long German words on narrow phones. */
@media(max-width:560px){
  main .wrap>*,.section-head>*,.hero-grid>*,.form-layout>*,.footer-grid>*{min-width:0}
  main h1,main h2,main h3,.footer a,.faq-contact-mail strong{overflow-wrap:anywhere}
  .problem-section-refined .section-head{grid-template-columns:minmax(0,1fr)}
  .problem-section-refined .problem-heading,.problem-section-refined .problem-aside{min-width:0;max-width:100%}
  .problem-section-refined .section-head h2{font-size:clamp(2rem,9vw,2.8rem)}
  .time-visual{max-width:100%;box-sizing:border-box}
  .client-logo-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem .75rem}
  .client-logo-strip>.client-logo-heading{grid-column:1/-1;width:auto}
  .client-logo-strip a{padding:0;justify-content:center}
  .client-logo-strip img{max-width:100%;height:38px}
  .faq-refined .faq-contact-options{align-items:flex-start;flex-direction:column}
  .faq-refined .faq-contact-mail{max-width:100%}
  input,select,textarea{font-size:16px}
  .nav-links.open{max-height:calc(100dvh - 100px);overflow-y:auto}
}
/* Legal page: readable information with a distinct contact panel. */
.legal-intro{padding:clamp(3rem,6vw,5rem) 0;background:#eef5fa;border-top:6px solid #ed7d31}
.legal-intro h1{font-size:clamp(3rem,6vw,5.5rem);letter-spacing:-.05em;margin:1rem 0}
.legal-intro p{color:#5b6670;max-width:50ch;margin:0;font-size:1.1rem}
.legal-details{padding:clamp(3rem,6vw,5rem) 0}
.legal-layout{display:grid;grid-template-columns:minmax(240px,.65fr) minmax(0,1.35fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.legal-contact{background:#ddebf7;border-left:4px solid #ed7d31;padding:2rem;min-width:0}
.legal-contact h2{font-size:1.7rem;margin:1rem 0}
.legal-contact p{color:#425664;line-height:1.65;margin-bottom:1.5rem}
.legal-contact>a{display:block;width:fit-content;margin:.75rem 0;overflow-wrap:anywhere;text-underline-offset:4px;font-size:.95rem}
.legal-entry{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:1.25rem;padding:0 0 2.5rem;margin:0 0 2.5rem;border-bottom:1px solid #c6d6e1}
.legal-entry:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.legal-index{font-size:.75rem;font-weight:800;color:#a84408;padding-top:.4rem}
.legal-entry h2{font-size:clamp(1.4rem,2vw,1.85rem);line-height:1.25;margin:0 0 1.1rem;overflow-wrap:anywhere}
.legal-entry p{font-size:1rem;color:#5b6670;line-height:1.75;max-width:65ch}
.legal-entry p:last-child{margin-bottom:0}.legal-entry a{overflow-wrap:anywhere;text-underline-offset:4px}
.legal-entry .legal-vat{color:#235a80;font-weight:750;letter-spacing:.04em}
@media(max-width:760px){.legal-layout{grid-template-columns:minmax(0,1fr);gap:2.5rem}.legal-contact{padding:1.5rem}.legal-entry{grid-template-columns:1.5rem minmax(0,1fr);gap:.75rem}}
/* Legal headings use the available column; VAT number follows the body color. */
.legal-entry h2{max-width:none;overflow-wrap:normal;word-break:normal;hyphens:none}
.legal-entry .legal-vat{color:#5b6670;font-weight:400;letter-spacing:normal}
.legal-title-row{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.legal-title-row .legal-brand{flex-shrink:0;color:#15181b;text-decoration:none;font-size:clamp(1.5rem,2.8vw,2.4rem);gap:.75rem}
.legal-title-row .legal-brand svg{width:clamp(65px,7vw,100px);height:auto;fill:currentColor}
@media(max-width:560px){.legal-title-row{flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.legal-title-row h1{width:100%;margin-bottom:.5rem}.legal-title-row .legal-brand{font-size:1.4rem}.legal-title-row .legal-brand svg{width:58px}}
.contact-trap{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.form-status:empty{display:none}
.form-status[data-state="success"]{border-color:#28795b;background:#edf6f1}
.form-status[data-state="error"]{border-color:#ad3e23;background:#fff4f0}
.form-card button:disabled{opacity:.65;cursor:wait}
/* Contact introduction: one connected text block. */
.contact-intro.page-hero{padding:clamp(3rem,5vw,4.5rem) 0;background:#eef5fa;border-top:5px solid #ed7d31}
.contact-intro h1{max-width:18ch;font-size:clamp(2.6rem,4.8vw,4.6rem);line-height:1.05;margin:1rem 0 1.5rem;letter-spacing:-.045em}
.contact-intro.page-hero .lead{margin:0;max-width:61ch;font-size:1.1rem;line-height:1.65;color:#5b6670}
.mobile-legal-links{display:none}
@media(max-width:860px){.nav-links .mobile-legal-links{display:flex;gap:1.5rem;flex-wrap:wrap;border-top:1px solid #c6d6e1;padding-top:.75rem;margin-top:.5rem}.mobile-legal-links a{display:inline-flex;align-items:center;min-height:44px}.contact-intro h1{font-size:clamp(2.25rem,8vw,3.5rem)}}
/* Services introduction: headline followed by explanatory copy. */
.personal-services .section-head{display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem}
.personal-services .section-head>div{width:100%;min-width:0}
.personal-services .section-head h2{max-width:25ch;margin-bottom:0}
.personal-services .section-head>.lead{max-width:70ch;width:100%;margin:0;padding:0}
@media(max-width:560px){.personal-services .section-head{gap:1.25rem}.personal-services .section-head h2{max-width:none}}
.privacy-review{padding:1.25rem 1.5rem;margin-bottom:2.5rem;background:#fff5e9;border-left:3px solid #ed7d31;color:#425664}.privacy-review p{font-size:.9rem;line-height:1.6;margin:.5rem 0 0}

@media(min-width:861px){.problem-section-refined .section-head h2{max-width:none;font-size:clamp(2.5rem,4.6vw,4.75rem)}.problem-title-line{display:block;white-space:nowrap}}
@media(max-width:860px){.problem-title-line{display:inline;white-space:normal}}