.pergola-hero { overflow: hidden; padding: 64px 0 72px; }
.pergola-hero__grid { align-items: center; display: grid; gap: 58px; grid-template-columns: minmax(0,.92fr) minmax(440px,1.08fr); }
.pergola-hero h1 { color: var(--hazo-ink); font-family: "Comfortaa",sans-serif; font-size: clamp(42px,5.5vw,68px); letter-spacing: -.055em; line-height: 1.03; margin: 0 0 22px; }
.pergola-hero .lede { color: #4e615d; font-size: 19px; line-height: 1.65; }
.pergola-hero__benefits { display: grid; gap: 9px; margin: 24px 0; }
.pergola-hero__benefits span { align-items: center; color: #314744; display: flex; font-weight: 600; gap: 10px; }
.pergola-hero__benefits span::before { align-items: center; background: #e6f0ec; border-radius: 50%; color: #2d625b; content: '\2713'; display: inline-flex; flex: 0 0 24px; font-size: 14px; height: 24px; justify-content: center; }
.pergola-smallprint { color: #63716e; font-size: 13px; margin: 14px 0 0; }
.pergola-hero__visual { border-radius: 24px; margin: 0; min-height: 520px; overflow: hidden; position: relative; }
.pergola-hero__visual picture,.pergola-hero__visual img { display: block; height: 100%; width: 100%; }
.pergola-hero__visual img { inset: 0; object-fit: cover; position: absolute; }
.pergola-hero__visual::after { background: linear-gradient(180deg,transparent 54%,rgba(13,35,32,.75)); content: ''; inset: 0; position: absolute; }
.pergola-hero__visual figcaption { bottom: 22px; color: #fff; font-size: 15px; font-weight: 700; left: 24px; letter-spacing: .03em; position: absolute; z-index: 1; }
.pergola-heading h2,.pergola-specs h2,.pergola-catalogues h2 { color: var(--hazo-ink); font-family: "Comfortaa",sans-serif; font-size: clamp(31px,4.3vw,48px); letter-spacing: -.04em; margin: 0 0 12px; }
.pergola-heading p:last-child { color: #5e6d69; font-size: 17px; margin: 0 auto; max-width: 820px; }
.pergola-compare { background: #eef4f1; padding: 76px 0; }
.pergola-series-grid { display: grid; gap: 24px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.pergola-series-card { background: #fff; border: 1px solid #d5e0dc; border-radius: 22px; overflow: hidden; }
.pergola-series-card__image { background: #e8efec; min-height: 310px; padding: 28px; position: relative; }
.pergola-series-card__image img { height: 255px; object-fit: contain; width: 100%; }
.pergola-series-card__image span { background: #173e3a; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 700; left: 22px; letter-spacing: .08em; padding: 8px 12px; position: absolute; top: 20px; }
.pergola-series-card--heavy .pergola-series-card__image span { background: #e9b953; color: #173e3a; }
.pergola-series-card__body { padding: 32px; }
.pergola-series-card h3 { color: var(--hazo-ink); font-family: "Comfortaa",sans-serif; font-size: 31px; margin: 0 0 10px; }
.pergola-series-card__body > p:not(.eyebrow) { color: #5e6d69; line-height: 1.6; min-height: 78px; }
.pergola-series-card dl { border-bottom: 1px solid #d9e2df; border-top: 1px solid #d9e2df; margin: 24px 0; }
.pergola-series-card dl div { display: flex; gap: 20px; justify-content: space-between; padding: 12px 0; }
.pergola-series-card dt { color: #63726e; }
.pergola-series-card dd { color: #173e3a; font-weight: 700; margin: 0; text-align: right; }
.pergola-series-card__actions { align-items: center; display: flex; flex-wrap: wrap; gap: 18px; }
.pergola-text-link { color: #315f58; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
.pergola-decision { background: #fff; border: 1px solid #d5e0dc; border-radius: 18px; margin-top: 28px; overflow: hidden; }
.pergola-decision > div { align-items: center; display: grid; gap: 18px; grid-template-columns: 1.1fr 1fr 1fr; padding: 15px 22px; }
.pergola-decision > div + div { border-top: 1px solid #e0e7e4; }
.pergola-decision__heading { background: #173e3a; color: #fff; }
.pergola-decision__heading span { color: #f3d38c; font-weight: 700; }
.pergola-operation { padding: 76px 0; }
.pergola-operation-grid { display: grid; gap: 18px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.pergola-operation-grid article { background: #f6f9f7; border: 1px solid #d9e2df; border-radius: 18px; overflow: hidden; padding-bottom: 24px; position: relative; }
.pergola-operation-grid article > span { align-items: center; background: #e9b953; border-radius: 50%; color: #173e3a; display: flex; font-size: 11px; font-weight: 700; height: 32px; justify-content: center; left: 18px; position: absolute; top: 18px; width: 32px; z-index: 1; }
.pergola-operation-grid img { background: #edf3f0; display: block; height: 245px; object-fit: contain; padding: 18px; width: 100%; }
.pergola-operation-grid article:last-child img { object-fit: cover; padding: 0; }
.pergola-operation-grid h3 { color: var(--hazo-ink); font-family: "Comfortaa",sans-serif; font-size: 22px; margin: 22px 22px 8px; }
.pergola-operation-grid p { color: #5e6d69; margin: 0 22px; }
.pergola-guidance { background: #fff4d8; border-radius: 13px; color: #4d4a3d; margin: 20px 0 0; padding: 17px 20px; }
.pergola-specs { background: #173e3a; color: #fff; padding: 76px 0; }
.pergola-specs__grid { align-items: center; display: grid; gap: 64px; grid-template-columns: .9fr 1.1fr; }
.pergola-specs h2 { color: #fff; }
.pergola-specs .eyebrow { color: #f0c66e; }
.pergola-specs__copy > p:not(.eyebrow) { color: #d2dfdb; font-size: 17px; line-height: 1.6; }
.pergola-specs ul { display: grid; gap: 12px; list-style: none; margin: 26px 0 0; padding: 0; }
.pergola-specs li { align-items: center; display: flex; gap: 11px; }
.pergola-specs li::before { background: #e9b953; border-radius: 50%; content: ''; flex: 0 0 8px; height: 8px; }
.pergola-specs__visual { background: #fff; border-radius: 20px; height: 450px; padding: 22px; }
.pergola-specs__visual img { height: 100%; object-fit: contain; width: 100%; }
.pergola-options { background: #eef4f1; padding: 76px 0; }
.pergola-options-grid { display: grid; gap: 16px; grid-template-columns: repeat(4,minmax(0,1fr)); }
.pergola-options-grid article { background: #fff; border: 1px solid #d7e1dd; border-radius: 18px; min-height: 220px; padding: 24px; }
.pergola-options-grid span { color: #b58a38; display: block; font-family: "Comfortaa",sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .16em; margin-bottom: 30px; }
.pergola-options-grid h3 { color: var(--hazo-ink); font-family: "Comfortaa",sans-serif; font-size: 19px; margin: 0 0 10px; }
.pergola-options-grid p { color: #5c6b68; line-height: 1.55; margin: 0; }
.pergola-projects { padding: 76px 0; }
.pergola-project-grid { display: grid; gap: 18px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.pergola-project-grid figure { border-radius: 18px; margin: 0; overflow: hidden; position: relative; }
.pergola-project-grid img { aspect-ratio: 1.5/1; display: block; object-fit: cover; width: 100%; }
.pergola-project-grid figcaption { background: linear-gradient(180deg,transparent,rgba(12,31,29,.82)); bottom: 0; color: #fff; font-weight: 700; left: 0; padding: 42px 18px 16px; position: absolute; right: 0; }
.pergola-catalogues { padding: 0 0 76px; }
.pergola-catalogues__panel { align-items: center; background: #173e3a; border-radius: 22px; color: #fff; display: grid; gap: 50px; grid-template-columns: 1fr auto; padding: 42px 46px; }
.pergola-catalogues h2 { color: #fff; }
.pergola-catalogues .eyebrow { color: #f2ce83; }
.pergola-catalogues__panel p:last-child { color: #d1dfda; font-size: 16px; line-height: 1.55; margin: 0; max-width: 690px; }
.pergola-catalogues__actions { display: grid; gap: 11px; min-width: 270px; }
.pergola-catalogues__actions .btn-outline { background: transparent; border-color: #fff; color: #fff; }
.pergola-catalogues__actions .btn-outline:hover,
.pergola-catalogues__actions .btn-outline:focus-visible { background: #fff; border-color: #fff; color: #173e3a; }
.pergola-plan { background: #eef4f1; padding: 76px 0; }
.pergola-plan-grid { display: grid; gap: 13px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.pergola-plan-grid > div { background: #fff; border: 1px solid #d8e2de; border-radius: 16px; display: grid; gap: 7px; min-height: 135px; padding: 20px; }
.pergola-plan-grid span { align-items: center; background: #315f58; border-radius: 50%; color: #fff; display: flex; font-size: 12px; font-weight: 700; height: 34px; justify-content: center; width: 34px; }
.pergola-plan-grid strong { color: var(--hazo-ink); font-family: "Comfortaa",sans-serif; font-size: 18px; }
.pergola-plan-grid small { color: #66736f; font-size: 14px; }
.pergola-faq { display: grid; gap: 10px; margin: 28px auto 0; max-width: 900px; }
.pergola-faq details { background: #fff; border: 1px solid #d8e2de; border-radius: 12px; padding: 17px 20px; }
.pergola-faq summary { color: #173e3a; cursor: pointer; font-weight: 700; }
.pergola-faq p { color: #5c6b68; margin: 12px 0 0; }
.pergola-quote { padding: 82px 0; }

@media (max-width: 980px) {
  .pergola-hero__grid,.pergola-specs__grid { grid-template-columns: 1fr; }
  .pergola-hero__visual { min-height: 460px; }
  .pergola-options-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pergola-catalogues__panel { grid-template-columns: 1fr; }
  .pergola-catalogues__actions { min-width: 0; }
}

@media (max-width: 700px) {
  .pergola-hero { padding: 38px 0 50px; }
  .pergola-hero__grid { gap: 30px; }
  .pergola-hero h1 { font-size: 41px; }
  .pergola-hero__visual { border-radius: 18px; min-height: 330px; }
  .pergola-hero .button-row .btn { width: 100%; }
  .pergola-compare,.pergola-operation,.pergola-specs,.pergola-options,.pergola-projects,.pergola-plan,.pergola-quote { padding-bottom: 54px; padding-top: 54px; }
  .pergola-series-grid,.pergola-operation-grid,.pergola-options-grid { grid-template-columns: 1fr; }
  .pergola-series-card__image { min-height: 235px; padding: 18px; }
  .pergola-series-card__image img { height: 205px; }
  .pergola-series-card__body { padding: 24px 20px; }
  .pergola-series-card__body > p:not(.eyebrow) { min-height: 0; }
  .pergola-series-card__actions .btn { width: 100%; }
  .pergola-decision { overflow-x: auto; }
  .pergola-decision > div { grid-template-columns: 145px 155px 175px; min-width: 530px; padding: 14px 16px; }
  .pergola-operation-grid img { height: 220px; }
  .pergola-specs__grid { gap: 32px; }
  .pergola-specs__visual { height: 335px; padding: 10px; }
  .pergola-options-grid article { min-height: auto; }
  .pergola-options-grid span { margin-bottom: 18px; }
  .pergola-project-grid { gap: 12px; }
  .pergola-project-grid figcaption { font-size: 13px; padding: 32px 12px 12px; }
  .pergola-catalogues { padding: 30px 0 54px; }
  .pergola-catalogues__panel { gap: 24px; padding: 30px 22px; }
  .pergola-catalogues__actions .btn { width: 100%; }
  .pergola-plan-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pergola-plan-grid > div { min-height: 130px; padding: 16px; }
}