/* Sybernetic v3 — service pages, detail pages, contact and "Jak pracujemy". */
.sy-crumbs { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; margin: -10px 0 12px; color: var(--tx-3); font: 500 var(--t-sm)/1.4 var(--ff-display); }
.sy-crumbs a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--tx-2); text-decoration: none; }
.sy-crumbs a:hover { color: var(--ac-300); text-decoration: underline; }
.sy-crumbs [aria-current] { color: var(--tx-2); }

/* Title row: short heading and one sentence, the drawing beside it */
.sy-svc-hero { position: relative; padding-block: clamp(28px, 3vw + 12px, 64px) clamp(40px, 3vw + 20px, 72px); overflow: hidden; }
.sy-svc-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 70% at 80% 40%, rgba(168, 213, 178, .09), transparent 70%); }
.sy-svc-hero__grid { position: relative; display: grid; gap: 24px; align-items: center; }
@media (min-width: 960px) { .sy-svc-hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px; } }
.sy-svc-hero h1 { font-size: clamp(2rem, 1.25rem + 3.2vw, 3.75rem); }
.sy-svc-hero .sy-lead { margin-top: 18px; }
.sy-svc-hero .sy-cta { margin-top: 28px; }
.sy-svc-hero__art { min-width: 0; justify-self: center; width: 100%; max-width: 400px; }
/* The service's symbol, still, in a quiet panel */
.sy-svc-hero__panel { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--r-xl); background: radial-gradient(60% 60% at 50% 45%, rgba(168, 213, 178, .07), transparent 70%), var(--bg1); }
.sy-svc-hero__panel .sy-symbol { width: 192px; height: 192px; }
@media (max-width: 959px) { .sy-svc-hero__art { max-width: 420px; justify-self: start; } .sy-svc-hero__panel { aspect-ratio: 16 / 9; } .sy-svc-hero__panel .sy-symbol { width: 128px; height: 128px; } }
.sy-svc-areas { list-style: none; display: grid; gap: 10px; margin: 22px 0 0; padding: 0; }
@media (min-width: 560px) { .sy-svc-areas { grid-template-columns: 1fr 1fr; } }
.sy-svc-areas a { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--bg1); color: var(--tx-2); font: 500 .9375rem/1.35 var(--ff-display); text-decoration: none; transition: border-color var(--dur-1), background-color var(--dur-1); }
.sy-svc-areas a strong { color: var(--tx); font-weight: 660; }
.sy-svc-areas a:hover { border-color: var(--ac-400); background: var(--bg2); color: var(--tx-2); }

/* Form band */
.sy-wrap--form { max-width: calc(980px + 2 * var(--gutter)); }

/* Details: heading column and the list of expandable blocks */
.sy-details-grid { display: grid; gap: 24px; }
@media (min-width: 1024px) { .sy-details-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; } .sy-details-grid > .sy-head { position: sticky; top: calc(var(--hdr-h) + 32px); align-self: start; } }
.sy-details-grid .sy-head .sy-small { margin-top: 16px; }
.sy-detail-list { min-width: 0; }
.sy-faq-title { margin: 40px 0 6px; font: 600 var(--t-xl)/1.2 var(--ff-head); }
.sy-explain { display: grid; gap: 22px; }
.sy-explain article { padding-left: 16px; border-left: 2px solid var(--line-2); }
.sy-explain h4 { margin: 2px 0 6px; font: 600 1.0625rem/1.3 var(--ff-head); color: var(--tx); }
.sy-explain p { margin: 0 0 6px; }
.sy-explain__label { color: var(--ac-300); font: 600 .875rem/1.3 var(--ff-display); }
.sy-explain__note { color: var(--tx-3); font-size: .9688rem; }
.sy-numbered { margin: 0; padding-left: 1.4em; display: grid; gap: 10px; }
.sy-numbered li::marker { color: var(--ac-400); font-family: var(--ff-display); font-weight: 700; }
.sy-deflist { display: grid; gap: 16px; margin: 0; }
.sy-deflist dt { color: var(--tx); font: 600 1rem/1.35 var(--ff-display); }
.sy-deflist dt span { color: var(--tx-3); font-weight: 500; }
.sy-deflist dd { margin: 4px 0 0; }
.sy-linklist { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.sy-linklist--cols { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 20px; }
.sy-linklist a { display: inline-flex; min-height: 44px; align-items: center; color: var(--ac-300); font: 500 .9688rem/1.35 var(--ff-display); }
.sy-figure { margin: 0 0 14px; }
.sy-figure img { width: 100%; height: auto; border-radius: var(--r-md); }
.sy-figure figcaption, .sy-gallery figcaption { margin-top: 8px; color: var(--tx-3); font: 500 .875rem/1.4 var(--ff-display); }
.sy-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 12px; }
.sy-gallery figure { margin: 0; }
.sy-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); }

