@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/manrope/Manrope-Variable.ttf") format("truetype");
}

/* Central RoR palette for the next sections; approved header and hero retain their colors. */
:root {
  --ror-primary: #C62828;
  --ror-primary-dark: #8E1B1B;
  --ror-text: #1D232B;
  --ror-text-muted: #4B5563;
  --ror-border: #E5E7EB;
  --ror-background: #F5F5F4;
  --ror-white: #FFFFFF;
}
:root{--ink:#25282e;--muted:#62656c;--accent:#a82036;--accent-dark:#86192b;--line:#e7e7e9;--light:#f5f5f6;font-family:Manrope,Arial,sans-serif;color:var(--ink);background:#fff;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit}img{display:block;max-width:100%}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:5px}a:hover{color:var(--accent)}.container{width:min(1440px,calc(100% - 96px));margin-inline:auto}.icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip-link{position:fixed;top:8px;left:12px;z-index:100;background:white;padding:12px;transform:translateY(-150%)}.skip-link:focus{transform:none}.topbar{background:var(--light);border-bottom:1px solid var(--line)}.topbar-inner{min-height:39px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:12px;font-weight:500;color:#555961}.contact-links{display:flex;gap:26px}.contact-links a{display:flex;align-items:center;gap:8px}.contact-links .icon{width:15px;height:15px}.topbar p{margin:0}.site-header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line);min-height:99px}.header-inner{min-height:98px;display:flex;align-items:center;justify-content:space-between;gap:34px}.brand{flex:0 0 230px}.brand img{width:230px;height:auto}.main-navigation{display:flex;align-items:center;gap:30px}.main-navigation ul{list-style:none;padding:0;margin:0;display:flex;align-items:center;gap:25px}.main-navigation li>a{font-size:13px;font-weight:650;white-space:nowrap;display:flex;align-items:center;gap:5px;min-height:44px}.main-navigation a[aria-current=page]{color:var(--accent);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:10px}.external-icon{width:13px;height:13px}.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:53px;padding:15px 22px;border:1px solid transparent;border-radius:5px;font-size:13px;font-weight:700;line-height:1.4;text-align:center}.button-primary{background:var(--accent);color:#fff}.button-primary:hover{background:var(--accent-dark);color:#fff}.button-secondary{border-color:#d4d5d8;background:#fff}.button-secondary:hover{border-color:var(--accent)}.nav-cta{min-height:46px;padding:12px 19px;white-space:nowrap}.menu-toggle{display:none}

@media(max-width:1250px){.container{width:calc(100% - 64px)}.brand{flex-basis:200px}.brand img{width:200px}.main-navigation{gap:20px}.main-navigation ul{gap:16px}.main-navigation li>a{font-size:12px}.nav-cta{font-size:12px;padding-inline:13px}.header-inner{gap:22px}}
@media(max-width:1050px){.header-inner{min-height:82px;flex-wrap:wrap}.site-header{min-height:83px}.menu-toggle:not([hidden]){display:flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink);cursor:pointer}.close-lines{display:none}.menu-toggle[aria-expanded=true] .menu-lines{display:none}.menu-toggle[aria-expanded=true] .close-lines{display:block}.main-navigation{width:100%;display:flex;flex-direction:column;align-items:stretch;gap:18px;padding:0 0 24px;max-height:calc(100dvh - 100px);overflow-y:auto}.menu-ready .main-navigation{display:none}.menu-ready .main-navigation.is-open{display:flex}.main-navigation ul{flex-direction:column;align-items:stretch;gap:0}.main-navigation li>a{font-size:15px;padding:10px 4px}.nav-cta{align-self:flex-start;font-size:13px}}
@media(max-width:760px){.container{width:calc(100% - 40px)}.topbar-inner{min-height:38px}.topbar p{display:none}.contact-links{width:100%;justify-content:space-between;gap:12px;font-size:11px}.contact-links a{gap:6px}.brand,.brand img{width:190px;flex-basis:190px}}
@media(max-width:450px){.contact-links{font-size:10px;gap:8px}.contact-links .icon{width:13px;height:13px}}


