:root {
  --ink:#edf3f8;
  --muted:#b7c6d4;
  --accent:#a8c7f0;
  --paper:#142737;
  --light:#192f41;
  --line:#354b5e;
  color-scheme:dark;
  --serif:Georgia,'Times New Roman',serif;
  --sans:'Segoe UI',Arial,sans-serif
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:2rem
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased
}

a {
  color:inherit;
  text-underline-offset:.24em
}

a:hover {
  color:var(--accent)
}

a:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:6px
}

h1,h2,h3,p {
  margin:0
}

h1,h2 {
  font-weight:400;
  letter-spacing:-.045em;
  line-height:1.12
}

h2 {
  font-size:clamp(2.2rem,3.5vw,3.5rem)
}

h3 {
  font-size:1.3rem;
  line-height:1.3;
  font-weight:500
}

p {
  color:var(--muted)
}

.container {
  width:min(1200px,calc(100% - 96px));
  margin-inline:auto
}

.skip-link {
  position:fixed;
  top:12px;
  left:12px;
  padding:12px 20px;
  background:#bfd3ed;
  color:#142737;
  z-index:10;
  transform:translateY(-150%)
}

.skip-link:focus {
  transform:translateY(0)
}

.site-header {
  border-bottom:1px solid var(--line)
}

.header-inner {
  min-height:104px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  font-size:.9rem;
  letter-spacing:.075em;
  font-weight:650;
  white-space:nowrap
}

.brand-light {
  font-weight:400
}

.brand-mark {
  display:grid;
  place-items:center;
  width:35px;
  height:35px;
  background:#bfd3ed;
  color:#142737;
  font-family:var(--serif);
  font-size:1.55rem;
  letter-spacing:-.07em;
  font-weight:400
}

.header-inner nav {
  display:flex;
  gap:36px;
  align-items:center;
  font-size:.9rem
}

.header-inner nav a {
  text-decoration:none;
  padding:10px 0
}

.header-inner nav .nav-contact {
  border-bottom:1px solid var(--ink)
}

.nav-contact span {
  margin-left:15px
}

.hero {
  display:grid;
  grid-template-columns:minmax(0,1fr) 255px;
  gap:64px;
  padding-block:88px 76px
}

.eyebrow {
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.75rem;
  font-weight:600;
  color:var(--accent);
  line-height:1.5
}

.hero h1 {
  font-size:clamp(3rem,4.7vw,4.6rem);
  margin:26px 0
}

.hero h1 span {
  font-family:var(--serif);
  font-style:italic;
  color:var(--accent);
  letter-spacing:-.05em
}

.hero-intro {
  font-size:1.1rem;
  max-width:570px;
  line-height:1.7
}

.button {
  display:inline-flex;
  align-items:center;
  gap:36px;
  background:#bfd3ed;
  color:#142737;
  padding:16px 22px;
  margin-top:30px;
  text-decoration:none;
  font-size:.94rem;
  border-radius:6px;
  box-shadow:0 5px 18px #08172230;
  transition:background .15s, transform .15s
}

.button:hover {
  background:#d9e6f6;
  color:#10212f
}

.hero-person {
  margin-top:30px;
  color:var(--ink);
  font-size:.88rem
}

.hero-person span {
  display:block;
  font-size:.8rem;
  color:var(--muted);
  margin-top:2px
}

.hero-aside {
  border-left:1px solid var(--line);
  padding-left:32px;
  padding-top:5px;
  display:flex;
  flex-direction:column;
  justify-content:center
}

.hero-aside>.eyebrow {
  color:var(--muted);
  margin-bottom:26px
}

.focus-item {
  border-top:1px solid var(--line);
  display:flex;
  align-items:baseline;
  gap:24px;
  padding:20px 0
}

.focus-number {
  color:var(--accent);
  font-size:.75rem
}

.focus-item p {
  font-size:1.5rem;
  line-height:1.28;
  color:var(--ink);
  letter-spacing:-.02em
}

.focus-item em {
  font-family:var(--serif);
  font-weight:400
}

.text-link {
  font-size:.84rem;
  display:flex;
  justify-content:space-between;
  margin-top:20px;
  text-decoration:none
}

.identity-strip {
  background:var(--light);
  border-block:1px solid var(--line)
}

.identity-strip>.container {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:48px;
  padding-block:25px;
  align-items:center;
  font-size:.85rem
}

.identity-strip span {
  font-weight:500
}

