@charset "UTF-8";
:root {
  --navy:#050d22;
  --navy-light:#101b32;
  --gold:#efc34d;
  --cream:#f2f1eb;
  --ink:#142238;
  --muted:#acb6c8;
  --border:#b8c4da30;
  --rule:#14223826;
  --focus-ring:#efc34d
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--navy);
  color:#f7f7f2;
  font:17px/1.7 Manrope,Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
button,input,textarea,select {
  font:inherit
}
button,a {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible {
  outline:3px solid var(--focus-ring);
  outline-offset:5px
}
img {
  max-width:100%;
  display:block
}
h1,h2,h3,p {
  margin-top:0
}
h1,h2,h3 {
  font-size:23px;
  margin-bottom:16px
}
h1 {
  font-size:clamp(50px,6vw,88px);
  margin-bottom:28px
}
h2 {
  font-size:clamp(30px,3.1vw,42px);
  margin-bottom:24px
}
h3 {
  font-size:29px;
  margin-bottom:16px
}
.wrap {
  width:min(1280px,calc(100% - 96px));
  margin-inline:auto
}
.gold {
  color:var(--gold)
}
.muted {
  color:var(--muted)
}
.eyebrow {
  font-size:13px;
  line-height:1.5;
  letter-spacing:.12em;
  font-weight:600;
  margin-bottom:24px
}
.lead {
  font-size:19px;
  line-height:1.75;
  max-width:640px;
  color:#bbc4d3
}
.skip {
  position:absolute;
  top:-100px;
  z-index:99;
  padding:12px;
  background:var(--gold);
  color:var(--navy)
}
.skip:focus {
  top:0
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:45px;
  padding:16px 23px;
  background:var(--gold);
  color:var(--navy);
  font-size:17px;
  font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .2s
}
.button:hover {
  background:#ffdb73
}
.button span {
  font-size:25px;
  font-weight:400;
  line-height:1
}
.text-link {
  font-size:17px;
  border-bottom:1px solid #738199;
  padding:10px 0
}
.text-link:hover {
  color:var(--gold)
}
.blueprint {
  min-width:0;
  position:relative
}
.blueprint>svg {
  display:block;
  width:100%;
  height:auto;
  overflow:visible
}
.section {
  padding-block:72px
}
.light {
  --focus-ring:#795b12;
  background:var(--cream);
  color:var(--ink)
}
.light .eyebrow {
  color:#66717a
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  padding-bottom:40px
}
.section-heading h2 {
  margin:0
}
.heading-dot {
  color:#ac8120
}
.section-heading>p {
  font-size:17px;
  color:#63707a;
  margin:0;
  line-height:1.7
}
.under-link {
  display:inline-flex;
  gap:35px;
  align-items:center;
  border-bottom:1px solid #a98a3a;
  padding-block:10px;
  font-size:17px;
  margin-top:22px
}
.under-link:hover {
  color:#927020
}
.service-context {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:32px 70px;
  margin:38px 0 30px;
  padding-block:28px;
  border-block:1px solid var(--rule)
}
.service-context h2 {
  color:#5f6d7d;
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:0 0 10px
}
.service-context p {
  margin:0;
  font-size:20px;
  line-height:1.55
}
.service-context>p {
  color:#526171;
  font-size:16px;
  max-width:480px
}
.footer {
  padding-block:55px 25px
}
.footer-top {
  display:grid;
  grid-template-columns:1fr 1.2fr .55fr;
  gap:60px;
  padding-bottom:42px
}
.footer-brand {
  display:block;
  width:180px;
  margin-bottom:12px
}
.footer-brand img {
  width:100%;
  height:auto;
  mix-blend-mode:lighten
}
.footer-nav>div {
  display:grid;
  gap:2px
}
.footer-nav a {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  font-size:15px;
  min-height:40px
}
.footer-nav a span {
  color:#95a4b9
}
.footer p {
  color:var(--muted);
  font-size:15px;
  line-height:1.8;
  margin-bottom:0
}
.footer .eyebrow {
  font-size:13px;
  margin-bottom:15px
}
.footer-email {
  font-size:26px;
  display:inline-block;
  margin-bottom:18px;
  overflow-wrap:anywhere;
  letter-spacing:-.03em
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:15px;
  border-top:1px solid var(--border);
  padding-top:22px;
  font-size:13px;
  color:#a4aec2
}
.footer a:hover {
  color:var(--gold)
}
.page-intro {
  padding-block:48px 52px;
  position:relative
}
.page-intro .eyebrow {
  color:#c7b477;
  margin-bottom:18px
}
.page-intro h1 {
  font-family:"Barlow Condensed",Arial,sans-serif;
  font-size:clamp(52px,5.6vw,76px);
  line-height:1.06;
  max-width:1000px;
  margin-bottom:20px;
  letter-spacing:-.012em
}
.page-intro .lead {
  margin-bottom:0;
  max-width:710px
}
.entry-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:32px
}
.entry-card {
  border:1px solid #d8dedf;
  background:#fff;
  min-width:0
}
.entry-card>img {
  width:100%;
  aspect-ratio:1.45;
  object-fit:cover
}
.entry-copy {
  padding:26px
}
.entry-copy h2,.entry-copy h3 {
  font-size:26px;
  line-height:1.2
}
.entry-copy p {
  color:#63707a;
  font-size:17px
}
.entry-copy .eyebrow {
  font-size:13px;
  margin-bottom:16px
}
.entry-copy summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  cursor:pointer;
  list-style:none;
  border-top:1px solid var(--rule);
  font-size:15px;
  font-weight:600;
  padding:15px 0 0;
  min-height:44px;
  color:var(--ink)
}
.entry-copy summary::-webkit-details-marker {
  display:none
}
.entry-copy summary:hover {
  color:#795b12
}
.detail-toggle {
  position:relative;
  display:block;
  flex:none;
  width:24px;
  height:24px;
  border:1px solid #b6bec3
}
.detail-toggle:before,.detail-toggle:after {
  content:"";
  position:absolute;
  background:currentColor
}
.detail-toggle:before {
  left:6px;
  right:6px;
  top:10px;
  height:2px
}
.detail-toggle:after {
  top:6px;
  bottom:6px;
  left:10px;
  width:2px
}
.entry-copy details[open] .detail-toggle:after {
  display:none
}
.prose {
  font-size:18px;
  line-height:1.9
}
.entry-copy .prose {
  font-size:17px;
  padding-top:20px
}
.empty-state {
  padding:32px;
  max-width:900px;
  border-left:3px solid #aa852b;
  background:#fff
}
.empty-symbol {
  font-size:80px;
  line-height:1;
  color:#a98a3a
}
.empty-state h2 {
  font-size:clamp(25px,3vw,34px);
  line-height:1.25;
  margin:0
}
.about-grid {
  display:grid;
  grid-template-columns:.8fr 1.3fr;
  align-items:start;
  gap:80px
}