/* The grey band spans the screen; the hero stays bounded on ultrawide displays. */
.hero-band { background: var(--ror-white); }
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding: 64px clamp(48px, 5vw, 80px) 58px;
  background: var(--ror-white);
}
.hero-copy { position: relative; z-index: 2; width: 49%; max-width: 670px; }
.hero-visual { position: absolute; z-index: 0; inset: 0 0 0 34%; }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, var(--ror-white) 0%, var(--ror-white) 31%, rgba(255,255,255,.98) 39%, rgba(255,255,255,.9) 46%, rgba(255,255,255,.48) 53%, rgba(255,255,255,0) 64%);
}
.eyebrow { max-width: 340px; margin: 0 0 20px; font-size: 11px; font-weight: 800; line-height: 1.8; letter-spacing: 2px; text-transform: uppercase; }
.eyebrow::after { content: ""; display: inline-block; width: 30px; height: 2px; margin: 0 0 3px 12px; background: var(--accent); }
h1 { max-width: 580px; margin: 0 0 23px; font-size: clamp(44px, 4.3vw, 68px); font-weight: 800; line-height: 1.09; letter-spacing: -2.5px; }
.hero-description { max-width: 490px; margin: 0 0 26px; color: #4d5158; font-size: 16px; line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-actions .icon { width: 18px; height: 18px; }
.hero-actions .button-secondary { border-color: #858990; background: rgba(255,255,255,.65); }
.benefits { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; list-style: none; margin: 40px 0 0; padding: 0; }
.benefits li { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; align-content: start; }
.benefits .icon { grid-row: 1 / 3; width: 27px; height: 27px; color: var(--accent); margin-top: 2px; }
.benefits h2 { margin: 0 0 7px; font-size: 12px; font-weight: 800; line-height: 1.45; }
.benefits p { grid-column: 2; margin: 0; font-size: 11px; line-height: 1.65; color: #4d5158; }
@media (max-width: 1250px) {
  .hero { padding: 52px 32px; }
  .hero-copy { width: 51%; }
  .benefits { gap: 14px; }
  .benefits li { column-gap: 9px; }
  .hero-actions .button { padding-inline: 16px; font-size: 12px; }
}
@media (max-width: 1050px) {
  .hero-copy { width: 57%; }
  .hero::after { background: linear-gradient(90deg, var(--ror-white) 0%, var(--ror-white) 34%, rgba(255,255,255,.96) 46%, rgba(255,255,255,.86) 54%, rgba(255,255,255,0) 75%); }
  .hero-description { font-size: 15px; }
  .benefits { gap: 12px; }
  .benefits li { grid-template-columns: 24px 1fr; gap: 0 8px; }
  .benefits .icon { width: 23px; height: 23px; }
}
@media (max-width: 760px) {
  .hero { padding: 36px 20px 0; }
  .hero-copy { width: 100%; max-width: none; }
  .hero::after { display: none; }
  .hero-visual { position: relative; inset: auto; margin: -12px -20px 0; aspect-ratio: 16 / 10; }
  .hero-visual::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ror-white) 0%, rgba(255,255,255,.7) 12%, rgba(255,255,255,0) 38%); }
  .hero-visual img { object-position: center; }
  .eyebrow { font-size: 10px; letter-spacing: 1.6px; margin-bottom: 18px; }
  h1 { font-size: clamp(43px,8vw,60px); letter-spacing: -2px; }
  .hero-description { max-width: 530px; }
  .benefits { margin: 30px 0 36px; gap: 20px; }
}
@media (max-width: 450px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .benefits { grid-template-columns: 1fr; gap: 21px; }
  .benefits li { grid-template-columns: 28px 1fr; column-gap: 13px; }
  .benefits .icon { width: 27px; height: 27px; }
  .benefits h2 { font-size: 13px; margin-bottom: 4px; }
  .benefits p { font-size: 13px; }
}

