/* =========================================================
   2can Climate / Modernizacja automatyki fermy
   Visual language: 2can Climate main page
   ========================================================= */

.climate-article-page {
   --cm-bg: #07090c;
   --cm-bg-2: #090b10;
   --cm-panel: #0b0c12;
   --cm-panel-accent: #100b18;
   --cm-text: #f5f4f7;
   --cm-muted: #8d8b94;
   --cm-soft: #b9b7bf;
   --cm-line: rgba(255, 255, 255, .095);
   --cm-line-soft: rgba(255, 255, 255, .055);
   --cm-accent: var(--accent, #a64dff);
   --cm-cyan: #24a7a3;
   background: var(--cm-bg);
   color: var(--cm-text);
}

.climate-article-page *,
.climate-article-page *::before,
.climate-article-page *::after {
   box-sizing: border-box
}

.climate-article-page main {
   overflow: hidden
}

.climate-article-page .c-wrap {
   width: min(1460px, calc(100% - 112px));
   margin-inline: auto;
}

.climate-article-page .c-section {
   position: relative;
   padding: 112px 0 128px;
   border-top: 1px solid var(--cm-line-soft);
   background: var(--cm-bg);
}

.climate-article-page .c-section--alt {
   background: var(--cm-bg-2)
}

.climate-article-page .c-eyebrow {
   margin: 0 0 30px;
   color: var(--cm-accent);
   font-size: 10px;
   font-weight: 700;
   line-height: 1;
   letter-spacing: .21em;
   text-transform: uppercase;
}

.climate-article-page h1,
.climate-article-page h2,
.climate-article-page h3 {
   margin-top: 0;
   color: var(--cm-text);
   font-weight: 500;
   letter-spacing: -.045em;
}

.climate-article-page h1 {
   margin-bottom: 30px;
   font-size: clamp(52px, 5.5vw, 92px);
   line-height: .98;
}

.climate-article-page h1 span,
.climate-article-page h2 span {
   color: #85838b
}

.climate-article-page h2 {
   margin-bottom: 0;
   font-size: clamp(45px, 4.6vw, 76px);
   line-height: 1.02;
}

.climate-article-page p {
   font-size: 15px
}

.climate-article-page .c-lead {
   max-width: 850px;
   margin: 0;
   color: var(--cm-soft);
   font-size: 17px;
   line-height: 1.8;
}

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */
.climate-article-page .c-hero {
   position: relative;
   min-height: 900px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   background:
      radial-gradient(circle at 75% 50%, rgba(125, 50, 180, .08), transparent 31%),
      var(--cm-bg);
   border-bottom: 1px solid var(--cm-line);
}

.climate-article-page .c-grid-bg {
   position: absolute;
   inset: 0;
   pointer-events: none;
   opacity: .16;
   background-image:
      linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
   background-size: 80px 80px;
   mask-image: linear-gradient(to bottom, transparent 5%, #000 35%, transparent 100%);
}

.climate-article-page .cm-hero__grid {
   position: relative;
   z-index: 1;
   display: grid;
   grid-template-columns: minmax(0, 1.6fr) minmax(340px, .55fr);
   gap: 90px;
   align-items: center;
   padding-top: 145px;
   padding-bottom: 80px;
}

.climate-article-page .c-breadcrumb {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 10px;
   margin: 0 0 54px;
   color: #6d6b74;
   font-size: 9px;
   font-weight: 600;
   letter-spacing: .17em;
   text-transform: uppercase;
}

.climate-article-page .c-breadcrumb a {
   color: inherit;
   text-decoration: none
}

.climate-article-page .c-breadcrumb a:hover {
   color: var(--cm-accent)
}

.climate-article-page .c-breadcrumb strong {
   color: #aaa7b0;
   font-weight: 600
}

.climate-article-page .c-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 42px;
}

.climate-article-page .c-btn {
   min-height: 54px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 25px;
   padding: 0 25px;
   border: 1px solid var(--cm-line);
   border-radius: 0;
   background: transparent;
   color: var(--cm-text);
   text-decoration: none;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .13em;
   text-transform: uppercase;
   transition: border-color .25s, background .25s, transform .25s;
}

.climate-article-page .c-btn--primary {
   border-color: var(--cm-accent);
   background: var(--cm-accent);
   color: white;
}

.climate-article-page .c-btn--ghost {
   background: rgba(255, 255, 255, .012)
}

.climate-article-page .c-btn:hover {
   transform: translateY(-2px);
   border-color: var(--cm-accent)
}

.climate-article-page .c-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 7px;
   margin-top: 36px;
}

