/* Careers page. Hero, panels and button mirror support.css so the page reads as part of the same family. */
.careers-page{background:var(--cream);color:var(--cocoa)}
.careers-page .site-header{background:var(--cocoa)}
.careers-main a{text-underline-offset:4px}
.careers-main h2 em,.careers-hero h1 em{color:var(--orange);font-style:normal}

/* Hero */
.careers-hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;justify-content:space-between;gap:48px;padding:calc(var(--nav-height) + 65px) var(--gutter) 100px;background:var(--cocoa);color:var(--cream);overflow:hidden}
.careers-hero::after{content:'';position:absolute;inset:auto 0 -1px;height:35px;background:var(--cream);clip-path:polygon(0 75%,100% 0,100% 100%,0 100%)}
.careers-eyebrow{color:var(--orange);font:700 15px/1.4 var(--font-heading);margin-bottom:22px}
.careers-hero h1{font:800 clamp(44px,6vw,96px)/.99 var(--font-heading);letter-spacing:-.055em}
.careers-hero-mark{position:absolute;right:10%;top:25%;width:280px;transform:rotate(12deg);opacity:.035;z-index:-1}

/* Sections */
.careers-block{max-width:1680px;margin:0 auto;padding:80px var(--gutter) 0}
.careers-block:last-child{padding-bottom:150px}
.careers-block-head{margin-bottom:40px}
.careers-block-head h2{font:750 clamp(34px,3.6vw,56px)/1.05 var(--font-heading);letter-spacing:-.045em}

/* Open roles: each card is one link to its Notion job spec. */
.careers-role-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(16px,2vw,28px);margin:0;padding:0;list-style:none}
.careers-role{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(24px,2.4vw,38px);background:#fffaf3;border:1px solid #2a1a121c;border-top:5px solid var(--orange);box-shadow:0 18px 60px #2a1a1206;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.careers-role:hover{transform:translateY(-4px);box-shadow:0 26px 70px #2a1a1214}
.careers-role:has(a:focus-visible){outline:2px solid var(--orange);outline-offset:3px}
.careers-role-team{font:700 13px/1.4 var(--font-heading)}
.careers-role h3{font:750 clamp(25px,2.1vw,32px)/1.1 var(--font-heading);letter-spacing:-.035em}
.careers-role h3 a{color:inherit;text-decoration:none;outline:none}
.careers-role h3 a::after{content:'';position:absolute;inset:0}
.careers-role-summary{font-size:15px;line-height:1.7;color:var(--walnut)}
.careers-role-cta{display:inline-flex;align-items:center;gap:10px;margin-top:auto;padding-top:12px;font:750 15px/1.4 var(--font-heading);transition:color .2s}
.careers-role-cta svg{width:18px;height:18px;flex:none;transition:transform .35s var(--ease)}
.careers-role:hover .careers-role-cta{color:var(--orange)}
.careers-role:hover .careers-role-cta svg{transform:translate(3px,-3px)}

/* Perks */
.careers-perks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none;border-top:1px solid #2a1a1226}
.careers-perk{padding:30px 28px 0 0}
.careers-perk+.careers-perk{padding-left:28px;border-left:1px solid #2a1a1226}
.careers-perk h3{font:700 19px/1.3 var(--font-heading);margin-bottom:8px}
.careers-perk p{font-size:14px;line-height:1.7;color:var(--walnut)}

/* Speculative applications */
.careers-open{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:28px 60px;padding:clamp(32px,5vw,72px) clamp(32px,5vw,72px) clamp(28px,3.5vw,48px);background:var(--cocoa);color:var(--cream);overflow:hidden}
.careers-open h2{font:800 clamp(36px,4.4vw,68px)/1 var(--font-heading);letter-spacing:-.05em;margin-bottom:18px}
.careers-open p{max-width:540px;font-size:16px;line-height:1.7;color:var(--latte)}
.careers-open-mark{position:absolute;right:-30px;bottom:-70px;width:260px;transform:rotate(-12deg);opacity:.05;z-index:-1}
.careers-button{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:58px;padding:15px 26px;color:var(--cocoa);font:750 16px/1.4 var(--font-heading);text-decoration:none}
.careers-button::before{content:'';position:absolute;inset:3px 2px;z-index:-1;clip-path:var(--button-clip);background:var(--orange);transition:inset .2s,background .2s}
.careers-button:hover::before{inset:0;background:#ff771f}
.careers-button:focus-visible{outline:2px solid var(--cream);outline-offset:4px}
.careers-button svg{width:22px;height:22px;flex:none}

@media(max-width:1150px){
  .careers-perks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .careers-perk:nth-child(3){padding-left:0;border-left:0}
  .careers-perk:nth-child(n+3){margin-top:30px;border-top:1px solid #2a1a1226}
}
@media(max-width:800px){
  .careers-hero{display:block;padding-top:calc(var(--nav-height) + 45px);padding-bottom:70px}
  .careers-hero-mark{right:5%;top:30%;width:210px}
  .careers-block{padding-top:60px}
  .careers-open{grid-template-columns:1fr}
}
@media(max-width:560px){
  .careers-hero h1{font-size:clamp(40px,10vw,56px)}
  .careers-perks{grid-template-columns:1fr}
  .careers-perk,.careers-perk+.careers-perk,.careers-perk:nth-child(3){padding:26px 0 0;border-left:0}
  .careers-perk+.careers-perk{margin-top:26px;border-top:1px solid #2a1a1226}
  .careers-block:last-child{padding-bottom:110px}
}
@media(prefers-reduced-motion:reduce){.careers-role,.careers-role-cta svg{transition:none}.careers-role:hover,.careers-role:hover .careers-role-cta svg{transform:none}}
.motion-paused .careers-role,.motion-paused .careers-role-cta svg{transition:none}
.motion-paused .careers-role:hover,.motion-paused .careers-role:hover .careers-role-cta svg{transform:none}
@media(forced-colors:active){.careers-hero,.careers-role,.careers-open{background:Canvas;color:CanvasText}.careers-button::before,.careers-hero-mark,.careers-open-mark{display:none}.careers-button{border:1px solid ButtonText}}