/* An orientation before the project story, using each page's own accent. */
.case-orientation{padding-top:clamp(30px,4vw,55px);padding-bottom:0}
.case-orientation-inner{border-bottom:1px solid var(--line);padding:0 0 clamp(25px,3vw,40px)}
.case-orientation-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin-bottom:25px}
.case-orientation h2{font-size:clamp(21px,2vw,27px);font-weight:400;line-height:1.2;letter-spacing:-.025em;margin:0;color:var(--white);max-width:none}
.case-orientation-status{font-size:11px;color:var(--mute);letter-spacing:.04em;line-height:1.5;margin:0}
.case-orientation-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:clamp(25px,4vw,58px)}
.case-orientation h3{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:400;color:var(--accent);margin:0 0 10px}
.case-orientation-grid p{font-size:clamp(14px,1.25vw,16px);line-height:1.6;color:var(--grey);margin:0;max-width:42ch}
.case-orientation-actions{display:flex;flex-wrap:wrap;gap:8px 27px;margin-top:20px}
.case-orientation-actions a{display:inline-flex;align-items:center;gap:14px;min-height:44px;font-size:13px;color:var(--white);border-bottom:1px solid var(--line)}
.case-orientation-actions a:last-child{color:var(--accent)}
.case-orientation-actions a:hover{border-color:var(--accent)}
.case-orientation-actions a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.case-orientation~.forme-case>.forme-intro,.case-orientation~.forme-case>.acre-opening{padding-top:clamp(38px,5vw,68px)}
.forme-case h1[id],.forme-case #try-prototype,.forme-case #campaign{scroll-margin-top:110px}
@media(max-width:760px){.case-orientation-grid{grid-template-columns:1fr 1fr;gap:22px}.case-orientation-grid>div:first-child{grid-column:1/-1}.case-orientation-grid>div:first-child p{max-width:65ch}.case-orientation-head{align-items:start}.case-orientation-status{text-align:right;max-width:25ch}}
@media(max-width:520px){.case-orientation-grid{grid-template-columns:1fr;gap:18px}.case-orientation-head{display:block;margin-bottom:22px}.case-orientation-status{margin-top:8px;text-align:left;max-width:none}.case-orientation-grid p{font-size:14px;max-width:none}.case-orientation h3{margin-bottom:6px}.case-orientation-actions{gap:4px 20px;margin-top:16px}.case-orientation-actions a{font-size:12px;gap:8px}.case-orientation~.forme-case>.forme-intro,.case-orientation~.forme-case>.acre-opening{padding-top:35px}}

/* Phone: the three column labels were set at 10px. They are uppercase and
   tracked, which costs legibility rather than buying it at that size, and
   they are the words that tell someone what they are about to read. */
@media(max-width:760px){
  .case-orientation h3{font-size:11.5px;letter-spacing:.12em}
  .case-orientation-status{font-size:12px}
}