/* Careers and About (built by data/tora-site-showcase/tools/company_pages.py from the copy
   lane's deck). A hairline technical frame on a cell grid, with Tora's own contour lines drawn
   behind the hero. Cells are twelve to the frame on desktop and six on phones. */
*{margin:0;padding:0;box-sizing:border-box}
body.company{background:var(--bg);color:var(--ink);font-family:'DM Sans',-apple-system,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
:is(.company,.support) .g-wrap{max-width:72rem;margin:0 auto;padding:0 var(--gutter-wide,1.25rem)}
.company main{position:relative;z-index:1}

@property --mx{syntax:'<length-percentage>';inherits:true;initial-value:72%}
@property --my{syntax:'<length-percentage>';inherits:true;initial-value:34%}

.co-page{padding:var(--space-10,2.5rem) var(--gutter-wide,1.25rem) 0}
.co-canvas{--line:rgb(255 255 255 / .1);--grid:rgb(255 255 255 / .055);--cols:12;--cell:calc(100cqw / var(--cols));--pad:calc(var(--cell) * .5);
  position:relative;max-width:72rem;margin:0 auto;container-type:inline-size}
/* no frame lines or corner marks on the company boards (founder 2026-10-11, review F19: containers
   never get borders) */
.co-frame{position:relative}

/* crosshair marks where frame lines meet */
.xh{display:none!important;position:absolute;z-index:3;width:1.375rem;height:1.375rem;translate:-50% -50%;pointer-events:none}
.xh::before,.xh::after{content:"";position:absolute;background:rgb(255 255 255 / .55)}
.xh::before{left:50%;top:0;bottom:0;width:1px;translate:-.5px 0}
.xh::after{top:50%;left:0;right:0;height:1px;translate:0 -.5px}
.xh-tl{left:-.5px;top:-.5px}
.xh-tr{left:calc(100% + .5px);top:-.5px}
.xh-br{left:calc(100% + .5px);top:calc(100% + .5px)}
.xh-split{left:calc(var(--cell) * 3 - 1px);top:-.5px}

/* hero: grid cells, contour lines, copy low and left */
.co-hero{display:flex;align-items:flex-end;min-height:calc(var(--cell) * 7);padding:calc(var(--cell) * 2) var(--pad) calc(var(--cell) * .625);
  transition:--mx .6s cubic-bezier(.22,1,.36,1),--my .6s cubic-bezier(.22,1,.36,1)}
.co-hero-about{min-height:calc(var(--cell) * 5.5)}
.co-art{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.co-grid{position:absolute;inset:0;background-image:linear-gradient(to right,var(--grid) 1px,transparent 1px),linear-gradient(to bottom,var(--grid) 1px,transparent 1px);
  background-size:var(--cell) var(--cell);background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(130% 110% at 78% 12%,#000 35%,transparent 80%);mask-image:radial-gradient(130% 110% at 78% 12%,#000 35%,transparent 80%)}
.co-topo{position:absolute;top:0;right:0;width:100%;height:100%;overflow:visible;fill:none;
  -webkit-mask-image:linear-gradient(to right,transparent 4%,rgb(0 0 0 / .5) 34%,#000 62%);mask-image:linear-gradient(to right,transparent 4%,rgb(0 0 0 / .5) 34%,#000 62%)}
.co-topo path{vector-effect:non-scaling-stroke;stroke-width:1}
.co-topo g path{stroke:rgb(143 179 203 / .36);stroke-dasharray:1;stroke-dashoffset:1;animation:co-draw 2.4s cubic-bezier(.3,.05,.15,1) forwards;animation-delay:calc(var(--i) * 28ms + .1s)}
.co-topo-lit{stroke:#eef3f6;opacity:.55;transition:opacity .5s ease;
  -webkit-mask-image:radial-gradient(15rem circle at var(--mx) var(--my),#000,rgb(0 0 0 / .35) 45%,transparent 72%);mask-image:radial-gradient(15rem circle at var(--mx) var(--my),#000,rgb(0 0 0 / .35) 45%,transparent 72%)}
.co-topo-lit use{stroke:#eef3f6;opacity:0;animation:co-fade 1.4s ease 1.2s forwards}
.co-hero.is-lit .co-topo-lit{opacity:1}
.co-topo-run{filter:drop-shadow(0 0 3px rgb(143 179 203 / .9))}
.co-topo-run path{stroke:#eef3f6;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:.05 .95;stroke-dashoffset:1;opacity:0;
  animation:co-run 11s linear infinite,co-fade 1s ease 2s forwards;animation-delay:calc(var(--r) * -3.7s),2s}
@keyframes co-draw{to{stroke-dashoffset:0}}
@keyframes co-fade{to{opacity:1}}
@keyframes co-run{to{stroke-dashoffset:0}}

.co-hero-copy{position:relative;z-index:2;max-width:calc(var(--cell) * 7)}
.co-hero h1{margin-bottom:var(--space-6,1.5rem);font:500 clamp(2.25rem,9cqw,6.5rem)/.95 'Orbitron',sans-serif;letter-spacing:-.035em;color:var(--ink);white-space:nowrap}
.co-intro{max-width:40rem;margin-bottom:var(--space-4,1rem);font:400 clamp(1.125rem,1.8vw,1.3125rem)/1.5 'DM Sans',sans-serif;color:var(--ink)}
.co-sub{max-width:38rem;margin-bottom:var(--space-6,1.5rem);font-size:var(--text-body,1rem);line-height:1.65;color:var(--body)}
.co-link{display:inline-flex;align-items:center;gap:.5rem;font:500 var(--text-body,1rem)/1 'DM Sans',sans-serif;color:var(--ink);text-decoration:none;
  border-bottom:1px solid rgb(143 179 203 / .5);padding-bottom:.3rem;transition:color .25s ease,border-color .25s ease}
.co-link span{transition:translate .3s cubic-bezier(.22,1,.36,1)}
.co-link:hover{color:#8fb3cb;border-color:#8fb3cb}
.co-link:hover span{translate:.2rem 0}
.pending{text-decoration:underline dotted rgb(143 179 203 / .8);text-underline-offset:.2em;color:#b7cddd}

/* careers board: team filter on the left, roles on the right */
.co-board{display:grid;grid-template-columns:calc(var(--cell) * 3) minmax(0,1fr)}
.co-side{border-right:1px solid var(--line)}
.co-filter{position:sticky;top:5rem;display:grid;padding-top:var(--cell)}
.co-filter button{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.125rem var(--pad);border:0;border-top:1px solid var(--line);background:none;
  font:500 .9375rem/1.2 'DM Sans',sans-serif;color:var(--body);text-align:left;cursor:pointer;box-shadow:inset 0 0 0 transparent;transition:color .2s ease,background .2s ease,box-shadow .3s ease}
.co-filter button:last-child{border-bottom:1px solid var(--line)}
.co-filter button b{min-width:1.625rem;padding:.3rem .4rem;border:1px solid var(--line);border-radius:.375rem;font:500 .75rem/1 'DM Sans',sans-serif;font-variant-numeric:tabular-nums;text-align:center;color:var(--muted);transition:inherit}
.co-filter button:hover{color:var(--ink)}
.co-filter button[aria-pressed="true"]{color:var(--ink);background:rgb(143 179 203 / .05);box-shadow:inset 2px 0 0 #8fb3cb}
.co-filter button[aria-pressed="true"] b{border-color:rgb(143 179 203 / .45);color:#8fb3cb}
.co-filter button:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}

.co-list-h{display:flex;align-items:center;min-height:var(--cell);padding:1.25rem var(--pad);border-bottom:1px solid var(--line)}
.co-list-h h2,.co-group h2,.co-how h2{font:500 clamp(1.375rem,2.3vw,2rem)/1.15 'DM Sans',sans-serif;letter-spacing:-.02em;color:var(--ink)}
.co-group{padding:calc(var(--cell) * .5) var(--pad) 1.75rem;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgb(255 255 255 / .02),transparent)}
.co-group h2{margin-bottom:.5rem;font-size:clamp(1.25rem,1.9vw,1.625rem)}
.co-group p{font-size:var(--text-body,1rem);line-height:1.6;color:var(--body)}

.co-role{border-bottom:1px solid var(--line);transition:background .3s ease}
.co-role.co-in{animation:co-in .45s cubic-bezier(.22,1,.36,1)}
@keyframes co-in{from{opacity:0;translate:0 .5rem}}
.co-role summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.625rem var(--space-6,1.5rem);padding:1.75rem var(--pad)}
.co-role summary::-webkit-details-marker{display:none}
.co-role summary:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.co-role:hover,.co-role.is-open,body:not(.co-js) .co-role[open]{background:rgb(255 255 255 / .018)}
.co-role-title{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .75rem}
.co-role h3{font:500 clamp(1.125rem,1.7vw,1.3125rem)/1.25 'DM Sans',sans-serif;letter-spacing:-.01em;color:var(--ink)}
.co-tags{display:flex;gap:.375rem}
.co-tag{padding:.3rem .5rem;border:1px solid var(--line);border-radius:.375rem;font:500 .6875rem/1 'DM Sans',sans-serif;letter-spacing:.02em;color:var(--body)}
.co-meta{grid-column:1;display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;list-style:none;font-size:var(--text-sm,.875rem);line-height:1.5;color:var(--body)}
.co-meta li:nth-child(3){color:var(--ink);font-weight:500}
.co-meta li:nth-child(4){color:#8fb3cb}

/* expand control: a hairline plus in a quiet square; the upright stroke lies down into a minus */
.co-ctl{grid-column:2;grid-row:1 / span 2;position:relative;width:2.5rem;height:2.5rem;border:1px solid rgb(255 255 255 / .14);border-radius:.625rem;
  transition:border-color .3s ease,background .3s ease,rotate .5s cubic-bezier(.22,1,.36,1)}
.co-ctl i{position:absolute;left:50%;top:50%;width:.875rem;height:1px;margin:-.5px 0 0 -.4375rem;background:var(--ink);border-radius:1px;transition:rotate .5s cubic-bezier(.22,1,.36,1),background .3s ease}
.co-ctl i+i{rotate:90deg}
.co-role summary:hover .co-ctl{border-color:rgb(143 179 203 / .5);background:rgb(143 179 203 / .06)}
.co-role.is-open .co-ctl,body:not(.co-js) .co-role[open] .co-ctl{rotate:180deg;border-color:rgb(143 179 203 / .55);background:rgb(143 179 203 / .1)}
.co-role.is-open .co-ctl i,body:not(.co-js) .co-role[open] .co-ctl i{background:#dde8ef}
.co-role.is-open .co-ctl i+i,body:not(.co-js) .co-role[open] .co-ctl i+i{rotate:0deg}

.co-role-inner{padding:0 var(--pad) 2rem}
.co-lead{max-width:44rem;margin-bottom:1.5rem;padding-top:1.25rem;border-top:1px dashed rgb(255 255 255 / .08);font-size:var(--text-body,1rem);line-height:1.6;color:var(--ink)}
.co-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8,2rem);margin-bottom:1.5rem}
.co-cols h4{margin-bottom:.75rem;font:600 var(--text-sm,.875rem)/1.2 'DM Sans',sans-serif;color:var(--ink)}
.co-cols ul{list-style:none;display:grid;gap:.625rem}
.co-cols li{position:relative;padding-left:1.125rem;font-size:var(--text-sm,.875rem);line-height:1.55;color:var(--body)}
.co-cols li::before{content:"";position:absolute;left:0;top:.75em;width:.5rem;height:1px;background:#8fb3cb}
.co-apply{font:500 var(--text-sm,.875rem)/1.4 'DM Sans',sans-serif;color:var(--ink)}
.co-other{padding:calc(var(--cell) * .5) var(--pad);background:repeating-linear-gradient(135deg,rgb(255 255 255 / .018) 0 1px,transparent 1px 10px)}
.co-other h2{margin-bottom:.625rem;font:500 var(--text-lg,1.125rem)/1.3 'DM Sans',sans-serif;letter-spacing:-.01em;color:var(--ink)}
.co-other p{max-width:40rem;font-size:var(--text-body,1rem);line-height:1.6;color:var(--body)}

/* about: one team statement, three kinds of expertise, then how we work */
.co-team-lead{padding:calc(var(--cell) * .625) calc(var(--cell) * 2.5) calc(var(--cell) * .625) var(--pad);border-bottom:1px solid var(--line);
  font:400 clamp(1.25rem,2.2vw,1.75rem)/1.4 'DM Sans',sans-serif;letter-spacing:-.01em;color:var(--ink)}
.co-team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;counter-reset:team}
.co-team-grid li{counter-increment:team;display:grid;align-content:start;gap:.625rem;min-height:calc(var(--cell) * 2.5);padding:var(--pad);border-right:1px solid var(--line)}
.co-team-grid li:last-child{border-right:0}
.co-team-grid li::before{content:counter(team,decimal-leading-zero);margin-bottom:.875rem;font:500 .75rem/1 'Orbitron',sans-serif;letter-spacing:.06em;color:#8fb3cb}
.co-team-grid h3{font:500 var(--text-lg,1.125rem)/1.3 'DM Sans',sans-serif;color:var(--ink)}
.co-team-grid p{font-size:var(--text-sm,.9375rem);line-height:1.6;color:var(--body)}
.co-how{display:grid;grid-template-columns:calc(var(--cell) * 3) minmax(0,1fr)}
.co-how h2{padding:var(--pad);border-right:1px solid var(--line)}
.co-how div{padding:var(--pad)}
.co-how p{max-width:44rem;margin-bottom:1.5rem;font-size:var(--text-body,1rem);line-height:1.7;color:var(--body)}

/* footer */
.co-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-5,1.25rem);margin-top:var(--space-16,4rem);padding-top:var(--space-8,2rem)!important;padding-bottom:var(--space-10,2.5rem)!important;
  font-size:var(--text-sm,.875rem);color:var(--muted)}
.co-foot-logo img{height:.875rem;display:block;filter:invert(1)}
.co-foot nav{display:flex;flex-wrap:wrap;gap:var(--space-5,1.25rem)}
.co-foot a{color:var(--body);text-decoration:none;transition:color .2s}
.co-foot a:hover{color:var(--ink)}

@media(max-width:820px){
  .co-page{padding:var(--space-6,1.5rem) 1rem 0}
  :is(.company,.support) .g-wrap{padding:0 1rem}
  .co-canvas{--cols:6;--pad:1.25rem}
  .xh-split{display:none}
  .co-hero,.co-hero-about{display:block;min-height:0;padding:calc(var(--cell) * 3.5) var(--pad) 2rem}
  .co-grid{-webkit-mask-image:linear-gradient(180deg,#000 20%,transparent 70%);mask-image:linear-gradient(180deg,#000 20%,transparent 70%)}
  .co-topo{height:calc(var(--cell) * 5);-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 100%);mask-image:linear-gradient(180deg,#000 45%,transparent 100%)}
  .co-topo-lit{-webkit-mask-image:radial-gradient(10rem circle at var(--mx) var(--my),#000,rgb(0 0 0 / .35) 45%,transparent 72%);mask-image:radial-gradient(10rem circle at var(--mx) var(--my),#000,rgb(0 0 0 / .35) 45%,transparent 72%)}
  .co-hero-copy{max-width:none}
  .co-board{grid-template-columns:minmax(0,1fr)}
  .co-list{display:contents}
  .co-list-h{order:-1;min-height:0;padding:1.75rem var(--pad) 1.25rem;border-bottom:0}
  .co-side{border-right:0;border-bottom:1px solid var(--line)}
  .co-filter{position:static;display:flex;flex-wrap:wrap;gap:.5rem;padding:0 var(--pad) 1.25rem}
  .co-filter button,.co-filter button:last-child{padding:.5rem .5rem .5rem .875rem;border:1px solid var(--line);border-radius:999px;font-size:.875rem}
  .co-filter button[aria-pressed="true"]{box-shadow:none;border-color:rgb(143 179 203 / .5)}
  .co-filter button b{border:0;padding:.25rem .375rem;min-width:0}
  .co-role summary{padding:1.5rem var(--pad);align-items:start}
  .co-ctl{width:2.25rem;height:2.25rem}
  .co-group{padding:2rem var(--pad) 1.5rem}
  .co-other{padding:2rem var(--pad)}
  .co-cols{grid-template-columns:1fr;gap:1.25rem}
  .co-team-lead{padding:1.75rem var(--pad)}
  .co-team-grid{grid-template-columns:1fr}
  .co-team-grid li{min-height:0;padding:1.5rem var(--pad);border-right:0;border-bottom:1px solid var(--line)}
  .co-team-grid li:last-child{border-bottom:0}
  .co-how{grid-template-columns:1fr}
  .co-how h2{padding:1.75rem var(--pad) 0;border-right:0}
  .co-how div{padding:1rem var(--pad) 1.75rem}
  .co-foot{margin-top:var(--space-10,2.5rem)}
}

/* look 22: the plus sits on the role's centre line on phones too, and Apply is a real button
   that opens the application form (contact.html?apply=<role>) */
@media(max-width:820px){.co-role summary{align-items:center}.co-ctl{align-self:center}}
.co-apply-btn{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:0 1.125rem;border-radius:999px;background:linear-gradient(180deg,#f7fafc,#dfe7ed);color:#0d1013;
  font:600 var(--text-sm,.875rem)/1 'DM Sans',sans-serif;text-decoration:none;box-shadow:inset 0 1px 0 rgb(255 255 255 / .9),0 .5rem 1.25rem -.5rem rgb(0 0 0 / .7);transition:transform .3s cubic-bezier(.22,1,.36,1),background .3s ease}
.co-apply-btn:hover{background:#fff;transform:translateY(-1px)}
.co-apply-btn span{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.co-apply-btn:hover span{transform:translateX(2px)}
.co-apply-btn:focus-visible,.co-inline:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.co-inline{color:var(--ink);text-decoration:underline;text-decoration-color:rgb(143 179 203 / .6);text-underline-offset:.2em}
.co-inline:hover{text-decoration-color:#8fb3cb}