/* =====================================================================
   WARIANT A - kuchnia, przerysowana.
   Display face: Archivo variable, driven on the width axis. Wide and
   architectural for headings, narrow and tabular for figures. Body/UI:
   Schibsted Grotesk. No serif anywhere.
   Every selector scoped to #s1. Keyframes prefixed s1-.
   ===================================================================== */

#s1{
  container-type: inline-size;
  --pap:  var(--paper,       #2b2d2f);
  --pdp:  var(--paper-deep,  #232527);
  --pgl:  var(--paper-glow,  #35383b);
  --ik:   var(--ink,         #ece7dd);
  --iks:  var(--ink-soft,    #c6c0b6);
  --ikf:  var(--ink-faint,   #9d968b);
  /* accent derived from the Amable wordmark (#7c6544). The logo bronze itself
     only reaches 2.5:1 on this ground, below the 3:1 needed even for graphics,
     so the hue is kept and the lightness lifted: 4.71:1 and 6.62:1. */
  --cl:   var(--clay,        #b4915f);
  --cld:  var(--clay-deep,   #cdaf84);
  --ln:   var(--line,        #43464a);
  --lns:  var(--line-strong, #55595e);

  --disp: "Archivo","Archivo Fallback",system-ui,sans-serif;
  --sans: "Schibsted Grotesk","Helvetica Neue",system-ui,sans-serif;

  /* the width axis carries the hierarchy: wide = drawn, narrow = measured */
  --fv-xl:   "wdth" 122,"wght" 620;   /* h1, hero room names */
  --fv-lg:   "wdth" 116,"wght" 560;   /* h2 */
  --fv-md:   "wdth" 104,"wght" 600;   /* h3, sub-heads */
  --fv-lead: "wdth" 96,"wght" 400;    /* lead + quoted paragraphs */
  --fv-fig:  "wdth" 92,"wght" 600;    /* big figures */
  --fv-num:  "wdth" 84,"wght" 520;    /* numerals, telephone, quantities */

  --e-line: cubic-bezier(.65,0,.35,1);
  --e-draft: cubic-bezier(.22,1,.36,1);
  background: var(--pap);
  color: var(--iks);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
}

#s1 *{ box-sizing: border-box; }
#s1 a{ color: inherit; text-decoration: none; }
#s1 p{ margin: 0 0 .9em; }
#s1 h1,#s1 h2,#s1 h3{ margin: 0; font-weight: 400; }
#s1 dl,#s1 dd,#s1 dt{ margin: 0; }
#s1 :focus-visible{ outline: 2px solid var(--cld); outline-offset: 2px; }

/* ---- shared furniture ----------------------------------------------- */
#s1 .mt{
  font-family: var(--sans); font-size: .71rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  font-feature-settings:"tnum" 1,"lnum" 1;
  color: var(--ikf); line-height: 1.35;
}
#s1 .mt--tight{ letter-spacing: .13em; }
#s1 .mt--wide{ letter-spacing: .2em; }
/* every figure, price, telephone number and quantity on the sheet */
#s1 .am-num{
  font-family: var(--disp); font-variation-settings: var(--fv-num);
  font-feature-settings:"tnum" 1,"lnum" 1; letter-spacing: .02em;
}
#s1 .wrap{ max-width: 1180px; margin-inline: auto; padding-inline: clamp(1.15rem, 3cqi, 2.6rem); }
#s1 .tlink{
  color: var(--ik); border-bottom: 1px solid var(--cl);
  padding-bottom: 1px; transition: color .25s var(--e-line);
}
#s1 .tlink:hover{ color: var(--cld); }
#s1 .vh{
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ================================ HEADER ============================= */
#s1 .hdr{
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1rem clamp(1.15rem,3cqi,2.6rem); border-bottom: 1px solid var(--ln);
}
#s1 .hdr__logo{
  display: block; width: 126px; height: 36px;
  background-image: url(/assets/logo-aQ0W9CQK.png); background-size: contain;
  background-repeat: no-repeat; background-position: left center;
}
#s1 .hdr__nav{ display: flex; align-items: center; gap: 1.5rem; }
#s1 .hdr__nav a{ font-size: .82rem; letter-spacing: .03em; color: var(--iks); transition: color .25s var(--e-line); }
#s1 .hdr__nav a:hover{ color: var(--ik); }
#s1 .hdr__tel{
  font-family: var(--disp); font-variation-settings: var(--fv-num);
  font-feature-settings:"tnum" 1,"lnum" 1; font-size: 1.02rem; color: var(--ik);
  border-left: 1px solid var(--ln); padding-left: 1.5rem;
}
@container (max-width: 860px){
  #s1 .hdr__nav a:not(.hdr__tel){ display: none; }
  #s1 .hdr__tel{ border-left: 0; padding-left: 0; }
}

/* ============================ HERO - 4 POKOJE ======================== */
#s1 .am-hero{
  position: relative; display: flex; height: 480px;
  background: var(--pap); border-bottom: 1px solid var(--ln); overflow: hidden;
}
#s1 .pan{
  position: relative; flex: 1 1 0; min-width: 0; display: grid;
  grid-template-columns: minmax(0,1fr); grid-template-rows: 1fr auto;
  overflow: hidden; transition: flex-grow .5s var(--e-line);
}
#s1 .pan + .pan{ border-left: 1px solid var(--ln); }
#s1 .pan:focus-visible{ outline: 2px solid var(--cld); outline-offset: -4px; }
#s1 .pan__photo{
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(.78) saturate(.85); transform: scale(1);
  transition: transform 1200ms var(--e-draft), filter 500ms var(--e-line);
  z-index: 0;
}
#s1 .pan__photo::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(20,18,15,.92) 0%, rgba(20,18,15,.5) 32%, rgba(20,18,15,0) 62%),
    linear-gradient(to bottom, rgba(20,18,15,.45) 0%, rgba(20,18,15,0) 22%);
}
#s1 .pan--k .pan__photo{ background-image: url(/assets/Projektowanie-kuchni_wizualizacje-kuchni_online_033-1200w-B2WSEphm.webp); }
#s1 .pan--l .pan__photo{ background-image: url(/assets/Projektowanie-lazienek_wizualizacj-lazienek_-on-line_034-1200w-B1MJ8bH3.webp); }
#s1 .pan--s .pan__photo{ background-image: url(/assets/Projekt-salonu_wizualizacja-salonu_online_-24-1200w-Uul4NSnb.webp); }
#s1 .pan--y .pan__photo{ background-image: url(/assets/Projektowanie-sypialni_wizualizacje-sypialni_online_08-1200w-DN5FgHsx.webp); }

#s1 .pan__body{ position: relative; z-index: 2; display: flex; align-items: flex-end; padding: 0 0 .9rem 1.25rem; }
#s1 .pan__vert{
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--disp); font-variation-settings: var(--fv-xl);
  font-size: clamp(2.2rem, 3.6cqi, 3.2rem); line-height: 1; letter-spacing: -.025em;
  color: var(--ik); opacity: 1; transition: opacity .45s var(--e-line);
}
#s1 .pan__block{
  position: relative; z-index: 2;
  width: 32rem;
  padding: 0 1.25rem 1.4rem;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .45s var(--e-line), opacity .45s var(--e-line);
}
#s1 .pan__lead{ display: block; width: 24px; height: 2px; background: var(--cl); margin-bottom: .75rem; transition: width .5s var(--e-line); }
#s1 .pan__name{
  display: block; font-family: var(--disp); font-variation-settings: var(--fv-xl);
  font-size: clamp(1.8rem, 3cqi, 2.5rem); line-height: 1; letter-spacing: -.03em;
  color: var(--ik); margin-bottom: .85rem;
}
#s1 .pan__spec{ display: flex; border-block: 1px solid rgba(236,231,221,.28); margin-bottom: .85rem; }
#s1 .pan__spec span{
  flex: 1; padding: .5rem .7rem; font-size: .72rem; color: #d3cdc3;
  font-feature-settings:"tnum" 1,"lnum" 1;
}
#s1 .pan__spec span + span{ border-left: 1px solid rgba(236,231,221,.28); }
#s1 .pan__open{ display: inline-block; font-size: .8rem; letter-spacing: .06em; color: var(--ik); }
#s1 .pan__open b{ font-weight: 400; border-bottom: 1px solid var(--cl); padding-bottom: 2px; }
#s1 .pan__row{ display: none; }

#s1 .am-hero .pan:hover,
#s1 .am-hero .pan:focus-within{ flex-grow: 3.4; }
#s1 .am-hero:has(.pan:hover) .pan__photo,
#s1 .am-hero:has(.pan:focus-within) .pan__photo{ filter: brightness(.42) saturate(.55); }
#s1 .am-hero:has(.pan:hover) .pan:hover .pan__photo,
#s1 .am-hero:has(.pan:focus-within) .pan:focus-within .pan__photo{ filter: none; transform: scale(1.06); }
#s1 .am-hero .pan:hover .pan__vert,
#s1 .am-hero .pan:focus-within .pan__vert{ opacity: 0; }
#s1 .am-hero .pan:hover .pan__block,
#s1 .am-hero .pan:focus-within .pan__block{ max-height: 15rem; opacity: 1; }
#s1 .am-hero .pan:hover .pan__lead,
#s1 .am-hero .pan:focus-within .pan__lead{ width: 40px; }

