/* Shared project proof: identical framing, type, light and motion in every listing. */
.cf-work-grid,.projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:60px 36px}
.cf-project{min-width:0;margin:0}
.cf-project-link{display:block;position:relative;isolation:isolate;color:var(--cf-ink);text-decoration:none}
.project-card-border{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible;pointer-events:none}
.project-card-border path{vector-effect:non-scaling-stroke;stroke-width:1;stroke-linejoin:round}
.project-border-depth{fill:#102532;stroke:#34617a}
.project-border-face{fill:#0b1621;stroke:#609bb1}
.project-border-inset{fill:none;stroke:#294354}
.project-border-light{fill:none;stroke:var(--cf-light);stroke-width:1.5!important;stroke-dasharray:.12 .88;stroke-dashoffset:.12;opacity:0;transition:stroke-dashoffset 1.1s var(--cf-ease),opacity .35s}
.project-border-signal{fill:none;stroke:var(--cf-light);stroke-width:2!important;stroke-linecap:round;opacity:.8}
.cf-project-link:is(:hover,:focus-visible) .project-border-light{stroke-dashoffset:-.8;opacity:.9}


.cf-project-frame{position:relative;isolation:isolate;padding:10px 14px 14px 10px;transform-origin:50% 50%;transform:perspective(1800px) translate3d(0,var(--media-y,0px),0) rotateX(var(--media-rx,0deg)) scale(var(--media-scale,1));opacity:var(--media-opacity,1)}
.cf-project-media{position:relative;margin:0;aspect-ratio:1.6;overflow:hidden;border:0;border-radius:0;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));background:#080d16;isolation:isolate}
.cf-project-media:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at var(--optic-x,50%) var(--optic-y,50%),#67ddff28,transparent 60%);opacity:var(--optic-hover,0);mix-blend-mode:screen}
.cf-project-media>img{display:block;width:100%;height:100%;max-width:100%;object-fit:cover;object-position:top;scale:calc(1 + var(--media-enter,0)*.055);transition:transform .7s var(--cf-ease)}
.cf-project-link:is(:hover,:focus-visible) .cf-project-media>img{transform:scale(1.025)}
.cf-project-neno-health .cf-project-media>img,.project-media-contain>img{object-fit:contain;background:#eef1f6}
.cf-project-caption{display:flex;justify-content:space-between;align-items:start;gap:20px;padding:24px 0 0;color:var(--cf-ink)}
.cf-project-caption>div{min-width:0}
.cf-project-caption .project-card-title{margin:0;font:500 clamp(27px,2.6vw,44px)/1.2 var(--cf-body);text-transform:none;letter-spacing:-.035em;position:relative}
.project-title-mask{display:inline-block;overflow:clip;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.project-title-mask>span{display:inline-block;--title-step:clamp(0,calc(var(--project-title-progress,1)*1.15 - var(--project-word,0)*.07),1);transform:translate3d(0,calc((1 - var(--title-step))*110%),0);opacity:var(--title-step)}
.project-title-mask:nth-child(2){--project-word:1}.project-title-mask:nth-child(n+3){--project-word:2}
.cf-project-caption p{margin:10px 0 0;max-width:44em;color:var(--cf-label);font:400 11px/1.7 var(--cf-mono);text-transform:uppercase;letter-spacing:.04em}
.project-card-arrow{flex:none;color:var(--cf-light);font:400 26px/1.2 var(--cf-body);transition:translate .5s var(--cf-ease)}
.cf-project-link:is(:hover,:focus-visible) .project-card-arrow{translate:3px -3px}
.cf-project .cf-project-link:focus-visible{outline:none}
.cf-project-link:focus-visible .project-title-mask>span{text-decoration:underline;text-decoration-color:var(--cf-light);text-decoration-thickness:2px;text-underline-offset:.14em}
.cf-project-link:focus-visible .project-title-mask>span{transform:none;opacity:1}
.cf-viavia-preview{display:flex;align-items:center;justify-content:center;padding:4% 9% 7%;background:radial-gradient(ellipse at 50% 20%,#25455e,#0d1a2b 70%)}
.cf-viavia-phones{display:flex;align-items:center;justify-content:center;gap:5%;width:100%;height:100%}
.cf-viavia-phones img{display:block;width:30%;height:auto;max-height:100%;object-fit:contain;border:3px solid #344c69;border-radius:14px;box-shadow:0 14px 28px #0208128a;transform:translateY(3%);transition:transform .7s var(--cf-ease)}
.cf-viavia-phones img:nth-child(2){transform:translateY(-3%)}
.cf-project-link:is(:hover,:focus-visible) .cf-viavia-phones img{transform:translateY(0)}
.cf-viavia-preview figcaption{position:absolute;left:5%;right:5%;bottom:4%;display:flex;justify-content:space-between;gap:8px;margin:0;font:400 9px/1.5 var(--cf-mono);letter-spacing:.04em;color:var(--cf-ink)}
.cf-viavia-preview figcaption span{color:var(--cf-label);font-size:8px}
@media(max-width:950px){.cf-work-grid,.projects-grid{gap:40px 24px}.cf-project-caption p{font-size:9px}.cf-viavia-preview figcaption{font-size:8px}.cf-viavia-preview figcaption span{display:none}.cf-viavia-phones img{border-width:2px;border-radius:10px}}
@media(max-width:700px){.cf-work-grid,.projects-grid{grid-template-columns:1fr;gap:28px}.cf-project-caption{padding:20px 0 0}}
/* Quiet states resolve instantly, including mid-scroll or keyboard focus. */
html[data-motion=off] .cf-project-frame{transform:none;opacity:1}
html[data-motion=off] .cf-project-media>img{scale:1}
html[data-motion=off] .project-title-mask>span{transform:none;opacity:1}
@media(prefers-reduced-motion:reduce){.cf-project-frame{transform:none!important;opacity:1!important}.cf-project-media>img{scale:1!important}.project-title-mask>span{transform:none!important;opacity:1!important}.cf-project *,.cf-project :before,.cf-project :after{transition:none!important}}

/* Screens share framing; the surrounding architecture has its own motion. */
.cinema-screen .cf-project-media{width:100%;box-sizing:border-box}
.cinema-screen .cf-project-media>img{height:100%;scale:1;transform:none}
.cinema-screen .cf-viavia-phones img{width:30%;height:auto}

/* 200: the project hero, scaled down, is the card. No second decorative box. */
.cf-project-frame:has(.project-hero-visual){padding:0}
.cf-project-frame:has(.project-hero-visual)>.project-card-border{display:none}
.project-hero-visual.cf-project-media{container-type:inline-size;aspect-ratio:1.6;background:transparent;clip-path:none;border-radius:0;overflow:visible;isolation:isolate}
.project-hero-visual.cf-project-media:after{display:none}
.project-hero-visual.cf-project-media>img{position:absolute;left:50%;top:50%;width:min(88%,calc(54cqw * var(--cover-ratio)));height:auto;aspect-ratio:var(--cover-ratio);max-height:none;object-fit:cover;object-position:center;translate:-50% -50%;scale:1;transform:none;border:1px solid #6b95ac60;border-radius:6px;box-shadow:0 18px 35px -12px #0009;background:#080b12}
.project-portal{position:absolute;inset:-4% 0;width:100%;height:108%;overflow:visible;pointer-events:none}
.project-portal path{vector-effect:non-scaling-stroke;stroke-width:1}
.project-portal-back{stroke:#2b5367;opacity:.62}
.project-portal-light{stroke:#019edb;stroke-width:1.5!important;stroke-dasharray:1;stroke-dashoffset:calc(var(--media-enter,0)*.6);opacity:.75;filter:drop-shadow(0 0 4px #019edb80);transition:opacity .4s}
.project-portal-accent{stroke:#8276ff;opacity:.6}
.cf-project-frame:has(.project-hero-visual)+.cf-project-caption{padding:22px 5% 0}
.cf-project-frame:has(.project-hero-visual)+.cf-project-caption .project-card-title{font-family:var(--cf-display);font-size:clamp(36px,4.5vw,64px);line-height:1.12;letter-spacing:-.025em;text-transform:uppercase}
body[data-experience=cinematic] .cinema-screen:has(.project-hero-visual){width:100%;max-width:min(1500px,calc((100svh - 300px)*1.6));border:0;box-shadow:none;border-radius:0;overflow:visible;transform:none!important}
.cinema-screen:has(.project-hero-visual)::before{display:none}
.cinema-stage:has(.project-hero-visual)>.cinematic-portal{inset:25px auto auto 50%;translate:-50% 0;width:min(100%,1500px,calc((100svh - 300px)*1.6));height:auto;aspect-ratio:1.6}
@media(max-width:950px){body[data-experience=cinematic] .cinema-screen:has(.project-hero-visual){max-width:none}.cf-project-frame:has(.project-hero-visual)+.cf-project-caption{padding-top:14px}}
@media(max-width:950px){.cinema-stage:has(.project-hero-visual)>.cinematic-portal{top:12px;width:100%}}
@media(prefers-reduced-motion:reduce){.project-portal-light{stroke-dashoffset:0;transition:none}}
.cinema-screen .project-hero-visual.cf-project-media>img{height:auto;max-height:none}
.cf-project-link:is(:hover,:focus-visible) .project-hero-visual>img{transform:none}

.cinema-screen .project-portal-light{stroke-dashoffset:calc((1 - var(--cinema-enter,1))*.6)}
html[data-motion=off] .project-portal-light,html[data-case-motion=off] .project-portal-light{stroke-dashoffset:0}

.case-next-image:has(.project-hero-visual){max-height:none;box-shadow:none}
.case-next-image .project-hero-visual>img{height:auto;max-height:none}

/* 216: the case architecture charges on card hover, independent of the screen.
   One reversible trace, then rest. Native page transitions still name only img. */
[data-project-card] .project-portal{inset:-6% auto auto -4%;width:108%;height:112%;transform-origin:50% 50%;transform:perspective(1100px) translateZ(-110px) rotateX(9deg);transition:transform .6s var(--cf-ease)}
[data-project-card] .project-portal-light{stroke:var(--cf-blue);stroke-width:2!important;stroke-dashoffset:1;opacity:0;filter:drop-shadow(0 0 3px var(--cf-light)) drop-shadow(0 0 9px var(--cf-blue));transition:stroke-dashoffset .45s var(--cf-ease),opacity .35s ease}
.cf-project[data-project-card] .project-portal-back{stroke:var(--service-accent,var(--cf-light));opacity:.38;transition:opacity .4s ease}
[data-project-card] .project-portal-accent{opacity:.28;transition:opacity .35s ease}
@media(hover:hover) and (pointer:fine) and (min-width:951px) and (prefers-reduced-motion:no-preference){
 html[data-cinematic-mode=full]:not([data-motion=off]):not([data-case-motion=off]) .cf-project-link:is(:hover,:focus-visible) .project-portal{transform:perspective(1100px) translateZ(0) rotateX(0);transition-duration:.85s}
 html[data-cinematic-mode=full]:not([data-motion=off]):not([data-case-motion=off]) .cf-project-link:is(:hover,:focus-visible) .project-portal-light{stroke-dashoffset:0;opacity:1;transition:stroke-dashoffset 1.05s var(--cf-ease),opacity .24s ease}
 html[data-cinematic-mode=full]:not([data-motion=off]):not([data-case-motion=off]) .cf-project-link:is(:hover,:focus-visible) .project-portal-back{opacity:.6}
 html[data-cinematic-mode=full]:not([data-motion=off]):not([data-case-motion=off]) .cf-project-link:is(:hover,:focus-visible) .project-portal-accent{opacity:.9;transition-delay:.14s}
}
/* Complete, quiet architecture for touch, low-power and reduced-motion views. */
html:is([data-cinematic-mode=off],[data-cinematic-mode=quiet],[data-motion=off],[data-case-motion=off]) [data-project-card] .project-portal{transform:none;transition:none}
html:is([data-cinematic-mode=off],[data-cinematic-mode=quiet],[data-motion=off],[data-case-motion=off]) [data-project-card] .project-portal-light{stroke-dashoffset:0;opacity:.35;filter:none;transition:none}
html:is([data-cinematic-mode=off],[data-cinematic-mode=quiet],[data-motion=off],[data-case-motion=off]) [data-project-card] .project-portal-accent{opacity:.28;transition:none}
@media(hover:none),(pointer:coarse),(max-width:950px),(prefers-reduced-motion:reduce){
 [data-project-card] .project-portal{transform:none;transition:none}
 [data-project-card] .project-portal-light{stroke-dashoffset:0;opacity:.35;filter:none;transition:none}
 [data-project-card] .project-portal-accent{transition:none}
}