/* Other services */
.sy-related__title { margin-bottom: 18px; font: 600 var(--t-xl)/1.2 var(--ff-head); }
.sy-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 720px) { .sy-related ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sy-related a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 0 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg1); color: var(--tx); font: 600 1.0625rem/1.25 var(--ff-display); text-decoration: none; transition: border-color var(--dur-1), background-color var(--dur-1); }
.sy-related a > svg { color: var(--ac-300); flex: none; transition: transform var(--dur-2) var(--ease-out); }
.sy-related a:hover { border-color: var(--ac-400); background: var(--bg2); color: var(--tx); }
.sy-related a:hover > svg { transform: translateX(4px); }
/* Each link carries its service's symbol, small; it draws itself like the large ones. */
.sy-related__sym { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: rgba(168, 213, 178, .06); }
.sy-related__sym .sy-symbol { width: 32px; height: 32px; }
.sy-related__t { flex: 1; min-width: 0; }

/* Notes under a title */
.sy-svc-note { margin: 18px 0 0; padding: 12px 14px; border-left: 3px solid var(--ac-400); background: var(--bg1); border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--tx-2); font: 400 1rem/1.5 var(--ff-text); max-width: 40rem; }
.sy-svc-note strong { color: var(--tx); font-family: var(--ff-display); font-weight: 660; }
.sy-svc-hero--detail .sy-svc-hero__copy { max-width: 52rem; }
.sy-svc-hero--detail .sy-note { margin-top: 20px; max-width: 46rem; }
.sy-svc-hero--detail .sy-note p { margin: 4px 0 0; }

/* Contact */
.sy-contact-hero { padding-bottom: 8px; }
.sy-contact-hero .sy-lead { max-width: 40rem; }
.sy-contact-grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1024px) { .sy-contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; } }
.sy-channels { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; }
.sy-channels a { display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg1); color: var(--tx); text-decoration: none; transition: border-color var(--dur-1), background-color var(--dur-1); }
.sy-channels a:hover { border-color: var(--ac-400); background: var(--bg2); color: var(--tx); }
.sy-channels svg { color: var(--ac-300); flex: none; }
.sy-channels span { display: grid; gap: 2px; min-width: 0; }
.sy-channels small { color: var(--tx-2); font: 500 .875rem/1.2 var(--ff-display); }
.sy-channels strong { font: 600 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.2 var(--ff-head); overflow-wrap: anywhere; }
.sy-contact-block { padding: 22px 0; border-top: 1px solid var(--line); }
.sy-contact-block h2 { margin-bottom: 12px; font: 600 1.125rem/1.3 var(--ff-head); }
.sy-contact-block address { font: 500 1.0625rem/1.55 var(--ff-display); font-style: normal; color: var(--tx); }
.sy-contact-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 16px 0 12px; }
.sy-hours { color: var(--tx-2); font: 500 1rem/1.55 var(--ff-display); }
.sy-hours dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 6px 0; }
.sy-hours dl div { display: contents; }
.sy-hours dt { color: var(--tx); }
.sy-hours dd { margin: 0; font-variant-numeric: tabular-nums; }
.sy-hours .sybe-hours__accent { color: var(--ac-300); margin: 0 0 4px; }
.sy-hours .sybe-hours__note { margin: 6px 0 0; }

/* "Jak pracujemy" */
.sy-how-photo { margin: 0; }
.sy-how-photo img { width: 100%; height: auto; max-height: min(620px, 70vh); object-fit: cover; object-position: 50% 30%; border-radius: var(--r-lg); }
.sy-how-photo figcaption { margin-top: 10px; color: var(--tx-3); font: 500 .875rem/1.4 var(--ff-display); }
.sy-who { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: center; max-width: 52rem; }
@media (min-width: 720px) { .sy-who { grid-template-columns: 140px 1fr; gap: 32px; } }
.sy-who__portrait { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 12%; border-radius: 50%; background: radial-gradient(70% 70% at 50% 40%, rgba(168, 213, 178, .3), var(--bg1)); border: 1px solid var(--line-2); }
.sy-who h2 { font-size: var(--t-xl); margin-bottom: 8px; }
.sy-who p { margin: 0 0 10px; color: var(--tx-2); }
.sy-photo-pair { display: grid; gap: 16px; }
@media (min-width: 720px) { .sy-photo-pair { grid-template-columns: 1fr 1fr; } }
.sy-photo-pair figure { margin: 0; }
.sy-photo-pair img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-lg); }
.sy-photo-pair figcaption { margin-top: 10px; color: var(--tx-2); font: 500 .9375rem/1.4 var(--ff-display); }