@container (max-width: 1023px){
  #s1 .am-hero{ display: block; height: auto; }
  #s1 .pan{ display: block; height: 112px; }
  #s1 .pan + .pan{ border-left: 0; border-top: 1px solid var(--ln); }
  #s1 .pan__photo{ inset: 0; filter: brightness(.42) saturate(.7); }
  #s1 .pan__row{
    position: relative; z-index: 2; display: flex;
    align-items: flex-end; justify-content: space-between; gap: 1rem;
    height: 100%; padding: 0 1.15rem 1rem;
  }
  #s1 .pan__row b{
    font-family: var(--disp); font-weight: 400; font-variation-settings: var(--fv-xl);
    font-size: 1.8rem; line-height: 1; letter-spacing: -.025em; color: var(--ik);
  }
  #s1 .pan__row .am-num{ color: var(--cld); font-size: .82rem; padding-bottom: .3rem; }
  #s1 .am-hero .pan:hover,#s1 .am-hero .pan:focus-within{ flex-grow: 1; }
  #s1 .am-hero:has(.pan:hover) .pan__photo,
  #s1 .am-hero:has(.pan:focus-within) .pan__photo{ filter: brightness(.42) saturate(.7); }
  #s1 .am-hero .pan:hover .pan__photo,
  #s1 .am-hero .pan:focus-within .pan__photo{ filter: brightness(.58) saturate(.85); transform: none; }
}

/* ============================== CHIP RAIL ============================ */
#s1 .rail{
  display: flex; align-items: stretch; height: 50px;
  background: var(--pap); border-bottom: 1px solid var(--ln);
  overflow-x: auto; scrollbar-width: none;
}
#s1 .rail::-webkit-scrollbar{ display: none; }
#s1 .rail a{
  position: relative; display: flex; align-items: center;
  padding: 0 1.15rem; white-space: nowrap; font-size: .73rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ikf);
  transition: color .3s var(--e-line);
}
#s1 .rail a + a{ border-left: 1px solid var(--ln); }
#s1 .rail a::after{
  content: ""; position: absolute; left: 1.15rem; right: 1.15rem; bottom: 0; height: 2px;
  background: var(--cl); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--e-line);
}
#s1 .rail a:hover{ color: var(--ik); }
#s1 .rail a:hover::after{ transform: scaleX(1); }
#s1 .rail a[aria-current="page"]{ color: var(--ik); }
#s1 .rail a[aria-current="page"]::after{ transform: scaleX(1); }
#s1 .rail__set{ margin-left: auto; display: flex; align-items: center; padding: 0 1.15rem; border-left: 1px solid var(--ln); }
@container (max-width: 700px){ #s1 .rail__set{ display: none; } }

/* ============================== THE SHEET ============================ */
#s1 .sheet{ position: relative; }
#s1 .sheet__ground{ position: relative; z-index: 1; }
#s1 .head{
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: 2.6rem; border-bottom: 1px solid var(--ln);
}

/* ---- title block ---------------------------------------------------- */
#s1 .title{
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.3rem, 2.6cqi, 2.6rem);
  padding-block: clamp(1.9rem, 3.6cqi, 3.2rem) clamp(1.5rem, 3cqi, 2.4rem);
}
#s1 .title__left{ grid-column: span 5; }
#s1 .title__right{ grid-column: span 7; }
#s1 .title__left > .mt{ display: block; }
#s1 .title h1{
  font-family: var(--disp); font-variation-settings: var(--fv-xl);
  font-size: clamp(2.1rem, 3.9cqi, 3.5rem); line-height: .96; letter-spacing: -.032em;
  color: var(--ik); margin: .7rem 0 1.1rem;
}
#s1 .title__lead{
  font-family: var(--disp); font-variation-settings: var(--fv-lead);
  font-size: 1.02rem; line-height: 1.5; max-width: 44ch; color: var(--ik);
}
#s1 .plate--hero{
  display: block; aspect-ratio: 16 / 9; border: 1px solid var(--ln);
  background-image: var(--lead); background-size: cover; background-position: center;
}
#s1 .am-caption{ display: flex; justify-content: space-between; gap: 1rem; margin-top: .55rem; }
#s1 .tblock{
  grid-column: span 12; display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ln); margin-top: .2rem;
}
#s1 .tblock div{ padding: .9rem 1.1rem .9rem 0; }
#s1 .tblock div + div{ padding-left: 1.1rem; border-left: 1px solid var(--ln); }
#s1 .tblock .mt{ display: block; }
#s1 .tblock b{
  display: block; margin-top: .3rem; font-family: var(--disp); font-weight: 400;
  font-variation-settings: var(--fv-num); font-feature-settings:"tnum" 1,"lnum" 1;
  font-size: 1.02rem; color: var(--ik);
}

/* ---- section furniture ---------------------------------------------- */
#s1 .sec{ padding-block: clamp(1.9rem, 3.4cqi, 3rem); border-top: 1px solid var(--ln); }
#s1 .sec__hd{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .35rem 1.5rem; flex-wrap: wrap;
  padding-bottom: .75rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--ln);
}
#s1 h2{
  font-family: var(--disp); font-variation-settings: var(--fv-lg);
  font-size: clamp(1.55rem, 2.5cqi, 2.25rem); line-height: 1.04; letter-spacing: -.028em; color: var(--ik);
}
#s1 .prose{ max-width: 60ch; font-size: .95rem; }
#s1 .prose p:last-child{ margin-bottom: 0; }

/* ---- drawing plates -------------------------------------------------- */
#s1 .plan{ display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.3rem, 3cqi, 2.8rem); align-items: start; }
#s1 .plan__fig{ border: 1px solid var(--ln); background: var(--pdp); padding: .85rem; margin: 0; }
#s1 .plan__fig svg{ display: block; width: 100%; height: auto; overflow: visible; }
/* The scroll animations start the ergonomics zones and the elevation parts
   outside the viewBox, so the figures must clip: with overflow visible those
   pre-animation positions paint outside the drawing and widen the layout
   (measured: 95px of horizontal overflow at 390px). Clipping also gives the
   better effect - parts slide in from behind the frame edge. */
#s1 #s1-erg svg,
#s1 #s1-elev svg{ overflow: hidden; }
#s1 .plan__figcap{ display: flex; justify-content: space-between; gap: 1rem; margin-top: .65rem; padding-top: .55rem; border-top: 1px solid var(--ln); }

#s1 .drw-room{ fill: none; stroke: var(--lns); stroke-width: 1.5; }
#s1 .drw-box{ fill: var(--pgl); stroke: var(--lns); stroke-width: 1; }
#s1 .drw-h{ fill: none; stroke: var(--ln); stroke-width: 1; }

/* ---- ergonomia: three zones + a triangle that hangs off their nodes --- */
/* The polygon's points are the three .erg-node centres. The next pass moves
   the .erg-zone groups and rewrites #s1-erg-tri points from the same clock. */
#s1 .erg-tri{ fill: rgba(180,145,95,.07); stroke: var(--cl); stroke-width: 1.6; stroke-linejoin: round; }
#s1 .erg-node{ fill: var(--cl); stroke: var(--pdp); stroke-width: 1.5; }
#s1 .erg-lab{
  font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 1.4px;
  fill: var(--iks);
}
@container (max-width: 620px){ #s1 .erg-lab{ font-size: 18px; } }
@container (max-width: 430px){ #s1 .erg-lab{ font-size: 23px; } }

/* ---- zabudowa: the elevation, one group per part -------------------- */
#s1 .kel-gr{ fill: none; stroke: var(--lns); stroke-width: 1.5; }
#s1 .kel-h{ fill: none; stroke: var(--ln); stroke-width: 1; }
#s1 .kel-d{ fill: none; stroke: var(--ln); stroke-width: 1; }
#s1 .kel-dash{ fill: none; stroke: var(--ln); stroke-width: 1; stroke-dasharray: 5 4; }
#s1 .kel-sb{ fill: rgba(236,231,221,.035); stroke: none; }
#s1 .kel-void{ fill: var(--pdp); stroke: var(--lns); stroke-width: 1; }
#s1 .kel-wt{ fill: rgba(236,231,221,.17); stroke: var(--lns); stroke-width: 1; }
#s1 .kel-lit{ fill: none; stroke: var(--cl); stroke-width: 1.2; stroke-dasharray: 6 5; }
#s1 .kel-ray{ fill: none; stroke: var(--cl); stroke-width: 1; opacity: .55; }

/* ---- ruled tables ---------------------------------------------------- */
#s1 table{ width: 100%; border-collapse: collapse; text-align: left; }
#s1 thead th{
  font-family: var(--sans); font-weight: 500; font-size: .68rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ikf); padding: 0 1rem .65rem 0;
  border-bottom: 1px solid var(--lns); vertical-align: bottom;
}
#s1 tbody td{ padding: .8rem 1rem .8rem 0; border-bottom: 1px solid var(--ln); vertical-align: top; font-size: .86rem; color: var(--iks); }

/* ---- the twelve renders ---------------------------------------------- */
#s1 .plates{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--ln); border-block: 1px solid var(--ln);
}
/* .rvl is the reveal hook the next pass animates; the static state below is
   the finished state, so the grid is complete with JS off. */
