/* The rail's nav, shared by the home page and the studio pages so the rail is identical on both:
   "Projects", "Work with us", which opens its section's links underneath (open on studio pages), and "About"
   below them, at the top of the rail. */
.rail{justify-content:flex-start}
.rail-nav{flex:1;display:flex;flex-direction:column;justify-content:flex-start;min-height:0}
.rn-work{position:relative}
.rn-top{display:flex;align-items:center;gap:9px;width:100%;padding:5px 0;border:0;background:none;color:inherit;font:inherit;font-size:min(25px,calc(var(--rail) * .086));font-weight:600;letter-spacing:-.025em;text-align:left;cursor:pointer;opacity:.72;transition:opacity .2s}
.rn-top:hover,.rn-top[aria-current="page"],.rn-toggle[aria-expanded="true"]{opacity:1}
.rn-toggle::after{content:"";width:8px;height:8px;margin-top:-3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .35s cubic-bezier(.65,0,.35,1),margin .35s cubic-bezier(.65,0,.35,1)}
.rn-toggle[aria-expanded="true"]::after{transform:rotate(225deg);margin-top:3px}
.rn-sub{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s cubic-bezier(.65,0,.35,1),opacity .3s}
.rn-toggle[aria-expanded="true"] + .rn-sub{grid-template-rows:1fr;opacity:1}
.rn-sub > div{display:flex;flex-direction:column;min-height:0;overflow:hidden;padding-bottom:2px}
.rn-sub a{position:relative;padding:4px 0 4px 16px;font-size:min(17px,calc(var(--rail) * .062));font-weight:500;opacity:.68;transition:opacity .2s}
.rn-sub a::before{content:"";position:absolute;left:1px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:currentColor;transform:scale(0);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.rn-sub a:hover,.rn-sub a[aria-current="page"]{opacity:1}
.rn-sub a[aria-current="page"]::before{transform:scale(1)}
.rail-nav :focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.rn-sub,.rn-toggle::after{transition:none}}

/* Phone: the rail is the top of the page; the nav is a row of chips, the section's links wrap below it. */
@media (max-width:760px){
  .rail{justify-content:flex-end}
  .rail-nav{flex:none;order:3;position:relative;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:8px;margin-top:16px}
  .rn-work{display:contents}
  .rn-work .rn-sub{position:static}
  .rn-top{width:auto;padding:7px 13px;border:1px solid rgba(255,255,255,.4);border-radius:999px;font-size:14px;opacity:.9}
  .rn-top[aria-current="page"]{background:#fff;color:#2F5DFF;border-color:#fff}
  .rn-toggle[aria-expanded="true"]{background:rgba(255,255,255,.14)}
  .rn-sub{flex:0 0 100%;order:1}
  .rn-sub > div{flex-direction:row;flex-wrap:wrap;gap:8px}
  .rn-sub a{flex:none;padding:6px 12px;border:1px solid rgba(255,255,255,.3);border-radius:999px;font-size:13.5px;opacity:.85}
  .rn-sub a::before{display:none}
  .rn-sub a[aria-current="page"]{background:#fff;color:#2F5DFF;border-color:#fff;opacity:1}
}

/* Hover: a soft rounded background behind the link; padding and matching negative margins keep text in place. */
@media (min-width:761px){
  .rn-top{width:fit-content;margin:0 -10px;padding:5px 10px;border-radius:8px;transition:opacity .2s,background .2s}
  .rn-sub a{align-self:flex-start;margin:0 -10px;padding:4px 10px 4px 26px;border-radius:8px;transition:opacity .2s,background .2s}
  .rn-sub a::before{left:11px}
  .rn-top:hover,.rn-sub a:hover{background:rgba(255,255,255,.12)}
}

/* "Book a call" at the foot of the rail, above the tagline and email (desktop only: phones get it in the page). */
.rail-book{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:10px 18px;border-radius:999px;background:#fff;color:#2F5DFF;font-size:15px;font-weight:600;letter-spacing:-.01em;transition:background .2s}
.rail-book:hover{background:#E6EDFF}
.rail-book .ext{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rail-book:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media (max-width:760px){.rail-book{display:none}}