/* V23: v20 sections below the refined v22 hero. The hero leaves a strip for the white introduction. */
body.r14-home{--v22-peek:clamp(44px,8.2vh,80px);--v23-title:clamp(30px,2.9vw,46px)}
.s16-stage{height:calc(100svh - var(--s18-header) - var(--v22-peek));height:calc(100dvh - var(--s18-header) - var(--v22-peek))}
.s16-artbox{max-width:min(770px,calc((100dvh - var(--s18-header) - var(--v22-peek) - 34px)*1.0909))}
@media(max-width:650px){
 body.r14-home{--v22-peek:clamp(40px,6.6vh,60px);--v23-title:clamp(26px,7.2vw,34px)}
 .s16-stage{height:calc(100svh - var(--s18-header) - var(--v22-peek));height:calc(100dvh - var(--s18-header) - var(--v22-peek))}
}

/* LUME: the second model, SOLA, on its own warm backdrop. */
.v22-second-model .t17-web-detail{background:#d6c3a6}
.v22-second-model .t17-web-detail img{width:360px;height:360px;left:0;top:4px}

/* Introduction: plain white, its title sits in the strip visible under the hero. */
.v23-intro{background:#fff;color:var(--r14-ink);padding:max(14px,calc(var(--v22-peek) - var(--v23-title)*1.04 - 2px)) 0 0}
.v23-intro-head{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);gap:7%;align-items:start;margin-bottom:clamp(40px,4.6vw,68px)}
.r14-home .v23-intro-head h2{font-size:var(--v23-title);line-height:1.04;letter-spacing:-.06em;max-width:21em}
.v23-intro-head p{font-size:clamp(17px,1.3vw,20px);line-height:1.5;color:#5c615c;margin:calc(var(--v23-title)*1.04 + 8px) 0 0;max-width:430px}
.v23-intro-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(28px,4vw,64px);align-items:stretch}
.r14-home .v23-intro h3{font:700 clamp(25px,2vw,32px)/1.08 Sora,sans-serif;letter-spacing:-.055em;margin:0 0 20px}

.v23-project{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;background:var(--r14-paper);padding:clamp(30px,3.2vw,48px);min-height:100%}
.v23-project p{font-size:clamp(16px,1.2vw,18px);line-height:1.6;color:#5c615c;max-width:34em;margin-bottom:16px}
.r14-home .v23-project .v23-project-lead{font:500 clamp(20px,1.6vw,25px)/1.42 Figtree,sans-serif;letter-spacing:-.02em;color:var(--r14-ink);margin-bottom:20px}
.r14-home .v23-logo{display:inline-block;width:4.6em;max-width:none;height:auto;vertical-align:-.1em;margin-right:.06em}
.v23-project-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-top:auto;padding-top:26px;position:relative;z-index:1}
.r14-home .v23-signature{display:block;width:clamp(140px,12vw,180px);height:auto;margin:0 0 -8px -8px}
.v23-project-foot .r14-text-link{font-size:15px;gap:20px}
/* The cut O from the wordmark, as in the logo — not an extra ornament. */
.v23-project-mark{position:absolute;z-index:-1;right:-44px;top:-56px;width:160px;height:160px}
.v23-project-mark i{position:absolute;inset:0;border:1px solid #15191c26;border-radius:50%}
.v23-project-mark b{position:absolute;left:-15px;top:68px;width:190px;height:20px;background:var(--r14-gold);transform:rotate(-28deg)}

.v23-diff{padding-top:clamp(4px,1vw,12px)}
.v23-diff-lead{font-size:clamp(17px,1.3vw,20px);line-height:1.5;color:var(--r14-ink);max-width:36em;margin-bottom:28px}
.v23-rules{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,3vw,44px) clamp(24px,3vw,44px)}
.v23-rules li{border-top:1px solid #15191c38;padding-top:22px}
.v23-rules svg{display:block;width:72px;height:52px;overflow:visible;margin-bottom:16px}
.v23-rules svg .o{fill:none;stroke:#1e2921;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.v23-rules svg .f{fill:var(--r14-gold)}
.r14-home .v23-rules h4{font:600 clamp(19px,1.45vw,23px)/1.2 Figtree,sans-serif;letter-spacing:-.03em;margin:0 0 9px;color:var(--r14-ink)}
.v23-rules p{font-size:clamp(15.5px,1.12vw,17px);line-height:1.55;color:#5d645b;margin:0}

.v23-offer-strip{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:clamp(48px,5vw,76px);padding-block:clamp(26px,3vw,40px);border-top:1px solid #171b1d32;color:var(--r14-ink)}
.v23-offer-items{display:flex;flex-wrap:wrap;gap:10px clamp(22px,3vw,48px)}
.v23-offer-items>span{font:500 clamp(15px,1.15vw,17px)/1.3 Figtree,sans-serif;color:#5c615c}
.v23-offer-items b{display:block;font:600 clamp(18px,1.45vw,23px)/1.25 Sora,sans-serif;letter-spacing:-.04em;color:var(--r14-ink);margin-top:3px}
.v23-offer-go{display:flex;align-items:center;gap:clamp(14px,2vw,26px);flex:none;font:600 clamp(22px,2.3vw,36px)/1.1 Figtree,sans-serif;letter-spacing:-.045em;text-transform:uppercase}
.v23-offer-go svg{flex:none;width:clamp(34px,3.8vw,56px);height:auto;color:#b08100;transition:transform .3s cubic-bezier(.2,.75,.2,1)}
.v23-offer-strip:hover .v23-offer-go svg{transform:translateY(6px)}
.v23-offer-strip:focus-visible{outline:3px solid #bf8600;outline-offset:6px}

@media(max-width:1100px){.v23-intro-grid{grid-template-columns:1fr}.v23-project{min-height:0}.v23-offer-strip{flex-direction:column;align-items:flex-start}}
@media(max-width:850px){.v23-intro-head{grid-template-columns:1fr;gap:18px}.v23-intro-head p{margin-top:0}}
@media(max-width:560px){.v23-rules{grid-template-columns:1fr}.v23-project-mark{transform:scale(.7);transform-origin:top right}.v23-project-foot{flex-direction:column;align-items:flex-start}.v23-offer-items{display:grid;grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.v23-offer-go svg{transition:none}}

/* V24: header — the map button sits on its own surface; hero headlines breathe between words. */
/* V25: the crowding came from -.069em tracking, not from Sora. Even letters, natural word gaps on all three frames. */
.s16-hero .s16-copy h2{letter-spacing:-.02em;word-spacing:normal}

/* V26: introduction uses the same section heading as the rest of the page; the card becomes a letter from the author. */
body.r14-home{--v22-peek:clamp(52px,8.8vh,84px);--v23-title:clamp(38px,4.4vw,70px)}
@media(max-width:850px){body.r14-home{--v23-title:42px}}
@media(max-width:650px){body.r14-home{--v22-peek:clamp(40px,6.6vh,60px)}}
.v23-intro{padding-top:max(12px,calc(var(--v22-peek) - var(--v23-title)*.86))}
.r14-home .v26-intro-head{margin-bottom:clamp(30px,3vw,42px)}
.r14-home .v26-intro-head h2 em{color:#9c7100}
.v26-intro-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:stretch}
.r14-home .v26-letter h3{margin-bottom:22px}
.r14-home .v26-letter .v26-letter-body p{font:400 clamp(16px,1.16vw,17.5px)/1.62 Figtree,sans-serif;letter-spacing:0;color:#3d423e;max-width:none;margin:0 0 15px}
.r14-home .v26-letter .v26-letter-body p:last-child{margin-bottom:0}
.r14-home .v26-letter .v23-logo{width:4.5em;vertical-align:-.08em}
.v26-letter .v23-project-foot{padding-top:30px}
.v26-diff{position:sticky;top:calc(var(--s18-header,76px) + 26px);align-self:start;padding-top:0}
.v26-diff .v23-diff-lead{font-size:clamp(16.5px,1.2vw,18.5px);margin-bottom:18px}
.v26-diff .v23-rules{grid-template-columns:1fr;gap:0}
.v26-diff .v23-rules li{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:22px;align-items:start;padding:18px 0}
.v26-diff .v23-rules li:last-child{border-bottom:1px solid #15191c38}
.v26-diff .v23-rules svg{grid-row:1/3;width:64px;height:46px;margin:2px 0 0}
.r14-home .v26-diff .v23-rules h4{margin-bottom:6px}
@media(max-width:1100px){.v26-intro-grid{grid-template-columns:1fr}.v26-diff{position:static}}
@media(max-width:480px){.v26-diff .v23-rules li{grid-template-columns:52px minmax(0,1fr);column-gap:16px}.v26-diff .v23-rules svg{width:52px;height:38px}}
/* Exactly two heading lines: the heading takes the width it needs, the note takes the rest. */
.r14-home .v26-intro-head{align-items:start}
.r14-home .v26-intro-head>div{max-width:470px}
.r14-home .v26-intro-head p{font-size:clamp(17px,1.35vw,20px)}
@media(min-width:600px){.r14-home .v26-intro-head h2 em{white-space:nowrap}}
@media(min-width:1101px){.r14-home .v26-intro-head{grid-template-columns:max-content minmax(0,1fr);column-gap:clamp(48px,5vw,90px)}.r14-home .v26-intro-head>div{padding-top:.35em}}
@media(max-width:1100px){.r14-home .v26-intro-head{grid-template-columns:1fr;row-gap:18px}}

/* V27: a clean white strip under the hero (content starts below the first screen). */
body.r14-home{--v22-peek:clamp(44px,8.2vh,80px)}
@media(max-width:650px){body.r14-home{--v22-peek:clamp(40px,6.6vh,60px)}}
.v23-intro{padding-top:calc(var(--v22-peek) + 20px);padding-bottom:clamp(64px,7vw,104px)}
/* Six rules: the column stretches to the letter and the rows share the height, so both bottoms meet. */
.v26-diff{position:static;align-self:stretch;display:flex;flex-direction:column}
.v26-diff .v23-rules{flex:1 1 auto;display:flex;flex-direction:column}
.v26-diff .v23-rules li{flex:1 1 auto}
@media(max-width:1100px){.v26-diff .v23-rules li{flex:none}}

/* V27: what every website package includes — dark panel in the offer section. */
.o20-offer .v27-standard{margin-top:32px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4vw,64px);align-items:start;padding:clamp(28px,3.2vw,48px);background:#171a21;color:#f4f1ea}
.o20-offer .v27-standard-head h3{font:700 clamp(26px,2.3vw,36px)/1.06 Sora,sans-serif;letter-spacing:-.05em;margin:0 0 16px;color:#f4f1ea}
.o20-offer .v27-standard-head h3 em{font-style:normal;color:#f2b705}
.o20-offer .v27-standard-head p{font-size:16px;line-height:1.55;color:#c9cbc6;margin:0}
.o20-offer .v27-standard-head a{display:inline-flex;gap:8px;margin-top:10px;padding-bottom:3px;border-bottom:1px solid #f2b70599;color:#f4f1ea;font-weight:600;white-space:nowrap}
.o20-offer .v27-standard-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,44px)}
.o20-offer .v27-standard-list li{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:10px;padding:13px 0;border-top:1px solid #ffffff24}
.o20-offer .v27-standard-list li:before{content:"✓";grid-row:1/3;color:#f2b705;font-weight:700;line-height:1.3}
.o20-offer .v27-standard-list b{font:600 16.5px/1.3 Figtree,sans-serif;color:#f4f1ea}
.o20-offer .v27-standard-list span{font-size:14.5px;line-height:1.45;color:#b9bcb6}
.o20-offer .e10-aftercare a.v27-offer-button{gap:22px;min-height:52px;padding:14px 22px;background:#f2b705;color:#171a21;font:600 16px/1.2 Figtree,sans-serif;transition:background .2s,transform .2s}
.o20-offer .e10-aftercare a.v27-offer-button span{font-size:21px;line-height:1}
.o20-offer .e10-aftercare a.v27-offer-button:hover{background:#ffca25;transform:translateY(-2px)}
@media(max-width:900px){.o20-offer .v27-standard{grid-template-columns:1fr}}
@media(max-width:560px){.o20-offer .v27-standard-list{grid-template-columns:1fr}.o20-offer .e10-aftercare a.v27-offer-button{margin-left:0}}
@media(prefers-reduced-motion:reduce){.o20-offer .e10-aftercare a.v27-offer-button{transition:none}.o20-offer .e10-aftercare a.v27-offer-button:hover{transform:none}}

/* V29 — offer header: heading on the left, the three notes on the right as plain text; the first one leads. */
.o20-offer .e10-heading{align-items:center}
.o20-offer .e10-heading-copy .v28-note-first{color:var(--e-ink)}

/* V28 — standard panel: title row on top, the list fills the width (no empty column under the title). */
.o20-offer .v27-standard{grid-template-columns:1fr;gap:clamp(22px,2.4vw,32px)}
.o20-offer .v27-standard-head{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(28px,5vw,80px);align-items:end}
.o20-offer .v27-standard-head h3{margin:0}
.o20-offer .v27-standard-head p{max-width:620px}
.o20-offer .v27-standard-list{grid-template-columns:repeat(5,minmax(0,1fr));column-gap:clamp(18px,2vw,30px)}
@media(max-width:1200px){.o20-offer .v27-standard-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.o20-offer .v27-standard-head{grid-template-columns:1fr;row-gap:14px}.o20-offer .v27-standard-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.o20-offer .v27-standard-list{grid-template-columns:1fr}}

/* V28 — "Ten sam biznes": why the name, a sub-line, numbered examples. */
.v28-name{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:8%;align-items:start;padding-bottom:34px;margin-bottom:46px;border-bottom:1px solid #15191c2a}
.r14-home .v28-name h3{font:700 clamp(24px,2.2vw,34px)/1.12 Sora,sans-serif;letter-spacing:-.045em;margin:0}
.v28-name p{font-size:clamp(17px,1.3vw,19px);line-height:1.55;color:#5c615c;margin:0}
.r14-home .v28-h2-sub{display:block;margin-top:18px;font:600 clamp(18px,1.6vw,24px)/1.2 Figtree,sans-serif;letter-spacing:-.02em;color:#5c615c}
.r14-work .dv-tabs button{grid-template-columns:auto minmax(0,1fr) auto;column-gap:clamp(12px,1.4vw,20px)}
.r14-work .dv-tabs .dv-num{grid-column:1;grid-row:1/3;align-self:center;font:700 clamp(44px,4.6vw,72px)/.85 Sora,sans-serif;letter-spacing:-.05em;color:#15191c}
.r14-work .dv-tabs button[aria-selected=true] .dv-num{color:#9c7100}
.r14-work .dv-tabs button>span,.r14-work .dv-tabs small{grid-column:2}
.r14-work .dv-tabs i{grid-column:3}
@media(max-width:850px){.v28-name{grid-template-columns:1fr;row-gap:14px}}
@media(max-width:550px){.r14-work .dv-tabs .dv-num{font-size:34px}.r14-work .dv-tabs button{column-gap:8px}}

/* V28 — "Z Tobą" gets its own white band. */
.r14-home .v28-process{background:#fff;padding-top:clamp(56px,6vw,80px)}
.v28-process .r14-shape-talk>i:after{background:#fff}
.v28-process .r14-shape-project>i{background:#fff}

/* V28 — partners under the two opportunities. */
.v28-partners{margin-top:clamp(36px,4vw,56px);padding-top:clamp(28px,3vw,40px);border-top:1px solid #15191c30}
.r14-home .v28-partners h3{font:600 clamp(21px,1.8vw,28px)/1.2 Figtree,sans-serif;letter-spacing:-.035em;margin:0 0 22px}
.v28-partner-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.v28-partner{display:flex;flex-direction:column;padding:clamp(22px,2.4vw,32px);background:#f4f1ea;border:1px solid #15191c24}
.v28-partner-tag{font:600 13px/1.3 Figtree,sans-serif;letter-spacing:.02em;color:#9c7100;margin-bottom:10px}
.r14-home .v28-partner h4{font:700 clamp(26px,2.3vw,36px)/1 Sora,sans-serif;letter-spacing:-.055em;margin:0 0 14px}
.v28-partner p{font-size:16px;line-height:1.55;color:#555e4f;margin:0 0 18px}
.v28-partner .r14-text-link{margin-top:auto;align-self:flex-start;font-size:14px;gap:20px}
.v28-partner-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:26px}
.v28-partner-cta p{font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:#15191c;margin:0;max-width:760px}
.v28-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;flex:none;min-height:52px;padding:14px 22px;background:#f2b705;color:#171a21;font:600 16px/1.2 Figtree,sans-serif;transition:background .2s,transform .2s}
.v28-cta span{font-size:21px;line-height:1}
.v28-cta:hover{background:#ffca25;transform:translateY(-2px)}
.v28-cta:focus-visible{outline:3px solid #bf8600;outline-offset:5px}
@media(max-width:800px){.v28-partner-grid{grid-template-columns:1fr}.v28-partner-cta{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.v28-cta{transition:none}.v28-cta:hover{transform:none}}

/* V29 — before/after demo: tabs + browser always fit one screen under the header (scale follows the viewport height). */
.r14-work [data-v14-demo]{max-width:max(500px,calc((100svh - 325px) * 1.579));margin-inline:auto}
@media(max-width:700px){.r14-work [data-v14-demo]{max-width:none}}