#s1 .plate{ margin: 0; display: flex; flex-direction: column; background: var(--pap); }
#s1 .plate__link{ display: block; position: relative; overflow: hidden; }
#s1 .plate__link:focus-visible{ outline: 2px solid var(--cld); outline-offset: -3px; }
#s1 .plate__img{ display: block; width: 100%; height: auto; aspect-ratio: 5 / 3; object-fit: cover; background: var(--pdp); transition: filter .6s var(--e-line); }
#s1 .plate__link:hover .plate__img,
#s1 .plate__link:focus-visible .plate__img{ filter: saturate(1.05) brightness(1.06); }
#s1 .plate__cap{
  display: flex; gap: .5rem; align-items: baseline;
  padding: .55rem .75rem .8rem; font-size: .73rem; line-height: 1.32;
  color: var(--iks); text-wrap: pretty;
}
#s1 .plate__no{ flex: none; color: var(--cl); font-size: .82rem; }

/* ---- opinie: evidence, set as compactly as the schedule -------------- */
#s1 .ops{
  display: flex; flex-wrap: wrap; gap: 1px; background: var(--ln);
  border-block: 1px solid var(--ln);
}
#s1 .op{
  flex: 1 1 14rem; min-width: 0; margin: 0; background: var(--pap);
  display: flex; flex-direction: column; gap: .8rem;
  padding: 1.05rem 1.05rem 1.15rem;
}
#s1 .op p{
  margin: 0; font-family: var(--disp); font-variation-settings: var(--fv-lead);
  font-size: .96rem; line-height: 1.42; color: var(--ik); text-wrap: pretty;
}
#s1 .op cite{ font-style: normal; margin-top: auto; }
#s1 .op cite::before{
  content: ""; display: block; width: 20px; height: 2px;
  background: var(--cl); margin-bottom: .5rem;
}

/* ---- process --------------------------------------------------------- */
#s1 .proc{ border-top: 1px solid var(--ln); }
#s1 .proc__step{
  display: grid; grid-template-columns: 3.4rem 1fr 14rem; gap: clamp(.8rem,2cqi,2rem);
  padding-block: 1rem; border-bottom: 1px solid var(--ln); align-items: baseline;
}
#s1 .proc__no{ font-size: 1.35rem; color: var(--cl); }
#s1 .proc__t{
  font-family: var(--disp); font-variation-settings: var(--fv-md);
  font-size: 1.05rem; line-height: 1.2; color: var(--ik); margin-bottom: .2rem;
}
#s1 .proc__l{ font-size: .86rem; margin: 0; max-width: 56ch; }
#s1 .proc__d{ text-align: right; color: var(--ikf); font-size: .72rem; letter-spacing: .04em; }

/* ---- CTA band -------------------------------------------------------- */
#s1 .cta{ border-top: 1px solid var(--ln); padding-block: clamp(2rem, 4cqi, 3.4rem); }
#s1 .cta h2{ margin-bottom: .8rem; }
#s1 .cta__row{ display: flex; align-items: center; gap: 1.8rem; flex-wrap: wrap; margin-top: 1.3rem; }
#s1 .am-btn{
  display: inline-flex; align-items: center; gap: .7rem; padding: .9rem 1.5rem;
  background: var(--cl); color: #17120f; font-size: .82rem; font-weight: 600;
  letter-spacing: .06em; transition: background-color .25s var(--e-line);
}
#s1 .am-btn:hover{ background: var(--cld); }
#s1 .am-btn span{ transition: transform .25s var(--e-line); }
#s1 .am-btn:hover span{ transform: translateX(4px); }
#s1 .cta__tel{
  font-family: var(--disp); font-variation-settings: var(--fv-fig);
  font-feature-settings:"tnum" 1,"lnum" 1; font-size: 1.45rem; color: var(--ik);
}
#s1 .next{
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-top: 1px solid var(--ln); padding-block: 1rem; color: var(--ikf);
  transition: color .25s var(--e-line);
}
#s1 .next:hover{ color: var(--ik); }
#s1 .next b{
  font-family: var(--disp); font-weight: 400; font-variation-settings: var(--fv-md);
  font-size: 1.25rem; color: var(--ik); letter-spacing: -.01em;
}
#s1 .foot{ border-top: 1px solid var(--ln); padding-block: 1.3rem 2rem; display: flex; flex-wrap: wrap; gap: .5rem 2rem; }

/* ===================== ZABUDOWA - the two registers =================== */
#s1 .kwyk{ margin-top: clamp(1.5rem, 3cqi, 2.4rem); }
#s1 .kwyk__g + .kwyk__g{ margin-top: clamp(1.6rem, 3cqi, 2.4rem); }
#s1 .kwyk__t{
  font-family: var(--disp); font-variation-settings: var(--fv-md);
  font-size: 1.05rem; line-height: 1.2; color: var(--ik); padding-bottom: .7rem;
}

#s1 .kw{ border-top: 1px solid var(--lns); }
#s1 .kw__row{
  display: grid; grid-template-columns: 13rem minmax(0,1fr);
  gap: clamp(.9rem, 2.2cqi, 2.2rem);
  padding-block: 1.1rem; border-bottom: 1px solid var(--ln);
}
#s1 .kw__row:last-child{ border-bottom-color: var(--lns); }
#s1 .kw__el{
  display: block; font-family: var(--disp); font-variation-settings: var(--fv-md);
  font-size: 1.12rem; line-height: 1.15; letter-spacing: -.01em; color: var(--ik);
}
#s1 .kw__cv{ display: block; margin-top: .3rem; font-size: .82rem; line-height: 1.4; color: var(--ikf); }
#s1 .kw__dd{ min-width: 0; }
#s1 .kw__opts{ list-style: none; margin: 0; padding: 0; display: grid; align-items: start; }
#s1 .kw__opts--5{ grid-template-columns: repeat(5, minmax(0,1fr)); }
#s1 .kw__opts--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
#s1 .kw__opt{
  position: relative; min-width: 0;
  border-top: 1px solid var(--cl); padding: .8rem .85rem .85rem 0;
  transition: background-color .25s var(--e-line), border-top-color .25s var(--e-line);
}
#s1 .kw__opt + .kw__opt{ border-left: 1px solid var(--ln); padding-left: .85rem; }
#s1 .kw__opt::before{
  content: ""; position: absolute; top: -5px; left: 0;
  width: 1px; height: 10px; background: var(--cl);
  transition: background-color .25s var(--e-line);
}
#s1 .kw__opt:last-child::after{
  content: ""; position: absolute; top: -5px; right: 0;
  width: 1px; height: 10px; background: var(--cl);
  transition: background-color .25s var(--e-line);
}
#s1 .kw__nm{
  display: block; font-family: var(--disp);
  font-variation-settings:"wdth" 98,"wght" 480;
  font-size: 1.04rem; line-height: 1.18; letter-spacing: -.01em; color: var(--ik);
  overflow-wrap: break-word; transition: color .25s var(--e-line);
}
#s1 .kw__q{ display: block; margin-top: .35rem; font-size: .76rem; line-height: 1.35; color: var(--ikf); }
#s1 .kw__opt:hover{ background: rgba(180,145,95,.085); border-top-color: var(--cld); }
#s1 .kw__opt:hover::before,#s1 .kw__opt:hover::after{ background: var(--cld); }
#s1 .kw__opts:has(.kw__opt:hover) .kw__opt:not(:hover) .kw__nm{ color: var(--iks); }

#s1 .kd{ border-top: 1px solid var(--lns); }
#s1 .kd__r{
  display: grid; grid-template-columns: 13rem minmax(0,1fr);
  gap: clamp(.9rem, 2.2cqi, 2.2rem);
  padding-block: 1rem; border-bottom: 1px solid var(--ln);
}
#s1 .kd__r:last-child{ border-bottom-color: var(--lns); }
#s1 .kd__nm{
  font-family: var(--disp); font-variation-settings: var(--fv-md);
  font-size: 1.12rem; line-height: 1.15; color: var(--ik);
}
#s1 .kd__b{ border-left: 1px solid var(--cl); padding-left: 1.1rem; max-width: 58ch; }
#s1 .kd__b p{
  margin: 0; font-family: var(--disp); font-variation-settings: var(--fv-lead);
  font-size: 1rem; line-height: 1.5; color: var(--ik);
}
#s1 .kwyk__x{
  display: block; margin-top: 1rem; max-width: 64ch;
  font-size: .84rem; line-height: 1.5; color: var(--ikf);
}

/* ===================== ZESTAWIENIE PAKIETÓW ========================== */
#s1 .zkey{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .6rem 1.5rem; flex-wrap: wrap; padding-bottom: .8rem;
}
#s1 .zkey__mk{ display: flex; align-items: center; flex-wrap: wrap; gap: .4rem 1.4rem; }
#s1 .zkey__mk span{ display: inline-flex; align-items: center; gap: .5rem; }
#s1 .zkey__pk{ display: none; }

/* the marks: drawn, not typed, so weight and size are ours */
#s1 .zmk{ display: inline-flex; align-items: center; justify-content: center; }
#s1 .zmk svg{ display: block; width: 19px; height: 19px; }
#s1 .zmk--in{ color: var(--cl); }
#s1 .zmk--opt{ color: var(--cl); }
/* the negative is legible but never louder than the positive */
#s1 .zmk--out{ color: var(--ikf); opacity: .6; }
#s1 .zmk svg{ transition: color .25s var(--e-line); }