/* Services overview — intentionally white after the grey hero. */
.services { padding-block: 44px 44px; background: var(--ror-background); color: var(--ror-text); scroll-margin-top: 100px; }
.services-intro { max-width: none; margin: 0 auto 32px; text-align: center; }
.services-intro .eyebrow { max-width: none; margin: 0 0 12px; color: var(--ror-text-muted); }
.services-intro .eyebrow::after { background: var(--ror-primary); }
.services-intro h2 { margin: 0; font-size: clamp(26px, 2.25vw, 36px); font-weight: 700; line-height: 1.25; letter-spacing: -1.2px; }
.services-subtitle { margin: 12px 0 0; color: var(--ror-text-muted); font-size: 17px; line-height: 1.7; }
.services-grid { display: grid; grid-auto-rows: 1fr; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.services-grid > li { display: flex; min-width: 0; }
.service-card { position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 20px; width: 100%; padding: 22px; border: 1px solid var(--ror-border); border-radius: 8px; background: var(--ror-white); }
.service-card:hover { color: var(--ror-text); border-color: var(--ror-primary); }
.service-card:focus-visible, .services-button:focus-visible { outline-color: var(--ror-primary); }
.service-icon { display: flex; align-items: center; justify-content: center; grid-row: 1 / 3; width: 62px; height: 62px; border-radius: 50%; background: #f0f1f3; color: var(--ror-primary); }
.service-icon img, .service-icon svg { display: block; width: 26px; height: 26px; }
.service-card h3 { grid-column: 2; margin: 0 0 8px; font-size: 17px; font-weight: 700; line-height: 1.4; }
.service-card p { grid-column: 2; margin: 0; padding-right: 28px; color: var(--ror-text-muted); font-size: 14px; font-weight: 400; line-height: 1.6; }
.service-link { position: absolute; right: 22px; bottom: 24px; color: var(--ror-primary); font-size: 20px; font-weight: 600; line-height: 1; white-space: nowrap; }
.services-button > span { font-size: 21px; line-height: 1; }
.services-actions { margin-top: 26px; text-align: center; }
.services-button, .about-button { color: var(--ror-primary); border-color: var(--ror-primary); background: var(--ror-white); font-size: 15px; font-weight: 600; }
.services-button:hover, .about-button:hover { color: var(--ror-primary-dark); border-color: var(--ror-primary-dark); background: var(--ror-background); }
@media (max-width: 1050px) {
  .services { padding-block: 40px 40px; scroll-margin-top: 84px; }
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .services { padding-block: 32px 36px; }
  .services-intro { margin-bottom: 30px; }
  .services-intro h2 { letter-spacing: -.7px; }
  .services-subtitle { font-size: 16px; }
  .services-grid { grid-template-columns: 1fr; gap: 18px; }
  .service-card { padding: 22px; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; }
  .service-icon { width: 52px; height: 52px; }
}

/* Local SVG masks inherit the intended red without changing the source files. */
.local-icon { display: block; width: 28px; height: 28px; flex-shrink: 0; background-color: currentColor; -webkit-mask: var(--icon-source) center / contain no-repeat; mask: var(--icon-source) center / contain no-repeat; }
.icon-beratung { --icon-source: url("/images/icons/beratung.svg"); }
.icon-security { --icon-source: url("/images/icons/security.svg"); }
.icon-server { --icon-source: url("/images/icons/server.svg"); }
.icon-stack-plus { --icon-source: url("/images/icons/stack-plus.svg"); }
.icon-app-window { --icon-source: url("/images/icons/app-window.svg"); }
.icon-wrench { --icon-source: url("/images/icons/wrench.svg"); }
.icon-clients { --icon-source: url("/images/icons/clients.svg"); }
.icon-first-aid-kit { --icon-source: url("/images/icons/first-aid-kit.svg"); }
.icon-lightbulb { --icon-source: url("/images/icons/lightbulb.svg"); }
.icon-user { --icon-source: url("/images/icons/user.svg"); }
.icon-solution { --icon-source: url("/images/icons/solution.svg"); }
.icon-shield { --icon-source: url("/images/icons/shield.svg"); }

/* Personal approach: open columns rather than another set of cards. */
.why-ror { padding-block: 40px 44px; background: var(--ror-white); color: var(--ror-text); }
.why-intro { max-width: 860px; }
.why-intro .eyebrow { max-width: none; margin-bottom: 14px; font-weight: 600; color: var(--ror-primary); }
.why-intro .eyebrow::after { background: var(--ror-primary); }
.why-intro h2 { margin: 0 0 20px; font-size: clamp(28px, 2.6vw, 38px); font-weight: 700; line-height: 1.3; letter-spacing: -.9px; }
.why-intro > p:not(.eyebrow) { margin: 0 0 10px; font-size: 16px; line-height: 1.75; color: var(--ror-text-muted); }
.values-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; padding: 0; margin: 40px 0 0; }
.value { padding: 0 24px; text-align: center; }
.value + .value { border-left: 1px solid var(--ror-border); }
.value-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 auto 16px; color: var(--ror-primary); }
.value-icon img, .value-icon svg, .value-icon .local-icon { width: 32px; height: 32px; }
.value h3 { margin: 0 0 12px; font-size: 16px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.value-lead { margin: 0 0 10px; font-size: 15px; font-weight: 600; line-height: 1.6; }
.value-description { margin: 0; color: var(--ror-text-muted); font-size: 14px; font-weight: 400; line-height: 1.75; }
@media (max-width: 1250px) {
  .value { padding-inline: 16px; }
  .value h3 { font-size: 15px; }
}
@media (max-width: 1050px) {
  .why-ror { padding-block: 36px 40px; }
  .values-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 36px; }
  .value { grid-column: span 2; padding-inline: 22px; }
  .value:nth-child(4) { grid-column: 2 / span 2; border-left: 0; }
}
@media (max-width: 760px) {
  .why-ror { padding-block: 32px 36px; }
  .why-intro h2 { letter-spacing: -.6px; }
  .values-grid { grid-template-columns: 1fr; gap: 0; margin-top: 30px; }
  .value, .value:nth-child(4) { grid-column: auto; padding: 26px 12px; }
  .value + .value { border-left: 0; border-top: 1px solid var(--ror-border); }
  .value:last-child { padding-bottom: 0; }
  .value h3 { font-size: 17px; }
  .value-lead, .value-description { max-width: 440px; margin-inline: auto; }
}

