/* podstrony: stopnie (przekroj), parapety (rysunek okna), taras (kalkulator m2), ciecie (cennik + formularz) */

/*--- STOPNIE ---*/
.steps-head {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  max-width: 132rem;
  margin: 0 auto;
  padding: 4rem var(--gutter) 6rem;
}
.steps-head__txt p{max-width:56rem;margin-top:2rem;font-size:1.7rem}
.steps-head__img { width: 100%; aspect-ratio: 900/640; object-fit: cover; border-radius: var(--radius-lg); background: #d6d2c4; }

.steps-scheme{display:flex;flex-direction:column;gap:3rem;max-width:132rem;margin:0 auto;padding:0 var(--gutter) 7rem}
.steps-scheme__svg { width: 100%; max-width: 46rem; background: #fff; border-radius: var(--radius-lg); padding: 2rem; }
.sc-beton{fill:#e4e0d6}
.sc-kamien { fill: var(--slate); }
.sc-wym{fill:none;stroke:var(--mint);stroke-width:1.5}
.sc-txt { font: 500 11px 'Outfit', sans-serif; fill: var(--slate); text-anchor: middle; }
.sc-txt--mint{fill:var(--mint-dark);text-anchor:start}
.steps-list { margin-top: 2rem; }
.steps-list li{padding:1.4rem 0;border-top:1px solid rgba(53,62,68,.15);font-size:1.55rem}
.steps-list b { color: var(--slate); }
.steps-shop{max-width:132rem;margin:0 auto;padding:0 var(--gutter) 7rem}
.steps-item {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 1rem 2rem;
  padding: 2rem 0;
  border-top: 1px solid rgba(53,62,68,.15);
}
.steps-shop .display-md{margin-bottom:1rem}
.steps-item__t b { display: block; font-size: 1.8rem; }
.steps-item__t span{display:block;margin-top:.4rem;font-size:1.4rem;opacity:.8}
.steps-item__t { grid-column: 1 / -1; }
.steps-item__p{font-size:2rem}
.steps-shop__note { margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid rgba(53,62,68,.15); font-size: 1.5rem; }
.steps-shop__note a{color:var(--mint-dark)}
.steps-old { display: flex; flex-direction: column; gap: 3rem; max-width: 132rem; margin: 0 auto; padding: 0 var(--gutter) 9rem; }
.steps-old__txt p{margin-top:1.4rem;font-size:1.6rem}
.steps-old img { width: 100%; aspect-ratio: 800/560; object-fit: cover; border-radius: var(--radius-lg); background: #d6d2c4; }

/*--- PARAPETY ---*/
.sill-top { max-width: 90rem; margin: 0 auto; padding: 4rem var(--gutter) 4rem; }
.sill-top__lead{margin-top:2rem;font-size:1.9rem;line-height:1.5}
.sill-cut { display: flex; flex-direction: column; gap: 3rem; max-width: 132rem; margin: 0 auto; padding: 0 var(--gutter) 7rem; }
.sill-cut__svg{width:100%;background:#fff;border-radius:var(--radius-lg);padding:1.6rem}
.cut-mur { fill: #e4e0d6; }
.cut-mur--tynk{fill:#d3cec1}
.cut-rama { fill: #9aa0a3; }
.cut-kamien{fill:var(--slate)}
.cut-kapinos { fill: var(--mint); }
.cut-wym{fill:none;stroke:var(--mint-dark);stroke-width:1.4}
.cut-txt { font: 500 12px 'Outfit', sans-serif; fill: var(--slate); }
.cut-txt--l{text-anchor:end}
.sill-steps li { display: grid; grid-template-columns: 4rem minmax(0,1fr); gap: 1.4rem; padding: 1.6rem 0; border-bottom: 1px dashed #cfcabd; }
.sill-steps li:last-child{border-bottom:0}
.sill-steps span { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 50%; border: 2px solid var(--mint); font-weight: 700; }
.sill-steps p{font-size:1.55rem}
.sill-two { display: grid; grid-template-columns: minmax(0,1fr); gap: 2rem; max-width: 132rem; margin: 0 auto; padding: 0 var(--gutter) 6rem; }
.sill-col{padding:2.8rem 2.4rem;border-radius:var(--radius-lg);background:#fff}
.sill-col--in { background: var(--slate); color: #fff; }
.sill-col__h{font-size:2.4rem;font-weight:500;margin-bottom:1rem}
.sill-col p { font-size: 1.55rem; }
.sill-buy{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:.8rem 1.6rem;margin-top:2rem;padding-top:1.6rem;border-top:1px solid rgba(53,62,68,.15)}
.sill-col--in .sill-buy { border-top-color: rgba(255,255,255,.2); }
.sill-buy > div{grid-column:1 / -1}
.sill-buy b { font-size: 1.6rem; display: block; }
.sill-buy span{font-size:1.35rem;opacity:.8}
.sill-buy__p { font-size: 2rem; }
.sill-col--in .add-btn{background:var(--mint);color:var(--slate)}
.sill-col__small { margin-top: 1.4rem; font-size: 1.35rem; opacity: .8; }
.sill-photo{max-width:132rem;margin:0 auto;padding:0 var(--gutter) 9rem}
.sill-photo img { width: 100%; aspect-ratio: 132/56; object-fit: cover; border-radius: var(--radius-lg); background: #d6d2c4; }
.sill-photo p{margin-top:1.6rem;font-size:1.5rem}
.sill-photo a { color: var(--mint-dark); }

/*--- TARAS: cala strona ciemniejsza ---*/
.terrace-page{background:#2b3237;color:#fff}
.terrace-page .header { position: relative; background: #222829; }
.terrace-page .utility-bar{background:#222829;color:#fff}
.terrace-page .standard-footer { color: var(--slate); }
.terrace-hero{max-width:132rem;margin:0 auto;padding:5rem var(--gutter) 4rem}
.terrace-hero__in p { max-width: 62rem; margin-top: 2rem; font-size: 1.7rem; color: rgba(255,255,255,.85); }
.terrace-calc{display:flex;flex-direction:column;gap:2.4rem;max-width:132rem;margin:0 auto;padding:0 var(--gutter) 7rem}
.terrace-form { padding: 2.4rem 2rem; border-radius: var(--radius-lg); background: #fff; color: var(--slate); }
.tc-f + .tc-f{margin-top:1.2rem}
.tc-f label { display: block; margin-bottom: .4rem; font-size: 1.3rem; font-weight: 500; }
.tc-f input,.tc-f select{width:100%;padding:1.1rem 1.2rem;border:1px solid #b7b7b7;background:#fff;font:inherit;font-size:1.5rem;color:var(--slate)}
.terrace-form__out { min-height: 2.2rem; margin-top: 1.2rem; font-size: 1.45rem; }
.terrace-form__end{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;margin-top:1.4rem;padding-top:1.6rem;border-top:1px solid #e8e8e8}
.terrace-form__end b { font-size: 3rem; font-weight: 700; }
.terrace-note p{font-size:1.6rem;color:rgba(255,255,255,.88)}
.terrace-note p + p { margin-top: 1.2rem; }
.terrace-extra{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:.6rem 1.4rem;margin-top:2rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.2)}
.terrace-extra > div { grid-column: 1 / -1; }
.terrace-extra b{display:block;font-size:1.6rem}
.terrace-extra span { font-size: 1.35rem; opacity: .8; }
.terrace-extra .add-btn{background:var(--mint);color:var(--slate)}
.terrace-how { max-width: 132rem; margin: 0 auto; padding: 0 var(--gutter) 9rem; }
.terrace-how__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem;margin:2.6rem 0}
.how-card { padding: 2.4rem 2rem; border-radius: var(--radius-lg); background: rgba(255,255,255,.08); font-size: 1.5rem; }
.how-card--mint{background:var(--mint);color:var(--slate)}
.how-card__tag { margin-bottom: .8rem; font-size: 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; }
.terrace-how img{width:100%;aspect-ratio:132/62;object-fit:cover;border-radius:var(--radius-lg);background:#3b4247}

/*--- CIECIE ---*/
.cut-top { display: flex; flex-direction: column; gap: 3rem; max-width: 132rem; margin: 0 auto; padding: 4rem var(--gutter) 6rem; }
.cut-top__txt p{max-width:52rem;margin-top:2rem;font-size:1.7rem}
.cut-top__img { width: 100%; aspect-ratio: 86/62; object-fit: cover; border-radius: var(--radius-lg); background: #d6d2c4; }
.cut-ways{max-width:132rem;margin:0 auto;padding:0 var(--gutter) 7rem}
.cut-ways__grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 1.6rem; margin-top: 2.6rem; }
.way-box{display:flex;flex-direction:column;padding:2.6rem 2.2rem;border:1px solid #dcd7ca;border-radius:var(--radius-lg);background:#fff}
.way-box--mid { background: var(--slate); color: #fff; border-color: var(--slate); }
.way-box__no{font-size:1.3rem;font-weight:700;color:var(--mint-dark)}
.way-box--mid .way-box__no{color:var(--mint)}
.way-box h3 { margin: .6rem 0 1rem; font-size: 2rem; font-weight: 500; }
.way-box p{flex-grow:1;font-size:1.5rem}
.way-box .cta { align-self: flex-start; margin-top: 1.8rem; }
.way-box a{color:var(--mint-dark)}
.way-box--mid a { color: var(--mint); }
.cut-price{display:flex;flex-direction:column;gap:3rem;max-width:132rem;margin:0 auto;padding:0 var(--gutter) 7rem}
.cut-table { width: 100%; border-collapse: collapse; margin-top: 2rem; font-size: 1.5rem; }
.cut-table caption{padding-bottom:1rem;text-align:left;font-size:1.3rem;opacity:.75}
.cut-table th, .cut-table td { padding: 1rem .4rem; border-bottom: 1px solid #dcd7ca; text-align: left; font-weight: 400; }
.cut-table td{text-align:right;font-weight:700}
.cut-table thead th { font-size: 1.2rem; text-transform: uppercase; letter-spacing: .8px; opacity: .7; }
.cut-table--edge{margin-top:3rem}
.cut-rules { padding: 2.8rem 2.4rem; border-radius: var(--radius-lg); background: var(--slate); color: #fff; }
.cut-rules__h{font-size:2.2rem;font-weight:500;margin-bottom:1.4rem}
.cut-rules li { padding: 1.2rem 0; border-bottom: 1px solid rgba(255,255,255,.15); font-size: 1.5rem; }
.cut-rules li:last-of-type{border-bottom:0}
.cut-rules__ok { margin-top: 1.4rem; padding: 1.4rem 1.6rem; border-radius: var(--radius-md); background: var(--mint); color: var(--slate); font-size: 1.5rem; }
.cut-form{display:flex;flex-direction:column;gap:3rem;max-width:132rem;margin:0 auto;padding:0 var(--gutter) 9rem}
.cut-form__txt p { max-width: 46rem; margin-top: 1.4rem; font-size: 1.6rem; }
.cut-form__txt img{width:100%;margin-top:2.4rem;aspect-ratio:76/52;object-fit:cover;border-radius:var(--radius-lg);background:#d6d2c4}
.cut-form__card { padding: 2.8rem 2rem; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-custom); }

@media (min-width: 600px) {
  .steps-item{grid-template-columns:minmax(0,1fr) auto auto}
  .steps-item__t { grid-column: auto; }
  .sill-buy{grid-template-columns:minmax(0,1fr) auto auto}
  .sill-buy > div { grid-column: auto; }
  .terrace-extra{grid-template-columns:minmax(0,1fr) auto auto}
  .terrace-extra > div { grid-column: auto; }
}
@media (min-width:768px) {
.steps-head{flex-direction:row;align-items:center;gap:6rem;padding:7rem var(--gutter) 9rem}
.steps-head__txt,.steps-head__img { flex: 1 1 0; min-width: 0; }
.steps-scheme{flex-direction:row;align-items:center;gap:6rem;padding-bottom:10rem}
.steps-scheme__svg,.steps-scheme__txt { flex: 1 1 0; min-width: 0; }
.steps-shop{padding-bottom:10rem}
.steps-old { flex-direction: row-reverse; align-items: center; gap: 6rem; padding-bottom: 12rem; }
.steps-old__txt,.steps-old img{flex:1 1 0;min-width:0}
.sill-top { padding: 8rem var(--gutter) 5rem; }
.sill-cut{flex-direction:row;align-items:center;gap:6rem;padding-bottom:9rem}
.sill-cut__svg, .sill-steps { flex: 1 1 0; min-width: 0; }
.sill-two{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.4rem;padding-bottom:8rem}
.sill-col { padding: 4rem 3.4rem; }
.sill-photo{padding-bottom:12rem}
.terrace-hero { padding: 9rem var(--gutter) 6rem; }
.terrace-calc{flex-direction:row;align-items:flex-start;gap:4rem;padding-bottom:9rem}
.terrace-form { flex: 1 1 0; padding: 3.4rem 3rem; }
.terrace-note{flex:1 1 0;min-width:0}
.terrace-how__grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.terrace-how{padding-bottom:12rem}
.cut-top { flex-direction: row; align-items: center; gap: 6rem; padding: 7rem var(--gutter) 9rem; }
.cut-top__txt,.cut-top__img{flex:1 1 0;min-width:0}
.cut-ways__grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.cut-price{flex-direction:row;align-items:flex-start;gap:5rem;padding-bottom:10rem}
.cut-price__tab { flex: 1.3 1 0; min-width: 0; }
.cut-rules{flex:1 1 0;min-width:0}
.cut-form { flex-direction: row; align-items: flex-start; gap: 5rem; padding-bottom: 12rem; }
.cut-form__txt{flex:1 1 0;min-width:0}
.cut-form__card { flex: 1.2 1 0; padding: 4rem; }
}

/* podstrony maja jasny naglowek, wiec cienka kreska pod paskiem kontaktowym */
.steps-page .utility-bar,.sill-page .utility-bar,.cut-page .utility-bar { border-bottom: 1px solid #e8e2d5; }