.climate-article-page .c-tags span,
.climate-article-page .c-chip-grid span {
   padding: 8px 11px;
   border: 1px solid var(--cm-line);
   color: #66646d;
   font-size: 8px;
   font-weight: 700;
   letter-spacing: .13em;
   text-transform: uppercase;
}

/* hero engineering card */
.cm-hero__panel {
   position: relative;
   min-height: 450px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 46px;
   border: 1px solid var(--cm-line);
   background: linear-gradient(135deg, rgba(255, 255, 255, .012), rgba(110, 45, 160, .045));
}

.cm-hero__panel::before,
.cm-hero__panel::after {
   content: "";
   position: absolute;
   width: 36px;
   height: 36px;
}

.cm-hero__panel::before {
   top: -1px;
   left: -1px;
   border-top: 2px solid var(--cm-accent);
   border-left: 2px solid var(--cm-accent);
}

.cm-hero__panel::after {
   right: -1px;
   bottom: -1px;
   border-right: 2px solid var(--cm-accent);
   border-bottom: 2px solid var(--cm-accent);
}

.cm-hero__panel small {
   margin-bottom: 42px;
   color: #6e6c75;
   font-size: 9px;
   letter-spacing: .18em;
}

.cm-hero__panel strong {
   color: #f3f2f5;
   font-size: clamp(26px, 2.3vw, 39px);
   font-weight: 500;
   line-height: 1.12;
   letter-spacing: -.04em;
}

.cm-hero__panel i,
.cm-hero__panel>span {
   margin: 15px 0;
   color: var(--cm-accent);
   font-size: 27px;
   font-style: normal;
}

.cm-hero__panel p {
   max-width: 330px;
   margin: 14px 0 0;
   color: #817f87;
   line-height: 1.7;
}

.climate-article-page .c-scroll {
   position: relative;
   z-index: 1;
   display: flex;
   align-items: center;
   gap: 15px;
   padding-bottom: 28px;
   color: #57555e;
   font-size: 8px;
   font-weight: 700;
   letter-spacing: .16em;
}

.climate-article-page .c-scroll i {
   width: 65px;
   height: 1px;
   background: var(--cm-line)
}

/* ---------------------------------------------------------
   SECTION HEADERS
   --------------------------------------------------------- */
.climate-article-page .c-index {
   display: flex;
   align-items: center;
   gap: 15px;
   margin-bottom: 74px;
   color: #66646d;
   font-size: 9px;
   font-weight: 700;
   letter-spacing: .17em;
}

.climate-article-page .c-index i {
   width: 38px;
   height: 1px;
   background: var(--cm-accent);
}

.climate-article-page .c-split {
   display: grid;
   grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr);
   gap: 100px;
   align-items: end;
}

.climate-article-page .c-split>p {
   max-width: 540px;
   justify-self: end;
   margin: 0 0 7px;
   color: #d1cfd5;
   font-size: 15px;
   line-height: 1.85;
}

/* ---------------------------------------------------------
   DIAGNOSTYKA — szerokie wiersze jak ZAKRES na głównym Climate
   --------------------------------------------------------- */
.cm-check-grid {
   margin-top: 90px;
   border-top: 1px solid var(--cm-line);
}

.cm-check {
   position: relative;
   min-height: 180px;
   display: grid;
   grid-template-columns: 115px 1fr 1.45fr;
   gap: 40px;
   align-items: center;
   padding: 32px 20px;
   border-bottom: 1px solid var(--cm-line);
   transition: background .25s;
}

.cm-check:nth-child(even) {
   background: rgba(98, 43, 135, .055)
}

.cm-check:hover {
   background: rgba(130, 55, 190, .075)
}

.cm-check b {
   align-self: start;
   padding-top: 7px;
   color: var(--cm-accent);
   font-size: 10px;
   letter-spacing: .12em;
}

.cm-check h3 {
   margin: 0;
   font-size: clamp(28px, 2.4vw, 40px);
   line-height: 1.05;
}

.cm-check p {
   max-width: 650px;
   margin: 0;
   color: #d4d2d8;
   line-height: 1.8;
}