.icon-handshake { --icon-source: url("/images/icons/handshake.svg"); }
.icon-leaf { --icon-source: url("/images/icons/leaf.svg"); }
.icon-users-three { --icon-source: url("/images/icons/users-three.svg"); }

/* Portrait and personal introduction, with room for a future real photo. */
.about { padding-block: 44px; background: var(--ror-background); color: var(--ror-text); scroll-margin-top: 100px; }
.about-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 48px; align-items: start; }
.about-portrait { aspect-ratio: 4 / 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; overflow: hidden; border: 1px solid var(--ror-border); border-radius: 8px; background: var(--ror-white); color: #858b94; }
.about-portrait > .local-icon { width: 72px; height: 72px; }
.about-portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait-caption { text-align: center; color: var(--ror-text-muted); font-size: 16px; font-weight: 600; }
.portrait-caption > span { display: block; margin-top: 6px; font-size: 13px; font-weight: 400; }
.about-copy .eyebrow { margin-bottom: 14px; font-weight: 600; color: var(--ror-primary); }
.about-copy .eyebrow::after { background: var(--ror-primary); }
.about-copy h2 { margin: 0 0 20px; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.3; font-weight: 700; letter-spacing: -.9px; }
.about-text { max-width: 740px; color: var(--ror-text-muted); font-size: 16px; line-height: 1.75; }
.about-text p { margin: 0 0 14px; }
.about-text strong { font-weight: 600; color: var(--ror-text); }
.about-button { margin-top: 8px; }
.about-button > span { font-size: 21px; line-height: 1; }
.about-button:focus-visible { outline-color: var(--ror-primary); }
@media (max-width: 1050px) {
  .about { padding-block: 40px; scroll-margin-top: 84px; }
  .about-layout { gap: 30px; }
}
@media (max-width: 760px) {
  .about { padding-block: 32px 36px; }
  .about-layout { grid-template-columns: 1fr; gap: 28px; }
  .about-portrait { width: 100%; max-width: 420px; margin-inline: auto; }
  .about-copy h2 { letter-spacing: -.6px; }
}

/* Selected partnerships: a compact statement alongside the introduction. */
.partners { padding-block: 44px; background: var(--ror-white); color: var(--ror-text); scroll-margin-top: 100px; }
.partners-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 48px; align-items: center; }
.partners-copy { max-width: 800px; }
.partners-copy .eyebrow { max-width: none; margin-bottom: 14px; font-weight: 600; color: var(--ror-primary); }
.partners-copy .eyebrow::after { background: var(--ror-primary); }
.partners-copy h2 { margin: 0 0 20px; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.3; font-weight: 700; letter-spacing: -.9px; }
.partners-copy > p:not(.eyebrow) { margin: 0 0 14px; color: var(--ror-text-muted); font-size: 16px; line-height: 1.75; }
.partners-copy > p:last-child { margin-bottom: 0; }
.partners-statement { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 32px 24px; background: var(--ror-background); }
.partners-icon { flex-shrink: 0; color: var(--ror-primary); }
.partners-icon .local-icon { width: 64px; height: 64px; }
.partners-statement p { margin: 0; font-size: clamp(18px, 1.6vw, 23px); font-weight: 700; line-height: 1.5; }
@media (max-width: 1050px) {
  .partners { padding-block: 40px; scroll-margin-top: 84px; }
  .partners-layout { gap: 30px; }
  .partners-statement { gap: 16px; padding: 26px 18px; }
  .partners-icon .local-icon { width: 48px; height: 48px; }
}
@media (max-width: 760px) {
  .partners { padding-block: 32px 36px; }
  .partners-layout { grid-template-columns: 1fr; gap: 28px; }
  .partners-copy h2 { letter-spacing: -.6px; }
  .partners-statement { justify-content: flex-start; padding: 24px; }
}