.about-grid h2 {
  font-size:32px;
  line-height:1.2
}
.about-grid .prose {
  color:#5d6b78
}
.contact-layout {
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.25fr);
  grid-template-rows:auto 1fr;
  gap:32px 72px;
  align-items:start
}
.contact-details .eyebrow {
  margin-bottom:18px
}
.big-email {
  font-size:clamp(25px,2.7vw,35px);
  letter-spacing:-.04em;
  overflow-wrap:anywhere;
  line-height:1.3;
  display:block;
  padding-bottom:24px;
  border-bottom:1px solid var(--rule)
}
.big-email span {
  color:#a98a3a
}
.phone-block {
  margin-top:30px
}
.phone-block .eyebrow {
  margin-bottom:10px
}
.phone {
  font-size:30px;
  line-height:1.3
}
.demo-note {
  font-size:14px;
  color:#7c6223;
  margin-top:16px
}
.company-data {
  padding-top:28px;
  border-top:1px solid var(--rule)
}
.company-data h2 {
  font-size:21px;
  line-height:1.35
}
.company-data dl {
  font-size:16px;
  line-height:1.8
}
.company-data dt {
  font-size:13px;
  color:#63707a;
  margin-top:16px
}
.company-data dd {
  margin:0
}
.contact-form {
  background:#fff;
  border:1px solid #d5dbde;
  border-top:2px solid #aa8b3e;
  padding:32px;
  scroll-margin-top:30px
}
.form-heading h2 {
  font-size:27px;
  letter-spacing:-.04em;
  margin-bottom:12px
}
.form-heading p {
  font-size:17px;
  color:#5f6d7d;
  margin-bottom:30px
}
.contact-fields {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px
}
.contact-fields label {
  display:block;
  font-size:15px;
  margin-bottom:8px;
  color:#26394f
}
.contact-fields input,.contact-fields textarea,.contact-fields select {
  width:100%;
  min-width:0;
  border:1px solid #9ca8b5;
  border-radius:3px;
  background:#fcfcfa;
  color:var(--ink);
  padding:12px 14px;
  font-size:17px;
  transition:border-color .15s,background .15s
}
.contact-fields textarea {
  resize:vertical;
  min-height:165px
}
.contact-fields .wide {
  grid-column:1/-1
}
.form-privacy {
  font-size:14px;
  line-height:1.65;
  color:#526171;
  margin:22px 0
}
.website-field {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%)
}
.form-feedback {
  padding:16px 18px;
  background:#e6eaf0;
  border-left:3px solid #8fa4bf;
  font-size:16px;
  margin-bottom:24px
}
.form-feedback.success {
  background:#e2eee5;
  border-color:#4b8560;
  color:#264e34
}
.form-feedback.error {
  background:#ffebe0;
  border-color:#b46a3a;
  color:#874623
}
.form-feedback ul {
  margin:8px 0 0;
  padding-left:20px
}
.preview-notice {
  --focus-ring:#142238;
  padding:10px 24px;
  text-align:center;
  background:var(--gold);
  color:var(--navy);
  font-size:14px
}
.preview-notice a {
  text-decoration:underline;
  margin-left:12px
}
@media(max-width:1100px) {
  .wrap {
    width:calc(100% - 64px)
  }
  .button {
    gap:25px
  }
  .contact-layout {
    gap:45px
  }
  .footer-top {
    gap:35px
  }
  .footer-email {
    font-size:23px
  }
}
@media(max-width:900px) {
  .section {
    padding-block:65px
  }
  .section-heading {
    gap:25px
  }
  .section-heading>p {
    max-width:270px
  }
  .contact-layout {
    grid-template-columns:1fr;
    gap:50px
  }
  .contact-details .company-data {
    display:none
  }
  .contact-details .company-data dl {
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    gap:0 24px
  }
  .contact-details .company-data dt {
    grid-row:1;
    margin-top:0
  }
  .contact-details .company-data dd {
    grid-row:2
  }
  .contact-details .big-email {
    max-width:480px
  }
  .contact-form {
    max-width:760px
  }
  .footer-top {
    grid-template-columns:1fr 1.2fr
  }
  .footer-nav {
    grid-column:1/-1;
    border-top:1px solid var(--border);
    padding-top:20px
  }
  .footer-nav>div {
    display:flex;
    flex-wrap:wrap;
    gap:4px 30px
  }
  .footer-nav a {
    min-height:44px;
    gap:12px
  }
  .service-context {
    gap:24px
  }
  .about-grid {
    gap:55px
  }

}
@media(max-width:620px) {
  .wrap {
    width:calc(100% - 40px)
  }
  .button {
    font-size:16px;
    padding:15px 19px;
    gap:30px
  }
  .text-link {
    font-size:16px
  }
  .blueprint {
    width:min(500px,100%);
    align-self:center
  }
  .section {
    padding-block:50px
  }
  .section-heading {
    display:block;
    padding-bottom:28px
  }
  .section-heading h2 {
    font-size:39px;
    margin-bottom:20px
  }
  .section-heading>p {
    max-width:none;
    font-size:17px
  }
  .footer {
    padding-block:40px 24px
  }
  .footer-top {
    grid-template-columns:1fr;
    gap:25px;
    padding-bottom:30px
  }
  .footer-email {
    font-size:27px;
    margin-bottom:15px
  }
  .footer-bottom {
    font-size:13px;
    gap:14px
  }
  .footer-bottom>span:first-child {
    width:100%
  }
  .page-intro {
    padding-block:45px 50px
  }
  .page-intro h1 {
    font-size:47px
  }
  .page-intro .lead {
    font-size:18px
  }
  .empty-state {
    gap:22px
  }
  .empty-symbol {
    font-size:55px
  }
  .empty-state h2 {
    font-size:31px
  }
  .empty-state .under-link {
    font-size:16px
  }
  .entry-grid {
    grid-template-columns:1fr;
    gap:25px
  }
  .entry-copy h2 {
    font-size:30px
  }
  .about-grid {
    grid-template-columns:1fr;
    gap:40px
  }

  .about-grid h2 {
    font-size:34px
  }
  .about-grid .prose {
    font-size:17px
  }
  .contact-layout {
    gap:36px
  }
  .big-email {
    font-size:30px
  }
  .company-data h2 {
    font-size:23px
  }
  .contact-details .company-data dl {
    display:block
  }
  .contact-details .company-data dt {
    margin-top:16px
  }
  .contact-fields {
    grid-template-columns:1fr;
    gap:20px
  }
  .contact-fields .wide {
    grid-column:auto
  }
  .contact-form {
    padding-top:26px
  }
  .form-heading h2 {
    font-size:29px
  }
  .form-heading p {
    font-size:16px
  }
  .contact-fields input,.contact-fields textarea,.contact-fields select {
    font-size:16px
  }
  .form-privacy {
    font-size:14px
  }
  .contact-form .button {
    width:100%
  }
  .preview-notice {
    font-size:13px;
    padding:10px 20px
  }
  .preview-notice a {
    white-space:nowrap
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    transition:none!important;
    animation:none!important
  }
}
/* Direct system callouts stay legible at every scale and link to the offer. */
.architectural-model {
  position:relative;
  align-self:center;
  isolation:isolate;
  margin-bottom:44px
}
.architectural-model>svg {
  display:block;
  width:100%;
  height:auto
}
.leader-halo {
  fill:none;
  stroke:#050d22;
  stroke-width:4;
  stroke-opacity:.75;
  vector-effect:non-scaling-stroke;
  stroke-linejoin:round
}
.model-leader {
  fill:none;
  stroke-width:1.3;
  stroke-opacity:.95;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke
}
.leader-target {
  fill:#071329;
  stroke-width:1.4;
  vector-effect:non-scaling-stroke
}
.model-label {
  position:absolute;
  display:flex;
  align-items:center;
  gap:10px;
  max-width:46%;
  padding:10px 12px;
  background:#0b1830;
  border:1px solid #7e93b055;
  border-left:3px solid var(--callout);
  color:#f5f7fb;
  font-size:16px;
  line-height:1.3;
  font-weight:600;
  letter-spacing:0;
  box-shadow:0 5px 14px #02071555;
  transition:background .2s,border-color .2s
}
.model-label:hover {
  background:#172940;
  border-color:var(--callout)
}
.model-label:focus-visible {
  outline:3px solid #fff;
  outline-offset:4px
}
.callout-mark {
  width:7px;
  height:7px;
  flex:none;
  background:var(--callout);
  box-shadow:0 0 0 3px #8da6c118
}
.callout-arrow {
  font-size:19px;
  color:var(--callout);
  margin-left:2px;
  font-weight:400
}
.label-lightning {
  --callout:#9ed6e1;
  left:2.9%;
  top:0
}
.label-solar {
  --callout:#9cc7ff;
  right:2.9%;
  top:0
}
.label-electrical {
  --callout:#efc34d;
  left:2.9%;
  top:94%
}
.label-battery {
  --callout:#b8d8a7;
  right:2.9%;
  top:80%
}
.architectural-model:has(.label-electrical:is(:hover,:focus-visible)) .leader-electrical .model-leader,.architectural-model:has(.label-solar:is(:hover,:focus-visible)) .leader-solar .model-leader,.architectural-model:has(.label-battery:is(:hover,:focus-visible)) .leader-battery .model-leader,.architectural-model:has(.label-lightning:is(:hover,:focus-visible)) .leader-lightning .model-leader {
  stroke-width:2.2
}
.energy-flow {
  stroke-dasharray:3 22;
  opacity:0
}
.has-motion .energy-flow {
  opacity:.9;
  animation:energy-route 5s linear infinite
}
.has-motion .charge-cell {
  animation:battery-charge 5s ease-in-out infinite
}
.has-motion .cell-2 {
  animation-delay:.6s
}
.has-motion .cell-3 {
  animation-delay:1.2s
}
@keyframes energy-route {
  to {
    stroke-dashoffset:-125
  }
}
@keyframes battery-charge {
  0%,100% {
    opacity:.45
  }
  50% {
    opacity:1
  }
}
@media(max-width:1100px) {
  .model-label {
    font-size:14px;
    gap:7px;
    padding:8px 9px
  }
  .callout-arrow {
    font-size:17px
  }
}
@media(max-width:620px) {
  .architectural-model {
    width:100%;
    margin-top:5px
  }
  .model-label {
    font-size:13px;
    line-height:1.25;
    gap:6px;
    padding:7px 8px
  }
  .callout-mark {
    width:5px;
    height:5px
  }
  .callout-arrow {
    font-size:16px
  }
  .label-electrical {
    top:94%
  }
  .label-battery {
    top:80%
  }
}
@media(prefers-reduced-motion:reduce) {
  .energy-flow {
    display:none
  }
  .charge-cell {
    animation:none!important
  }
}
/* EL-HUB identity: firm typography, useful contrast, and a consistent icon scale. */
.header {
  min-height:112px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid var(--border)
}
.brand-lockup {
  display:flex;
  align-items:center;
  gap:22px;
  flex:none
}
.brand-signature {
  margin:0;
  padding-left:22px;
  border-left:1px solid #526176;
  line-height:1.5;
  white-space:nowrap
}
.brand-signature span,.brand-signature strong {
  display:block
}
.brand-signature span {
  color:var(--gold);
  font-size:13px
}
.brand-signature strong {
  color:#e5eaf2;
  font-size:16px;
  font-weight:600
}
.brand {
  width:220px;
  height:100px;
  flex:none;
  display:block
}
.logo-crop {
  width:100%;
  height:100%;
  overflow:hidden;
  display:block;
  position:relative
}
.logo-crop img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  mix-blend-mode:lighten
}
.header nav {
  display:flex;
  align-items:center;
  gap:4px;
  font-size:17px;
  font-weight:600
}
.header nav>a {
  padding:13px 15px;
  position:relative;
  transition:color .2s,background .2s
}
.header nav>a:hover,.header nav>a[aria-current] {
  color:#ffdb7b
}
.header nav>a:after {
  content:"";
  position:absolute;
  bottom:4px;
  left:15px;
  right:15px;
  height:2px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s
}
.header nav>a:hover:after,.header nav>a[aria-current]:after {
  transform:scaleX(1)
}
.header nav .nav-contact {
  background:var(--gold);
  color:var(--navy);
  margin-left:14px;
  padding:13px 20px
}
.header nav .nav-contact:hover,.header nav .nav-contact[aria-current] {
  background:#ffda71;
  color:var(--navy)
}
.header nav .nav-contact:after {
  display:none
}
.nav-contact span {
  margin-left:25px;
  font-size:20px
}
.menu-toggle {
  display:none
}
.hero {
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:48px;
  align-items:center;
  padding-block:58px 62px;
  min-height:630px
}
.hero-copy {
  padding:0;
  align-self:center;
  min-width:0
}
.hero-copy .eyebrow {
  display:flex;
  align-items:center;
  gap:14px;
  color:#dce2ec;
  font-size:14px;
  font-weight:600;
  letter-spacing:.1em;
  margin-bottom:25px
}
.short-line {
  width:36px;
  height:3px;
  background:var(--gold);
  flex:none
}
.hero h1,.hero h1.extended-title {
  font-family:"Barlow Condensed",Arial,sans-serif;
  font-size:clamp(64px,6.3vw,92px);
  font-weight:600;
  line-height:1.01;
  letter-spacing:-.015em;
  margin-bottom:25px;
  max-width:560px;
  text-wrap:balance
}