.climate-article-page .c-statement {
   margin: 76px 0 0;
   padding: 36px 0 36px 44px;
   border-left: 1px solid var(--cm-accent);
   color: #77757e;
   font-size: clamp(25px, 2.4vw, 38px);
   font-style: normal;
   line-height: 1.45;
}

.climate-article-page .c-statement strong {
   color: #f4f3f5;
   font-weight: 500
}

/* ---------------------------------------------------------
   ZAKRES — techniczne karty
   --------------------------------------------------------- */
.climate-article-page .c-service-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   margin-top: 86px;
   border-top: 1px solid var(--cm-line);
   border-left: 1px solid var(--cm-line);
}

.climate-article-page .c-service {
   min-height: 310px;
   padding: 38px 34px;
   border-right: 1px solid var(--cm-line);
   border-bottom: 1px solid var(--cm-line);
   background: transparent;
   transition: background .25s;
}

.climate-article-page .c-service:nth-child(2),
.climate-article-page .c-service:nth-child(5) {
   background: rgba(88, 40, 125, .045)
}

.climate-article-page .c-service:hover {
   background: rgba(118, 52, 170, .07)
}

.climate-article-page .c-service small {
   color: var(--cm-accent);
   font-size: 9px;
   font-weight: 700;
   letter-spacing: .15em;
}

.climate-article-page .c-service h3 {
   margin: 76px 0 20px;
   font-size: clamp(27px, 2.1vw, 36px);
   line-height: 1.05;
}

.climate-article-page .c-service p {
   max-width: 390px;
   margin: 0;
   color: #aaa8b0;
   line-height: 1.75;
}

/* ---------------------------------------------------------
   INTEGRACJA — 4-panel visual language
   --------------------------------------------------------- */
.climate-article-page .c-integration {
   display: grid;
   grid-template-columns: 1fr 62px 1fr 62px 1fr;
   align-items: stretch;
   margin-top: 90px;
   border-top: 1px solid var(--cm-line);
   border-bottom: 1px solid var(--cm-line);
}

.climate-article-page .c-integration__column,
.climate-article-page .c-integration__core {
   min-height: 330px;
   padding: 35px 28px;
   border-left: 1px solid var(--cm-line);
}

.climate-article-page .c-integration__column:last-child {
   border-right: 1px solid var(--cm-line)
}

.climate-article-page .c-integration__core {
   background: var(--cm-panel-accent);
   border-top: 1px solid rgba(166, 77, 255, .45);
   border-right: 1px solid var(--cm-line);
}

.climate-article-page .c-integration small {
   color: #62606a;
   font-size: 8px;
   font-weight: 700;
   letter-spacing: .16em;
}

.climate-article-page .c-integration h3 {
   margin: 100px 0 25px;
   font-size: clamp(30px, 2.4vw, 42px);
   line-height: 1.05;
}

.climate-article-page .c-integration__core h3 {
   color: #f5f4f7
}

.climate-article-page .c-integration__core p {
   color: #8e8b95;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .11em;
}

.climate-article-page .c-integration__arrow {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--cm-accent);
   font-size: 16px;
}

.climate-article-page .c-integration__arrow::before {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   height: 1px;
   background: var(--cm-line);
}

.climate-article-page .c-integration__arrow {
   isolation: isolate;
}

.climate-article-page .c-integration__arrow::after {
   content: "";
   position: absolute;
   width: 28px;
   height: 28px;
   z-index: -1;
   border: 1px solid rgba(166, 77, 255, .32);
   background: var(--cm-bg);
}

.climate-article-page .c-chip-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 7px;
}

/* ---------------------------------------------------------
   OT / IT ARCHITECTURE
   --------------------------------------------------------- */
.climate-article-page .c-architecture {
   margin-top: 90px
}

.climate-article-page .c-arch-zone {
   padding: 35px;
   border: 1px solid var(--cm-line);
   background: #080a0d;
}

.climate-article-page .c-arch-zone>small {
   display: block;
   margin-bottom: 34px;
   color: #62606a;
   font-size: 8px;
   font-weight: 700;
   letter-spacing: .18em;
}

.climate-article-page .c-arch-row {
   display: grid;
   grid-template-columns: 1fr 60px 1fr 60px 1fr;
   align-items: center;
}

.climate-article-page .c-arch-row article {
   min-height: 190px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 30px;
   border: 1px solid var(--cm-line);
}

.climate-article-page .c-arch-row article.is-accent {
   border-color: rgba(166, 77, 255, .35);
   background: var(--cm-panel-accent);
}