/* Four clear steps, without cards or additional scripts. */
.icon-glass { --icon-source: url("/images/icons/glass.svg"); }
.icon-concept { --icon-source: url("/images/icons/concept.svg"); }
.process { padding-block: 44px; background: var(--ror-background); color: var(--ror-text); scroll-margin-top: 100px; }
.process-intro { text-align: center; margin-bottom: 36px; }
.process-intro .eyebrow { max-width: none; margin-bottom: 14px; font-weight: 600; color: var(--ror-primary); }
.process-intro .eyebrow::after { background: var(--ror-primary); }
.process-intro h2 { margin: 0; font-size: clamp(28px, 2.6vw, 38px); font-weight: 700; line-height: 1.3; letter-spacing: -.9px; }
.process-intro > p:last-child { margin: 14px 0 0; color: var(--ror-text-muted); font-size: 16px; line-height: 1.75; }
.process-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; list-style: none; padding: 0; margin: 0; }
.process-step { position: relative; min-width: 0; text-align: center; }
.process-step:not(:last-child)::after { content: ""; position: absolute; top: 28px; left: calc(50% + 54px); width: calc(100% - 76px); height: 1px; background: var(--ror-border); }
.process-symbol { position: relative; display: flex; align-items: center; justify-content: center; width: 84px; height: 56px; margin: 0 auto 20px; color: var(--ror-primary); }
.process-symbol > .local-icon { width: 36px; height: 36px; }
.process-number { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ror-primary); color: var(--ror-white); font-size: 12px; font-weight: 600; }
.process-step h3 { margin: 0 0 12px; font-size: 17px; font-weight: 700; line-height: 1.4; }
.process-step p { max-width: 300px; margin: 0 auto; color: var(--ror-text-muted); font-size: 15px; line-height: 1.75; }
@media (max-width: 1050px) {
  .process { padding-block: 40px; scroll-margin-top: 84px; }
  .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .process-step::after { display: none; }
}
@media (max-width: 760px) {
  .process { padding-block: 32px 36px; }
  .process-intro { margin-bottom: 28px; }
  .process-intro h2 { letter-spacing: -.6px; }
  .process-steps { grid-template-columns: 1fr; gap: 28px; }
  .process-symbol { margin-bottom: 14px; }
}

