/* AKIPIA — responsive layer. Reads tokens.css (12-col desktop grid, 4-col mobile grid).
   1) desktop ≥ 1024: fixed 1440 px measures become column spans (--c3 … --c11), so 1024–1439 is the same layout, narrower.
   2) ≤ 1023: tablet + mobile per Figma mobile frames (390): Homepage 2050:7185, About 2050:7359, Michal 2050:7913,
      Projects 2050:7431, Project detail 2050:7445, News 2050:7472, News detail 2050:7479, Contact 2050:7537,
      Privacy 2050:7543, Legal 2050:7560, Cookies 2050:7572, 404 2050:7584; header/menu from DS Header & panels. */

/* =====================================================================
   1) DESKTOP — fluid 12-col grid (identical to the design at 1440)
   ===================================================================== */
@media (min-width:1024px){
  :root{
    --t-display:clamp(96px, 9.444vw, 136px); --l-display:var(--t-display);
    --t-h1:clamp(64px, 5.556vw, 80px); --l-h1:calc(var(--t-h1) * 1.05);
    --t-h2:clamp(48px, 3.889vw, 56px); --l-h2:calc(var(--t-h2) * 1.0715);
  }
  .who .statement,.bio .statement{max-width:var(--c11)}
  .who .cols{grid-template-columns:repeat(3, var(--c3));column-gap:calc(var(--col) + 2 * var(--gutter))}
  .people{grid-template-columns:repeat(3, minmax(0,1fr))}
  .person{height:auto;aspect-ratio:1}
  .person img.p{top:-12.74%;width:100%;height:150%}
  .proj-top p{width:var(--c6)}
  .cards,.ncards{grid-template-columns:repeat(3, minmax(0,1fr))}
  .row{grid-template-columns:calc(var(--c3) + var(--gutter)) 1fr 48px}
  .fgrid{grid-template-columns:448fr 224fr 224fr 224fr 200fr}
  .fbrand img{max-width:calc(100% - 24px)}

  .phero .in,.photohero .in,.cband .in,.nband .in,.quote-sec .in{width:100%}
  .phero .sg,.photohero .sg{left:calc(50% + 122px)}
  .phero .crumb,.phero h1,.photohero .head{left:var(--gut)}
  .phero .claim,.photohero .side{right:var(--gut);max-width:var(--c4)}
  .photohero .head h1{max-width:calc(var(--cw) - var(--c4) - var(--gutter))}
  .cband .txt{left:var(--gut)} .cband .sym{left:calc(50% - 20px)}
  .nband .k,.nband .display{left:var(--gut)} .nband .tile{right:var(--gut)}
  .quote-sec blockquote{left:var(--gut);width:var(--c9)} .quote-sec .qsym{left:calc(50% + 280px)}

  .bio{grid-template-columns:calc(var(--c6) + var(--gutter)) var(--c6)}
  .bio .bio-body{width:var(--c6)}
  .intro-sec .intro-body{margin-left:calc(var(--c6) + var(--gutter));width:var(--c6)}
  .intro-sec .h2{max-width:var(--c11)!important}
  .story{grid-template-columns:var(--c5) var(--c6);column-gap:calc(var(--col) + 2 * var(--gutter))}
  .acols{grid-template-columns:var(--c3) var(--c7);column-gap:calc(var(--col) + 2 * var(--gutter))}
  .ameta{width:var(--c3)}
  .crow2{grid-template-columns:var(--c4) var(--c3) var(--c3);column-gap:calc(var(--col) + 2 * var(--gutter))}
  .lcols{grid-template-columns:var(--c4) var(--c7);column-gap:calc(var(--col) + 2 * var(--gutter))}
  /* scaled stages (Michal hero): JS sets --s = min(1, viewport / 1440) */
  .mhero{height:calc(900px * var(--s, 1))}
  .mhero .frame{transform:translateX(-50%) scale(var(--s, 1));transform-origin:50% 0}
}