.climate-article-page .c-arch-row>i {
   color: var(--cm-accent);
   font-size: 0;
   font-style: normal;
   text-align: center;
}

.climate-article-page .c-arch-row>i::after {
   content: "→";
   font-size: 17px
}

.climate-article-page .c-arch-row em {
   margin-bottom: 22px;
   color: #5d5b64;
   font-size: 8px;
   font-style: normal;
   font-weight: 700;
   letter-spacing: .16em;
}

.climate-article-page .c-arch-row strong {
   color: #f5f4f7;
   font-size: 30px;
   font-weight: 500;
   letter-spacing: -.035em;
}

.climate-article-page .c-arch-row span {
   margin-top: 10px;
   color: #77757e;
   font-size: 12px;
}

.climate-article-page .c-arch-zone footer {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-top: 26px;
   color: #706e77;
   font-size: 9px;
   font-weight: 700;
   letter-spacing: .12em;
   text-transform: uppercase;
}

.climate-article-page .c-arch-zone footer i {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--cm-cyan);
   box-shadow: 0 0 12px rgba(36, 167, 163, .8);
}

.climate-article-page .c-arch-bridge {
   padding: 24px 0;
   color: #595760;
   font-size: 8px;
   font-weight: 700;
   letter-spacing: .17em;
   text-align: center;
}

.climate-article-page .c-arch-bridge span {
   margin-left: 16px;
   color: var(--cm-accent)
}

/* ---------------------------------------------------------
   PROCESS
   --------------------------------------------------------- */
.climate-article-page .c-process {
   list-style: none;
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   margin: 90px 0 0;
   padding: 0;
   border-top: 1px solid var(--cm-line);
   border-left: 1px solid var(--cm-line);
}

.climate-article-page .c-process li {
   min-height: 315px;
   padding: 34px 28px;
   border-right: 1px solid var(--cm-line);
   border-bottom: 1px solid var(--cm-line);
}

.climate-article-page .c-process li:nth-child(3) {
   background: var(--cm-panel-accent)
}

.climate-article-page .c-process b {
   display: block;
   margin-bottom: 105px;
   color: var(--cm-accent);
   font-size: 10px;
   letter-spacing: .14em;
}

.climate-article-page .c-process h3 {
   margin: 0 0 17px;
   font-size: 25px;
}

.climate-article-page .c-process p {
   margin: 0;
   color: #918f97;
   font-size: 13px;
   line-height: 1.75;
}

/* ---------------------------------------------------------
   FAQ
   --------------------------------------------------------- */
.climate-article-page .c-faq {
   margin-top: 80px;
   border-top: 1px solid var(--cm-line);
}

.climate-article-page .c-faq details {
   border-bottom: 1px solid var(--cm-line)
}

.climate-article-page .c-faq summary {
   position: relative;
   cursor: pointer;
   list-style: none;
   padding: 31px 65px 31px 0;
   color: #e8e7ea;
   font-size: clamp(18px, 1.6vw, 24px);
   font-weight: 500;
}

.climate-article-page .c-faq summary::-webkit-details-marker {
   display: none
}

.climate-article-page .c-faq summary::after {
   content: "+";
   position: absolute;
   top: 50%;
   right: 6px;
   transform: translateY(-50%);
   color: var(--cm-accent);
   font-size: 27px;
   font-weight: 300;
}

.climate-article-page .c-faq details[open] summary::after {
   content: "−"
}

.climate-article-page .c-faq details p {
   max-width: 850px;
   margin: 0;
   padding: 0 0 32px;
   color: #898790;
   line-height: 1.8;
}

/* ---------------------------------------------------------
   CONTACT
   --------------------------------------------------------- */
.climate-article-page .c-contact {
   position: relative;
   padding: 115px 0 130px;
   border-top: 1px solid var(--cm-line);
   background:
      radial-gradient(circle at 75% 40%, rgba(113, 46, 164, .07), transparent 28%),
      #080a0e;
}

.climate-article-page .c-contact__grid {
   display: grid;
   grid-template-columns: 1fr .85fr;
   gap: 110px;
   align-items: start;
}

.climate-article-page .c-contact__grid h2 {
   margin: 0;
   font-size: clamp(45px, 4.5vw, 74px);
   line-height: 1.02;
}

.climate-article-page .c-contact__direct {
   display: flex;
   flex-direction: column;
   gap: 9px;
   margin-top: 36px;
}