/* Reusable service detail layout. */
.service-detail { color: var(--ror-text); }
.service-detail .eyebrow { max-width: none; color: var(--ror-primary); font-weight: 600; }
.service-detail .eyebrow::after { background: var(--ror-primary); }
.service-detail-hero { background: var(--ror-white); padding-block: 24px 44px; }
.detail-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 36px; list-style: none; color: var(--ror-text-muted); font-size: 13px; }
.detail-breadcrumb li + li::before { content: "/"; margin-right: 10px; color: var(--ror-text-muted); }
.detail-hero-layout { display: grid; grid-template-columns: 3fr 2fr; gap: 48px; align-items: center; }
.service-detail-hero h1 { max-width: 760px; font-size: clamp(36px, 4vw, 58px); letter-spacing: -1.8px; }
.detail-lead { max-width: 740px; margin: 0 0 26px; font-size: 17px; line-height: 1.8; color: var(--ror-text-muted); }
.detail-diagram { padding: 32px; color: var(--ror-primary); text-align: center; }
.detail-diagram-core { width: 120px; height: 120px; display: grid; place-items: center; margin: 0 auto 48px; border: 1px solid var(--ror-border); border-radius: 50%; background: var(--ror-background); position: relative; }
.detail-diagram-core .local-icon { width: 64px; height: 64px; }
.detail-diagram-core::after { content: ""; position: absolute; height: 25px; width: 1px; background: var(--ror-border); top: 100%; left: 50%; }
.detail-diagram-nodes { display: flex; justify-content: space-between; position: relative; border-top: 1px solid var(--ror-border); padding-top: 24px; }
.detail-diagram-nodes .local-icon { width: 44px; height: 44px; }
.detail-diagram p { margin: 28px 0 0; color: var(--ror-text-muted); font-size: 14px; font-weight: 600; }
.detail-section { padding-block: 44px; }
.service-detail-problem, .service-detail-offers { background: var(--ror-background); }
.service-detail-cases { background: var(--ror-white); }
.detail-section-heading { max-width: 960px; margin-bottom: 28px; }
.detail-section-heading h2 { margin: 0 0 18px; font-size: clamp(27px, 2.6vw, 38px); font-weight: 700; line-height: 1.3; letter-spacing: -.7px; }
.detail-section-heading p:not(.eyebrow), .detail-emphasis p { margin: 0 0 12px; font-size: 16px; line-height: 1.75; color: var(--ror-text-muted); }
.detail-questions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; list-style: none; padding: 0; margin: 0 0 30px; }
.detail-questions li { display: flex; gap: 12px; font-size: 16px; line-height: 1.6; }
.detail-questions li > span { color: var(--ror-primary); font-weight: 700; }
.detail-emphasis { max-width: 960px; padding-left: 22px; border-left: 3px solid var(--ror-primary); }
.detail-emphasis h3 { margin: 0 0 10px; font-size: 21px; line-height: 1.4; }
.detail-offer-grid, .detail-case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
.detail-offer-grid li { display: flex; align-items: flex-start; gap: 18px; padding: 24px; background: var(--ror-white); border: 1px solid var(--ror-border); border-radius: 6px; }
.detail-offer-grid .local-icon, .detail-case-grid .local-icon { color: var(--ror-primary); width: 28px; height: 28px; }
.detail-offer-grid h3, .detail-case-grid h3 { margin: 0 0 9px; font-size: 18px; line-height: 1.4; }
.detail-offer-grid p, .detail-case-grid p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--ror-text-muted); }
.detail-case-grid li { padding: 24px; background: var(--ror-background); }
.detail-case-grid .local-icon { margin-bottom: 16px; }
@media (max-width: 1050px) {
  .detail-section { padding-block: 40px; }
  .detail-hero-layout { gap: 30px; }
  .detail-diagram { padding: 16px; }
}
@media (max-width: 760px) {
  .service-detail-hero { padding-block: 20px 36px; }
  .detail-section { padding-block: 32px 36px; }
  .detail-hero-layout, .detail-questions, .detail-offer-grid, .detail-case-grid { grid-template-columns: 1fr; }
  .detail-breadcrumb ol { margin-bottom: 26px; }
  .detail-diagram { width: 100%; max-width: 340px; margin-inline: auto; }
  .detail-offer-grid li, .detail-case-grid li { padding: 22px; }
}