#s1 .zt tbody th.c-el{
  width: 26%; padding: .8rem 1rem .8rem 0; border-bottom: 1px solid var(--ln);
  vertical-align: top; text-align: left;
  font-family: var(--sans); font-size: .86rem; font-weight: 500; color: var(--ik);
  letter-spacing: 0; text-transform: none;
}
#s1 .zt td.c-note{ color: var(--ikf); font-size: .82rem; }
#s1 .zt th.c-pk{
  width: 7.2rem; text-align: center; padding-right: 0;
  text-transform: none; letter-spacing: .06em; vertical-align: bottom;
}
#s1 .zt td.c-pk{ text-align: center; padding-right: 0; }
#s1 .zpk-no{ display: block; font-size: 1.02rem; color: var(--ik); }
#s1 .zpk-nm{
  display: block; margin-top: .28rem; font-size: 0.68rem; line-height: 1.25;
  letter-spacing: .06em; color: var(--ikf); font-weight: 400;
  padding-inline: .5rem;
}
#s1 .zflag{
  display: inline-block; margin-bottom: .5rem; padding: .24rem .42rem .18rem;
  border: 1px solid var(--cl); color: var(--cld); line-height: 1;
  font-family: var(--sans); font-size: 0.68rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
}
#s1 .zt .c-p2{ background: rgba(180,145,95,.075); }
#s1 .zt thead th.c-p2{ border-bottom-color: var(--cl); }
#s1 .zt tbody tr:hover td,
#s1 .zt tbody tr:hover th{ background: rgba(236,231,221,.03); }
#s1 .zt tbody tr:hover td.c-p2{ background: rgba(180,145,95,.12); }
#s1 .zt tbody tr:hover td.c-pk .zmk--in,
#s1 .zt tbody tr:hover td.c-pk .zmk--opt{ color: var(--cld); }
#s1 .zt tbody tr.zlast td,
#s1 .zt tbody tr.zlast th{ border-bottom-color: var(--lns); }

#s1 .zest:has(.zpk--1:hover) .zt .c-p1,
#s1 .zest:has(.zpk--1:focus-within) .zt .c-p1,
#s1 .zest:has(.zpk--2:hover) .zt .c-p2,
#s1 .zest:has(.zpk--2:focus-within) .zt .c-p2,
#s1 .zest:has(.zpk--3:hover) .zt .c-p3,
#s1 .zest:has(.zpk--3:focus-within) .zt .c-p3{ background: rgba(180,145,95,.13); }
#s1 .zest:has(.zpk--1:hover) .zt .c-p1 .zmk--in,
#s1 .zest:has(.zpk--2:hover) .zt .c-p2 .zmk--in,
#s1 .zest:has(.zpk--3:hover) .zt .c-p3 .zmk--in,
#s1 .zest:has(.zpk--3:hover) .zt .c-p3 .zmk--opt{ color: var(--cld); }

#s1 .zt tbody tr.zprice:hover td,
#s1 .zt tbody tr.zprice:hover th{ background: transparent; }
#s1 .zt .zprice th,#s1 .zt .zprice td{
  border-top: 0; border-bottom: 0; padding-top: 1.3rem; padding-bottom: 0;
}
#s1 .zt .zprice th.zprice__lab{
  font-family: var(--sans); font-weight: 500; font-size: .76rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ik); text-align: right;
  vertical-align: middle; padding-right: 1.5rem;
}
#s1 .zt .zprice td.zprice__v{ text-align: center; padding-right: 0; }
#s1 .zdim{
  position: relative; display: block; height: 1px; background: var(--cl);
  margin-bottom: .9rem;
}
#s1 .zdim::before,#s1 .zdim::after{
  content: ""; position: absolute; top: -4px; width: 1px; height: 9px; background: var(--cl);
}
#s1 .zdim::before{ left: 0; }
#s1 .zdim::after{ right: 0; }
#s1 .zdim i{ position: absolute; top: -3px; width: 1px; height: 7px; background: var(--cl); opacity: .55; }
#s1 .zdim i:first-child{ left: 33.333%; }
#s1 .zdim i:last-child{ left: 66.667%; }
#s1 .zbig{
  display: block; font-family: var(--disp); font-weight: 400;
  font-variation-settings: var(--fv-fig); font-feature-settings:"tnum" 1,"lnum" 1;
  font-size: 1.45rem; line-height: 1.1; letter-spacing: -.01em; color: var(--cld);
}
#s1 .zsub{ display: block; margin-top: .45rem; }

#s1 .znota{ margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--ln); }
#s1 .znota__r{ display: grid; grid-template-columns: 14rem minmax(0,1fr); gap: clamp(.9rem, 2.2cqi, 2.2rem); }
#s1 .znota__r + .znota__r{ margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--ln); }
#s1 .znota__l{ padding-top: .25rem; }
#s1 .znota__b{ border-left: 1px solid var(--cl); padding-left: 1.1rem; max-width: 60ch; }
#s1 .znota__b p{
  margin: 0 0 .7em; font-family: var(--disp); font-variation-settings: var(--fv-lead);
  font-size: 1rem; line-height: 1.5; color: var(--ik);
}
#s1 .znota__b--s{ border-left-color: var(--lns); }
#s1 .znota__b--s p{
  margin: 0; font-family: var(--sans); font-variation-settings: normal;
  font-size: .88rem; line-height: 1.5; color: var(--iks);
}
#s1 .znota__sig{ display: block; }
#s1 .znota__x{
  display: block; margin-top: .75rem; max-width: 56ch;
  font-family: var(--sans); font-size: .81rem; line-height: 1.45;
  color: var(--ikf); font-feature-settings:"tnum" 1,"lnum" 1;
}

#s1 .zblk{ display: block; margin-bottom: .8rem; }
#s1 .zpkg{ margin-top: clamp(1.6rem, 3cqi, 2.4rem); }
#s1 .pkg{ display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--ln); }
#s1 .pkg > div{ padding: .95rem 1rem .95rem 0; }
#s1 .pkg > div + div{ padding-left: 1rem; border-left: 1px solid var(--ln); }
#s1 .pkg .zpk--2{ border-top: 2px solid var(--cl); margin-top: -1px; }
#s1 .pkg dt{ display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .55rem; margin-bottom: .45rem; }
#s1 .pkg dt .am-num{ font-size: .9rem; color: var(--cl); }
#s1 .pkg dt em{
  font-style: normal; font-family: var(--disp); font-variation-settings: var(--fv-md);
  font-size: 1.05rem; line-height: 1.15; color: var(--ik);
}
#s1 .pkg dt .zflag{ margin: 0 0 0 auto; align-self: center; }
#s1 .pkg dd{ font-size: .84rem; line-height: 1.42; color: var(--iks); }
#s1 .zcta{
  display: inline-block; margin-top: .7rem; font-size: .81rem;
  letter-spacing: .04em; color: var(--ik); transition: color .25s var(--e-line);
}
#s1 .zcta b{ font-weight: 400; border-bottom: 1px solid var(--cl); padding-bottom: 2px; }
#s1 .zcta span{ display: inline-block; transition: transform .25s var(--e-line); }
#s1 .zcta:hover{ color: var(--cld); }
#s1 .zcta:hover span{ transform: translateX(4px); }

#s1 .zout{ margin-top: clamp(1.6rem, 3cqi, 2.4rem); }
#s1 .zout__i{
  display: grid; grid-template-columns: minmax(0,1fr) 13rem;
  gap: .5rem clamp(1rem, 2.5cqi, 2.5rem); align-items: start;
  margin-top: .8rem; padding-block: 1.2rem;
  border-top: 1px solid var(--lns); border-bottom: 1px solid var(--lns);
}
#s1 .zout__t{
  margin: .35rem 0 .45rem; font-family: var(--disp);
  font-variation-settings: var(--fv-md); font-size: 1.15rem; line-height: 1.2; color: var(--ik);
}
#s1 .zout__l{ margin: 0; font-size: .85rem; max-width: 56ch; }
#s1 .zout__p{ text-align: right; }
#s1 .zout__fig{
  display: block; font-family: var(--disp); font-weight: 400;
  font-variation-settings: var(--fv-fig); font-feature-settings:"tnum" 1,"lnum" 1;
  font-size: 1.45rem; line-height: 1.05; letter-spacing: -.01em;
  color: var(--cld); white-space: nowrap;
}
#s1 .zout__ref{ display: block; margin-top: .45rem; letter-spacing: .1em; }
#s1 .zend{ margin-top: clamp(1.3rem, 2.6cqi, 2rem); }

/* ============================ NARROW ================================= */
@container (max-width: 1040px){
  #s1 .zt th.c-pk{ width: 6.4rem; }
  #s1 .zpk-nm{ font-size: 0.68rem; letter-spacing: .04em; }
  #s1 .zt thead th,#s1 .zt tbody td,#s1 .zt tbody th{ padding-right: .7rem; }
  #s1 .zt th.c-pk,#s1 .zt td.c-pk{ padding-right: 0; }
  #s1 .zt .zprice th.zprice__lab{ padding-right: 1rem; }
  #s1 .znota__r{ grid-template-columns: 11rem minmax(0,1fr); }
  #s1 .kw__row,#s1 .kd__r{ grid-template-columns: 11rem minmax(0,1fr); }
  #s1 .kw__opt{ padding-right: .6rem; }
  #s1 .kw__opt + .kw__opt{ padding-left: .6rem; }
  #s1 .kw__nm{ font-size: 1rem; }
}