.climate-article-page .c-contact__direct a {
   color: #f4f3f5;
   text-decoration: none;
   font-size: 21px;
}

.climate-article-page .c-contact__direct a:hover {
   color: var(--cm-accent)
}

.climate-article-page .c-form {
   display: grid;
   gap: 22px
}

.climate-article-page .c-form label {
   display: grid;
   gap: 10px;
   color: #68666f;
   font-size: 8px;
   font-weight: 700;
   letter-spacing: .15em;
}

.climate-article-page .c-form__row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 15px;
}

.climate-article-page .c-form input,
.climate-article-page .c-form textarea {
   width: 100%;
   padding: 16px;
   border: 1px solid var(--cm-line);
   border-radius: 0;
   outline: 0;
   background: #090b0f;
   color: #f4f3f5;
   font: inherit;
}

.climate-article-page .c-form input:focus,
.climate-article-page .c-form textarea:focus {
   border-color: rgba(166, 77, 255, .65)
}

.climate-article-page .c-form textarea {
   min-height: 160px;
   resize: vertical
}

.climate-article-page .c-form button {
   cursor: pointer
}

.cm-back {
   margin-top: 42px
}

.cm-back a {
   color: #6d6b74;
   text-decoration: none;
   font-size: 9px;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
}

.cm-back a:hover {
   color: #fff
}

/* no-JS fallback */
.climate-article-page .reveal {
   opacity: 1;
   transform: none
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
@media(max-width:1150px) {
   .climate-article-page .c-wrap {
      width: min(100% - 64px, 1460px)
   }

   .climate-article-page .cm-hero__grid {
      grid-template-columns: 1.35fr .65fr;
      gap: 55px
   }

   .climate-article-page .c-service-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .climate-article-page .c-process {
      grid-template-columns: repeat(3, 1fr)
   }

   .climate-article-page .c-process li:nth-last-child(-n+2) {
      grid-column: auto
   }
}

@media(max-width:900px) {
   .climate-article-page .c-wrap {
      width: min(100% - 40px, 1460px)
   }

   .climate-article-page .c-hero {
      min-height: auto
   }

   .climate-article-page .cm-hero__grid {
      grid-template-columns: 1fr;
      padding-top: 125px
   }

   .cm-hero__panel {
      min-height: 340px
   }

   .climate-article-page .c-split {
      grid-template-columns: 1fr;
      gap: 35px;
      align-items: start
   }

   .climate-article-page .c-split>p {
      justify-self: start
   }

   .cm-check {
      grid-template-columns: 70px 1fr
   }

   .cm-check p {
      grid-column: 2
   }

   .climate-article-page .c-integration {
      grid-template-columns: 1fr
   }

   .climate-article-page .c-integration__arrow {
      min-height: 58px;
      transform: rotate(90deg)
   }

   .climate-article-page .c-arch-row {
      grid-template-columns: 1fr
   }

   .climate-article-page .c-arch-row>i {
      padding: 15px;
      transform: rotate(90deg)
   }

   .climate-article-page .c-process {
      grid-template-columns: repeat(2, 1fr)
   }

   .climate-article-page .c-contact__grid {
      grid-template-columns: 1fr;
      gap: 65px
   }
}

@media(max-width:620px) {
   .climate-article-page .c-wrap {
      width: min(100% - 28px, 1460px)
   }

   .climate-article-page .c-section {
      padding: 80px 0
   }

   .climate-article-page .c-breadcrumb {
      margin-bottom: 35px
   }

   .climate-article-page .c-actions {
      flex-direction: column
   }

   .climate-article-page .c-btn {
      width: 100%
   }

   .cm-hero__panel {
      padding: 28px
   }

   .cm-check {
      grid-template-columns: 1fr;
      gap: 16px;
      padding: 28px 4px
   }

   .cm-check p {
      grid-column: auto
   }

   .climate-article-page .c-service-grid {
      grid-template-columns: 1fr
   }

   .climate-article-page .c-service {
      min-height: auto
   }

   .climate-article-page .c-service h3 {
      margin-top: 48px
   }

   .climate-article-page .c-process {
      grid-template-columns: 1fr
   }

   .climate-article-page .c-process li {
      min-height: auto
   }

   .climate-article-page .c-process b {
      margin-bottom: 60px
   }

   .climate-article-page .c-form__row {
      grid-template-columns: 1fr
   }
}