/* Reusable before/after example, ready for photographs. */
.service-detail-example { background: var(--ror-white); }
.before-after-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.before-after-item { min-width: 0; margin: 0; }
.before-after-placeholder, .before-after-item > img { width: 100%; aspect-ratio: 4 / 3; border-radius: 6px; }
.before-after-item > img { object-fit: cover; }
.before-after-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--ror-border); background: var(--ror-background); color: var(--ror-text-muted); }
.before-after-placeholder .local-icon { width: 48px; height: 48px; }
.before-after-placeholder > span:not(.local-icon) { color: var(--ror-text); font-size: 18px; font-weight: 700; }
.before-after-placeholder small { font-size: 13px; }
.before-after-item figcaption { margin-top: 16px; color: var(--ror-text-muted); font-size: 15px; line-height: 1.75; }
@media (max-width: 760px) {
  .before-after-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* Optional section tones and compact copy beside a project photograph. */
.detail-section-white { background: var(--ror-white); }
.detail-section-muted { background: var(--ror-background); }
.detail-section-muted .detail-case-grid li { background: var(--ror-white); }
.detail-example-copy { align-self: center; }
.detail-example-copy h3 { margin: 0 0 16px; font-size: 21px; line-height: 1.4; }
.detail-example-copy ul { margin: 0; padding-left: 22px; color: var(--ror-text-muted); font-size: 16px; line-height: 1.75; }
.detail-example-copy li + li { margin-top: 8px; }

/* Shared three-step process and compact partner note on detail pages. */
.process-steps-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.detail-partner-note { margin-top: 32px; }
@media (max-width: 760px) {
  .process-steps-three { grid-template-columns: 1fr; }
}

/* Readable legal content within the existing responsive container. */
.legal-content { max-width: 760px; overflow-wrap: anywhere; }
.legal-heading { padding-block: 0 28px; }
.legal-heading h1 { margin-bottom: 0; }
.legal-content section + section { margin-top: 28px; }
.legal-content h2 { margin: 0 0 12px; font-size: 21px; line-height: 1.4; font-weight: 700; }
.legal-content section p, .privacy-chapter p { margin: 0 0 12px; color: var(--ror-text-muted); font-size: 16px; line-height: 1.75; }
.legal-content a { color: var(--ror-primary); text-decoration: underline; text-underline-offset: 3px; }
.legal-content a:hover { color: var(--ror-primary-dark); }
.legal-content ul, .legal-content ol { padding-left: 24px; color: var(--ror-text-muted); font-size: 16px; line-height: 1.75; }
.legal-content li + li { margin-top: 4px; }
.legal-content section[id] { scroll-margin-top: 120px; }
.legal-toc { margin-bottom: 32px; }
.legal-date { color: var(--ror-text-muted); font-size: 14px; margin: 12px 0 0; }
.privacy-page .legal-toc { margin-bottom: 0; }
.privacy-chapter { scroll-margin-top: 120px; }
.privacy-chapter .legal-content > :last-child { margin-bottom: 0; }

/* Contact form: shared typography, palette and mobile breakpoint. */
.contact-intro, .contact-hint { color: var(--ror-text-muted); line-height: 1.75; }
.contact-intro { margin: 0 0 28px; font-size: 16px; }
.contact-hint { font-size: 14px; margin: 18px 0; }
.contact-form { position: relative; }
.contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
.contact-field { min-width: 0; }
.contact-field-wide { grid-column: 1 / -1; }
.contact-field label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; }
.contact-field label span { color: var(--ror-text-muted); font-weight: 400; }
.contact-field input, .contact-field textarea { display: block; width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--ror-border); border-radius: 5px; background: var(--ror-white); color: var(--ror-text); font: inherit; font-size: 16px; line-height: 1.5; }
.contact-field textarea { resize: vertical; min-height: 190px; }
.contact-field input:focus, .contact-field textarea:focus { outline: 2px solid var(--ror-primary); outline-offset: 2px; }
.contact-field [aria-invalid="true"] { border-color: var(--ror-primary); }
.contact-error { margin: 8px 0 0; color: var(--ror-primary-dark); font-size: 14px; line-height: 1.6; }
.contact-status { margin: 20px 0; font-size: 16px; line-height: 1.75; }
.contact-status:empty { margin: 0; }
.contact-status:focus { outline: 2px solid var(--ror-primary); outline-offset: 4px; }
.contact-submit { background: var(--ror-primary); color: var(--ror-white); cursor: pointer; }
.contact-submit:hover { background: var(--ror-primary-dark); }
.contact-submit:disabled { opacity: .6; cursor: not-allowed; }
.contact-retry { display: block; border: 0; background: none; color: var(--ror-primary); text-decoration: underline; text-underline-offset: 3px; margin-top: 16px; padding: 12px 0; cursor: pointer; }
.contact-retry[hidden] { display: none; }
.contact-honeypot { position: absolute; left: -10000px; top: 0; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 760px) {
  .contact-fields { grid-template-columns: 1fr; gap: 20px; }
}