.hero-copy .lead {
  max-width:470px;
  font-size:17px;
  line-height:1.8;
  color:#bec8d8;
  margin-bottom:28px
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:26px
}
.hero-actions .button {
  gap:30px
}
.hero-actions .text-link {
  font-weight:600;
  font-size:15px
}
.audience-bar {
  border-block:1px solid var(--border);
  background:#0b1529
}
.audience-inner {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0
}
.audience-item {
  display:flex;
  align-items:center;
  gap:16px;
  padding:23px 30px;
  border-right:1px solid var(--border);
  min-width:0
}
.audience-item:first-child {
  padding-left:0
}
.audience-item:last-child {
  border-right:0;
  padding-right:0
}
.audience-item>svg {
  width:42px;
  height:42px;
  fill:none;
  stroke:#d7b65d;
  stroke-width:1.3;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none
}
.audience-item>span {
  font-size:16px;
  font-weight:500;
  line-height:1.45;
  color:#e1e6ed
}
.services-section {
  padding-block:64px;
  scroll-margin-top:24px
}
.services-section .section-heading {
  padding-bottom:28px
}
.services-section .section-heading h2 {
  font-size:clamp(32px,3.1vw,42px);
  line-height:1.15;
  margin:0
}
.services {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px
}
.service {
  position:relative;
  min-width:0;
  background:#fff;
  border:1px solid #d3dadc;
  border-radius:3px;
  transition:border-color .2s,background .2s
}
.service:hover,.service:focus-within {
  border-color:#a78637;
  background:#fffdf5
}
.service:target {
  border-color:#9f7d2b;
  background:#fffae9;
  scroll-margin-top:28px
}
.service-card-link {
  display:block;
  height:100%;
  padding:25px 26px 27px
}
.service-card-link:focus-visible {
  outline:3px solid var(--focus-ring);
  outline-offset:3px
}
.service-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:23px
}
.service-icon {
  color:#6f5b29;
  display:block
}
.service-icon svg {
  display:block;
  width:37px;
  height:37px
}
.service-link {
  color:#637281;
  font-size:26px;
  line-height:1;
  transition:color .2s,transform .2s
}
.service:hover .service-link,.service:focus-within .service-link {
  color:#7d5e13;
  transform:translate(2px,-2px)
}
.service h3 {
  font-size:22px;
  line-height:1.3;
  margin:0 0 12px;
  letter-spacing:-.035em;
  color:var(--ink)
}
.service p {
  font-size:16px;
  line-height:1.65;
  color:#526171;
  margin:0;
  max-width:370px
}
.contact-strip {
  background:var(--cream);
  color:#fff;
  padding-block:0 60px
}
.contact-panel {
  --focus-ring:#efc34d;
  display:grid;
  grid-template-columns:1fr auto;
  gap:32px;
  align-items:center;
  background:#101e34;
  border-top:2px solid var(--gold);
  padding:38px 40px;
  position:relative
}
.contact-panel-icon {
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  border:1px solid #bfa14d66;
  color:var(--gold);
  background:#eec34d08
}
.contact-panel-icon svg {
  width:36px;
  height:36px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.35;
  stroke-linejoin:round
}
.contact-panel h2 {
  font-size:clamp(28px,3vw,38px);
  line-height:1.2;
  margin:0 0 10px;
  color:#fff
}
.contact-panel p {
  font-size:15px;
  color:#b9c6d7;
  margin:0;
  line-height:1.7
}
.contact-panel .button {
  font-size:15px;
  gap:32px;
  white-space:nowrap
}
@media(min-width:1650px) {
  .hero {
    min-height:650px
  }
}
@media(max-width:1100px) {
  .brand-lockup {
    gap:16px
  }
  .brand-signature {
    padding-left:16px
  }
  .brand-signature strong {
    font-size:15px
  }
  .brand {
    width:210px;
    height:100px
  }
  .logo-crop {
    width:210px;
    height:100px
  }
  .logo-crop img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    mix-blend-mode:lighten
  }
  .header nav {
    font-size:16px;
    gap:0
  }
  .header nav>a {
    padding-inline:10px
  }
  .header nav .nav-contact {
    margin-left:8px;
    padding-inline:16px
  }
  .nav-contact span {
    margin-left:16px
  }
  .hero {
    gap:24px
  }
  .hero h1,.hero h1.extended-title {
    font-size:64px
  }
  .hero-copy .eyebrow {
    font-size:15px
  }
  .hero-actions {
    gap:18px
  }
  .hero-actions .button {
    gap:20px
  }
  .audience-item {
    padding:24px 20px;
    gap:14px
  }
  .audience-item>span {
    font-size:17px
  }
  .audience-item>svg {
    width:36px;
    height:36px
  }
  .service-card-link {
    padding:21px
  }
  .service h3 {
    font-size:21px
  }
  .contact-panel {
    gap:22px;
    padding:30px
  }
  .contact-panel h2 {
    font-size:39px
  }
  .contact-panel .button {
    gap:20px
  }
}
@media(max-width:900px) {
  .header {
    min-height:104px;
    position:relative
  }
  .header nav {
    display:none;
    position:absolute;
    top:100%;
    left:-32px;
    right:-32px;
    padding:20px 32px;
    background:#0c192e;
    border-bottom:1px solid #5c6d83;
    z-index:10;
    align-items:stretch;
    font-size:18px;
    gap:4px
  }
  .header nav.is-open {
    display:flex;
    flex-direction:column
  }
  .header nav>a {
    padding:13px 16px
  }
  .header nav .nav-contact {
    margin:12px 0 0;
    align-self:flex-start
  }
  .menu-toggle {
    display:flex;
    align-items:center;
    gap:16px;
    border:1px solid #738197;
    background:#101d32;
    color:#fff;
    padding:10px 15px;
    font-size:16px;
    font-weight:600;
    cursor:pointer
  }
  .menu-toggle[aria-expanded=true] {
    border-color:var(--gold);
    color:var(--gold)
  }
  .hero {
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:20px;
    padding-block:50px;
    min-height:620px
  }
  .hero h1,.hero h1.extended-title {
    font-size:58px
  }
  .hero-copy .eyebrow {
    font-size:14px;
    letter-spacing:.08em
  }
  .hero-copy .lead {
    font-size:17px
  }
  .hero-actions {
    flex-direction:column;
    align-items:flex-start;
    gap:13px
  }
  .audience-item {
    padding:22px 14px;
    gap:12px
  }
  .audience-item>span {
    font-size:16px
  }
  .audience-item>svg {
    width:32px;
    height:32px
  }
  .services {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .contact-panel {
    grid-template-columns:1fr auto;
    gap:20px 24px
  }
  .contact-panel-icon {
    width:56px;
    height:56px
  }
  .contact-panel .button {
    grid-column:auto;
    justify-self:start
  }
  .contact-panel h2 {
    font-size:40px
  }
}
@media(max-width:620px) {
  .header {
    min-height:120px;
    gap:12px;
    padding-bottom:12px
  }
  .brand-lockup {
    flex-direction:column;
    align-items:flex-start;
    gap:0
  }
  .brand-signature {
    display:flex;
    align-items:baseline;
    gap:5px;
    padding:0;
    border:0
  }
  .brand-signature span {
    font-size:13px
  }
  .brand-signature strong {
    font-size:14px
  }
  .brand {
    width:195px;
    height:88px
  }
  .logo-crop {
    width:195px;
    height:88px
  }
  .logo-crop img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    mix-blend-mode:lighten
  }
  .header nav {
    top:100%;
    left:-20px;
    right:-20px;
    padding-inline:20px
  }
  .menu-toggle {
    font-size:14px;
    gap:12px;
    padding:9px 12px
  }
  .hero {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:34px;
    padding-block:38px 44px;
    min-height:0
  }
  .hero-copy {
    align-self:stretch
  }
  .hero-copy .eyebrow {
    font-size:14px;
    margin-bottom:23px;
    gap:12px
  }
  .short-line {
    width:27px;
    height:2px
  }
  .hero h1,.hero h1.extended-title {
    font-size:clamp(50px,12.5vw,66px);
    line-height:1.02;
    margin-bottom:25px
  }

  .hero-copy .lead {
    font-size:17px;
    line-height:1.8;
    margin-bottom:25px
  }
  .hero-actions {
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap;
    gap:18px
  }
  .hero-actions .button {
    font-size:15px;
    padding:14px 17px;
    gap:26px
  }
  .hero-actions .text-link {
    font-size:14px
  }
  .audience-item,.audience-item:first-child,.audience-item:last-child {
    flex-direction:column;
    text-align:center;
    padding:21px 7px;
    gap:10px
  }
  .audience-item>svg {
    width:31px;
    height:31px
  }
  .audience-item>span {
    font-size:14px;
    line-height:1.45;
    font-weight:600
  }
  .services-section {
    padding-block:44px
  }
  .services-section .section-heading {
    padding-bottom:23px
  }
  .services-section .section-heading h2 {
    font-size:42px
  }
  .services {
    grid-template-columns:1fr;
    gap:13px
  }
  .service-card-link {
    padding:20px 22px 22px
  }
  .service-top {
    margin-bottom:14px
  }
  .service-icon svg {
    width:35px;
    height:35px
  }
  .service h3 {
    font-size:22px;
    margin-bottom:10px
  }
  .service p {
    font-size:15px;
    line-height:1.75
  }
  .service-link {
    width:37px;
    height:37px;
    font-size:23px
  }
  .contact-strip {
    padding-bottom:40px
  }
  .contact-panel {
    grid-template-columns:1fr;
    gap:18px;
    padding:26px 22px;
    border-left-width:3px
  }
  .contact-panel-icon {
    width:40px;
    height:40px
  }
  .contact-panel-icon svg {
    width:27px;
    height:27px
  }
  .contact-panel h2 {
    font-size:35px;
    margin-bottom:9px
  }
  .contact-panel p {
    font-size:14px
  }
  .contact-panel .button {
    grid-column:1/-1;
    width:100%;
    font-size:15px
  }
  .footer-top {
    gap:30px
  }
}
@media(max-width:360px) {
  .brand {
    width:175px;
    height:80px
  }
  .logo-crop {
    width:175px;
    height:80px
  }
  .logo-crop img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    mix-blend-mode:lighten
  }
  .header {
    gap:8px
  }
  .hero-copy .eyebrow {
    font-size:12px;
    letter-spacing:.06em
  }
  .audience-item>span {
    font-size:13px
  }
  .audience-item>svg {
    width:28px;
    height:28px
  }
  .contact-panel {
    grid-template-columns:1fr;
    gap:16px
  }
  .contact-panel .button {
    grid-column:auto
  }
  .contact-panel h2 {
    font-size:34px
  }
}
.contact-fields [aria-invalid=true] {
  border:2px solid #9b402d
}
.field-error {
  font-size:14px;
  line-height:1.5;
  color:#963c29;
  margin:8px 0 0
}
.form-feedback.error a {
  text-decoration:underline
}
.form-feedback.error:focus {
  outline:3px solid #963c29;
  outline-offset:4px
}
.recovery-form {
  max-width:780px
}
.legal-links {
  display:flex;
  flex-wrap:wrap;
  gap:12px 24px;
  font-size:14px;
  line-height:1.7;
  padding-block:14px
}
.legal-links a {
  text-decoration:underline;
  text-underline-offset:4px
}
.work-steps {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px
}
.work-steps li {
  display:flex;
  gap:14px;
  align-items:flex-start
}
.work-steps b {
  font-size:14px;
  line-height:1.9;
  color:#795b12;
  flex:none;
  min-width:30px;
  border-bottom:2px solid #b7974a
}
.work-steps strong,.work-steps span {
  display:block
}
.work-steps strong {
  font-size:17px;
  margin-bottom:7px
}
.work-steps span {
  font-size:14px;
  color:#5f6d7d;
  line-height:1.7
}
.contact-layout>.company-data {
  grid-column:1;
  grid-row:2;
  margin-top:0;
  padding-top:28px
}
.contact-layout>.contact-form {
  grid-column:2;
  grid-row:1/3
}
@media(max-width:900px) {
  .contact-layout>.company-data,.contact-layout>.contact-form {
    grid-column:1;
    grid-row:auto;
    margin-top:0
  }
  .work-steps {
    grid-template-columns:1fr;
    gap:22px
  }
  .company-data dl {
    overflow-wrap:anywhere
  }
}
h1,h2,h3,.prose,.entry-copy,.service p,.contact-details {
  overflow-wrap:anywhere
}
.hero-copy,.contact-layout>* {
  min-width:0
}
body {
  overflow-wrap:anywhere
}
.footer-top>* {
  min-width:0
}
.footer .legal-links a {
  display:inline-flex;
  align-items:center;
  min-height:44px
}