.identity-strip p {
  font-size:.85rem
}

.identity-strip strong {
  font-weight:500;
  color:var(--ink)
}

.section {
  padding-block:100px
}

.section-heading {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:48px;
  margin-bottom:54px
}

.section-heading>.eyebrow {
  padding-top:9px
}

.section-heading h2 {
  margin-bottom:20px
}

.section-heading p:not(.eyebrow) {
  max-width:590px
}

.service {
  display:grid;
  grid-template-columns:60px minmax(0,1fr) minmax(0,1.5fr);
  gap:28px;
  border-top:1px solid var(--line);
  padding:29px 0 32px;
  align-items:baseline
}

.service:last-child {
  border-bottom:1px solid var(--line)
}

.service-number {
  font-size:.8rem;
  color:var(--accent)
}

.service p {
  font-size:.97rem;
  max-width:555px
}

.about-section {
  background:var(--ink);
  padding-block:92px;
  color:#fff
}

.about-grid {
  display:grid;
  grid-template-columns:minmax(0,360px) minmax(0,1fr);
  gap:76px
}

.about-section .eyebrow {
  color:#a5c5ff;
  margin-bottom:28px
}

.about-section p {
  color:#c4d0d9
}

.about-copy h3 {
  font-size:1.5rem;
  margin-bottom:22px
}

.about-copy>p+p {
  margin-top:16px
}

.company-facts {
  margin:32px 0 0;
  font-size:.88rem
}

.company-facts>div {
  border-top:1px solid #3d5060;
  padding:14px 0;
  display:grid;
  grid-template-columns:130px 1fr;
  gap:20px
}

.company-facts dt {
  color:#b7c5d0
}

.company-facts dd {
  margin:0
}

.contact-section {
  padding-block:100px 108px
}

.contact-section h2 {
  font-size:clamp(2.8rem,4.5vw,4.5rem);
  margin:24px 0
}

.contact-section>p {
  max-width:700px
}

.email-link {
  display:inline-flex;
  align-items:baseline;
  gap:50px;
  font-size:clamp(1.25rem,3.1vw,2.6rem);
  letter-spacing:-.035em;
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid var(--accent);
  margin-top:34px;
  padding-bottom:7px;
  max-width:100%;
  overflow-wrap:anywhere
}

.email-link:hover {
  color:var(--ink);
  border-color:var(--ink)
}

.contact-section .contact-name {
  font-size:.85rem;
  margin-top:18px
}

.site-footer {
  border-top:1px solid var(--line);
  padding-block:36px 24px
}

.footer-top,.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:center
}

.footer-top>p {
  font-size:.86rem
}

.footer-bottom {
  margin-top:30px;
  border-top:1px solid var(--line);
  padding-top:24px;
  align-items:flex-end
}

.footer-bottom p,.footer-bottom nav {
  font-size:.8rem
}

.footer-bottom nav {
  display:flex;
  gap:25px
}

.footer-bottom a {
  text-decoration:none
}

.legal {
  max-width:850px;
  padding-block:65px 90px
}

.legal>.eyebrow {
  margin-bottom:24px
}

.legal h1 {
  font-size:clamp(2.8rem,5vw,4rem);
  margin-bottom:30px
}

.legal h2 {
  font-size:1.45rem;
  letter-spacing:-.02em;
  font-weight:500;
  line-height:1.4;
  margin:36px 0 12px
}

.legal p+p {
  margin-top:14px
}

.legal address {
  font-style:normal;
  color:var(--muted)
}

.legal ul {
  color:var(--muted);
  padding-left:22px
}

.legal li+li {
  margin-top:8px
}

.legal a {
  overflow-wrap:anywhere
}

.notice {
  background:#332e20;
  border-left:3px solid #b89c57;
  padding:18px 22px;
  color:#ecd9a2;
  margin-bottom:32px;
  font-size:.92rem
}

.placeholder {
  background:#3b3422;
  color:#ecd9a2;
  padding:2px 5px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone
}

.back-link {
  display:inline-block;
  margin-top:40px
}

@media(min-width:1450px) {
  .hero {
    padding-block:100px 90px
  }

  .hero h1 {
    font-size:4.6rem
  }
}

