/* CG190 · the seven-page build to the Figma frames (page 25 · Culture Group · Phone, and the 1440 set) */

/* The Ohana strip: on phones the marks scroll sideways under a white fade with a chevron, so it reads as a scroll, not a clip */
@media (max-width:760px){
  footer .oh-strip.oh-foot{position:relative}
  footer .oh-strip.oh-foot::after{content:"";position:absolute;top:6px;right:6px;bottom:6px;width:56px;border-radius:0 11px 11px 0;pointer-events:none;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m6 3 5 5-5 5' stroke='%231559F5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center/16px 16px no-repeat,linear-gradient(90deg,rgba(255,255,255,0),#fff 60%);transition:opacity .2s}
  footer .oh-strip.oh-foot.is-end::after{opacity:0}
}

/* Home hero: the Ohana marks become a wrapping row of chips on phones, nothing clipped at the right edge */
@media (max-width:760px){
  html body main#main .t9-hero .t9-coins{position:static!important;display:flex!important;flex-wrap:wrap;gap:8px;height:auto!important;width:auto!important;margin:24px 0 0!important;padding:0!important;transform:none!important}
  html body main#main .t9-hero .t9-coins>li{position:static!important;width:auto!important;height:40px!important;min-width:0!important;border-radius:999px!important;padding:0 14px!important;display:flex!important;align-items:center;justify-content:center;transform:none!important;animation:none!important;box-shadow:none!important}
  html body main#main .t9-hero .t9-coins>li[data-copy]{display:none!important}
  html body main#main .t9-hero .t9-coins>li a{display:flex;align-items:center;min-height:44px;margin:-2px 0}
  html body main#main .t9-hero .t9-coins>li img{height:16px!important;width:auto!important;max-width:none!important}
}

/* Letter: chapters 02 to 04 fold behind Keep reading. The full text stays in the page; it opens with an animation. */
.lt-keep{display:none}
html.js .lt-keep{display:flex;flex-direction:column;align-items:center;gap:12px;margin:8px 0 32px;position:relative}
html.js .lt-keep::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:120px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff);pointer-events:none}
html.js .lt-keep p{margin:0;font:500 13px/1.4 "IBM Plex Mono",ui-monospace,monospace;color:#566074}
.lt-btn{min-height:48px;padding:0 24px;border:0;border-radius:999px;background:#1559f5;color:#fff;font:600 15px/1 Rubik,system-ui,sans-serif;cursor:pointer}
.lt-btn:focus-visible{outline:3px solid #9dbbff;outline-offset:3px}
html.js .lt-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.2,.7,.2,1)}
html.js .lt-more>.lt-in{overflow:hidden;min-height:0}
html.js .lt-more:not(.is-open)>.lt-in{visibility:hidden}
html.js .lt-more.is-done>.lt-in{overflow:visible}
html.js .lt-more.is-open{grid-template-rows:1fr}
html.js .lt-keep.is-gone{display:none}
@media (prefers-reduced-motion:reduce){html.js .lt-more{transition:none}}

/* Studio: Websites, Apps and Social as one tabbed section; all three stay in the page */
.sv-tabs-w{padding-top:40px}
.sv-tabs{display:inline-flex;gap:4px;padding:4px;border:1px solid #e3e8f2;border-radius:999px;background:#f5f7fc}
.sv-tabs button{min-height:44px;padding:0 24px;border:0;border-radius:999px;background:none;font:600 15px/1 Rubik,system-ui,sans-serif;color:#0a1633;cursor:pointer}
.sv-tabs button[aria-selected="true"]{background:#0a1633;color:#fff}
html.js .sv-tabset .sv-sec[hidden]{display:none!important}
html body main#main .sv-tabset .sv-sec{padding-top:24px!important}

/* Founder: speaking as three events; the notes and the coverage end in a More row */
.cg-events{list-style:none;margin:24px 0 0;padding:0;border:1px solid #e3e8f2;border-radius:20px;background:#fff;overflow:hidden}
.cg-events li{display:flex;flex-direction:column;gap:4px;padding:16px 20px}
.cg-events li+li{border-top:1px solid #e3e8f2}
.cg-ev-k{font:500 13px/1.3 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#1559f5}
.cg-ev-t{font:600 17px/1.3 Rubik,system-ui,sans-serif;color:#0a1633}
li.cg-more a{display:flex!important;justify-content:space-between;align-items:center;min-height:52px;color:#1559f5!important;font-weight:600}

/* Founder hero photo: the Orlando portrait in a 427px slot on laptops (2x of its 853px original) */
@media (min-width:761px){
  html body main#main .cg-fhero{height:533px!important}
  html body main#main .cg-fhero .tg-fone{left:0!important;right:auto!important;width:427px!important;height:533px!important}
  html body main#main .cg-fhero .tg-shot.hero img{object-position:50% 20%!important}
  html body main#main .cg-fhero .bd-sc{display:none}
  html body main#main .cg-fhero .cg-fhgrid{padding:0 0 0 calc(427px + 80px)!important;justify-content:center!important}
  html body main#main .cg-fhero h1:not(#a):not(#b):not(#c){font-size:88px!important}
}
@media (max-width:760px){html body main#main .cg-fhero .tg-fone{height:487px!important}html body main#main .cg-fhero .tg-shot.hero img{object-position:50% 20%!important}}

/* How we invest film band: the nurse chart in a 360px slot on laptops (2x of its 1024px original), beside the copy */
@media (min-width:761px){
  html body main#main .up-film{height:auto!important;display:flex;align-items:center;gap:64px;padding:64px max(48px,calc(50% - 600px))!important}
  html body main#main .up-film picture{display:block;flex:none;order:2}
  html body main#main .up-film img{position:static!important;width:360px!important;height:240px!important;border-radius:20px;object-fit:cover}
  html body main#main .up-film .sc{display:none}
  html body main#main .up-film .ov{position:static!important;transform:none!important;max-width:620px;flex:1}
}

/* Home · What the Group operates, to the frame: two company cards with photos, the four products as a list of rows with their
   marks (no product photos), and the full Ohana plate stays on the Home only at laptop width */
html body main#main #own .t9-n4 picture{display:none!important}
html body main#main #own .t9-n4{display:flex!important;flex-direction:column;gap:0!important;border:1px solid #e3e8f2;border-radius:20px;overflow:hidden;background:#fff}
html body main#main #own .t9-n4>li{border:0!important;margin:0!important}
html body main#main #own .t9-n4>li+li{border-top:1px solid #e3e8f2!important}
html body main#main #own .t9-n4 .t9-tile{display:grid!important;grid-template-columns:1fr auto;gap:8px 12px;padding:16px!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:none!important;min-height:0!important;height:auto!important}
html body main#main #own .t9-n4 .t9-tile-mark{grid-column:1}
html body main#main #own .t9-n4 .t9-tile-line{grid-column:1;font-size:15px!important;line-height:1.4!important}
html body main#main #own .t9-n4 .t9-tile-go{grid-column:2;grid-row:1/span 2;align-self:center;position:relative;width:24px;height:24px;overflow:hidden;color:transparent!important;font-size:15px!important;white-space:nowrap}
html body main#main #own .t9-n4 .t9-tile-go span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px!important;color:#1559f5}
@media (max-width:760px){
  html body main#main #own .oh-plate.oh-full{display:none!important}
  html body main#main #own .t9-n2{display:grid!important;grid-template-columns:1fr 1fr;gap:12px!important}
  html body main#main #own .t9-n2 picture img{height:120px!important}
  /* Platform: the screens shown once in the stage; the app and navigator sections are text on phones */
  html body main#main #apps picture,html body main#main #apps .os-shot,html body main#main #navigator .cg-car,html body main#main #navigator picture,html body main#main #navigator figure{display:none!important}
  /* Studio: the prize piece keeps its phone; the work list is text on phones */
  html body main#main #work picture,html body main#main #work figure{display:none!important}
}
@media (max-width:760px){
  html body main#main #navigator .os-navs{display:none!important}
}

/* the 4px grid on the pages metalab now covers (Platform, Studio, the diagram labels) */
html body main#main :is(p.os-mark,p.st-mark){padding:12px 20px!important}
html body main#main div.st-pbezel{padding:8px!important}
html body main#main #system p.px-kick,html body main#main .os-sec p.px-kick{margin-bottom:8px!important}
html body main#main .os-sec h3{margin-bottom:8px!important}
html body main#main .os-sec p.px-dek{margin-top:16px!important}
html body main#main p.t9-ctas.os-ctas{margin-top:24px!important}
html body main#main p.os-ck{margin-bottom:16px!important}
html body main#main p.pd-lab{font-size:13px!important}
/* the letter's chapter headers stick under the reading bar inside the opened chapters too */
@media (max-width:760px),(max-height:500px) and (pointer:coarse){
  html.sh-on .tg-letterpage main .prose .lt-in>.px-h2{position:sticky;top:var(--ap-topc);z-index:20;margin:40px calc(-1 * var(--ap-g)) 12px!important;padding:0 var(--ap-g)!important;background:var(--ap-bg)!important}
  html.sh-on .tg-letterpage main .prose .lt-in>.px-h2.ap-stuck{box-shadow:0 .5px 0 var(--ap-hair)}
}

/* Laptop rhythm to the 1440 frames: 48px above and below every section, so sections sit 96px apart (rule: 100 or less) */
@media (min-width:761px){
  html body main#main:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5)>section:not(.t9-hero):not(.tg-pghero):not(.article-hero):not(.cg-fhero):not(.bd-film):not(.up-film):not(.bd-inc):not(.up-stage):not(.tg-close):not(.bd-close),
  html body main#main:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5)>.sv-tabset>section{padding-top:48px!important;padding-bottom:48px!important}
  html body main#main:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5)>section:not(.t9-hero):not(.tg-pghero):not(.article-hero):not(.cg-fhero)>.px-wrap{padding-top:0!important;padding-bottom:0!important}
  html body main#main:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5)>section:is(.tg-close,.bd-close){padding-top:72px!important;padding-bottom:72px!important}
  html body main#main:not(#z1)>.sv-tabset>.sv-tabs-w{padding-top:48px}
}
@media (min-width:761px){
  /* page heroes to the frames: 72px above and below the copy, under the 80px bar */
  html body main#main:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5)>section.px-chero.tg-pghero{padding-top:152px!important;padding-bottom:72px!important;min-height:0!important}
  /* card rows: 48px under the lead, not 64 + 40 */
  html body main#main:not(#z1):not(#z2):not(#z3) .os-sec ul.os-cards{margin-top:40px!important}
  html body main#main:not(#z1):not(#z2):not(#z3) .os-sec ul.os-cards>li{padding-top:24px!important;padding-bottom:24px!important}
}
@media (min-width:761px){
  html body main#main:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5) ul.os-cards{margin-top:40px!important}
  html body main#main:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5) ul.os-cards>li{padding-top:24px!important;padding-bottom:24px!important}
  html body main#main:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5)>section.up-stage{padding-top:48px!important}
}
/* Phone rhythm to the 390 frames: 40px above and below each section (80 between) */
@media (max-width:760px){
  html body main#main:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5)>section:not(:first-child):not(.bd-film):not(.up-film):not(.bd-inc):not(.up-stage),
  html body main#main:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5)>.sv-tabset>section{padding-top:40px!important;padding-bottom:40px!important}
}
@media (max-width:760px){
  html body main#main:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5)>section>.px-wrap{padding-top:0!important;padding-bottom:0!important}
  html body main#main:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5) ul.os-cards>li{padding-bottom:16px!important}
}
html body main#main:not(#z1):not(#z2):not(#z3):not(#z4):not(#z5)>section.bd-close{margin-top:0!important}
@media (max-width:359px){.sv-tabs button{padding:0 16px}}
/* Home close: the Orlando portrait, whole, at 400 wide on laptops and 358 on phones (both at least 2x) */
html body main#main #selling .bd-close-ph img{aspect-ratio:853/1067;height:auto!important;object-fit:cover}
@media (min-width:761px){html body main#main #selling .bd-close-ph{width:400px!important;max-width:400px!important;flex:none}}
@media (max-width:760px){html body main#main #selling .bd-close-ph{max-width:358px}}