/* Content hierarchy shared by the public pages. */
.hero-specialties {
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px 22px;
  padding:0 0 22px;
  margin:0 0 23px;
  border-bottom:1px solid var(--border);
  max-width:500px
}
.hero-specialties li {
  font-size:17px;
  line-height:1.5;
  font-weight:500;
  color:#dce2eb;
  min-width:0
}
.hero-specialties li:before {
  content:"";
  display:inline-block;
  width:5px;
  height:5px;
  background:var(--gold);
  margin:0 9px 3px 0
}
.about-identity {
  border-top:2px solid #a58b48;
  padding-top:25px
}
.about-identity>p:not(.eyebrow) {
  font-size:17px;
  line-height:1.7;
  color:#526171;
  margin-bottom:10px
}
.about-content .prose {
  margin:0 0 30px;
  font-size:18px;
  line-height:1.85
}
.area-note {
  padding-top:25px;
  border-top:1px solid var(--rule)
}
.area-note h3 {
  font-size:19px;
  margin-bottom:12px
}
.area-note p {
  font-size:16px;
  line-height:1.8;
  color:#526171;
  margin-bottom:0
}
.page-kontakt main {
  background:var(--cream);
  color:var(--ink)
}
.page-kontakt .page-intro {
  padding-bottom:30px
}
.page-kontakt .page-intro .eyebrow {
  color:#6b5b33
}
.page-kontakt main>.section {
  padding-top:0
}
.contact-fields input:hover,.contact-fields textarea:hover,.contact-fields select:hover {
  border-color:#66798e
}
.contact-fields input:focus,.contact-fields textarea:focus,.contact-fields select:focus {
  border-color:#6b541f;
  background:#fff
}
.contact-details {
  padding-top:8px
}
.form-privacy a {
  text-decoration:underline;
  text-underline-offset:3px
}
.section-heading>.text-link {
  color:#526171;
  flex:none
}
@media(max-width:1100px) {
  .hero-specialties {
    gap:8px 15px
  }
  .hero-specialties li {
    font-size:16px
  }
  .contact-layout {
    column-gap:40px
  }
}
@media(max-width:900px) {
  .hero {
    min-height:590px
  }
  .hero-specialties {
    grid-template-columns:1fr
  }
  .hero h1 {
    font-size:64px
  }
  .about-grid {
    grid-template-columns:1fr;
    gap:35px
  }
  .about-identity {
    max-width:580px
  }
  .contact-panel {
    grid-template-columns:1fr
  }
  .contact-panel .button {
    justify-self:start
  }
  .contact-layout {
    grid-template-rows:auto
  }
  .contact-layout>.company-data {
    border-top:1px solid var(--rule);
    padding-top:25px
  }
  .contact-form {
    padding:28px
  }
  .page-intro h1 {
    max-width:760px
  }
}
@media(max-width:620px) {
  .hero {
    min-height:0;
    gap:36px;
    padding-block:36px 40px
  }
  .hero h1 {
    font-size:clamp(60px,15vw,80px);
    margin-bottom:22px
  }
  .hero-specialties {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 16px;
    margin-bottom:22px;
    padding-bottom:20px
  }
  .hero-specialties li {
    font-size:15px
  }
  .hero-copy .eyebrow {
    font-size:13px
  }
  .hero-copy .lead {
    font-size:16px
  }
  .section-heading {
    display:flex;
    align-items:center;
    gap:18px
  }
  .section-heading h2 {
    margin:0
  }
  .section-heading>.text-link {
    font-size:14px
  }
  .services-section .section-heading h2 {
    font-size:32px
  }
  .service-card-link {
    padding:22px
  }
  .service-top {
    margin-bottom:18px
  }
  .service h3 {
    font-size:21px
  }
  .service p {
    font-size:15px
  }
  .service-link {
    width:auto;
    height:auto
  }
  .page-intro {
    padding-block:34px 38px
  }
  .page-intro h1 {
    font-size:52px
  }
  .page-intro .lead {
    font-size:17px
  }
  .contact-form {
    padding:24px 20px
  }
  .footer-brand {
    width:150px
  }
  .footer-top {
    gap:24px
  }
  .footer-nav>div {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 24px
  }
  .service-context {
    grid-template-columns:1fr;
    gap:14px;
    margin-block:28px 24px;
    padding-block:24px
  }
  .service-context p {
    font-size:18px
  }
  .service-context>p {
    font-size:16px
  }
  .contact-layout {
    gap:30px
  }
  .contact-panel {
    padding:28px 24px
  }
  .contact-panel h2 {
    font-size:29px
  }
  .contact-panel p {
    font-size:15px
  }
  .about-grid {
    gap:28px
  }
  .about-grid h2 {
    font-size:28px
  }
  .about-content .prose {
    font-size:17px
  }
  .entry-copy {
    padding:22px
  }
  .entry-copy h2,.entry-copy h3 {
    font-size:24px
  }
  .empty-state {
    padding:26px
  }
  .empty-state h2 {
    font-size:25px
  }
}
@media(prefers-reduced-motion:reduce) {
  .service-link {
    transition:none
  }
}

