:root {
  color-scheme: light;
  --header-height: 91px;
  --background: #fff;
  --text: #222;
  --secondary: #505050;
  --meta: #606060;
  --link: #5369a1;
  --divider: #eee;
  --surface: #f4f4f4;
  --focus: #555;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --background: #17191c;
  --text: #e8e9ed;
  --secondary: #c3c6ce;
  --meta: #aeb3be;
  --link: #a8bfff;
  --divider: #323740;
  --surface: #282c33;
  --focus: #c3ceec;
}
.home { --accent: #E0AD00; }
.it { --accent: #C43B4D; }
.consulting { --accent: #2459B8; }
.news { --accent: #008B8B; }
.contact { --accent: #C85C32; }
html[data-theme="dark"] .it { --accent: #ef7b8b; }
html[data-theme="dark"] .consulting { --accent: #8babf5; }
html[data-theme="dark"] .news { --accent: #52c4be; }
html[data-theme="dark"] .contact { --accent: #efa271; }

* { box-sizing: border-box; }
html { scroll-snap-type: y mandatory; scroll-padding-top: var(--header-height); scrollbar-gutter: stable; }
body { margin: 0; color: var(--text); background: var(--background); font: 16px/1.6 Arial, sans-serif; }
.container { width: min(800px, calc(100% - 40px)); margin-inline: auto; }
body > header { position: sticky; top: 0; z-index: 10; background: var(--background); border-bottom: 3px solid var(--accent); }
header .container, .header-links, nav { display: flex; align-items: center; }
header .container { height: 88px; justify-content: space-between; gap: 24px; }
header .container > a { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: fit-content; max-width: 100%; height: calc(100% - 12px); padding-inline: 16px; border-radius: 10px; background: #fff; }
header img { display: block; width: 200px; max-width: 100%; }
.header-links { gap: 16px; }
nav { gap: 8px 16px; }
nav a { color: var(--text); white-space: nowrap; border-bottom: 3px solid transparent; }
nav a[class]:hover, nav a.active { border-color: var(--accent); }
nav a:hover { text-decoration: none; }
nav a.active { font-weight: bold; }
.language-switch { gap: 8px; font-size: 13px; }
.language-switch a:hover, .language-switch a.active { border-color: var(--text); }
.site-menu > summary { display: none; }
.theme-toggle { display: inline-grid; place-items: center; flex-shrink: 0; color: var(--meta); background: none; border: 0; padding: 0; width: 36px; height: 36px; cursor: pointer; }
.theme-toggle:hover { color: var(--text); }
.theme-toggle:focus-visible { outline: none; }
.theme-toggle:focus-visible svg { outline: 1px solid var(--focus); outline-offset: 2px; border-radius: 3px; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
h1, h2 { line-height: 1.3; font-weight: normal; }
h1 { font-size: 32px; }
h2 { font-size: 24px; margin: 0 0 12px; }
h1, p { margin: 0 0 16px; }
.page-heading { margin-bottom: 32px; }
.page-heading p, .direction p { color: var(--secondary); }
.directions, .contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.direction { display: flex; flex-direction: column; }
.direction h2 { font-size: 30px; border-top: 3px solid var(--accent); padding-top: 24px; }
.direction h2 a, .direction li a, article h2 a { color: var(--text); }
.direction p { min-height: 5em; }
.direction ul { list-style: none; margin: 0 0 24px; padding: 0; }
.direction li { padding-block: 8px; border-bottom: 1px solid var(--divider); }
.direction > a { margin-top: auto; }
.service-graphic { display: block; width: 100%; height: 160px; object-fit: contain; margin-bottom: 24px; }
.meta, dt { color: var(--meta); font-size: 14px; }
.service-copy, .article { max-width: 680px; }
.service-copy section { margin-bottom: 28px; scroll-margin-top: 24px; }
dl, dd { margin: 0; }
dt { margin-top: 16px; }
dd, .article { overflow-wrap: anywhere; }
.back-link { display: inline-block; margin-bottom: 24px; }
.article h2 { margin-top: 28px; }
code { background: var(--surface); padding: 2px 4px; }

main > section[data-view] {
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100dvh - var(--header-height));
  padding-block: 36px 44px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  transition: opacity 240ms ease;
}
main > section.muted { opacity: .3; }
main > section:focus-within { opacity: 1; }
html.reading-article { scroll-snap-type: none; }

@media (max-width: 820px) {
  header .container { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; gap: 12px; }
  header .container > a { grid-column: 1; grid-row: 1; min-width: 0; }
  .header-links { display: contents; }
  .language-switch { grid-column: 2; grid-row: 1; gap: 6px; }
  .language-switch a { display: flex; align-items: center; min-height: 44px; padding-inline: 2px; }
  .theme-toggle { height: 44px; }
  .site-menu { grid-column: 3; grid-row: 1; }
  .site-menu > summary { display: grid; place-items: center; width: 44px; height: 44px; font-size: 26px; line-height: 1; cursor: pointer; list-style: none; }
  .site-menu > summary::-webkit-details-marker { display: none; }
  .site-menu > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  header .section-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 2; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 16px; background: var(--background); border-bottom: 3px solid var(--accent); box-shadow: 0 6px 12px #0001; max-height: calc(100dvh - var(--header-height)); overflow-y: auto; overscroll-behavior: contain; }
  header .section-menu a { min-height: 48px; padding-block: 10px; white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 680px) {
  .directions, .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .direction p { min-height: 0; }
  .service-graphic { height: 128px; }
}
@media (prefers-reduced-motion: reduce), (scripting: none) {
  html { scroll-snap-type: none; }
  main > section[data-view] { opacity: 1; transition: none; }
}
@media (scripting: none) {
  main > section[hidden] { display: block; }
  .site-menu > summary { display: block; cursor: pointer; }
}