@media(max-width:1000px) {
  .container {
    width:calc(100% - 64px)
  }

  .hero {
    gap:30px;
    grid-template-columns:minmax(0,1fr) 200px
  }

  .hero-aside {
    padding-left:23px
  }

  .hero h1 {
    font-size:3.3rem
  }

  .focus-item p {
    font-size:1.3rem
  }

  .about-grid {
    gap:45px
  }

  .section-heading,.identity-strip>.container {
    grid-template-columns:1fr 2fr;
    gap:28px
  }

  .service {
    grid-template-columns:35px 1fr 1.3fr;
    gap:18px
  }

  .company-facts>div {
    grid-template-columns:1fr;
    gap:4px
  }
}

@media(max-width:720px) {
  .container {
    width:calc(100% - 40px)
  }

  .header-inner {
    min-height:110px;
    flex-wrap:wrap;
    gap:10px;
    padding-block:18px
  }

  .header-inner nav {
    gap:24px;
    font-size:.84rem;
    width:100%;
    justify-content:space-between
  }

  .header-inner nav a {
    padding:5px 0
  }

  .hero {
    grid-template-columns:1fr;
    padding-block:48px 42px;
    gap:40px
  }

  .hero h1 {
    font-size:clamp(2.65rem,7.9vw,3.9rem)
  }

  .hero-intro {
    font-size:1rem
  }

  .hero-aside {
    border-left:0;
    border-top:1px solid var(--line);
    padding:26px 0 0;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px
  }

  .hero-aside>.eyebrow {
    grid-column:1/-1;
    margin:0 0 7px
  }

  .focus-item {
    border:0;
    padding:0;
    display:block
  }

  .focus-number {
    display:block;
    margin-bottom:8px
  }

  .focus-item p {
    font-size:clamp(.95rem,3.2vw,1.25rem)
  }

  .hero-aside .text-link {
    display:none
  }

  .identity-strip>.container {
    grid-template-columns:1fr;
    gap:10px;
    padding-block:24px
  }

  .section {
    padding-block:62px
  }

  .section-heading {
    grid-template-columns:1fr;
    gap:22px;
    margin-bottom:32px
  }

  .section-heading>.eyebrow {
    padding:0
  }

  .service {
    grid-template-columns:28px minmax(0,1fr);
    gap:12px;
    padding-block:24px
  }

  .service p {
    grid-column:2;
    font-size:.94rem
  }

  .service h3 {
    font-size:1.22rem
  }

  .about-section {
    padding-block:62px
  }

  .about-grid {
    grid-template-columns:1fr;
    gap:34px
  }

  .about-section h2 br:nth-child(2) {
    display:none
  }

  .company-facts>div {
    grid-template-columns:110px 1fr;
    gap:16px
  }

  .email-link {
    gap:18px;
    font-size:clamp(1.2rem,5.6vw,2rem)
  }

  .desktop-break {
    display:none
  }

  .footer-top,.footer-bottom {
    align-items:flex-start;
    flex-direction:column;
    gap:20px
  }

  .footer-bottom nav a {
    padding-block:8px
  }

  .legal {
    padding-top:45px
  }

  .legal h1 {
    font-size:2.8rem
  }

  .notice {
    padding:16px
  }

  .button {
    gap:26px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  * {
    transition:none!important
  }
}

@media print {
  .site-header,.skip-link,.site-footer,.button {
    display:none
  }

  .container {
    width:100%
  }

  .hero,.section,.about-section {
    padding-block:24px
  }

  .about-section {
    background:white;
    color:#122638
  }

  .about-section p,.about-section dt {
    color:#52606c
  }

  .hero-aside {
    display:none
  }

  .hero,.about-grid {
    display:block
  }

  a {
    color:inherit
  }

  .service {
    break-inside:avoid
  }
}

/* Lange Überschriften bleiben auch bei schmalen Ansichten lesbar. */
.legal h1 {
  hyphens: auto;
  overflow-wrap: anywhere;
}

/* Grid-Spalten dürfen unter die Wortbreite schrumpfen. */
.section-heading > div, .about-grid > div {
  min-width: 0;
}
h2 {
  hyphens: auto;
  overflow-wrap: anywhere;
}
.service p {
  font-size: 1rem;
}

/* Durchgängiges Dunkelblau mit dezent abgestuften Flächen. */
.site-header {
  background: #112331;
}

.brand-mark {
  border-radius: 5px;
}

.hero {
  align-items: center;
}

.hero-expertise {
  border-left: 2px solid var(--accent);
  padding-left: 16px;
  margin-top: 24px;
  color: var(--ink);
  font-size: .9rem;
  line-height: 1.65;
}

.hero-aside {
  padding: 32px;
  background: linear-gradient(145deg, #20384d, #192f41);
  border: 1px solid #3c5266;
  border-radius: 14px;
}

.hero-aside .focus-item {
  border-color: #3c5266;
}

.hero-aside .focus-item p {
  hyphens: auto;
  overflow-wrap: anywhere;
}

.button:hover {
  transform: translateY(-2px);
}

.service {
  transition: background .18s;
}

.service:hover {
  background: #1a3042;
}

.about-section {
  background: #112331;
}

.about-heading {
  margin-bottom: 54px;
}

.about-heading h2 {
  max-width: 940px;
}

.about-heading h2 span {
  color: #b2c7df;
  font-family: var(--serif);
  font-style: italic;
}

.about-grid {
  align-items: start;
}

.portrait {
  width: 100%;
  max-width: 360px;
  margin: 0;
  min-width: 0;
}

.portrait-image {
  overflow: hidden;
  padding: 24px 14px 0;
  background: linear-gradient(150deg, #354d60, #253d50);
  border: 1px solid #52697c;
  border-radius: 12px;
}

.portrait img {
  display: block;
  width: 100%;
  height: auto;
}

.portrait figcaption {
  display: grid;
  gap: 4px;
  padding-top: 20px;
}

.portrait figcaption strong {
  font-size: 1.1rem;
  font-weight: 500;
}

.portrait figcaption span {
  color: #b7c5d0;
  font-size: .875rem;
}

.about-copy h3 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -.025em;
  line-height: 1.3;
}

.about-copy strong {
  color: #edf3f8;
  font-weight: 500;
}

.experience-tags {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
}

.experience-tags li {
  max-width: 100%;
  padding: 6px 12px;
  border: 1px solid #526575;
  border-radius: 5px;
  font-size: .875rem;
  color: #d5e1eb;
  overflow-wrap: anywhere;
}

.team-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 48px;
  margin-top: 60px;
  padding: 36px;
  border: 1px solid #425a6e;
  border-left: 3px solid #8eafe5;
  border-radius: 10px;
  background: #203648;
}

.team-panel .eyebrow {
  margin-bottom: 16px;
  font-size: .75rem;
  line-height: 1.7;
}

.team-panel h3 {
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  letter-spacing: -.025em;
  line-height: 1.35;
}

.team-panel p + p {
  margin-top: 14px;
}

.about-section .company-facts {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  gap: 32px;
  margin-top: 40px;
}

.about-section .company-facts > div {
  display: block;
  padding-top: 18px;
}

.about-section .company-facts dd {
  margin-top: 6px;
}

.site-footer {
  background: #10212f;
}

@media (max-width: 1000px) {
  .hero-aside { padding: 24px; }
  .about-grid { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 38px; }
  .team-panel { gap: 28px; padding: 28px; }
}

@media (max-width: 720px) {
  .hero-aside { padding: 24px 18px; gap: 8px; }
  .hero-aside .focus-item { border: 0; }
  .about-heading { margin-bottom: 34px; }
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .portrait { width: 84%; max-width: 290px; }
  .portrait-image { padding: 20px 12px 0; }
  .team-panel { grid-template-columns: 1fr; gap: 22px; padding: 24px; margin-top: 36px; }
  .about-section .company-facts { grid-template-columns: 1fr; gap: 0; margin-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .button:hover { transform: none; }
}

@media print {
  .about-section, .team-panel, .site-footer { background: white; color: #122638; }
  .about-section strong, .portrait figcaption span, .experience-tags li { color: #122638; }
  .portrait { max-width: 240px; margin-bottom: 24px; }
  .team-panel { break-inside: avoid; }
}

/* Feine Übergänge und klare Lesbarkeit auf dunklem Grund. */
::selection { background: #b9d1f1; color: #10212f; }
.header-inner nav a { transition: color .15s; }
.header-inner nav .nav-contact { border-color: #91acc5; }
.about-section { border-block: 1px solid #304658; }
.about-copy { max-width: 670px; }
.contact-section .email-link { padding-bottom: 10px; border-color: #728faa; }
.portrait-image { box-shadow: 0 18px 40px #07162330; }
.focus-item { min-width: 0; }
.focus-item p { min-width: 0; }

/* Einfaches Kontaktformular ohne clientseitiges JavaScript. */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  margin-top: 42px;
}
.contact-direct { padding-top: 24px; }
.contact-direct > p { margin-top: 16px; }
.contact-direct .email-link {
  font-size: clamp(1.2rem, 2.1vw, 1.8rem);
  gap: 20px;
  margin-top: 24px;
}
.contact-form {
  padding: 30px;
  background: #192f41;
  border: 1px solid var(--line);
  border-radius: 12px;
  scroll-margin-top: 24px;
}
.contact-form h3 { margin-bottom: 26px; }
.form-field { display: grid; gap: 8px; margin-top: 20px; }
.form-field label { font-size: .9rem; }
.form-field input, .form-field textarea {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  color: var(--ink);
  background: #112331;
  border: 1px solid #647c91;
  border-radius: 5px;
  font: inherit;
}
.form-field textarea { resize: vertical; min-height: 140px; }
.form-field input:focus-visible, .form-field textarea:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.form-privacy { margin-top: 18px; font-size: .875rem; }
.contact-form button { border: 0; font-family: inherit; cursor: pointer; margin-top: 22px; }
@media (max-width: 850px) {
  .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .contact-direct { padding-top: 0; }
  .contact-form { max-width: 600px; }
}
@media (max-width: 420px) {
  .contact-form { padding: 22px 18px; }
}
@media print {
  .contact-grid { display: block; }
  .contact-form { display: none; }
}

/* Bedienbarkeit und ruhigerer Satz auf kleinen Bildschirmen. */
h1, h2, h3 { text-wrap: balance; }
.hero-intro, .about-copy p { text-wrap: pretty; }
.header-inner nav a, .footer-bottom nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.header-inner nav { font-size: .875rem; }
.footer-bottom nav { font-size: .875rem; }
.text-link { min-height: 44px; align-items: center; }
.button { min-height: 48px; max-width: 100%; }
.email-link { min-height: 48px; }
.contact-section { border-top: 1px solid var(--line); }

@media (hover: none) {
  .service:hover { background: transparent; }
  .button:hover { transform: none; }
}

@media (max-width: 420px) {
  .hero-aside { grid-template-columns: 1fr; gap: 0; }
  .hero-aside > .eyebrow { margin-bottom: 12px; }
  .hero-aside .focus-item {
    display: flex;
    gap: 18px;
    padding: 10px 0;
    border-top: 1px solid #3c5266;
  }
  .hero-aside .focus-number { margin: 0; }
  .hero-aside .focus-item p { font-size: 1.1rem; }
  .hero-aside .focus-item br { display: none; }
  .hero-aside .focus-item em { margin-left: .3em; }
  .about-section .eyebrow { letter-spacing: .1em; }
}

@media (forced-colors: active) {
  .button, .brand-mark { border: 1px solid ButtonText; }
}

@media print {
  :root { --paper: #fff; --ink: #122638; --muted: #52606c; --accent: #235bd0; --light: #f2f5f8; --line: #d8e0e7; color-scheme: light; }
  .hero-expertise, .about-copy strong, .about-heading h2 span, .about-section .eyebrow { color: #122638; }
  .notice, .placeholder { background: #fff6de; color: #624900; }
  .portrait-image { box-shadow: none; }
}

/* Boutique finish: restrained light, a connected process, and clear reading rhythm. */
.home {
  background-image: radial-gradient(ellipse 80% 690px at 88% 210px, #345a7138, transparent 78%);
}
.home .hero {
  grid-template-columns: minmax(0, 1fr) minmax(290px, 350px);
  gap: clamp(36px, 5vw, 72px);
}
.hero-main { min-width: 0; }
.hero-visual {
  position: relative;
  min-width: 0;
  padding: 32px 28px 22px;
  border: 1px solid #637d925e;
  border-radius: 18px;
  background: radial-gradient(ellipse at top right, #648ab324, transparent 75%), linear-gradient(145deg, #243e50, #172e40);
  box-shadow: inset 0 1px 0 #dcecff12, 0 22px 60px #06121e2e;
}
.hero-visual > .eyebrow { font-size: .7rem; letter-spacing: .12em; color: #c2d5ea; }
.relationship-map { margin: 32px 0 26px; padding: 0; list-style: none; }
.map-step {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding-bottom: 36px;
}
.map-step:last-child { padding-bottom: 0; }
.map-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #8daeca;
  border-radius: 50%;
  background: #223d51;
  color: #d9e8f7;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 5px #91b6d609;
}
.map-step:last-child .map-node { background: #bdd4ed; color: #142737; border-color: #bdd4ed; }
.map-connector {
  position: absolute;
  left: 18px;
  top: 44px;
  bottom: 7px;
  width: 1px;
  background: linear-gradient(#91b2d366, #abc8e5);
  transform-origin: top;
}
.map-step p { color: var(--ink); font-size: 1.5rem; line-height: 1.12; letter-spacing: -.025em; }
.map-step em { display: block; font-family: var(--serif); font-weight: 400; color: #bdd4ed; }
.map-caption { display: block; margin-top: 10px; color: #b7c9d9; font-size: .875rem; line-height: 1.5; }
.hero-visual .text-link { padding-top: 16px; border-top: 1px solid #7593aa42; font-size: .875rem; }
.home .identity-strip { background: #1a3040a6; }
.home .section-heading { margin-bottom: 42px; }
.home .service { position: relative; transition: background .22s ease; }
.service-number {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  transition: border-color .22s ease, background .22s ease, color .22s ease;
}
.home .about-section { background: radial-gradient(ellipse at 10% 35%, #294d6530, transparent 65%), #112331; }
.about-copy .about-principle {
  margin-top: 28px;
  padding: 4px 0 4px 20px;
  border-left: 2px solid #91b6d6;
  color: #d5e4f4;
  font-family: var(--serif);
  font-size: 1.4rem;
  line-height: 1.45;
}
.about-principle span { display: block; margin-top: 8px; font: 1rem/1.65 var(--sans); color: var(--muted); }
.home .team-panel {
  background: linear-gradient(115deg, #25415780, #1b3243);
  border-color: #718da250;
  border-left-color: #9dbce0;
  margin-top: 48px;
}
.team-panel strong { color: #e0ebf5; font-weight: 500; }
.home .portrait-image { background: radial-gradient(ellipse at 45% 18%, #57758b, #233e51 78%); border-color: #91aec05c; }
.home .contact-form { background: linear-gradient(145deg, #20394c, #192f41); border-color: #718da25e; box-shadow: inset 0 1px 0 #e6f3ff0a, 0 16px 46px #07172220; }
.button { transition: background .2s ease, box-shadow .2s ease, transform .2s ease; }
.button span, .text-link span { display: inline-block; transition: transform .2s ease; }
.button:focus-visible { background: #d9e6f6; color: #10212f; }
.button:focus-visible span { transform: translate(2px, -2px); }
.header-inner nav a:not(.nav-contact) { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 7px; transition: color .2s, text-decoration-color .2s; }
.header-inner nav a:focus-visible { text-decoration-color: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .home .service:hover { background: #24425770; }
  .service:hover .service-number { background: #abc9ec14; border-color: #88a9ca88; color: #e2edfb; }
  .button:hover { box-shadow: 0 8px 22px #07132150; }
  .button:hover span { transform: translate(2px, -2px); }
  .text-link:hover span { transform: translateY(3px); }
  .header-inner nav a:hover { text-decoration-color: currentColor; }
}
@media (max-width: 1050px) and (min-width: 721px) {
  .home .hero { grid-template-columns: minmax(0, 1fr) 290px; gap: 30px; }
  .home .hero h1 { font-size: clamp(2.5rem, 4.6vw, 3.3rem); }
  .hero-visual { padding: 26px 20px 20px; }
  .map-step { gap: 14px; }
  .map-step p { font-size: 1.3rem; }
}
@media (max-width: 720px) {
  .home .hero { grid-template-columns: 1fr; gap: 34px; }
  .hero-visual { padding: 26px 24px 18px; }
  .relationship-map { margin-block: 24px; }
  .map-step { padding-bottom: 27px; }
  .map-step p { font-size: 1.35rem; }
  .map-step em { display: inline; }
  .map-caption { margin-top: 6px; }
  .home .section-heading { margin-bottom: 30px; }
  .home .service { grid-template-columns: 32px minmax(0, 1fr); }
  .home .team-panel { margin-top: 36px; }
  .about-copy .about-principle { font-size: 1.3rem; padding-left: 16px; }
}
@media (max-width: 380px) {
  .hero-visual { padding-inline: 18px; }
  .map-step { gap: 12px; }
  .map-step p { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .button:hover, .button span, .button:focus-visible span, .button:hover span, .text-link:hover span { transform: none; }
}
@media print {
  .home, .home .about-section, .home .team-panel { background: white; }
  .hero-visual { display: none; }
  .home .hero { display: block; }
  .about-copy .about-principle, .team-panel strong { color: #122638; }
}