/* Publiczne realizacje: sekcja portfolio, bez estetyki panelu administracyjnego. */
.page-realizacje .realization-intro .eyebrow { color: #accbdc; }
.page-realizacje .realization-intro .lead { max-width: 760px; }
.realization-section { padding-block: clamp(36px,5vw,76px) clamp(60px,7vw,100px); }
.realization-showcase-intro {
    display: flex;
    align-items: end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: clamp(22px,3vw,38px);
}
.realization-showcase-intro > div { min-width: 0; }
.realization-label {
    margin: 0 0 10px;
    color: #426f87;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .13em;
}
.realization-showcase-intro h2 {
    margin: 0 0 10px;
    color: #132e44;
    font-family: "Barlow Condensed",Arial,sans-serif;
    font-size: clamp(30px,4vw,48px);
    line-height: 1.12;
}
.realization-showcase-intro p:not(.realization-label) {
    margin: 0;
    max-width: 650px;
    color: #526578;
    font-size: clamp(14px,1.35vw,16px);
    line-height: 1.7;
}
.realization-published-count {
    flex: none;
    padding: 10px 0;
    border-bottom: 2px solid #2c6685;
    color: #31576d;
    font-size: 13px;
    font-weight: 700;
}
.realization-folders {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    align-items: start;
    gap: clamp(14px,2.3vw,26px);
    min-width: 0;
}
.realization-folder {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #2c5067;
    border-radius: 9px;
    background: #0f2d42;
    color: #f4f8fb;
    box-shadow: 0 12px 26px rgba(13,32,48,.09);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.realization-folder:hover {
    border-color: #5186a2;
    box-shadow: 0 17px 30px rgba(13,32,48,.15);
    transform: translateY(-2px);
}
.realization-folder > summary {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 19px;
    min-height: 218px;
    padding: clamp(21px,3vw,32px);
    overflow: hidden;
    cursor: pointer;
    list-style: none;
    background: linear-gradient(118deg, #102f47 0%, #16435b 65%, #12384f 100%);
}
.realization-folder:nth-child(3n+2) > summary {
    background: linear-gradient(120deg, #0c293d 0%, #194259 100%);
}
.realization-folder:nth-child(3n) > summary {
    background: linear-gradient(120deg, #10374c 0%, #22516c 100%);
}
.realization-folder > summary::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    inset: 0;
    opacity: .34;
    background: repeating-linear-gradient(90deg, transparent 0 79px, rgba(173,215,234,.1) 80px 81px),
                repeating-linear-gradient(0deg, transparent 0 79px, rgba(173,215,234,.09) 80px 81px);
    mask-image: linear-gradient(90deg, transparent, #000);
}
.realization-folder > summary::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -65px;
    right: -70px;
    width: 240px;
    height: 240px;
    border: 1px solid rgba(194,228,241,.16);
    border-radius: 50%;
    box-shadow: 0 0 0 35px rgba(194,228,241,.035), 0 0 0 80px rgba(194,228,241,.025);
    pointer-events: none;
}
.realization-folder > summary::-webkit-details-marker { display: none; }
.realization-folder > summary:focus-visible {
    outline: 3px solid #93c9e5;
    outline-offset: -5px;
    border-radius: 8px;
}
.realization-tile-top, .realization-tile-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.realization-tile-number {
    color: #aacddd;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .15em;
}
.realization-tile-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(198,231,246,.26);
    border-radius: 8px;
    background: rgba(213,242,253,.08);
    color: #bce2f5;
}
.realization-tile-icon svg { display: block; width: 38px; height: 38px; }
.realization-folder-title { display: grid; gap: 9px; min-width: 0; }
.realization-folder-title strong {
    max-width: 450px;
    color: #fff;
    font-size: clamp(19px,2.1vw,27px);
    font-weight: 750;
    letter-spacing: -.02em;
    line-height: 1.24;
    overflow-wrap: anywhere;
}
.realization-folder-title small {
    max-width: 430px;
    color: #c1d8e4;
    font-size: 13px;
    line-height: 1.5;
}
.realization-tile-bottom {
    padding-top: 15px;
    border-top: 1px solid rgba(212,235,244,.19);
}
.realization-tile-count { color: #b7d1df; font-size: 12px; font-weight: 650; }
.realization-folder-count { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.realization-tile-action {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}
.realization-tile-action span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(228,247,255,.4);
    border-radius: 50%;
    font-size: 15px;
    transition: background-color .15s ease, transform .15s ease;
}
.realization-folder > summary:hover .realization-tile-action span {
    background: rgba(232,247,255,.17);
    transform: translate(2px,-2px);
}
.realization-folder[open] { background: #fff; border-color: #a4bfce; }
.realization-folder[open] > summary { border-bottom: 1px solid #b9d0df; }
.realization-folder[open] .realization-tile-action span { transform: rotate(90deg); }
.realization-folder-body {
    min-width: 0;
    padding: clamp(14px,2.1vw,24px);
    background: #fff;
    color: #173c50;
}
.realization-folder-body .entry-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 12px;
    min-width: 0;
}
.page-realizacje .realization-folder-body .entry-card {
    display: grid;
    grid-template-columns: 136px minmax(0,1fr);
    gap: 0;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #d9e5ec;
    border-radius: 7px;
    background: #fafdff;
}
.page-realizacje .realization-folder-body .entry-card:not(:has(> img)) { grid-template-columns: minmax(0,1fr); }
.page-realizacje .realization-folder-body .entry-card > img {
    display: block;
    width: 136px;
    height: 136px;
    max-height: 136px;
    aspect-ratio: 1;
    object-fit: cover;
    background: #e5eef3;
}
.page-realizacje .realization-folder-body .entry-copy {
    min-width: 0;
    padding: 16px 18px;
}
.page-realizacje .realization-folder-body .entry-copy .eyebrow {
    margin-bottom: 7px;
    color: #426c83;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .06em;
}
.page-realizacje .realization-folder-body .entry-copy h2 {
    margin: 0 0 7px;
    color: #15374e;
    font-size: clamp(16px,1.35vw,19px);
    line-height: 1.28;
}
.page-realizacje .realization-folder-body .entry-copy > p:not(.eyebrow) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    margin: 0;
    color: #566e7e;
    font-size: 12px;
    line-height: 1.55;
}
.page-realizacje .realization-folder-body .entry-copy details { margin-top: 12px; }
.page-realizacje .realization-folder-body .entry-copy summary {
    min-height: 38px;
    padding-top: 10px;
    border-top: 1px solid #dce6eb;
    color: #255d79;
    font-size: 12px;
}
.page-realizacje .realization-folder-body .entry-copy summary:hover { color: #103b54; }
.page-realizacje .realization-folder-body .entry-copy summary:focus-visible {
    outline: 3px solid #4b86a9;
    outline-offset: 2px;
}
.page-realizacje .realization-folder-body .entry-copy .prose {
    padding-top: 10px;
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}
.realization-folder-empty {
    margin: 0;
    padding: 18px;
    border: 1px solid #d3e4ed;
    border-radius: 7px;
    background: #f6fafc;
    color: #45677b;
    font-size: 13px;
    line-height: 1.65;
}
.realization-empty {
    max-width: 850px;
    padding: clamp(26px,4vw,46px);
    border-left: 4px solid #2b6686;
    border-radius: 7px;
    background: #fff;
    color: #133b52;
}
.realization-empty h2 { font-size: clamp(24px,3vw,33px); line-height: 1.3; margin-bottom: 10px; }
.realization-empty p:last-of-type { color: #536c7e; font-size: 15px; }
.realization-empty-link { display: inline-flex; align-items: center; gap: 18px; padding-block: 8px; border-bottom: 1px solid #2b6686; color: #285c78; font-weight: 750; font-size: 13px; }
.realization-empty-link:hover { color: #103b54; }
@media (max-width: 900px) {
    .realization-folders { gap: 14px; }
    .realization-folder > summary { min-height: 200px; padding: 19px; }
    .realization-folder-title strong { font-size: 20px; }
    .realization-folder-body { padding: 12px; }
    .page-realizacje .realization-folder-body .entry-card { grid-template-columns: 96px minmax(0,1fr); }
    .page-realizacje .realization-folder-body .entry-card > img { width: 96px; height: 106px; max-height: 106px; }
    .page-realizacje .realization-folder-body .entry-copy { padding: 11px 12px; }
}
@media (max-width: 700px) {
    .realization-folders { grid-template-columns: minmax(0,1fr); }
    .realization-folder > summary { min-height: 180px; padding: 21px; }
    .realization-folder-title strong { font-size: clamp(21px,5vw,26px); }
}
@media (max-width: 380px) {
    .realization-showcase-intro h2 { font-size: 31px; }
    .realization-folder > summary { min-height: 175px; padding: 17px; }
    .realization-tile-icon { width: 44px; height: 44px; }
    .realization-tile-icon svg { width: 32px; height: 32px; }
    .realization-tile-bottom { gap: 8px; }
    .realization-tile-action { gap: 7px; }
    .realization-tile-action span { width: 26px; height: 26px; }
    .page-realizacje .realization-folder-body .entry-card { grid-template-columns: 84px minmax(0,1fr); }
    .page-realizacje .realization-folder-body .entry-card > img { width: 84px; height: 100px; max-height: 100px; }
    .page-realizacje .realization-folder-body .entry-copy { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .realization-folder, .realization-tile-action span { transition: none; }
    .realization-folder:hover { transform: none; }
}


/* EL-HUB / O firmie — publiczny projekt redakcyjny, bez estetyki PA. */
.page-o-firmie .about-intro .eyebrow { color: #aacee0; }
.page-o-firmie .about-intro h1 { max-width: 1150px; }
.page-o-firmie .about-intro .lead { max-width: 790px; }
.about-section { padding-block: clamp(42px,6vw,86px) clamp(60px,8vw,104px); }
.about-section-header {
    max-width: 800px;
    margin-bottom: clamp(26px,3.6vw,48px);
}
.about-eyebrow {
    margin: 0 0 12px;
    color: #2d6885;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.5;
    letter-spacing: .13em;
}
.about-section-header h2 {
    margin: 0 0 12px;
    color: #112f43;
    font-family: "Barlow Condensed",Arial,sans-serif;
    font-size: clamp(33px,4.3vw,56px);
    letter-spacing: -.012em;
    line-height: 1.12;
}
.about-section-header > p:last-child {
    margin: 0;
    color: #587083;
    font-size: clamp(15px,1.4vw,18px);
    line-height: 1.7;
}
.about-layout {
    display: grid;
    grid-template-columns: minmax(0,.87fr) minmax(0,1.13fr);
    align-items: stretch;
    gap: clamp(24px,3vw,48px);
}
.about-brand-panel {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    min-width: 0;
    padding: clamp(23px,3.1vw,38px);
    border: 1px solid #254f66;
    border-radius: 9px;
    background: linear-gradient(146deg,#0b2b40 0%,#16465f 63%,#0c314a 100%);
    color: #f6fbfe;
}
.about-brand-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .27;
    background: repeating-linear-gradient(90deg, transparent 0 63px, rgba(198,235,250,.08) 64px 65px),
                repeating-linear-gradient(0deg, transparent 0 63px, rgba(198,235,250,.08) 64px 65px);
    pointer-events: none;
}
.about-brand-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #c0e0ed;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .12em;
}
.about-brand-mark {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(226,248,255,.35);
    border-radius: 50%;
    color: #fff;
    font-size: 19px;
}
.about-technical-art {
    display: block;
    width: min(100%,560px);
    max-width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 700 / 394;
    object-fit: contain;
    margin: clamp(16px,2.5vw,26px) auto;
    border: 1px solid rgba(181,224,244,.14);
    border-radius: 6px;
    background: #051c30;
    box-shadow: 0 15px 35px rgba(0,16,32,.17);
}
.about-brand-footer {
    padding-top: 17px;
    border-top: 1px solid rgba(219,242,251,.24);
}
.about-brand-caption {
    color: #9ec7da;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: .09em;
}
.about-brand-footer h3 {
    margin: 13px 0 7px;
    color: #fff;
    font-size: clamp(21px,2.4vw,30px);
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}
.about-brand-footer p {
    margin: 0;
    color: #bed8e5;
    font-size: 14px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}
.about-story {
    min-width: 0;
    padding: clamp(2px,1vw,14px) 0 0;
}
.about-story-text {
    margin: 0 0 26px;
    color: #344e60;
    font-size: clamp(17px,1.5vw,19px);
    line-height: 1.85;
    overflow-wrap: anywhere;
}
.about-capabilities { display: grid; border-top: 1px solid #cfdee6; }
.about-capability {
    display: grid;
    grid-template-columns: 35px minmax(0,1fr);
    gap: 17px;
    align-items: start;
    padding: 17px 0;
    border-bottom: 1px solid #cfdee6;
}
.about-capability > span {
    padding-top: 3px;
    color: #356f8c;
    font-size: 13px;
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}
.about-capability h3 {
    margin: 0 0 4px;
    color: #14384f;
    font-size: 19px;
    line-height: 1.3;
}
.about-capability p {
    margin: 0;
    color: #5d7180;
    font-size: 14px;
    line-height: 1.65;
}
.about-services-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    margin-top: 25px;
    min-height: 44px;
    padding: 10px 0;
    border-bottom: 2px solid #2f728f;
    color: #174a64;
    font-size: 14px;
    font-weight: 750;
}
.about-services-link:hover { color: #0c2d42; }
.about-services-link span { font-size: 19px; }
.about-services-link:focus-visible { outline-color: #4b86a9; }
.about-area-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: clamp(32px,5vw,64px);
    padding: clamp(22px,3vw,34px);
    border: 1px solid #c5d9e5;
    border-radius: 8px;
    background: #e8f1f6;
}
.about-area-strip > div { min-width: 0; max-width: 690px; }
.about-area-strip h3 {
    margin: 0 0 8px;
    color: #123a50;
    font-size: clamp(21px,2.4vw,28px);
    line-height: 1.3;
}
.about-area-strip p:last-child {
    margin: 0;
    color: #526c7d;
    font-size: 15px;
    line-height: 1.6;
}
.about-area-strip a {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    flex: none;
    min-height: 46px;
    padding: 10px 16px;
    border: 1px solid #0b3b54;
    border-radius: 5px;
    background: #103b54;
    color: #fff;
    font-size: 13px;
    font-weight: 750;
    transition: background .15s ease;
}
.about-area-strip a:hover { background: #235b77; }
.about-area-strip a:focus-visible { outline-color: #4b86a9; }
.about-area-strip a span { font-size: 18px; }
@media (max-width: 970px) {
    .about-layout { grid-template-columns: minmax(0,1fr); }
    .about-brand-panel { min-height: 300px; }
    .about-technical-art { width: min(100%,560px); max-height: none; }
}
@media (max-width: 620px) {
    .about-section { padding-top: 40px; }
    .about-section-header h2 { font-size: 35px; }
    .about-brand-panel { min-height: 285px; }
    .about-technical-art { width: 100%; max-height: none; }
    .about-story-text { font-size: 17px; }
    .about-area-strip { align-items: flex-start; }
    .about-area-strip a { width: 100%; }
}
@media (max-width: 360px) {
    .about-brand-panel { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .about-area-strip a { transition: none; }
}