/* Composition layer: rounded depth, live index preview, signal close, scroll rail. Brand: ink, #f2f2f2, signal orange. */
.gt-rail{position:fixed;left:0;right:0;top:0;height:3px;z-index:400;background:var(--signal,#fc5802);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.gt-peek{position:fixed;left:0;top:0;z-index:350;width:min(22rem,34vw);aspect-ratio:16/10;border-radius:1.4rem;overflow:hidden;pointer-events:none;opacity:0;transform:translate3d(-999px,0,0) scale(.9);transition:opacity .2s ease-out;box-shadow:0 2rem 3.5rem -1rem rgb(0 0 0 / .75),0 0 0 1px rgb(242 242 242 / .12);background:#000}
.gt-peek.on{opacity:1}
.gt-peek img{width:100%;height:100%;object-fit:cover;display:block}
@media (hover:none),(max-width:899px){.gt-peek{display:none}}
/* Work index: a rounded stage, rows grow into pills */
.work-index{border:0;display:grid;gap:.5rem}
.work-index li{list-style:none}
.work-index a{border:0;border-radius:2rem;padding:var(--space-m) var(--space-m);background:rgb(242 242 242 / .05);transition:background-color .2s ease-out,color .15s,transform .25s cubic-bezier(.16,1,.3,1)}
.work-index a:hover,.work-index a:focus-visible{background:rgb(242 242 242 / .12);transform:translateX(.6rem)}
@media(min-width:900px){.work-index li:nth-child(even) a{margin-left:6vw}}
.work-index:hover a:not(:hover):not(:focus-visible){opacity:.55}
/* Cases: sticky copy, film as a rounded deep window, alternating sides */
@media (min-width:900px){
 .case-copy{position:sticky;top:calc(var(--header-h) + 2rem);align-self:start}
 .case-grid{align-items:start}
 .case:nth-of-type(even) .case-grid>.case-film{order:-1}
 .case:nth-of-type(even) .case-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.85fr)}
}
.case-film .clip-frame{border-radius:2rem;overflow:hidden;box-shadow:0 2.5rem 5rem -1.5rem rgb(0 0 0 / .8),0 0 0 1px rgb(242 242 242 / .1)}
.case-film{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.case-film:hover{transform:translateY(-.4rem)}
.case-facts{border:0;display:grid;gap:.5rem}
.case-facts>div{border:0;border-radius:1.25rem;background:rgb(242 242 242 / .05);padding:var(--space-s) var(--space-m)}
.dossier-row{border-radius:1.25rem}
/* Home work index as pill list */
.work-names a{border-radius:1.5rem;padding-inline:1rem;margin-inline:-1rem}
.work-names a:hover,.work-names a:focus-visible{background:rgb(242 242 242 / .08)}
/* The index opens onto the next section without adding an empty pin spacer. */
.work-phone-index.has-wpi-exit{position:relative;z-index:2;background:transparent;overflow:clip}
.wpi-exit-source{position:relative;z-index:1}
.wpi-fold-mesh{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:hidden}
.wpi-fold-texture{box-sizing:border-box;background:#000;color:var(--paper);overflow:hidden}
.wpi-exit-moving .wpi-exit-source{opacity:0;pointer-events:none}
.work-phone-index.wpi-exit-keyboard{background:#000}
.wpi-exit-keyboard .wpi-exit-source{opacity:1;pointer-events:auto}
.wpi-exit-keyboard .wpi-fold-mesh{visibility:hidden}
/* Studio intro: heliot gets a deep rounded frame */
.heliot-embed-frame{border-radius:2rem;overflow:hidden}
/* Close: the open brief on the signal field */
.close{background:var(--signal);color:var(--ink);border-radius:2.5rem 2.5rem 0 0;margin-top:-1px}
.close .close-lede{color:var(--ink)}
.close .statement-label{color:var(--ink)}
.close .btn:not(.hexpop-shake){background:var(--ink);color:var(--paper)}
.close .btn:not(.hexpop-shake):hover,.close .btn:not(.hexpop-shake):focus-visible{background:var(--paper);color:var(--ink)}
.site-footer{margin-top:0}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.close :focus-visible{outline-color:var(--ink)}
/* Homepage close: one invitation and one action, without a coloured panel. */
.close.close-simple{background:var(--ink);color:var(--paper);border-radius:0;margin-top:0;grid-template-rows:auto;align-items:center;gap:2rem;padding-block:clamp(3rem,6vw,6rem)}
.close-simple h2{grid-row:auto;font-size:clamp(2.25rem,4vw,4rem);line-height:1.08;max-width:20ch}
.close-simple .actions{grid-column:auto;margin:0;justify-self:end}
.close-simple .btn:not(.hexpop-shake){background:var(--paper);color:var(--ink)}
.close-simple .btn:not(.hexpop-shake):hover,.close-simple .btn:not(.hexpop-shake):focus-visible{background:#dedede;color:var(--ink)}
.close-simple :focus-visible{outline-color:var(--paper)}
@media(max-width:899px){.close-simple .actions{justify-self:start}}
@media (prefers-reduced-motion:reduce){.gt-rail,.gt-peek{display:none}.case-film,.work-index a{transition-property:opacity,color,background-color,border-color;transition-duration:150ms}.case-film:hover,.work-index a:hover,.work-index a:focus-visible{transform:none}}