@container (max-width: 900px){
  #s1 .title__left,#s1 .title__right{ grid-column: span 12; }
  #s1 .tblock{ grid-template-columns: repeat(2,1fr); }
  #s1 .tblock div:nth-child(3),#s1 .tblock div:nth-child(4){ border-top: 1px solid var(--ln); }
  #s1 .tblock div:nth-child(3){ padding-left: 0; border-left: 0; }
  #s1 .plan{ grid-template-columns: 1fr; }
  #s1 .plates{ grid-template-columns: repeat(2,1fr); }
  #s1 .proc__step{ grid-template-columns: 2.6rem 1fr; }
  #s1 .proc__d{ grid-column: 2; text-align: left; padding-top: .3rem; }
  #s1 .kw__row,#s1 .kd__r{ grid-template-columns: minmax(0,1fr); gap: .9rem; }
  #s1 .pkg{ grid-template-columns: minmax(0,1fr); }
  #s1 .pkg > div{ padding-left: 0; border-left: 0; }
  #s1 .pkg > div + div{ padding-left: 0; border-left: 0; border-top: 1px solid var(--ln); }
  #s1 .pkg .zpk--2{ margin-top: 0; }
  #s1 .pkg dt .zflag{ margin-left: .2rem; }
}

@container (max-width: 860px){
  #s1 .zkey{ flex-direction: column; align-items: flex-start; gap: .7rem; }
  #s1 .zkey__sheet{ display: none; }
  #s1 .zkey__pk{ display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
  #s1 .zkey__pk span{ display: inline-flex; align-items: baseline; gap: .4rem; }
  #s1 .zkey__pk .am-num{ color: var(--cl); font-size: .82rem; }
  #s1 .zkey__pk b{ font-weight: 500; color: var(--iks); }
  #s1 .zkeyflag{ color: var(--cld); }

  #s1 .zt,#s1 .zt thead,#s1 .zt tbody{ display: block; }
  #s1 .zt thead tr,#s1 .zt tbody tr{
    display: grid;
    grid-template-columns: minmax(0,1fr) 2rem 2rem 2rem;
    column-gap: .4rem;
  }
  #s1 .zt thead tr{ border-bottom: 1px solid var(--lns); }
  #s1 .zt thead th{ padding: 0 0 .55rem; width: auto; border-bottom: 0; }
  #s1 .zt thead th.c-note{ display: none; }
  #s1 .zt thead th.c-pk{ text-align: center; width: auto; }
  #s1 .zpk-nm{
    position: absolute; width: 1px; height: 1px; margin: -1px;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
  }
  #s1 .zt thead .zflag{ display: none; }
  #s1 .zpk-no{ font-size: .88rem; }

  #s1 .zt tbody tr{ border-bottom: 1px solid var(--ln); }
  #s1 .zt tbody tr.zlast{ border-bottom-color: var(--lns); }
  #s1 .zt tbody td,#s1 .zt tbody th{ border: 0; padding: 0; width: auto; }
  #s1 .zt tbody th.c-el{
    grid-column: 1; grid-row: 1; width: auto; border-bottom: 0;
    padding: .75rem 0 0; font-size: .85rem;
  }
  #s1 .zt tbody td.c-note{ grid-column: 1; grid-row: 2; padding: .15rem 0 .75rem; font-size: .77rem; }
  #s1 .zt tbody td.c-pk{ grid-row: 1 / span 2; padding-block: .75rem; }
  #s1 .zt tbody td.c-p1{ grid-column: 2; }
  #s1 .zt tbody td.c-p2{ grid-column: 3; }
  #s1 .zt tbody td.c-p3{ grid-column: 4; }
  #s1 .zmk svg{ width: 17px; height: 17px; }

  #s1 .zt tbody tr.zprice{ display: block; border-bottom: 0; border-top: 0; }
  #s1 .zt .zprice th,#s1 .zt .zprice td{ display: block; padding: 0; border: 0; }
  #s1 .zt .zprice th.zprice__lab{ text-align: left; padding: 1.1rem 0 .85rem; }
  #s1 .zt .zprice td.zprice__v{ text-align: left; }
  #s1 .zdim i{ display: none; }
  #s1 .zbig{ font-size: 1.3rem; }

  #s1 .znota__r{ grid-template-columns: minmax(0,1fr); gap: .8rem; }
  #s1 .znota__l{ padding-top: 0; }
  #s1 .zout__i{ grid-template-columns: minmax(0,1fr); gap: .5rem; }
  #s1 .zout__p{ text-align: left; }
}

@container (max-width: 700px){
  #s1 .head{ height: auto; padding-block: .7rem; }
  #s1 .tblock{ grid-template-columns: 1fr; }
  #s1 .tblock div{ padding-left: 0; border-left: 0; border-top: 1px solid var(--ln); }
  #s1 .tblock div:first-child{ border-top: 0; }
  #s1 .kw__opts--5,#s1 .kw__opts--3{ grid-template-columns: minmax(0,1fr); }
  #s1 .kw__opts{ border-top: 1px solid var(--cl); }
  #s1 .kw__opt{ border-top: 0; padding: .7rem 0; }
  #s1 .kw__opt + .kw__opt{ border-left: 0; border-top: 1px solid var(--ln); padding-left: 0; }
  #s1 .kw__opt::before,#s1 .kw__opt:last-child::after{ display: none; }
  #s1 .kw__opt:hover{ border-top-color: var(--ln); }
}

@container (max-width: 430px){
  #s1 .zt thead tr,#s1 .zt tbody tr{
    grid-template-columns: minmax(0,1fr) 1.7rem 1.7rem 1.7rem;
    column-gap: .3rem;
  }
  #s1 .zmk svg{ width: 15px; height: 15px; }
  #s1 .zt tbody th.c-el{ font-size: .83rem; }
  #s1 .zt tbody td.c-note{ font-size: .75rem; }
  #s1 .kd__b{ padding-left: .9rem; }
  #s1 .plate__cap{ padding: .5rem .6rem .7rem; font-size: .7rem; }
}

/* ============================ MOTION OFF ============================= */
@media (prefers-reduced-motion: reduce){
  #s1 *,#s1 *::before,#s1 *::after{
    transition-duration: .01ms;
    animation-duration: .01ms;
    animation-delay: 0ms;
  }
  #s1 .am-hero .pan:hover .pan__photo,
  #s1 .am-hero .pan:focus-within .pan__photo{ transform: none; }
  #s1 .zcta:hover span,#s1 .am-btn:hover span{ transform: none; }
}


/* =====================================================================
   SCROLL ANIMATIONS
   Gated on #s1.s1-js, the class the IIFE adds. With JavaScript off none
   of this applies and the page renders finished: twelve visible renders,
   three settled zones with the triangle already stretched between them,
   a fully assembled elevation.
   Containers: #s1-erg (rzut) and #s1-elev (widok ciągu).
   Elevation parts: .kel-g at top level, .kel-p nested inside #s1-el-base.
   ===================================================================== */

/* ---- 1. the twelve renders, arriving ------------------------------- */
#s1.s1-js .rvl{ opacity: 0; transform: translateY(20px); }
#s1.s1-js .rvl.is-in{
  opacity: 1; transform: none;
  transition: opacity .75s var(--e-draft) var(--rvl-d, 0ms),
              transform .75s var(--e-draft) var(--rvl-d, 0ms);
}
#s1.s1-js .rvl .plate__img{ transform: scale(1.045); }
#s1.s1-js .rvl.is-in .plate__img{
  transform: none;
  transition: transform 1.25s var(--e-draft) var(--rvl-d, 0ms);
}

/* ---- 2. ergonomics ------------------------------------------------
   JS owns the geometry: it re-points the polygon from the same offsets
   that move the zone groups, every frame. CSS owns only the fade. */
#s1.s1-js #s1-erg .erg-zone,
#s1.s1-js #s1-erg .erg-tri{ opacity: 0; }
#s1.s1-js #s1-erg.is-in .erg-zone{
  opacity: 1; transition: opacity .5s var(--e-line) var(--erg-d, 0ms);
}
#s1.s1-js #s1-erg.is-in .erg-tri{
  opacity: 1; transition: opacity .7s var(--e-line) .3s;
}
#s1.s1-js #s1-erg .erg-zone--fridge{ --erg-d: 0ms; }
#s1.s1-js #s1-erg .erg-zone--sink{   --erg-d: 90ms; }
#s1.s1-js #s1-erg .erg-zone--hob{    --erg-d: 180ms; }

/* ---- 3. zabudowa assembles ----------------------------------------
   Carcasses rise off the floor line, the worktop lands on them, the wall
   units come down, the appliance opening is left empty, then the
   under-cabinet light draws itself on. Translate values are SVG user
   units, which is what a CSS transform on an SVG element operates in. */
