/* O nás — TWINS. Personal story added 29. 10. 2026.
   .about-story / .intro-photo and the portrait stage remain connected
   to motion.js and agents.js. Editable story: tools/about-story-content.html. */
.about.team{--about-ink:#18201c;--about-paper:var(--paper,#eeeae3);--about-soft:#b9c3b7;--about-line:#e9e8df2b;position:relative;background:var(--about-ink);color:var(--about-paper);padding:85px 0 0;border-radius:24px 24px 0 0;overflow:clip;--arrow-active-fill:var(--about-paper);--arrow-active-ink:var(--about-ink);scroll-margin-top:0}
.about.team>.section-meta{margin:0 var(--gutter) 74px;padding-bottom:28px;border-bottom:1px solid var(--about-line);gap:24px}
.about.team>.section-meta span:last-child{color:var(--about-soft)}
.about .about-intro{margin:0 var(--gutter);padding:0 0 100px}
.about .intro-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:7vw;align-items:end}
.about .intro-grid h2{margin:0;max-width:none;font-size:clamp(45px,5.5vw,90px);line-height:.97;letter-spacing:-.065em;color:var(--about-paper)}
.about .intro-grid>div{padding-bottom:6px}
.about .intro-copy{font-size:clamp(28px,3.1vw,48px);line-height:1.14;max-width:none;color:#d5dcce}
.about .intro-note{font-size:14px;line-height:1.7;max-width:320px;color:var(--about-soft);margin:28px 0 30px}
.about .intro-grid .pill{min-height:55px;min-width:190px;justify-content:space-between;color:var(--about-paper);border-color:#e9e8df66;background:#ffffff05}
.about .intro-grid .pill:focus-visible{outline-offset:7px}

/* A quiet side heading anchors the story while its photo and chapters unfold. */
.about-story{position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);gap:7vw;margin:0 var(--gutter);padding:45px 0 110px;border-top:1px solid var(--about-line);scroll-margin-top:36px}
.about-story-head{position:sticky;top:100px;align-self:start;padding-top:12px}
.about-story-head>.eyebrow{color:var(--about-soft);margin-bottom:24px}
.about .about-story-title{font-family:Scto,Arial,sans-serif;font-size:clamp(42px,4.5vw,76px);line-height:.98;letter-spacing:-.06em;max-width:none;color:var(--about-paper)}
.about-story-note{font-size:14px;line-height:1.7;color:var(--about-soft);max-width:265px;margin-top:26px}
.about-story-body{min-width:0}
.about .about-photo{position:relative;display:block;width:100%;height:clamp(380px,38vw,630px);margin:0;border-radius:8px;background:#cfd3c6;isolation:isolate;box-shadow:0 22px 60px #07110b25}
.about .about-photo img{display:block;width:100%;height:120%;object-fit:cover}
.about-photo-label{position:absolute;left:28px;right:28px;bottom:27px;display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding-top:20px;border-top:1px solid #253d3033;font-size:10px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:#425347;pointer-events:none}
.about-photo-label strong{display:block;margin-top:9px;font-family:Bradford,Georgia,serif;font-weight:400;font-size:clamp(25px,2.2vw,36px);line-height:1.1;letter-spacing:-.025em;text-transform:none;color:var(--about-ink)}
.about .intro-caption{font-size:10px;line-height:1.5;letter-spacing:.055em;color:var(--about-soft);gap:20px;margin:18px 2px 0}

/* Three generous chapters, filled with the owners' story and archive below. */
.about-chapters{list-style:none;margin:64px 0 0;padding:0;display:grid;gap:0}
.about-chapter{display:grid;grid-template-columns:32px minmax(0,1.2fr) minmax(0,.95fr);gap:22px;align-items:center;min-height:44svh;padding:48px 0;border:0;border-top:1px solid var(--about-line);border-radius:0;background:transparent;color:var(--about-paper);transition:background .55s,border-color .55s;min-width:0}
.about-chapter-num{align-self:start;padding-top:5px;font-size:11px;letter-spacing:.1em;color:var(--about-soft)}
.about-chapter h4{font-size:clamp(34px,3.6vw,58px);font-weight:400;line-height:1.05;letter-spacing:-.045em;margin:0 0 19px;color:inherit}
.about-chapter p{font-size:14px;line-height:1.7;color:var(--about-soft);max-width:350px}
.about-todo{display:inline-flex;align-items:center;gap:8px;margin-top:24px;padding:7px 11px;border:1px solid #cbd5c32e;border-radius:999px;font-size:9px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:#c2cbbd}
.about-todo::before{content:'';width:5px;height:5px;flex-shrink:0;border-radius:50%;background:var(--champagne,#b9ac91)}
.about-slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;aspect-ratio:4/5;min-width:0;width:100%;padding:24px 16px;border-radius:8px;border:1px dashed #c9d5c338;background:#24352b;color:#bac8b7;font-size:9px;line-height:1.7;letter-spacing:.10em;text-transform:uppercase;text-align:center;overflow:hidden;transition:background .55s,border-color .55s}
.about-slot svg{width:34px;height:34px;fill:none;stroke:#b4c4af;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.about-slot img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.about-slot:has(img){padding:0;border:0;background:none}

/* The people retain their original scroll-driven deck and phone interactions. */
.about .team-heading{margin:0;padding:100px var(--gutter) 35px;background:var(--about-paper);color:var(--about-ink);border-radius:24px 24px 0 0;align-items:flex-end;gap:50px}
.about .team-kicker{display:block;margin:0 0 27px;color:#627063}
.about .team-title{margin:0;max-width:850px;font-size:clamp(54px,6.4vw,106px);line-height:.96;letter-spacing:-.065em;font-weight:400;color:inherit}
.about .team-heading>.serif{font-family:Bradford,Georgia,serif;font-size:clamp(27px,2.9vw,46px);line-height:1.13;letter-spacing:-.025em;max-width:420px;margin:0 2vw 4px 0;color:#435143}
.about .team-stage{margin-top:0;padding-top:0;background:var(--about-paper);color:var(--about-ink)}
.about .person{background:#e5e7dc;border:1px solid #3b513224;border-radius:18px;box-shadow:0 20px 55px #26382918}
.about .person-photo{border-radius:16px 16px 0 0;background:#26382d}
.about .person-caption{padding-left:20px;padding-right:20px;color:var(--about-ink)}
.about .person h3{font-size:clamp(22px,2.0vw,32px);line-height:1.1}
.about .person p{color:#626e5d}
.about .person-phone{gap:16px}
.about .team-roll-hint{color:#66725e}
.about>.big-type{margin:0;padding:75px var(--gutter) 90px;background:var(--about-ink);color:var(--about-paper);font-size:clamp(50px,11.7vw,196px);line-height:.97;letter-spacing:-.075em;white-space:nowrap;border-top:1px solid #e9e8df16}
.about>.big-type .outline{color:#91a08e}
.offers+.owners{border-top:1px solid #eeeae31f}

@media(hover:hover) and (pointer:fine){
 .about .intro-grid .pill:hover{background:var(--about-paper);color:var(--about-ink)}
 .about-chapter:hover{background:transparent;border-color:#c9d5c34a}
 .about-chapter:hover .about-slot{background:#2a3d31;border-color:#c9d5c35c}
}
@media(max-width:1150px){
 .about .intro-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:5vw}
 .about-story{grid-template-columns:minmax(0,.65fr) minmax(0,1.4fr);gap:4vw}
 .about-chapter{grid-template-columns:25px minmax(0,1fr);gap:16px;padding:40px 0}
 .about-slot{grid-column:2;aspect-ratio:16/10;max-height:280px}
 .about-chapter p{max-width:none}
 .about .person-caption{padding-left:16px;padding-right:16px}
 .about .person h3{font-size:24px}
}
@media(max-width:850px){
 .about .intro-grid{grid-template-columns:1fr;gap:38px}
 .about .intro-grid h2{font-size:clamp(52px,8.4vw,76px)}
 .about .intro-grid>div{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;align-items:start}
 .about .intro-copy{font-size:32px;grid-row:1/3}
 .about .intro-note{margin:0 0 24px;max-width:none}
 .about .intro-grid .pill{justify-self:start}
 .about-story{grid-template-columns:1fr;gap:36px}
 .about-story-head{position:relative;top:auto;max-width:530px}
 .about .about-story-title{font-size:62px}
 .about-story-note{max-width:350px;margin-top:20px}
 .about-chapter{grid-template-columns:28px minmax(0,1.2fr) minmax(0,.9fr);gap:22px}
 .about-slot{grid-column:auto;aspect-ratio:4/5;max-height:none}
 .about .team-heading{gap:34px}
 .about .team-heading>.serif{font-size:30px;margin-right:0}
}
@media(max-width:700px){
 .about.team{padding-top:65px;border-radius:20px 20px 0 0}
 .about.team>.section-meta{margin-bottom:42px;padding-bottom:23px;align-items:flex-start}
 .about.team>.section-meta .eyebrow{font-size:9px;line-height:1.6}
 .about.team>.section-meta span:last-child{max-width:140px;text-align:right}
 .about .about-intro{padding-bottom:65px}
 .about .intro-grid{gap:32px}
 .about .intro-grid h2{font-size:clamp(37px,10.3vw,66px);line-height:1;letter-spacing:-.06em}
 .about .intro-grid>div{display:block;padding:0}
 .about .intro-copy{font-size:31px;line-height:1.14}
 .about .intro-note{font-size:13px;line-height:1.7;max-width:310px;margin:25px 0}
 .about .intro-grid .pill{font-size:13px;min-width:185px;min-height:52px}
 .about-story{padding-top:30px;padding-bottom:65px;gap:30px;scroll-margin-top:24px}
 .about-story-head{padding-top:0}
 .about-story-head>.eyebrow{font-size:9px;margin-bottom:20px}
 .about .about-story-title{font-size:clamp(42px,11.5vw,65px)}
 .about-story-note{font-size:13px;line-height:1.65;max-width:290px}
 .about .about-photo{height:340px;border-radius:8px}
 .about-photo-label{left:20px;right:20px;bottom:22px;padding-top:15px;font-size:8px;gap:10px}
 .about-photo-label strong{font-size:27px;margin-top:8px}
 .about .intro-caption{font-size:9px;margin-top:15px;letter-spacing:0}
 .about-chapters{margin-top:38px;gap:0}
 .about-chapter{grid-template-columns:24px minmax(0,1fr);gap:13px;min-height:51svh;padding:35px 0;border-radius:0}
 .about-chapter-num{padding-top:3px;font-size:10px}
 .about-chapter h4{font-size:34px;margin-bottom:16px}
 .about-chapter p{font-size:13px;line-height:1.7}
 .about-todo{margin-top:20px;font-size:8px;padding:6px 10px}
 .about-slot{grid-column:2;aspect-ratio:4/3;padding:20px 14px;gap:12px;margin-top:8px;font-size:8px;border-radius:10px}
 .about .team-heading{padding:65px var(--gutter) 27px;border-radius:20px 20px 0 0}
 .about .team-kicker{font-size:9px;margin-bottom:22px}
 .about .team-title{font-size:clamp(46px,12.8vw,75px);line-height:.98}
 .about .team-heading>.serif{font-size:30px;line-height:1.13;margin:28px 0 0;max-width:340px}
 .about .person{border-radius:14px}
 .about .person-photo{border-radius:12px 12px 0 0}
 .about .person-caption{padding:10px 12px;gap:8px}
 .about .person h3{font-size:19px;letter-spacing:-.035em;margin-bottom:5px}
 .about .person p{font-size:8px;letter-spacing:.06em}
 .about .person-phone{font-size:10px;gap:6px;letter-spacing:-.02em}
 .about .person-phone .motion-arrow{width:27px;height:27px;flex-shrink:0}
 .about .team-roll-hint{font-size:9px}
 .about>.big-type{padding:54px var(--gutter) 63px;font-size:clamp(61px,16vw,110px);line-height:.97;white-space:normal}
 .about>.big-type .outline{display:block;margin-top:5px}
}
@media(max-width:370px){
 .about .intro-grid h2{font-size:10vw}
 .about .person-caption{padding-left:9px;padding-right:9px}
 .about .person h3{font-size:17px}
 .about .person-phone{font-size:9px;gap:4px}
}
@media(prefers-reduced-motion:reduce){
 .about-chapter,.about-slot,.about .intro-grid .pill{transition:none}
 .about .about-photo{clip-path:none!important}
 .about .about-photo img{height:100%;transform:none!important}
}
body.overview .about-story-head{position:relative;top:auto}

/* Keep the wordmark treatment consistent with TWINS estate elsewhere. */
.about-estate{display:inline-block;font-size:.44em;letter-spacing:-.035em;margin-left:.1em;vertical-align:baseline}
.about-chapter:last-child{border-bottom:1px solid var(--about-line)}

/* The owners' archive and story fill the existing scroll-driven chapters. */
.about-story--personal .about-photo--archive{height:auto;aspect-ratio:1.12;overflow:hidden;background:#26352c}
.about-story--personal .about-photo--archive img{height:120%;object-position:50% 24%}
.about-story--personal .intro-caption{flex-wrap:wrap;line-height:1.6}
.about-story--personal .about-chapters{margin-top:70px}
.about-story--personal .about-chapter{align-items:start;padding:55px 0;column-gap:24px}
.about-chapter-copy{min-width:0}
.about-story--personal .about-chapter-copy>p{margin:0 0 19px;max-width:65ch}
.about-story--personal .about-chapter-copy>.about-chapter-era{font-size:10px;line-height:1.6;letter-spacing:.045em;color:#d1d8c7;margin:0 0 20px}
.about-story--personal .about-chapter h4{font-size:clamp(31px,3vw,49px);margin-bottom:26px}
.about-chapter-media{position:sticky;top:95px;align-self:start;margin:0;min-width:0}
.about-story--personal .about-slot{display:block;aspect-ratio:auto;padding:0;border:0;background:#24352b}
.about-story--personal .about-slot img{display:block;position:relative;width:100%;height:auto;object-fit:contain;transform:none}
.about-chapter-media figcaption{margin:15px 2px 0;font-size:10px;line-height:1.6;color:var(--about-soft)}
.about-readmore{margin:26px 0 0;border-top:1px solid var(--about-line);border-bottom:1px solid var(--about-line)}
.about-readmore>summary,.about-process-step>summary{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:64px;padding:15px 0;cursor:pointer;list-style:none;font-size:13px;line-height:1.45;color:var(--about-paper)}
.about-readmore>summary::-webkit-details-marker,.about-process-step>summary::-webkit-details-marker{display:none}
.about-expand{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border:1px solid #c9d5c34d;border-radius:50%;font-size:20px;font-weight:300;transition:background .3s,color .3s,transform .4s var(--motion-ease)}
.about-story--personal details[open]>summary .about-expand{transform:rotate(45deg);background:var(--about-paper);color:var(--about-ink)}
.about-story--personal summary:focus-visible{outline:2px solid var(--about-paper);outline-offset:5px;border-radius:3px}
.about-expanded-copy{padding:0 0 12px}
.about-expanded-copy p{margin:0 0 18px;max-width:65ch}
.about-story--personal details[open]>.about-expanded-copy{animation:about-copy-unfold .45s var(--motion-ease,cubic-bezier(.22,.72,.16,1)) both}
.about-story--personal .about-chapter--work>.about-chapter-copy{grid-column:2/-1}
.about-process{margin:34px 0 0;border-top:1px solid var(--about-line)}
.about-process-step{border-bottom:1px solid var(--about-line)}
.about-process-step>summary{font-size:clamp(17px,1.6vw,23px);letter-spacing:-.025em;justify-content:flex-start;min-height:82px;gap:20px}
.about-process-step>summary>span:nth-child(2){flex:1;min-width:0}
.about-process-number{font-size:10px;letter-spacing:.04em;flex:0 0 23px;color:var(--about-soft)}
.about-process-step>.about-expanded-copy{padding-left:43px}
.about-story-quote{padding:35px 0 0;margin:0}
.about-story--personal .about-story-quote p{max-width:600px;color:#e8e9de;font-family:Bradford,Georgia,serif;font-size:clamp(28px,3vw,44px);line-height:1.12;letter-spacing:-.035em;margin:0 0 17px}
.about-story-quote cite{font-size:10px;line-height:1.6;color:var(--about-soft);font-style:normal}
@keyframes about-copy-unfold{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@media(hover:hover) and (pointer:fine){
 .about-story--personal summary:hover .about-expand{background:var(--about-paper);color:var(--about-ink)}
}
@media(max-width:1150px){
 .about-chapter-media{grid-column:2;position:relative;top:auto;max-width:430px;margin-top:15px}
 .about-story--personal .about-slot{max-height:none}
}
@media(min-width:851px) and (max-width:1150px){
 .about-story--personal .about-photo--archive{aspect-ratio:1.02}
}
@media(min-width:701px) and (max-width:850px){
 .about-chapter-media{grid-column:3;margin-top:0}
}
@media(max-width:700px){
 .about-story--personal .about-photo--archive{aspect-ratio:1.02}
 .about-story--personal .about-chapters{margin-top:38px}
 .about-story--personal .about-chapter{padding:36px 0;column-gap:13px;min-height:0}
 .about-story--personal .about-chapter h4{font-size:35px;line-height:1.05;margin-bottom:23px}
 .about-story--personal .about-chapter-copy>.about-chapter-era{font-size:9px;margin-bottom:17px}
 .about-story--personal .about-chapter-copy>p{font-size:14px;line-height:1.75;margin-bottom:19px}
 .about-chapter-media{width:100%;max-width:none;grid-column:2;margin-top:14px}
 .about-chapter-media--family{max-width:330px;justify-self:center}
 .about-chapter-media figcaption{font-size:10px}
 .about-readmore>summary{font-size:13px;gap:12px}
 .about-story--personal .about-expanded-copy p{font-size:14px;line-height:1.75}
 .about-process-step>summary{font-size:17px;gap:12px;min-height:82px;padding:20px 0}
 .about-process-number{flex-basis:19px;font-size:9px}
 .about-expand{flex-basis:28px;width:28px;height:28px}
 .about-process-step>.about-expanded-copy{padding-left:0}
 .about-story--personal .about-story-quote p{font-size:31px}
}
@media(prefers-reduced-motion:reduce){
 .about-story--personal details[open]>.about-expanded-copy{animation:none}
 .about-expand{transition:none}
}