/* Education pages: Learn and work with us (works wheel, open roles) and Model for us (call panel, FAQ). */

/* draft tag: anything the client has not confirmed yet */
.draft{display:inline-block;font:500 11px/1.5 var(--b);background:#fff3c4;color:#6b5200;padding:2px 6px;vertical-align:middle;margin-left:4px;letter-spacing:.01em}

/* heroes */
.edu-hero{position:relative;color:#fff;overflow:hidden;background:#111}
.edu-hero-short{height:70vh;height:70svh;min-height:460px;max-height:780px}
.edu-hero-tall{height:88vh;height:88svh;min-height:580px;max-height:980px}
.edu-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.edu-hero-img.model-img{object-position:50% 36%}
.edu-hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,14,.5) 0%,rgba(8,10,14,.42) 45%,rgba(8,10,14,.74) 100%)}
.edu-hero-copy{position:absolute;left:0;right:0;bottom:clamp(40px,8vh,80px)}
.edu-hero-copy .h1{max-width:14ch}
.edu-hero-line{margin-top:20px;font-size:clamp(16px,1.5vw,19px);line-height:1.55;max-width:46ch;opacity:.92}
.edu-hero-centre{top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-top:var(--hdr)}
.edu-hero-centre .h1{max-width:none}
.edu-hero-centre .edu-hero-line{max-width:40ch}
.edu-hero-centre .btn{margin-top:32px}

/* fallback: a plain grid of the six pillars (also what shows before the script builds the wheel) */
.wheel{background:var(--paper);border-bottom:1px solid var(--line)}
.pillars{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.4vw,48px) clamp(16px,2vw,28px);padding-block:clamp(72px,9vw,128px)}
.pillar img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;margin-bottom:18px}
.pillar h3{font:400 clamp(26px,2.4vw,34px)/1.1 var(--d);margin-bottom:8px}
.pillar p{color:var(--mute);font-size:15px;max-width:40ch}

/* the wheel */
.wheel-pin.is-wheel{height:100vh;height:100svh;min-height:600px;display:flex;align-items:center;padding-top:var(--hdr);overflow:hidden;
  --W:min(calc(100svh - var(--hdr) - 64px),44vw,700px)}
.wheel-pin.is-wheel .pillars{display:none}
.wh{display:grid;grid-template-columns:var(--W) minmax(0,1fr);gap:clamp(48px,7vw,120px);align-items:center;width:100%}
.wh-left{position:relative;width:var(--W)}
.wh-stage{position:relative;width:var(--W);height:var(--W);cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline-offset:6px}
.wh-stage.drag{cursor:grabbing}
.wh-ring{position:absolute;inset:0;will-change:transform}
.wh-card{position:absolute;left:50%;top:50%;margin:0;overflow:hidden;background:#d9d7d0;will-change:transform,opacity}
.wh-card img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;pointer-events:none;-webkit-user-drag:none}
.wh-centre{position:absolute;left:50%;top:50%;width:calc(var(--W)*.5);transform:translate(-50%,-50%);text-align:center;pointer-events:none}
.wh-title{font:400 clamp(22px,calc(var(--W)*.05),36px)/1.08 var(--d);letter-spacing:-.005em;text-wrap:balance}
.wh-text{margin-top:12px;font-size:clamp(13px,calc(var(--W)*.0245),16px);line-height:1.5;color:var(--mute);text-wrap:pretty}
.wh-count{display:none}
.wh-list{list-style:none}
.wh-list button{position:relative;display:block;width:100%;text-align:left;padding:9px 0 9px 0;font:400 clamp(26px,2.5vw,40px)/1.15 var(--d);color:var(--mute);transition:color .25s var(--ease),padding .3s var(--ease-out)}
.wh-list button::before{content:"";position:absolute;left:0;top:50%;width:0;height:1px;background:var(--ink);transition:width .3s var(--ease-out)}
.wh-list button:hover{color:var(--ink-2)}
.wh-list button[aria-current="true"]{color:var(--ink);padding-left:44px}
.wh-list button[aria-current="true"]::before{width:30px}

/* open roles */
.roles{padding-block:clamp(96px,12vw,170px) clamp(80px,10vw,140px)}
.roles-head{max-width:640px;margin-bottom:clamp(36px,5vw,64px)}
.roles-head .draft{margin:14px 0 0}
.roles-head .lede{margin-top:20px}
.role-list{list-style:none;border-bottom:1px solid var(--line)}
.role{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) 90px;gap:clamp(20px,4vw,64px);align-items:baseline;padding-block:30px;border-top:1px solid var(--line)}
.role-name{font:400 clamp(26px,2.6vw,36px)/1.1 var(--d)}
.role-meta{font-size:14px;color:var(--mute);margin-top:6px}
.role-desc{color:var(--ink-2);font-size:16px;max-width:52ch}
.apply{justify-self:end;display:inline-flex;align-items:center;min-height:44px;padding-inline:4px;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:5px;transition:opacity .2s}
.apply:hover{opacity:.6}
.cv-line{margin-top:36px;font-size:17px}
.cv-line a{font-weight:600;border-bottom:1px solid currentColor;padding-bottom:1px}