#s1.s1-js #s1-elev .kel-g--room,
#s1.s1-js #s1-elev .kel-p,
#s1.s1-js #s1-elev .kel-g--worktop,
#s1.s1-js #s1-elev .kel-g--upper,
#s1.s1-js #s1-elev .kel-g--agd,
#s1.s1-js #s1-elev .kel-g--light{
  opacity: 0;
  transition: opacity .5s var(--e-line) var(--kel-d, 0ms),
              transform .72s var(--e-draft) var(--kel-d, 0ms);
}
#s1.s1-js #s1-elev .kel-p{ transform: translateY(30px); }
#s1.s1-js #s1-elev .kel-g--worktop{ transform: translateY(-20px); }
#s1.s1-js #s1-elev .kel-g--upper{ transform: translateY(-36px); }
#s1.s1-js #s1-elev .kel-g--agd{ transform: translateY(14px); }

#s1.s1-js #s1-elev.is-in .kel-g--room,
#s1.s1-js #s1-elev.is-in .kel-p,
#s1.s1-js #s1-elev.is-in .kel-g--worktop,
#s1.s1-js #s1-elev.is-in .kel-g--upper,
#s1.s1-js #s1-elev.is-in .kel-g--agd,
#s1.s1-js #s1-elev.is-in .kel-g--light{ opacity: 1; transform: none; }

#s1.s1-js #s1-elev .kel-g--room{    --kel-d: 0ms; }
#s1.s1-js #s1-elev .kel-p--plinth{  --kel-d: 140ms; }
#s1.s1-js #s1-elev .kel-p--tall{    --kel-d: 240ms; }
#s1.s1-js #s1-elev .kel-p--cargo{   --kel-d: 330ms; }
#s1.s1-js #s1-elev .kel-p--run{     --kel-d: 410ms; }
#s1.s1-js #s1-elev .kel-g--worktop{ --kel-d: 590ms; }
#s1.s1-js #s1-elev .kel-g--upper{   --kel-d: 770ms; }
#s1.s1-js #s1-elev .kel-g--agd{     --kel-d: 930ms; }
#s1.s1-js #s1-elev .kel-g--light{   --kel-d: 1050ms; }

/* the light switches on by drawing along its own length */
#s1.s1-js #s1-elev .kel-lit{ stroke-dasharray: 320; stroke-dashoffset: 320; }
#s1.s1-js #s1-elev.is-in .kel-lit{
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .9s var(--e-line) 1.15s;
}

/* ---- reduced motion: end state, immediately ------------------------ */
@media (prefers-reduced-motion: reduce){
  #s1.s1-js .rvl,
  #s1.s1-js .rvl .plate__img,
  #s1.s1-js #s1-erg .erg-zone,
  #s1.s1-js #s1-erg .erg-tri,
  #s1.s1-js #s1-elev .kel-g--room,
  #s1.s1-js #s1-elev .kel-p,
  #s1.s1-js #s1-elev .kel-g--worktop,
  #s1.s1-js #s1-elev .kel-g--upper,
  #s1.s1-js #s1-elev .kel-g--agd,
  #s1.s1-js #s1-elev .kel-g--light{
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  #s1.s1-js #s1-elev .kel-lit{ stroke-dashoffset: 0 !important; transition: none !important; }
}

/* =====================================================================
   SCROLL ANIMATIONS - SECOND LAYER
   The same three verbs as the first layer: DRAW (scaleX from the left
   edge), SETTLE (translateY + fade) and STAMP (scale up from .55).
   Gated on #s1.s1-js, so with JavaScript off every one of these elements
   renders in its finished state. Each group is triggered by once() on a
   hook that is already in the markup - no new observers, no timers.
   ===================================================================== */

/* ---- 4. section headings settle ------------------------------------ */
#s1.s1-js .sec__hd{ opacity: 0; transform: translateY(14px); }
#s1.s1-js .sec__hd.is-in{
  opacity: 1; transform: none;
  transition: opacity .64s var(--e-draft), transform .64s var(--e-draft);
}

/* ---- 5. the five process steps, settling down the list -------------
   The big clay numeral is stamped a beat after its own row lands. Its
   origin is the left edge so the numeral grows along the baseline grid
   instead of drifting in from the middle of the column. */
#s1.s1-js .proc__step{ opacity: 0; transform: translateY(14px); }
#s1.s1-js .proc__step.is-in{
  opacity: 1; transform: none;
  transition: opacity .64s var(--e-draft) var(--prc-d, 0ms),
              transform .64s var(--e-draft) var(--prc-d, 0ms);
}
#s1.s1-js .proc__step .proc__no{
  opacity: 0; transform: scale(.55); transform-origin: left center;
}
#s1.s1-js .proc__step.is-in .proc__no{
  opacity: 1; transform: none;
  transition: opacity .38s var(--e-draft) calc(var(--prc-d, 0ms) + 150ms),
              transform .38s var(--e-draft) calc(var(--prc-d, 0ms) + 150ms);
}

/* ---- 6. zabudowa options, measured across the row ------------------
   The stagger runs in DOM order, which is left to right in the wide grid
   and top to bottom once the row stacks at 700px, so the clay rule and
   its end ticks read as being set out across the row. The .is-in rule
   re-declares the original background-color / border-top-color
   transitions inside its shorthand: dropping them would make the hover
   wash and the clay tick recolour snap instead of fade. */
#s1.s1-js .kw__opt{ opacity: 0; transform: translateY(12px); }
#s1.s1-js .kw__opt.is-in{
  opacity: 1; transform: none;
  transition: opacity .64s var(--e-draft) var(--kwo-d, 0ms),
              transform .64s var(--e-draft) var(--kwo-d, 0ms),
              background-color .25s var(--e-line),
              border-top-color .25s var(--e-line);
}

/* ---- 7. the two advisory rows -------------------------------------- */
#s1.s1-js .kd__r{ opacity: 0; transform: translateY(14px); }
#s1.s1-js .kd__r.is-in{
  opacity: 1; transform: none;
  transition: opacity .64s var(--e-draft) var(--kdr-d, 0ms),
              transform .64s var(--e-draft) var(--kdr-d, 0ms);
}

/* ---- 8. the schedule marks stamp, row by row ------------------------
   JS stamps by row, not by mark index, so the sweep reads down the table
   and the whole run is over in about half a second of stagger.
   --zmk-op carries each mark's OWN finished opacity: the cross is
   deliberately quieter than the checkmark (.zmk--out, above), and a flat
   opacity:1 end state would silently promote every negative to full
   strength. */
#s1.s1-js .zmk{ --zmk-op: 1; opacity: 0; transform: scale(.55); }
#s1.s1-js .zmk--out{ --zmk-op: .6; }
#s1.s1-js .zmk.is-in{
  opacity: var(--zmk-op); transform: none;
  transition: opacity .38s var(--e-draft) var(--zmk-d, 0ms),
              transform .38s var(--e-draft) var(--zmk-d, 0ms);
}

/* ---- 9. the price dimension line is drawn, then the figure lands ----
   The end ticks and the two intermediate ticks are held back until the
   rule has reached full width, so the parent's own scaleX never renders
   them as sub-pixel slivers sliding along the line. */
#s1.s1-js .zdim{ transform: scaleX(0); transform-origin: left center; }
#s1.s1-js .zdim.is-in{ transform: none; transition: transform .62s var(--e-line); }
#s1.s1-js .zdim::before,
#s1.s1-js .zdim::after,
#s1.s1-js .zdim i{ opacity: 0; }
#s1.s1-js .zdim.is-in::before,
#s1.s1-js .zdim.is-in::after{ opacity: 1; transition: opacity .3s var(--e-line) .52s; }
#s1.s1-js .zdim.is-in i{ opacity: .55; transition: opacity .3s var(--e-line) .62s; }

#s1.s1-js .zbig{ opacity: 0; transform: translateY(14px); }
#s1.s1-js .zbig.is-in{
  opacity: 1; transform: none;
  transition: opacity .64s var(--e-draft) .4s, transform .64s var(--e-draft) .4s;
}

/* ---- 10. the four hero panels, on load ------------------------------
   Above the fold, so this one is not scroll-triggered: the IIFE adds
   .is-in in the same task that adds .s1-js, which is why there is no
   pre-hidden state in the CSS and the panels can never be left
   invisible. Written as keyframes with fill-mode BACKWARDS - never
   forwards - so the from-state covers the stagger delay and, the moment
   the entrance is over, the panel is back under its own hover
   transitions with nothing latched onto transform or opacity.
   .pan__vert is rotated 180deg by the layout, so its rise has to be
   written inside the rotated frame. */
@keyframes s1-pan-in{
  from{ opacity: 0; transform: scale(1.055); }
  to{   opacity: 1; transform: scale(1); }
}
@keyframes s1-pan-vert-in{
  from{ opacity: 0; transform: rotate(180deg) translateY(-14px); }
  to{   opacity: 1; transform: rotate(180deg); }
}
#s1.s1-js .pan.is-in .pan__photo{
  animation: s1-pan-in .95s var(--e-draft) var(--pan-d, 0ms) backwards;
}
#s1.s1-js .pan.is-in .pan__vert{
  animation: s1-pan-vert-in .64s var(--e-draft) calc(var(--pan-d, 0ms) + 160ms) backwards;
}

/* ---- reduced motion: end state, immediately ------------------------
   The sheet-wide reduce block above only shortens durations, and these
   rules outrank it on specificity, so every new element needs an
   explicit !important end state here. */