/* =====================================================================
   2) TABLET + MOBILE (≤ 1023) — Figma mobile frames
   ===================================================================== */
@media (max-width:1023px){
  html,body{overflow-x:clip}
  .pad{padding:var(--sec-y) var(--gut)}
  .sec-head{gap:16px;margin-bottom:var(--head-gap)}
  .rv{opacity:1;transform:none}

  /* ---------- header: floating bar 56 px + burger (DS Header · Mobile) ---------- */
  .header{top:16px;left:16px;right:16px;height:56px;padding:0 20px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .header .nav,.header .lang{display:none}
  .burger{display:block;position:relative;width:24px;height:24px;background:none;border:0;cursor:pointer;color:var(--ivory)}
  .burger span,.mclose span{position:absolute;left:2px;right:2px;height:2px;background:currentColor}
  .burger span:first-child{top:8px} .burger span+span{top:15px}
  .mmenu{position:fixed;z-index:60;inset:0;display:flex;flex-direction:column;padding:16px 16px 40px;background:var(--walnut);color:var(--ivory);
    opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
  .mmenu[hidden]{display:flex}
  .mmenu.open{opacity:1;visibility:visible;transition:opacity .35s ease}
  .mbar{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 20px;flex:none}
  .mbar .logo img{width:140px;height:auto}
  .mclose{position:relative;width:24px;height:24px;background:none;border:0;cursor:pointer;color:var(--ivory)}
  .mclose span{top:11px;left:3px;right:3px}
  .mclose span:first-child{transform:rotate(45deg)} .mclose span+span{transform:rotate(-45deg)}
  .mnav{flex:1;display:flex;flex-direction:column;gap:24px;padding:72px 20px 0;font-size:32px;line-height:36px;letter-spacing:-.01em}
  .mnav a{align-self:flex-start;transition:opacity .3s}
  .mnav a:active,.mnav a.active{opacity:.6}
  .mbottom{display:flex;align-items:center;justify-content:space-between;height:100px;padding:0 20px;flex:none}
  .mbottom .lang{display:flex}
  .social{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--ivory20);transition:background .3s}
  .social:hover{background:var(--ivory10)} .social img{width:24px}
  .mbottom .social{margin-left:auto}
  .header .lang-spacer,.mbottom .lang-spacer{display:none}
  body.menu-open{overflow:hidden}
  .mmenu{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

  /* ---------- buttons M (48) ---------- */
  .btn.primary{padding:0 6px 0 16px;gap:16px}
  .btn.secondary,.btn.on-dark{padding:0 16px;gap:8px}
  .btn.s{height:var(--btn-h);font-size:var(--t-btn);line-height:16px}
  .btn.s.primary{padding:0 6px 0 16px;gap:16px} .btn.s.primary .tile{width:var(--btn-tile);height:var(--btn-tile)}
  .btn.s .i,.btn.s .swap{width:20px;height:20px}

  /* ---------- hero (Hero — Mobile 2050:7186 + scroll reveal 2050:7274) ---------- */
  .hero{height:300vh}
  .hero .intro{left:var(--gut);right:var(--gut);top:136px;flex-direction:column;align-items:flex-start;justify-content:flex-start}
  .hero .intro .display{margin-top:16px}
  .hero .actions{gap:12px;padding:32px 0 0;flex-wrap:wrap}

  /* ---------- who we are (2050:7195) ---------- */
  .who .statement{font-size:var(--t-h3);line-height:var(--l-h3);letter-spacing:var(--k-h3)}
  .who .sec-head{gap:24px;margin-bottom:48px}
  .who .cols{display:flex;flex-direction:column;margin-top:0;padding-top:0}
  .who .cols::before,.who .col+.col::before{display:none}
  .who .col{gap:40px;padding:24px 0 32px;border-top:1px solid var(--walnut20)}
  .who .mini{width:44px;height:40px}

  /* ---------- founding investors (2050:7206) — static; tap a name to open the bio ---------- */
  .founding{height:auto}
  .founding .stage{position:relative;height:auto;overflow:hidden}
  .founding .frame{position:relative;left:auto!important;top:auto;width:auto;height:auto;transform:none!important;padding:var(--sec-y) var(--gut)}
  .founding .heading{position:static;gap:16px}
  .founding .h2{font-size:var(--t-h2);line-height:var(--l-h2)}
  .founding .scene,.mhero .scene{position:relative;inset:auto;width:100%;max-width:560px;aspect-ratio:350/324;overflow:hidden;margin-top:40px}
  .founding .scene>*,.mhero .scene>*{transform-origin:0 0}
  .scene-in{position:absolute;left:0;top:0;width:1440px;height:900px;transform-origin:0 0}
  .founding .ftext{position:static;width:auto;margin-top:40px}
  .founding .ftext>.fname .h3{font-size:var(--t-fname);line-height:var(--l-fname)}
  .fname{gap:20px} .fname .mini{width:40px;height:37px}
  .fbio p{margin-top:24px}
  .fbio .btn{margin-top:24px}
  .partners{margin-top:32px}
  .prow .fname .h4{font-size:var(--t-fname);line-height:var(--l-fname)}
  .prow .fbio p{padding-left:0}

  /* ---------- leadership (2050:7243) — tap to open ---------- */
  .people{display:grid;grid-template-columns:1fr;gap:16px}
  .person{height:auto;aspect-ratio:1;cursor:pointer}
  .person img.p{top:-12.82%;width:100%;height:150%}
  .person .bar{background:var(--glass-card);padding:24px 56px 24px 24px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  .person .h5{font-size:20px;line-height:26px}
  .person .bar::after{content:"";position:absolute;right:16px;top:28px;width:24px;height:24px;background:var(--ivory);
    -webkit-mask:url(assets/icon-arrow-upright.svg) center/24px no-repeat;mask:url(assets/icon-arrow-upright.svg) center/24px no-repeat;transition:transform .4s}
  .person:hover{background:var(--taupe40)} .person:hover .sym{opacity:0} .person:hover .bar{background:var(--glass-card)} .person:hover .pbio{grid-template-rows:0fr;opacity:0;margin-top:0}
  .person.open{background:var(--walnut)} .person.open .sym{opacity:1;transform:translateX(-50%) scale(1)}
  .person.open .bar{background:var(--glass-card)} .person.open .bar::after{transform:rotate(90deg)}
  .person.open .pbio{grid-template-rows:1fr;opacity:1;margin-top:16px;color:var(--ivory80)}
  .person .sym{top:4px;width:86%;height:auto;aspect-ratio:240/216}

  /* ---------- projects (2050:7253) ---------- */
  .projects-sec{display:flex;flex-direction:column}
  .proj-top{flex-direction:column;margin-bottom:0}
  .proj-top p{width:auto;margin-top:40px;color:var(--walnut)}
  .projects-sec .center{order:2;justify-content:flex-start;margin:32px 0 40px}
  .projects-sec .cards{order:3}
  .cards{grid-template-columns:1fr;gap:16px}
  .card{height:396px;clip-path:polygon(0 64px,37px 0,100% 0,100% 100%,0 100%)}
  .card .panel{top:auto;bottom:64px;padding:24px;background:var(--glass-card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  .card .loc{font-size:var(--t-meta);line-height:var(--l-meta);color:var(--ivory80);margin-bottom:16px}
  .card .h4{font-size:28px;line-height:36px;letter-spacing:-.01em}
  .card .desc{display:none}
  .card .cta{background:var(--glass-card);border-top:1px solid var(--ivory20);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  .card .cta .meta{font-size:16px;line-height:16px;font-weight:500}
  .card:hover .panel{top:auto}
  .card .cta .i{width:24px;height:24px}

  /* ---------- latest news list (2050:7264) ---------- */
  section:has(>.news-top){display:flex;flex-direction:column}
  .news-top{display:contents}
  .news-top .sec-head{margin-bottom:var(--head-gap)!important}
  .news-top .btn{order:3;align-self:flex-start;margin-top:40px}
  .rows{border-top:0;border-bottom:1px solid rgba(45,35,30,.2)}
  .row{grid-template-columns:96px 1fr;column-gap:16px;align-items:start;padding:20px 0;border-top:1px solid var(--taupe);border-bottom:0}
  .row .thumb{grid-row:1/3;display:block;width:96px;height:72px;background-size:cover;background-position:center;clip-path:polygon(0 14px,8px 0,100% 0,100% 100%,0 100%)}
  .row .date{font-size:var(--t-meta);line-height:var(--l-meta);color:var(--walnut70)}
  .row .t{font-size:16px;line-height:24px;letter-spacing:0;margin-top:8px;min-height:72px}
  .row .arr{display:none}
  .row:hover{background:none;color:inherit;padding-left:0;padding-right:0}
  .row:hover .date{color:var(--walnut70)}
  .preview{display:none}

  /* ---------- footer (Footer · Mobile, photo band) ---------- */
  .band{height:240px}
  .band img{left:150px;right:auto;top:-60px;width:360px;opacity:.4}
  .footer{padding:56px var(--gut) 0}
  .fgrid{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;padding-bottom:48px}
  .fbrand{display:contents}
  .fbrand>img{grid-column:1/-1;width:196px}
  .fbrand .ig{grid-column:1/-1;margin-top:16px}
  .fcol{padding-top:8px;margin-top:40px}
  .fcol.muted{grid-column:1/-1}
  .fcol.muted+.fcol.muted{margin-top:32px}
  .fbrand .li{grid-column:1/-1;order:9;margin-top:40px}
  .fcol .label{margin-bottom:24px}
  .fcol.muted span:not(.label):first-of-type{margin-top:2px}
  .fbottom{height:48px;align-items:center;padding:0;margin:0 calc(-1 * var(--gut));padding:0 var(--gut);color:var(--ivory70)}

  /* contact band above the footer (About, Michal) */
  .cband{height:auto;padding:64px var(--gut) 280px}
  .cband::before{background-position:85% center}
  .cband .in{position:static;width:auto}
  .cband .sym{left:90px;top:auto;bottom:-96px;width:420px}
  .cband .txt{position:relative;left:auto;top:auto;width:auto}
  .cband .h2{margin-top:16px}
  .cband .crows{margin-top:40px}
  .cband .crow{font-size:18px;line-height:28px;padding:16px 0}
  .cband .btn{margin-top:40px}
  /* next project / related project band */
  .nband{height:440px;clip-path:polygon(0 64px,37px 0,100% 0,100% 100%,0 100%)}
  .nband .panel{height:auto;background:var(--glass-card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  .nband .in{position:relative;width:auto;height:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:24px var(--gut)}
  .nband .k{position:static;display:block;font-size:var(--t-meta);line-height:var(--l-meta)}
  .nband .display{position:static;display:block;margin-top:16px;font-size:var(--t-h1);line-height:var(--l-h1);letter-spacing:var(--k-h1)}
  .nband .in>.k,.nband .in>.display{flex-basis:100%}
  .nband .in{flex-wrap:wrap}
  .nband .in>.k{order:1} .nband .in>.display{order:2;flex:1;min-width:0;margin-top:0}
  .nband .tile{position:static;order:3;width:56px;height:56px;flex:none}
  .nband .tile .i{width:32px;height:32px}

  /* ---------- page hero (Page hero · Mobile) ---------- */
  .phero{height:360px}
  .phero .in{width:auto;height:100%;padding:104px var(--gut) 48px;display:flex;flex-direction:column;justify-content:space-between}
  .phero .sg{left:150px;top:-110px;width:340px;height:auto}
  .phero .crumb,.phero h1,.phero .claim{position:relative;left:auto;right:auto;top:auto;bottom:auto}
  .phero h1{margin-top:auto}
  .phero .claim{max-width:none;margin-top:12px;font-size:var(--t-lead);line-height:var(--l-lead)}
  .crumb{flex-wrap:wrap;row-gap:0}
  .crumb>span:last-child{min-width:0}

  /* photo hero — project / article (2050:7446, 2050:7480) */
  .photohero .pband{height:280px}
  .photohero .pband .sg{display:none}
  .photohero .pbody{height:auto!important}
  .photohero .pbody .in{width:auto;padding:40px var(--gut) 48px;display:flex;flex-direction:column;gap:16px}
  .photohero .pbody .sg{display:none}
  .photohero .head{position:static}
  .photohero .head h1{width:auto!important}
  .photohero .side{position:static;max-width:none;font-size:var(--t-lead);line-height:var(--l-lead)}
  .photohero .crumb{margin-bottom:16px}
  .photohero.news .crumb{display:none}
  .photohero .m-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px}
  .photohero .m-back .i{width:20px;height:20px;transform:scaleX(-1)}
  .photohero.news .side{font-size:var(--t-meta);line-height:var(--l-meta);color:var(--walnut70)}
  .photohero .m-rel{display:flex;align-items:center;gap:8px;height:68px;padding-top:16px;border-top:1px solid var(--taupe)}
  .photohero .m-rel .label{color:var(--walnut70)} .photohero .m-rel a{text-decoration:underline;text-underline-offset:3px}

  /* ---------- Michal Strnad (2050:7913) ---------- */
  .mhero{height:auto;padding:100px var(--gut) var(--sec-y)}
  .mhero .frame{position:static;width:auto;height:auto;transform:none;display:flex;flex-direction:column}
  .mhero .crumb{position:static;order:1}
  .mhero .scene{order:2;margin-top:32px}
  .mhero .mhead{position:static;order:3;width:auto;margin-top:32px;gap:16px}
  .bio{grid-template-columns:1fr;row-gap:40px}
  .bio .bio-side{position:static}
  .bio .bio-body{width:auto;gap:24px}
  .bio .bio-body .btn{margin-top:16px}

  /* ---------- projects page (2050:7431) ---------- */
  .intro-sec .h2{font-size:var(--t-h3)!important;line-height:var(--l-h3)!important;letter-spacing:var(--k-h3)}
  .intro-sec .intro-body{margin:32px 0 0;width:auto;display:flex;flex-direction:column;gap:16px}
  .intro-sec .intro-body .body-l{font-size:var(--t-body);line-height:var(--l-body)}
  section.pad:has(>.cards){padding-top:var(--sec-y)}

  /* ---------- project detail (2050:7453, 2050:7458) ---------- */
  .story{display:flex;flex-direction:column;gap:24px;padding-top:48px}
  .story .story-lead{font-size:var(--t-lead);line-height:var(--l-lead);letter-spacing:var(--k-lead)}
  .story .story-text{gap:24px}
  .story .story-text .body-l{font-size:var(--t-body);line-height:var(--l-body)}
  .quote-sec{height:auto;padding:80px var(--gut) 345px}
  .quote-sec .in{position:static;width:auto;height:auto}
  .quote-sec .qsym{left:120px;top:auto;bottom:0;width:340px;opacity:.15}
  .quote-sec blockquote{position:relative;left:auto;top:auto;width:auto}
  .quote-sec .attr{margin-top:40px}
  .quote-sec .attr .h5{font-size:20px;line-height:26px}

  /* ---------- news list (2050:7474) ---------- */
  .news-grid{padding-top:48px}
  .ncards{grid-template-columns:1fr;gap:48px}
  .ncard{height:auto;gap:0}
  .ncard .nimg{height:auto;aspect-ratio:350/234}
  .ncard .ndate{margin-top:24px}
  .ncard .nt{margin-top:16px}
  .ncard .nex{margin-top:16px}
  .clink{margin-top:24px}

  /* ---------- article (2050:7492) ---------- */
  .article{padding-top:0}
  .article>.rule{display:none}
  .acols{display:flex;flex-direction:column}
  .acol-l{order:2;margin-top:48px}
  .ameta{position:static;background:none;padding:0;gap:0}
  .ameta>.back,.ameta>div:not(:last-child){display:none}
  .ameta>div:last-child{flex-direction:row;align-items:center;justify-content:space-between;padding-top:24px;border-top:1px solid var(--taupe)}
  .abody h2,.abody h3,.abody h4,.abody h5,.abody h6{margin:48px 0 24px}
  .aquote,.afig,.avid,.stats{margin-top:48px}
  .abody>.aquote+p,.abody>.afig+p,.abody>.stats+.alist,.abody>p:last-child{margin-top:48px}
  .afig .fimg,.avid .fimg{height:auto;aspect-ratio:350/196}
  .afig .fimg{clip-path:polygon(0 64px,37px 0,100% 0,100% 100%,0 100%)}
  .stats{grid-template-columns:1fr;max-width:none}
  .lead{font-size:var(--t-lead);line-height:var(--l-lead)}

  /* ---------- contact (2050:7539) ---------- */
  .contacts{padding-top:0;padding-bottom:48px}
  .contacts>.rule{display:none}
  .crow2{display:flex;flex-direction:column;gap:16px;padding:32px 0 40px;border-top:1px solid var(--taupe)}
  .rule+.crow2{border-top:1px solid var(--taupe)}
  .crow2 .ct{font-size:var(--t-h3);line-height:var(--l-h3)}
  .crow2 .cc{padding-top:8px;gap:0}
  .crow2 .cr{margin-top:8px}

  /* ---------- legal (2050:7562) ---------- */
  .legal{padding-bottom:80px}
  .legal>.rule{left:0;right:0}
  .lcols{display:flex;flex-direction:column;gap:48px;padding-top:32px}
  .toc{position:static;gap:0}
  .toc .label{margin-bottom:12px}
  .toc-i{padding:12px 0}
  .tnote{margin-top:12px}
  .lsec{padding:40px 0}
  .lsec .h4{font-size:var(--t-h4);line-height:var(--l-h4)}

  /* ---------- 404 (2050:7585) ---------- */
  .nf{height:100svh;min-height:640px}
  .nf .decor{display:none}
  .nf .nfc{top:50%;transform:translate(-50%,-50%);width:calc(100% - 2 * var(--gut))}
  .nf .digits{gap:12.6px;height:120px;align-items:flex-end}
  .nf .digits span{font-size:165px;line-height:118px;font-weight:200}
  .nf .digits img{width:129.5px;height:118px}
  .nf .h1{margin-top:32px;text-align:center}
  .nf .btn{margin-top:32px}
}

/* =====================================================================
   3) TABLET 768–1023 (BF-321) — own layout between the mobile frames and desktop
      (no tablet frames in Figma: built from the desktop + mobile components). Typography: tokens.css.
   ===================================================================== */
@media (min-width:768px) and (max-width:1023px){
  /* reading measure: ~70 characters per line */
  :root{--measure:640px}

  /* hero: bigger headline, less empty space above the photo */
  .hero .intro{top:152px}
  .hero .actions{padding-top:40px}

  /* who we are: the three points side by side (desktop pattern) */
  .who .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px;border-top:1px solid var(--walnut20)}
  .who .col{padding:32px 0 0;border-top:0}
  .who .col+.col{padding-left:32px;border-left:1px solid var(--walnut20);margin-left:-16px}

  .mhero .scene{max-width:none}

  /* leadership: three in a row */
  .people{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .person .bar{padding:16px 40px 16px 16px}
  .person .h5{font-size:18px;line-height:24px}
  .person .bar::after{right:12px;top:18px;width:20px;height:20px;-webkit-mask-size:20px;mask-size:20px}

  /* project + news cards: two columns; an odd count opens with one wide card (no orphan) */
  .cards,.ncards{grid-template-columns:1fr 1fr}
  .card{height:440px}
  .cards>.card:first-child:nth-last-child(odd){grid-column:1/-1;height:480px}
  .cards>.card:first-child:nth-last-child(odd) .panel{right:auto;width:calc(50% - 8px)}
  .cards>.card:first-child:nth-last-child(odd) .desc{display:block;margin-top:16px;color:var(--ivory80);opacity:1}

  /* latest / related news rows: bigger thumbnail */
  .row{grid-template-columns:160px 1fr;column-gap:24px;padding:24px 0}
  .row .thumb{width:160px;height:120px;clip-path:polygon(0 20px,12px 0,100% 0,100% 100%,0 100%)}
  .row .t{font-size:20px;line-height:28px;min-height:0}

  /* photo hero (project, article): taller photo */
  .photohero .pband{height:420px}
  .photohero .head h1,.photohero .side{max-width:var(--measure)}

  /* long texts: reading measure */
  .story,.bio .bio-body,.intro-sec .intro-body,.acols{max-width:var(--measure)}
  .who .statement,.intro-sec .h2,.cband .txt{max-width:720px}

  /* contacts page: title + description left, contacts right */
  .crow2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;row-gap:16px;align-items:start}
  .crow2 .ct,.crow2 .cd{grid-column:1}
  .crow2 .cc{grid-column:2;grid-row:1/3;padding-top:4px}

  /* legal pages: sticky contents left, text right (desktop pattern) */
  .lcols{display:grid;grid-template-columns:232px minmax(0,1fr);column-gap:40px;align-items:start}
  .toc{position:sticky;top:96px;padding:24px;gap:0}
  .lsec:first-child{padding-top:0;border-top:0}

  /* contacts band + project quote: symbol beside the text, not under it */
  .cband{padding:96px var(--gut)}
  .cband .sym{left:auto;right:-80px;top:auto;bottom:-60px;width:400px}
  .quote-sec{padding:96px var(--gut)}
  .quote-sec blockquote{max-width:var(--measure)}
  .quote-sec .qsym{left:auto;right:-40px;bottom:-40px;width:260px}

  /* footer: four columns */
  .fgrid{grid-template-columns:1fr 1fr 1fr 1fr}
  .fcol.muted{grid-column:auto} .fcol.muted+.fcol.muted{margin-top:40px}
}

/* tablet ≥ 834 (iPad Air/Pro portrait): navigation in the header instead of the burger */
@media (min-width:834px) and (max-width:1023px){
  .header{padding:0 24px}
  .header .nav{display:flex;gap:28px}
  .burger{display:none}
}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important}
  *{transition-duration:.01ms!important}
}

/* mobile scene crop (Founding / Michal): bottom fade into Walnut, as in the mobile frame */
@media (max-width:1023px){
  .founding .scene::after,.mhero .scene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:15%;background:linear-gradient(180deg,rgba(45,35,30,0),#2D231E);pointer-events:none}
}
@media (max-width:1023px){
  .founding .frame{display:flex;flex-direction:column}
  .founding .heading{order:1} .founding .scene{order:2} .founding .ftext{order:3}
}
@media (max-width:1023px){
  .card .img{background-size:cover!important;background-position:center!important}
}
@media (max-width:1023px){
  .pad.legal{padding-top:0}
  .phero{height:auto;min-height:360px}
  .phero .in{min-height:360px}
}

/* touch devices: header without backdrop blur (expensive on iOS over the moving hero photo, BLA-266) — same look */
@media (pointer:coarse){
  .header{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(45,35,30,.94)}
}

/* tablet founding investors (BF-321): scene left, names + bio right — after the mobile flex rules above */
@media (min-width:768px) and (max-width:1023px){
  .founding .frame{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;align-items:start}
  .founding .heading{grid-column:1/-1}
  .founding .scene{max-width:none;margin-top:48px}
  .founding .ftext{margin-top:48px}
}