/* model: intro and call panel */
.model-intro{padding-block:clamp(72px,9vw,128px) clamp(48px,6vw,80px)}
.model-intro-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,5vw,72px)}
.model-intro p{font-size:clamp(18px,1.6vw,21px);line-height:1.6;color:var(--ink-2);max-width:44ch}
.call{position:fixed;inset:0;margin:auto;width:min(440px,calc(100vw - 32px));max-height:calc(100svh - 32px);padding:0;border:0;background:var(--bone);color:var(--ink);box-shadow:0 40px 90px -30px rgba(0,0,0,.55);overflow:auto}
.call::backdrop{background:rgba(8,10,14,.6)}
.call[open]{animation:callIn .28s var(--ease-out)}
.call[open]::backdrop{animation:fadeIn .28s var(--ease)}
@keyframes callIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.call-in{padding:26px 28px 30px}
.call-top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.call-x{position:relative;width:44px;height:44px;margin-right:-12px;flex:none}
.call-x span{position:absolute;left:12px;right:12px;top:21px;height:1.5px;background:currentColor}
.call-x span:first-child{transform:rotate(45deg)}.call-x span:last-child{transform:rotate(-45deg)}
.call-list{list-style:none;margin-top:22px}
.call-list li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:16px;border-top:1px solid var(--line);min-height:64px}
.call-list li:last-child{border-bottom:1px solid var(--line)}
.call-name{font:400 26px/1.1 var(--d)}
.call-name small{display:block;font:400 14px/1.4 var(--b);color:var(--mute);margin-top:3px}
.call-tel{font-weight:600;font-size:17px;font-variant-numeric:tabular-nums;white-space:nowrap;border-bottom:1px solid currentColor;padding-block:6px 3px;transition:opacity .2s}
.call-tel:hover{opacity:.6}

/* model: faq accordion */
.faq{padding-block:clamp(48px,6vw,80px) clamp(96px,12vw,170px)}
.faq-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(32px,6vw,96px);align-items:start}
.faq-list{border-bottom:1px solid var(--line)}
.faq-item{border-top:1px solid var(--line)}
.faq-item h3{font:inherit}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:24px;width:100%;min-height:72px;padding-block:20px;text-align:left;font:400 clamp(21px,2vw,28px)/1.2 var(--d)}
.faq-q i{position:relative;flex:none;width:18px;height:18px;transition:transform .3s var(--ease-out)}
.faq-q i::before,.faq-q i::after{content:"";position:absolute;background:currentColor}
.faq-q i::before{left:0;right:0;top:8.25px;height:1.5px}
.faq-q i::after{top:0;bottom:0;left:8.25px;width:1.5px}
.faq-q[aria-expanded="true"] i{transform:rotate(45deg)}
.faq-a{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .3s var(--ease),visibility 0s linear .3s}
.faq-a>div{overflow:hidden;min-height:0}
.faq-a p{padding-bottom:26px;max-width:56ch;color:var(--ink-2)}
.faq-item.open .faq-a{grid-template-rows:1fr;visibility:visible;transition-delay:0s}

/* black band */
.band{background:var(--night);color:var(--snow);padding-block:clamp(96px,13vw,190px)}
.band .h2{font-size:clamp(44px,5.4vw,84px);max-width:12ch}
.band-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}

@media (max-width:900px){
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wheel-pin.is-wheel{height:100vh;height:100svh;align-items:flex-start;
    --W:max(250px,min(calc(100vw - 2*var(--gut) - 8px),calc(100svh - var(--hdr) - 300px)))}
  .wh{grid-template-columns:minmax(0,1fr);gap:8px;justify-items:center;padding-top:14px}
  .wh-left{width:100%;display:flex;flex-direction:column;align-items:center}
  .wh-centre{position:static;transform:none;width:100%;max-width:420px;min-height:132px;margin-top:6px}
  .wh-title{font-size:28px}
  .wh-text{font-size:15px}
  .wh-count{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:400 calc(var(--W)*.1)/1 var(--d);color:var(--mute);pointer-events:none}
  .wh-count{position:absolute}
  .wh-stage{margin-inline:auto}
  .wh-list{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;width:100%;max-width:420px}
  .wh-list button{font-size:18px;padding:7px 0;min-height:40px}
  .wh-list button[aria-current="true"]{padding-left:0;text-decoration:underline;text-underline-offset:5px}
  .wh-list button::before{display:none}
  .role{grid-template-columns:minmax(0,1fr) auto;row-gap:12px}
  .role-desc{grid-column:1/-1;grid-row:2}
  .apply{grid-column:2;grid-row:1}
  .model-intro-in{grid-template-columns:1fr}
  .faq-in{grid-template-columns:1fr}
}
@media (max-width:560px){
  .pillars{grid-template-columns:1fr}
  .call-in{padding:22px 20px 26px}
}
@media (prefers-reduced-motion:reduce){
  .faq-a,.faq-q i,.call[open],.call[open]::backdrop,.wh-list button{transition:none!important;animation:none!important}
}
.model-still{position:absolute;inset:0}.model-still img{width:100%;height:100%;object-fit:cover;object-position:50% 36%;display:block}

/* learn: careers FAQs (same accordion as the model page) */
.careers-faq{padding-block:clamp(24px,4vw,56px) clamp(96px,12vw,170px)}
.careers-faq .faq-list{border-bottom:0}
.faq-more{margin:0;padding-top:28px;border-top:1px solid var(--line);color:var(--mute)}
.faq-more a{color:var(--ink);text-decoration:underline;text-underline-offset:4px}