@media (prefers-reduced-motion: reduce){
  #s1.s1-js .sec__hd,
  #s1.s1-js .proc__step,
  #s1.s1-js .proc__no,
  #s1.s1-js .kw__opt,
  #s1.s1-js .kd__r,
  #s1.s1-js .zdim,
  #s1.s1-js .zbig,
  #s1.s1-js .pan__photo{
    opacity: 1 !important; transform: none !important;
    transition: none !important; animation: none !important;
  }
  /* each mark lands on its own finished opacity, not all of them at 1 */
  #s1.s1-js .zmk{
    opacity: var(--zmk-op, 1) !important; transform: none !important;
    transition: none !important;
  }
  /* the vertical room name keeps the rotation the layout depends on */
  #s1.s1-js .pan__vert{
    opacity: 1 !important; transform: rotate(180deg) !important;
    transition: none !important; animation: none !important;
  }
  #s1.s1-js .zdim::before,
  #s1.s1-js .zdim::after{ opacity: 1 !important; transition: none !important; }
  #s1.s1-js .zdim i{ opacity: .55 !important; transition: none !important; }
}

/* ---- 11. reviews settle, staggered across the row ------------------
   Observed on the .ops container rather than per card, so the five
   arrive as one group reading left to right instead of five separate
   reveals firing as each card crosses the threshold. */
#s1.s1-js .op{ opacity: 0; transform: translateY(14px); }
#s1.s1-js .ops.is-in .op{
  opacity: 1; transform: none;
  transition: opacity .64s var(--e-draft) var(--op-d, 0ms),
              transform .64s var(--e-draft) var(--op-d, 0ms);
}
@media (prefers-reduced-motion: reduce){
  #s1.s1-js .op{
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}


/* ---- extra components: lazienek ---- */
/* =====================================================================
   ŁAZIENKA - additions on top of the kuchnia sheet.
   Two new things only: the bathroom plan's ink, and the FAQ the kitchen
   page does not have. Everything else reuses the shipped components.
   ===================================================================== */

/* the 16:9 plate in the title block carries this room's photograph.
   Written as a literal url() rather than url(/assets/Projektowanie-lazienek_wizualizacj-lazienek_-on-line_034-1200w-B1MJ8bH3.webp) so it is
   correct whether or not the image-var substitution pass runs. */
/* ---- rzut łazienki --------------------------------------------------
   Clay is spent on exactly one argument: the boundary between the wet
   and the dry zone, and the field of clear floor each fixture needs in
   front of it. The fixtures themselves stay in the same ink as the
   kitchen's plan (.drw-room, .drw-box, .drw-h). */
#s1 .lz-cl{
  fill: rgba(180,145,95,.075); stroke: var(--cl);
  stroke-width: 1.1; stroke-dasharray: 5 4;
}
#s1 .lz-div{
  fill: none; stroke: var(--cl); stroke-width: 1.6; stroke-dasharray: 10 6;
}
#s1 .lz-zn{
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: 2.2px; fill: var(--cl);
}
#s1 .lz-cw{
  font-family: var(--sans); font-size: 11.5px; font-weight: 500;
  letter-spacing: .9px; fill: var(--cl);
}
/* The shared .erg-lab steps up hard on narrow screens because the
   kitchen's labels sit in open space. These sit inside fixtures and
   clearance fields, so they get a gentler ramp - at the kitchen's 23px
   "Pralka" no longer fits its own box. */
@container (max-width: 620px){
  #s1 #s1-lzn .erg-lab{ font-size: 16px; }
  #s1 .lz-zn{ font-size: 15px; letter-spacing: 1.8px; }
  #s1 .lz-cw{ font-size: 14px; }
}
@container (max-width: 430px){
  #s1 #s1-lzn .erg-lab{ font-size: 19px; }
  #s1 .lz-zn{ font-size: 18px; letter-spacing: 1.4px; }
  #s1 .lz-cw{ font-size: 16px; }
}

/* ---- FAQ: a ruled list of <details> ---------------------------------
   Summary sits on the sub-head axis, the answer behind a clay rule: the
   same pair as .kd__nm / .kd__b. The marker is drawn from two 1px bars
   so it matches the sheet's hairlines instead of a glyph. */
#s1 .faq{ border-top: 1px solid var(--lns); }
#s1 .faq__i{ border-bottom: 1px solid var(--ln); }
#s1 .faq__i:last-child{ border-bottom-color: var(--lns); }
#s1 .faq__q{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: clamp(1rem, 3cqi, 2.4rem); padding-block: .95rem;
  cursor: pointer; list-style: none;
  font-family: var(--disp); font-variation-settings: var(--fv-md);
  font-size: 1.08rem; line-height: 1.2; letter-spacing: -.01em; color: var(--ik);
  transition: color .25s var(--e-line);
}
#s1 .faq__q::-webkit-details-marker{ display: none; }
#s1 .faq__q:hover{ color: var(--cld); }
#s1 .faq__t{
  margin: 0; font-family: inherit; font-size: inherit; font-weight: 400;
  font-variation-settings: inherit; letter-spacing: inherit; color: inherit;
  max-width: 52ch;
}
#s1 .faq__mk{
  position: relative; flex: none; align-self: center;
  width: 13px; height: 13px;
}
#s1 .faq__mk::before,#s1 .faq__mk::after{
  content: ""; position: absolute; background: var(--cl);
  transition: transform .25s var(--e-line), opacity .25s var(--e-line);
}
#s1 .faq__mk::before{ left: 0; top: 6px; width: 13px; height: 1px; }
#s1 .faq__mk::after{ left: 6px; top: 0; width: 1px; height: 13px; }
#s1 .faq__i[open] .faq__mk::after{ opacity: 0; transform: scaleY(0); }
#s1 .faq__a{
  margin: 0 0 1.05rem; max-width: 60ch;
  border-left: 1px solid var(--cl); padding-left: 1.1rem;
  font-family: var(--disp); font-variation-settings: var(--fv-lead);
  font-size: 1rem; line-height: 1.5; color: var(--ik);
}

/* the service area, set as one dense line under the CTA buttons */
#s1 .cta__area{ display: block; margin-top: 1.3rem; max-width: 62ch; }

@container (max-width: 430px){
  #s1 .faq__q{ font-size: 1rem; }
  #s1 .faq__a{ padding-left: .9rem; }
}

@media (prefers-reduced-motion: reduce){
  #s1 .faq__mk::before,#s1 .faq__mk::after{ transition: none; }
}

/* ---- extra components: salonu ---- */
/* ===== SALON - dodatki do arkusza kuchni ============================
   Only what the salon page needs beyond the shipped component library:
   the hero plate's own render, and the ink for the rzut strefy dziennej.
   Clay is reserved for the argument the drawing makes (oś TV, pole
   widzenia, wymiar); every other line reuses the kitchen's .drw-* /
   .kel-* ink so the four room pages draw in one hand. */

/* the twelve --img-gal-* fallbacks belong to the kuchnia sheet; the ported
   gallery ships real <img> elements, so the stale grounds are dropped
   rather than left to flash behind a salon render */
#s1 .plates .plate__img{ background-image: none; }

/* pole widzenia: the wedge from the screen edges back to the seated eye */
#s1 .sal-cone{
  fill: rgba(180,145,95,.06); stroke: var(--cl); stroke-width: 1;
  stroke-dasharray: 4 4; stroke-linejoin: round;
}
/* ekran: the one bright plane in the drawing, so the wedge that lands on
   its two ends is legible as a field of view rather than decoration */
#s1 .sal-scr{ fill: rgba(236,231,221,.34); stroke: var(--ik); stroke-width: 1.2; }
/* oś TV */
#s1 .sal-ax{ fill: none; stroke: var(--cl); stroke-width: 1.6; stroke-dasharray: 7 5; }
/* the dimension line and its end ticks */
#s1 .sal-dim{ fill: none; stroke: var(--cl); stroke-width: 1; }
/* witness lines, hairline like every other secondary rule on the sheet */
#s1 .sal-ext{ fill: none; stroke: var(--ln); stroke-width: 1; }
/* clay caption set directly on the part it names - no leaders */
#s1 .sal-lab{
  font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 1.4px;
  fill: var(--cld);
}
@container (max-width: 620px){ #s1 .sal-lab{ font-size: 18px; } }
@container (max-width: 430px){ #s1 .sal-lab{ font-size: 23px; } }

/* ---- extra components: sypialni ---- */
/* =====================================================================
   SYPIALNIA - dodatek do arkusza kuchni. Nic więcej nie jest potrzebne:
   reszta strony stoi na komponentach, które kuchnia już definiuje.
   ===================================================================== */

/* ---- płyta tytułowa: ta strona pokazuje sypialnię, nie kuchnię ------
   Wyższa specyficzność niż reguła bazowa, więc kolejność arkuszy nie ma
   znaczenia. */
#s1 .title__right .plate--hero{
  background-image: url(/assets/projektowanie-sypialni_wizualizacje-sypialni_online_10-1200w-DN5ZqUP4.webp);
}

/* ---- rzut sypialni: przejścia wokół łóżka --------------------------
   Ink (--lns / --ln) rysuje ściany i bryły mebli; clay tylko to, o co
   toczy się argument w tekście obok, czyli komunikację: strefy kreskowane
   i ich linie wymiarowe. Ta sama para co .zdim w zestawieniu - linia z
   dwiema kreskami końcowymi. */
#s1 #s1-sbd svg{ overflow: hidden; }
#s1 .sbd-clr{
  fill: rgba(180,145,95,.07);
  stroke: var(--cl); stroke-width: 1.2; stroke-dasharray: 6 5;
}
#s1 .sbd-dim{ fill: none; stroke: var(--cl); stroke-width: 1.2; }
/* etykieta leży wprost na strefie, do której należy - żadna linia
   odnośnikowa nie przecina rysunku */