/* Closing invitation and shared footer. */
.closing-cta { position: relative; isolation: isolate; overflow: hidden; padding-block: 76px; color: var(--ror-white); background: linear-gradient(110deg, var(--ror-primary), var(--ror-primary-dark)); }
.closing-cta-network { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; color: var(--ror-white); opacity: .15; }
.cta-network-lines { fill: none; stroke: currentColor; stroke-width: 1; }
.cta-network-nodes { fill: currentColor; }
.closing-cta-layout { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.closing-cta h2 { margin: 0 0 10px; font-size: clamp(23px, 2.2vw, 30px); font-weight: 700; line-height: 1.35; }
.closing-cta p { margin: 0; font-size: 16px; line-height: 1.7; }
.closing-cta-button { flex-shrink: 0; background: var(--ror-white); color: var(--ror-primary-dark); font-size: 15px; font-weight: 600; }
.closing-cta-button:hover { background: var(--ror-background); color: var(--ror-primary-dark); }
.closing-cta-button:focus-visible { outline-color: var(--ror-white); }
.closing-cta-button > span { font-size: 21px; line-height: 1; }
.site-footer { padding-top: 48px; background: var(--ror-text); color: var(--ror-border); font-size: 14px; line-height: 1.75; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr .9fr 1.2fr; gap: 44px; padding-bottom: 36px; }
.footer-grid > * { min-width: 0; }
.footer-logo { display: inline-block; width: 240px; max-width: 100%; padding: 12px; border-radius: 4px; background: var(--ror-white); }
.footer-logo img { width: 100%; height: auto; }
.footer-brand p { max-width: 300px; margin: 12px 0 0; }
.footer-brand .footer-tagline { color: var(--ror-white); font-weight: 600; }
.site-footer h2 { margin: 0 0 16px; color: var(--ror-white); font-size: 16px; font-weight: 700; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: 7px; }
.site-footer a:hover { color: var(--ror-white); text-decoration: underline; text-underline-offset: 4px; }
.site-footer a:focus-visible { outline-color: var(--ror-white); }
.footer-contact address { display: flex; flex-direction: column; gap: 7px; font-style: normal; overflow-wrap: anywhere; }
.footer-contact-row { display: flex; align-items: flex-start; gap: 10px; }
.footer-contact-row > .local-icon { width: 18px; height: 18px; margin-top: 3px; }
.icon-phone { --icon-source: url("/images/icons/phone.svg"); }
.icon-mail { --icon-source: url("/images/icons/mail.svg"); }
.icon-map-pin { --icon-source: url("/images/icons/map-pin.svg"); }
.footer-bottom { padding-block: 20px; border-top: 1px solid var(--ror-text-muted); font-size: 13px; }
.footer-bottom p { margin: 0; }
@media (max-width: 1050px) {
  .closing-cta-layout { gap: 24px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
@media (max-width: 760px) {
  .closing-cta { padding-block: 52px; }
  .closing-cta-layout { flex-direction: column; align-items: flex-start; }
  .closing-cta-button { max-width: 100%; }
  .site-footer { padding-top: 36px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}