/* Editorial, principles and shared chrome, measured against Scale's current site.
   Praxa text and partner artwork deliberately retain our identity. */
.button { border-radius:6px; font-weight:500; gap:6px; }
.button::before { opacity:.18; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.button:hover>span { transform:none; }
.button-arrow i { position:relative; overflow:hidden; flex:none; }
.button-arrow i svg { position:absolute; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.button-arrow i svg:last-child { transform:translateX(-32px); }
.button-arrow:hover i svg:first-child { transform:translateX(32px); }
.button-arrow:hover i svg:last-child { transform:translateX(0); }
.nav-bar { gap:24px; }
.content-width { width:calc((100% - 136px)/12*10 + 72px); }
.principles { padding:96px 0; position:relative; background:#fff; }
.principles>h2 { font-size:40px; line-height:1.25; margin:0 0 64px; width:100%; max-width:none; }
.principle-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.principle-card { min-height:0; border-radius:16px; padding:40px; gap:64px; justify-content:space-between; }
.principle-icon { width:64px; height:64px; flex:none; margin:0; border-radius:12px; }
.principle-icon svg { width:32px; height:32px; }
.principle-card h3 { font-size:24px; line-height:1.5; letter-spacing:0; }
.principle-details { display:flex; flex:1; flex-direction:column; justify-content:flex-end; gap:32px; width:100%; }
.principle-card p { color:#212121; font-size:16px; line-height:1.5; margin:0; min-height:var(--description-height,0px); }
.principle-card .button { margin:0; min-height:0; padding:8px 16px; line-height:20.3px; }
.stories { position:relative; background:#fff; padding:64px 0; }
.stories>h2 { font-size:64px; line-height:1.05; margin:0 0 80px; text-align:center; text-wrap:balance; }
.story-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(4,70px) 91px 274px repeat(2,109px); gap:8px; }
.story { min-height:0; height:auto; display:flex; flex-direction:column; gap:20px; padding:20px; border-radius:16px; background:#f2f2f2; color:#000; }
.story h3 { font-size:16px; line-height:1.375; font-weight:500; letter-spacing:-.025em; margin:0; }
.story-intro { grid-area:1/1/5/3; justify-content:flex-end; }
.story-intro h3 { font-size:40px; line-height:1.25; letter-spacing:0; padding-bottom:2px; }
.story-feature { grid-area:1/3/6/5; }
.story-wide { grid-area:5/1/7/3; }
.story-small { grid-area:6/3/7/4; }
.story-control { grid-area:6/4/7/5; }
.story-coding { grid-area:7/1/9/2; }
.story-team { grid-area:7/2/9/4; }
.story-tools { grid-area:7/4/9/5; }
.story .story-picture { position:relative; inset:auto; z-index:0; color:inherit; flex:1; min-height:0; width:100%; border-radius:12px; overflow:hidden; aspect-ratio:16/9; }
.story-picture>img,.story-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(var(--art-scale,1)); transition:scale 1s cubic-bezier(.16,1,.3,1); }
.story:hover .story-picture>img,.story:hover .story-art { transform:scale(var(--art-scale,1)); scale:1.05; }
.story-overlay { padding:0; }
.story-overlay .story-picture { position:absolute; inset:0; height:100%; border-radius:16px; }
.story-overlay .story-picture::after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 25%,#0009); pointer-events:none; }
.story-overlay::after { content:none; }
.story-overlay>h3 { position:absolute; z-index:1; inset:auto 24px 24px; color:white; font-size:32px; line-height:1.2; letter-spacing:-.01em; }
.story .category { z-index:2; position:absolute; top:10px; left:12px; color:#fff; font:11px/1 'Aeonik Mono',monospace; letter-spacing:.05em; text-transform:uppercase; display:flex; align-items:center; gap:8px; padding:4px; }
.story .category i { width:26px; height:26px; display:grid; place-items:center; border-radius:5px; background:var(--category-color,#a8927c); box-shadow:0 1px 2px #0000000d; }
.category i::after { content:''; width:8px; height:8px; clip-path:polygon(0 0,100% 0,0 100%); background:white; }
.story-feature { --category-color:#1d4133; }
.story-wide { --category-color:#5a6b85; }
.story-small { --category-color:#a07862; }
.story-control { --category-color:#a3bed8; }
.story-coding { --category-color:#d2dae3; }
.story-team { --category-color:#bd9b7d; }
.story-tools { --category-color:#3f4f3a; }
.lockup-art { display:flex; align-items:center; justify-content:center; }
.lockup-green { background:#153e30; color:white; }
.lockup-blue { background:#5d6c82; color:white; }
.lockup-black { background:#000; color:white; }
.brand-lockup { width:75%; display:flex; align-items:center; justify-content:center; gap:24px; }
.brand-lockup .praxa-wordmark { width:calc(38% * 958.577 / 1034.345); height:auto; }
.lockup-divider { width:1px; height:50px; background:currentColor; opacity:.4; flex:none; }
.lockup-partner { width:45%; height:70px; background:currentColor; mask:var(--partner-url) center/contain no-repeat; -webkit-mask:var(--partner-url) center/contain no-repeat; }
.story-feature .brand-lockup { transform:translateY(-15%); }
.story-control .brand-lockup { gap:12px; }
.story-control .lockup-divider { height:28px; }
.task-diagram { background:#fff; color:#111; display:grid; grid-template-columns:1fr 10px 1fr 10px 1fr; align-content:center; align-items:center; padding:30px 15px 14px; gap:2px; font:9px/1.2 Aeonik,sans-serif; }
.task-diagram>div { grid-column:1/-1; text-align:center; font-size:11px; margin-bottom:20px; }
.task-diagram span { border:1px solid #d4d4d4; border-radius:3px; padding:8px 2px; text-align:center; background:#f5f5f5; }
.task-diagram b { height:1px; width:100%; background:#929292; }
.story-coding .category { color:#000; }
.closing-inner { position:relative; display:block; min-height:0; padding:384px 0 96px; }
.closing-copy { width:100%; max-width:448px; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.closing-copy h2 { font-size:40px; line-height:1.25; margin:0; max-width:260px; }
.closing-copy p { font-size:20px; line-height:1.5; margin:0 0 32px; max-width:none; }
.closing-media { position:absolute; width:60%; right:5%; bottom:40%; transform:translateY(40%); padding:8px; z-index:1; }
.closing-video { position:static; width:100%; height:auto; max-width:100%; aspect-ratio:auto; transform:none; object-fit:contain; mix-blend-mode:multiply; border-radius:0; }
.site-footer { padding:160px 24px 24px; gap:128px; }
.footer-top { position:relative; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:8px; }
.footer-brand { grid-column:1; margin:0; }
.footer-brand .praxa-brand-slot { height:24px; }
.footer-column { grid-column:span 2; gap:0; font-size:14px; line-height:1.5; }
.footer-column .eyebrow { margin:0 0 16px; font-size:13.008px; line-height:1.2; letter-spacing:.06em; }
.footer-statement { font-size:116px; line-height:1; letter-spacing:-.01em; }
.footer-bottom { gap:48px; align-items:center; }
.footer-social a { background:#212121; }
.footer-legal>div { flex-direction:row; gap:8px; }
.footer-legal .eyebrow { font-size:10px; line-height:1.2; letter-spacing:.06em; }
.reveal-line-mask { position:relative; display:block; overflow:clip; margin-block:-.12em; padding-block:.12em; }
.reveal-line { display:block; }
.reveal-word { display:inline-block; }
@media(max-width:1279px) {
  .principles { padding:48px 0; }
  .principles>h2 { font-size:24px; line-height:1.05; margin-bottom:48px; }
  .principle-card { padding:24px; border-radius:8px; gap:24px; }
  .principle-card h3 { font-size:18px; line-height:1.35; }
  .footer-statement { font-size:80px; }
}
@media(max-width:1023px) {
  .content-width { width:calc(100% - 48px); }
  .principle-grid { grid-template-columns:1fr; }
  .stories>h2 { font-size:32px; }
  .story-grid { display:flex; flex-direction:column; gap:8px; }
  .story:nth-child(n+5) { display:none; }
  .story { min-height:280px; padding:16px; gap:16px; }
  .story-intro { min-height:115px; }
  .story-intro h3 { font-size:24px; line-height:1.25; padding:0; }
  .story .story-picture { position:relative; height:auto; flex:none; aspect-ratio:16/10; border-radius:12px; }
  .story-overlay .story-picture::after { display:none; }
  .story-overlay>h3 { position:static; font-size:16px; line-height:1.375; color:#000; letter-spacing:-.025em; }
  .story .category { top:6px; left:8px; }
  .story-feature .brand-lockup { transform:none; }
  .closing-inner { display:flex; flex-direction:column; gap:32px; padding:40px 24px 48px; }
  .closing-copy { max-width:448px; }
  .closing-copy h2 { font-size:24px; line-height:1.05; }
  .closing-copy p { font-size:16px; margin:0; }
  .closing-media { position:relative; width:100%; max-width:448px; right:auto; bottom:auto; transform:none; align-self:flex-end; aspect-ratio:16/9; padding:8px; }
  .closing-video { width:100%; height:100%; }
  .site-footer { padding:32px 24px 24px; gap:48px; }
  .footer-top { display:grid; grid-template-columns:1fr; gap:40px; margin-bottom:32px; }
  .footer-brand { position:absolute; top:0; right:0; }
  .footer-brand .praxa-brand-slot { justify-content:flex-end; }
  .footer-column { grid-column:auto; font-size:14px; line-height:1.45; }
  .footer-column .eyebrow { font-size:10px; }
  .footer-statement { font-size:40px; }
  .footer-bottom { flex-direction:column; align-items:stretch; gap:48px; }
  .footer-legal { text-align:right; }
  .footer-legal>div { flex-direction:column-reverse; gap:8px; }
}
@media(max-width:767px) {
  .content-width { width:calc(100% - 48px); }
  .principles>h2 { width:80%; margin-inline:auto; }
  .principle-card { gap:20px; }
  .principle-icon { width:40px; height:40px; border-radius:12px; }
  .principle-icon svg { width:24px; height:24px; }
  .principle-card p { min-height:0; }
  .principle-card .button { min-height:36px; padding-block:7.5px; }
  .stories { padding:48px 0; }
  .stories>h2 { margin-bottom:32px; }
}

.principles,.stories,.closing,.site-footer { z-index:5; position:relative; }
.principles,.stories { isolation:isolate; }
.principles::after,.stories::after { content:""; position:absolute; inset:0 calc((100vw - 100%) / -2); background:#fff; z-index:-1; }

.stories>h2 .reveal-line-mask:not(:first-child) { margin-top:-.24em; }
/* Keep line reveals from moving the browser's scroll anchor. */
html { overflow-anchor:none; }
.lockup-green { background:#193a29; }
.lockup-blue { background:#92a6b8; }
.story-feature .story-picture::after { display:none; }
.closing-inner { background:#a8927c; }
.closing-media { mix-blend-mode:multiply; }
.button-arrow { gap:16px; }
@media(max-width:767px) {
  .nav-bar { height:70px; gap:8px; }
  .mobile-nav { max-height:calc(100dvh - 70px); }
  .closing-copy p { line-height:1.45; }
}

.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; margin:-1px!important; padding:0!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

.mobile-back,.mobile-menu-title { display:none; }
@media(max-width:767px) {
  .menu-open .site-header,.mobile-nav { background:#f5f5f5; }
  .menu-open .mobile-start { display:none; }
  .menu-open .mobile-toggle { margin-left:auto; background:#eaeaea; }
  .mobile-nav { height:calc(100dvh - 70px); max-height:none; padding:8px 24px 24px; }
  .mobile-category { display:flex; align-items:center; justify-content:space-between; width:100%; background:transparent; padding:16px 0; font-size:32px; line-height:34px; letter-spacing:-.01em; text-align:left; }
  .mobile-category svg,.mobile-subgroup a>svg { width:24px; height:24px; color:#666; }
  .mobile-actions { position:absolute; left:24px; right:24px; bottom:24px; display:flex; gap:8px; padding:8px; background:#fff; border-radius:12px; }
  .mobile-actions .button { width:50%; height:48px; padding:12px; }
  .mobile-actions .button-outline { color:#212121; }
  .submenu-open .mobile-actions,.submenu-open .brand { display:none; }
  .mobile-back:not([hidden]) { display:grid; place-items:center; background:transparent; width:40px; height:40px; margin-left:-8px; }
  .mobile-back svg { width:16px; height:16px; transform:rotate(180deg); }
  .mobile-menu-title:not([hidden]) { display:block; position:absolute; left:72px; right:72px; text-align:center; pointer-events:none; font-size:16px; line-height:22px; }
  .mobile-panel { padding-top:8px; padding-bottom:24px; }
  .mobile-subgroup+.mobile-subgroup { margin-top:32px; }
  .mobile-subgroup>p { font-size:14px; line-height:20px; color:#929292; margin-bottom:12px; }
  .mobile-subgroup>a { display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:24px; line-height:28px; letter-spacing:-.01em; padding:6px 0; }
}