#s1 .sbd-lab{
  font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 1.4px;
  fill: var(--cld);
}
/* skala jak w .erg-lab, o stopień niżej: etykieta wymiarowa musi zmieścić
   się w strefie, którą opisuje, także przy 430px */
@container (max-width: 620px){ #s1 .sbd-lab{ font-size: 17px; } }
@container (max-width: 430px){ #s1 .sbd-lab{ font-size: 21px; } }

/* ---- bay z dwiema opcjami (kuchnia ma tylko --5 i --3) -------------- */
#s1 .kw__opts--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }

/* ---- FAQ: ta sama linia co .proc i .kd, tylko rozwijana -------------
   Znacznik <details> niesie stan, więc nie potrzeba tu JavaScriptu.
   Krój i rytm wierszy jak w .proc__step; odpowiedź stoi za clayową
   linią, dokładnie jak .kd__b i .znota__b. */
#s1 .sfq{ border-top: 1px solid var(--lns); }
#s1 .sfq__i{ border-bottom: 1px solid var(--ln); }
#s1 .sfq__i:last-child{ border-bottom-color: var(--lns); }
#s1 .sfq__q{
  display: grid; grid-template-columns: minmax(0,1fr) 14px;
  align-items: center; gap: clamp(.9rem, 2.2cqi, 2.2rem);
  padding-block: 1rem; cursor: pointer; list-style: none;
  font-family: var(--disp); font-variation-settings: var(--fv-md);
  font-size: 1.06rem; line-height: 1.25; letter-spacing: -.01em; color: var(--ik);
  transition: color .25s var(--e-line);
}
#s1 .sfq__q::-webkit-details-marker{ display: none; }
#s1 .sfq__q::marker{ content: ""; }
#s1 .sfq__q:hover{ color: var(--cld); }
#s1 .sfq__q:focus-visible{ outline: 2px solid var(--cld); outline-offset: 2px; }
/* rysowany plus, który przy otwarciu zostaje minusem */
#s1 .sfq__s{ position: relative; display: block; width: 14px; height: 14px; }
#s1 .sfq__s::before,
#s1 .sfq__s::after{
  content: ""; position: absolute; background: var(--cl);
  transition: transform .3s var(--e-line), background-color .25s var(--e-line);
}
#s1 .sfq__s::before{ left: 0; top: 6px; width: 14px; height: 1px; }
#s1 .sfq__s::after{ left: 6px; top: 0; width: 1px; height: 14px; }
#s1 .sfq__i[open] .sfq__s::after{ transform: scaleY(0); }
#s1 .sfq__q:hover .sfq__s::before,
#s1 .sfq__q:hover .sfq__s::after{ background: var(--cld); }
#s1 .sfq__a{
  border-left: 1px solid var(--cl); padding: .1rem 0 1.15rem 1.1rem;
  max-width: 62ch;
}
#s1 .sfq__a p{ margin: 0; font-size: .89rem; line-height: 1.55; color: var(--iks); }
#s1 .sfq__i[open] .sfq__a{ animation: s1-sfq-in .42s var(--e-draft) both; }
@keyframes s1-sfq-in{
  from{ opacity: 0; transform: translateY(-5px); }
  to{   opacity: 1; transform: none; }
}

@container (max-width: 700px){
  #s1 .kw__opts--2{ grid-template-columns: minmax(0,1fr); }
  #s1 .sfq__q{ font-size: 1rem; gap: .9rem; }
  #s1 .sfq__a{ padding-left: .9rem; }
}

/* =====================================================================
   MOBILE HERO FIX
   The vertical room name belongs to the wide layout, where a panel is
   480px tall. On the stacked mobile bands a panel is 112px, so the
   rotated name was taller than its own band and bled across all four,
   overlapping the logo and clipping at the edge. .pan{overflow:hidden}
   hid that from every page-overflow check, which is why it survived.
   The horizontal .pan__row is the mobile name; the vertical one goes.
   ===================================================================== */
@container (max-width: 1023px){
  #s1 .pan__body,
  #s1 .pan__block{ display: none; }

  /* four chips have to fit a 390px rail without the last one hanging off */
  #s1 .rail a{ padding: 0 .72rem; font-size: .66rem; letter-spacing: .09em; }
}
@container (max-width: 430px){
  #s1 .rail a{ padding: 0 .55rem; font-size: .62rem; letter-spacing: .06em; }
  #s1 .pan{ height: 96px; }
  #s1 .pan__row b{ font-size: 1.45rem; }
}

/* =====================================================================
   GENERIC DRAWING ANIMATION
   Every plan figure builds itself on scroll: the SVG's top-level groups
   arrive in document order (walls, then fixtures, then clearances, then
   the argument, then the annotation), and anything marked .drw-draw
   draws along its own length instead of fading.
   The kitchen's two figures are excluded - they already have bespoke
   animations (the triangle that follows its zones, and the elevation
   that assembles) and a second opacity rule would fight them.
   ===================================================================== */
#s1.s1-js .plan__fig:not(:has([data-vx])):not(:has(.kel-g)) svg > *{ opacity: 0; }
#s1.s1-js .plan__fig:not(:has([data-vx])):not(:has(.kel-g)).is-in svg > *{
  opacity: 1;
  transition: opacity .55s var(--e-line) calc(var(--pi, 0) * 130ms);
}
#s1.s1-js .plan__fig:not(:has([data-vx])):not(:has(.kel-g)) .drw-draw{
  stroke-dashoffset: var(--len, 600);
  stroke-dasharray: var(--len, 600);
}
#s1.s1-js .plan__fig:not(:has([data-vx])):not(:has(.kel-g)).is-in .drw-draw{
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .95s var(--e-line) calc(var(--pi, 0) * 130ms + 260ms);
}

@media (prefers-reduced-motion: reduce){
  #s1.s1-js .plan__fig svg > *{ opacity: 1 !important; transition: none !important; }
  #s1.s1-js .plan__fig .drw-draw{
    stroke-dashoffset: 0 !important; transition: none !important;
  }
}


/* ---- nowy rzut łazienki ---- */
/* --- rzut łazienki: wall body, small annotation face, dimensions ------- */
#s1 .lz-hbg{ fill: var(--pgl); opacity: .5; }
#s1 .lz-hl{ stroke: var(--ln); stroke-width: .8; }
#s1 .lz-wall{ fill: url(#lz-h45); stroke: var(--lns); stroke-width: 1.5; }

#s1 .lz-dv{ fill: none; stroke: var(--cl); stroke-width: 1.6; stroke-dasharray: 9 6; }

#s1 .lz-dim{ fill: none; stroke: var(--cl); stroke-width: 1; }
#s1 .lz-tick{ fill: none; stroke: var(--cl); stroke-width: 1; }
#s1 .lz-lead{ fill: none; stroke: var(--cl); stroke-width: 2; }
#s1 .lz-rule{ fill: none; stroke: var(--ln); stroke-width: 1; }

/* two annotation faces: .lz-lab sits inside the plan and must keep fitting
   its fixture, so it grows only a little; .lz-note lives in the margin
   column and may grow to stay readable. */
#s1 .lz-lab, #s1 .lz-note{
  font-family: var(--sans); font-size: 10px; font-weight: 500;
  letter-spacing: .5px; fill: var(--iks);
}
#s1 .lz-cq{
  font-family: var(--sans); font-size: 9.5px; font-weight: 500;
  letter-spacing: .5px; fill: var(--cl);
}
#s1 .lz-dimt{
  font-family: var(--sans); font-size: 9.5px; font-weight: 500;
  letter-spacing: .5px; fill: var(--cld);
  font-feature-settings:"tnum" 1,"lnum" 1;
}
#s1 .lz-znq{
  font-family: var(--sans); font-size: 9.5px; font-weight: 500;
  letter-spacing: 1.6px; fill: var(--cl);
}
@container (max-width: 620px){
  #s1 .lz-lab, #s1 .lz-cq{ font-size: 11px; }
  #s1 .lz-note, #s1 .lz-dimt, #s1 .lz-znq{ font-size: 12px; }
  #s1 .lz-znq{ letter-spacing: 1.2px; }
}
@container (max-width: 430px){
  #s1 .lz-lab, #s1 .lz-cq{ font-size: 12px; }
  #s1 .lz-note, #s1 .lz-dimt, #s1 .lz-znq{ font-size: 14px; }
  #s1 .lz-znq{ letter-spacing: 1px; }
}

/* live-page fix: keep the H1 from breaking mid-word in the 5/12 column */
#s1 .title h1{ font-size: clamp(1.95rem, 3.2cqi, 2.9rem); overflow-wrap: normal; word-break: normal; hyphens: manual; }
#s1 #s1-erg svg, #s1 #s1-elev svg, #s1 .plan__fig svg{ overflow: hidden; }