/* CJPortfolioHero — frontend. Values come from --cjph-* variables printed by the plugin. */

@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/geist-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/geist-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- tokens (derived) ---------- */
.cjph-scope{
	--u:min(100vw / 1440, 100svh / 760);
	--cap:.71;
	--ease:cubic-bezier(.22,1,.36,1);
	--display-size:calc(var(--cjph-display-d) * var(--cjph-fit-display) * var(--u));
	--display-leading:calc(var(--cjph-display-lead-d) * var(--u));
	--body-size:calc(var(--cjph-body-d) * var(--cjph-fit) * var(--u));
	--body-leading:calc(var(--cjph-body-lead-d) * var(--u));
	--small-size:calc(var(--cjph-small-d) * var(--cjph-fit) * var(--u));
	--nav-size:calc(var(--cjph-nav-d) * var(--cjph-fit) * var(--u));
	--ui-size:calc(var(--cjph-ui-d) * var(--cjph-fit) * var(--u));
	--counter-size:calc(var(--cjph-counter-d) * var(--cjph-fit) * var(--u));
	--card-text-size:calc(var(--cjph-card-text) * 1px * var(--cjph-fit));
	--edge:calc(var(--cjph-edge-d) * var(--u));
	--bottom:calc(var(--cjph-bottom-d) * var(--u));
	--pill-h:calc(var(--cjph-pill-h-d) * var(--u));
	--cta-h:calc(var(--cjph-cta-h-d) * var(--u));
	--btn-h:calc(var(--cjph-btn-h) * var(--u));
	--img-w:max(calc(var(--cjph-img-min-d) * var(--u)), 100vw, calc(100svh * var(--cjph-minfit-d) * var(--cjph-photo-w) / var(--cjph-photo-h)));
	--photo-top:calc(var(--cjph-photo-top-d) * 1%);
	--photo-shift:0px;
	--nav-logo-top:calc(var(--cjph-nav-logo-top-d) * var(--u));
	--nav-right-top:calc(var(--cjph-nav-right-top-d) * var(--u));
	--acct-gap:calc(3.9 * var(--u));
	font-family:var(--cjph-font);
}
@media (max-width:1023px){
	.cjph-scope{
		--u:min(100vw / 415, 100svh / 760);
		--display-size:calc(var(--cjph-display-m) * var(--cjph-fit-display) * var(--u));
		--display-leading:calc(var(--cjph-display-lead-m) * var(--u));
		--body-size:calc(var(--cjph-body-m) * var(--cjph-fit) * var(--u));
		--body-leading:calc(var(--cjph-body-lead-m) * var(--u));
		--small-size:calc(var(--cjph-small-m) * var(--cjph-fit) * var(--u));
		--ui-size:calc(var(--cjph-ui-m) * var(--cjph-fit) * var(--u));
		--counter-size:calc(var(--cjph-counter-m) * var(--cjph-fit) * var(--u));
		--edge:calc(var(--cjph-edge-m) * var(--u));
		--bottom:calc(var(--cjph-bottom-m) * var(--u));
		--pill-h:calc(var(--cjph-pill-h-m) * var(--u));
		--cta-h:calc(var(--cjph-cta-h-m) * var(--u));
		--img-w:max(calc(var(--cjph-img-min-m) * min(100vw / 415, 100svh / 900)), 100vw, calc(100svh * var(--cjph-minfit-m) * var(--cjph-photo-w) / var(--cjph-photo-h)));
		--photo-top:calc(var(--cjph-photo-top-m) * 1%);
		--photo-shift:calc(var(--cjph-photo-left-m) * var(--u));
		--nav-logo-top:calc(var(--cjph-nav-logo-top-m) * var(--u));
		--nav-right-top:calc(var(--cjph-nav-right-top-m) * var(--u));
		--acct-gap:calc(6 * var(--u));
	}
}

/* ---------- base ---------- */
html[data-cjph-locked]{overflow:hidden}
html.cjph-active{overflow-x:clip}
html.cjph-cursor-on,html.cjph-cursor-on body,html.cjph-cursor-on a,html.cjph-cursor-on button{cursor:none}

.cjph-scope,.cjph-scope *,.cjph-scope *::before,.cjph-scope *::after{box-sizing:border-box}
:where(.cjph-scope) :where(h1,h2,p){margin:0;padding:0;font-family:inherit;text-transform:none}
:where(.cjph-scope) :where(a){color:inherit;text-decoration:none;box-shadow:none}
:where(.cjph-scope) :where(img){max-width:none;border:0;box-shadow:none;border-radius:0}

.cjph{position:relative;width:100vw;left:50%;margin-left:-50vw;color:var(--cjph-ink);font-family:var(--cjph-font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.cjph-main{position:relative;height:100svh;overflow:hidden;background:var(--cjph-white)}
.cjph-main>*{position:absolute;inset:0}

/* text trimmed to cap height and baseline */
.cjph-t{display:block}
@supports (text-box:trim-both cap alphabetic){.cjph-t{text-box:trim-both cap alphabetic}}
@supports not (text-box:trim-both cap alphabetic){.cjph-t{margin-block:calc(var(--lh,1.2em) / -2 + .35em) calc(var(--lh,1.2em) / -2 + .36em)}}

.cjph-display{font-size:var(--display-size);--lh:var(--display-leading);line-height:var(--lh);font-weight:var(--cjph-w-display);letter-spacing:-.02em}
.cjph-body{font-size:var(--body-size);--lh:var(--body-leading);line-height:var(--lh);font-weight:var(--cjph-w-body);letter-spacing:-.01em}
.cjph-small{font-size:var(--small-size);--lh:1.2em;line-height:var(--lh);font-weight:var(--cjph-w-body);letter-spacing:-.01em}
.cjph-lh115{--lh:1.15em}
.cjph-strong{font-weight:var(--cjph-w-strong);letter-spacing:-.02em}
.cjph-ui{font-size:var(--ui-size);--lh:1.2em;line-height:var(--lh);font-weight:var(--cjph-w-light);letter-spacing:-.01em}
.cjph-w{display:inline-block}

/* ---------- preloader ---------- */
.cjph-pre{background:var(--cjph-white)}
.cjph-pre-mark{position:absolute;left:50%;top:50%;translate:-50% -50%;width:calc(var(--cjph-pre-wm-w) * var(--u));aspect-ratio:var(--cjph-wm-w) / var(--cjph-wm-h);background:var(--cjph-steel);-webkit-mask:var(--cjph-wordmark) no-repeat center / contain;mask:var(--cjph-wordmark) no-repeat center / contain;opacity:var(--cjph-wm-pre-op)}
.cjph-counter{position:absolute;left:50%;top:50%;translate:-50% -50%;white-space:nowrap;font-size:var(--counter-size);--lh:1em;line-height:1;font-weight:400;color:var(--cjph-ink);font-variant-numeric:tabular-nums;letter-spacing:normal}

/* ---------- media: photo + card light ---------- */
.cjph-media,.cjph-over{overflow:hidden;transform:scale(0);transform-origin:50% 50%}
.cjph-media{z-index:1}
.cjph-over{z-index:3;pointer-events:none}
.cjph-photo{position:absolute;inset:auto;width:var(--img-w);aspect-ratio:var(--cjph-photo-w) / var(--cjph-photo-h);left:calc(50% + var(--photo-shift) - var(--img-w) / 2);top:calc(var(--photo-top) - var(--img-w) * var(--cjph-photo-hw) * var(--cjph-card-cy))}
.cjph-photo img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
@media (max-width:1023px){
	.cjph-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,var(--cjph-sky-tint) 3.99%,transparent 33.78%)}
}

.cjph-plane{position:absolute;left:0;top:0;width:652px;height:1024px;transform-origin:0 0;will-change:transform}
.cjph-light{opacity:0;filter:drop-shadow(0 0 3px rgba(255,255,255,.95)) drop-shadow(0 0 14px rgba(255,255,255,.55));-webkit-mask-image:linear-gradient(to bottom left,#000 20%,rgba(0,0,0,.45) 60%,transparent 92%);mask-image:linear-gradient(to bottom left,#000 20%,rgba(0,0,0,.45) 60%,transparent 92%)}
.cjph-face{position:absolute;left:0;top:0;width:1024px;height:652px;transform-origin:0 0;transform:translateX(652px) rotate(90deg);color:var(--cjph-white)}
.cjph-face::before{content:"";position:absolute;inset:0;border:3px solid var(--cjph-white);border-radius:28px}
.cjph-card-logo{position:absolute;display:block;left:calc(var(--cjph-card-logo-x) * 1px);top:calc(var(--cjph-card-logo-y) * 1px);width:calc(var(--cjph-card-logo-w) * 1px);height:calc(var(--cjph-card-logo-h) * 1px)}
.cjph-card-chip{position:absolute;display:block;left:calc(var(--cjph-card-chip-x) * 1px);top:calc(var(--cjph-card-chip-y) * 1px);width:calc(var(--cjph-card-chip-w) * 1px);height:calc(var(--cjph-card-chip-h) * 1px)}
.cjph-ct{position:absolute;top:calc(var(--cjph-card-text-top) * 1px);font-size:var(--card-text-size);line-height:1;--lh:1em;font-weight:400;white-space:nowrap;text-box:trim-both cap alphabetic}
@supports not (text-box:trim-both cap alphabetic){.cjph-ct{margin-block:calc(var(--lh) / -2 + .35em) calc(var(--lh) / -2 + .36em)}}
.cjph-ct-name{left:calc(var(--cjph-card-name-x) * 1px);letter-spacing:-.01em}
.cjph-ct-num{right:calc(var(--cjph-card-num-x) * 1px);letter-spacing:.01em}

/* ---------- portal ---------- */
.cjph-fill,.cjph-rim{display:block;position:absolute;inset:0;border-radius:28px;opacity:0}
.cjph-fill{background:var(--cjph-white)}
.cjph-rim{border:16px solid var(--cjph-white);box-shadow:0 0 36px 8px rgba(255,255,255,.85),inset 0 0 28px 6px rgba(255,255,255,.7)}

/* ---------- hero copy ---------- */
.cjph-hero{z-index:2;pointer-events:none}
.cjph-hero>*{pointer-events:auto}
.cjph-col{position:absolute;left:var(--edge);bottom:calc(var(--cjph-hero-bottom-d) * var(--u));display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--cjph-hero-gap-d) * var(--u) - var(--cap) * var(--display-size));color:var(--cjph-white)}
.cjph-badge{display:flex;align-items:center;gap:calc(8 * var(--u));opacity:0}
.cjph-sq{display:block;flex:none;width:calc(11 * var(--u));height:calc(11 * var(--u));background:var(--cjph-white);border-radius:2px}
.cjph-h1{opacity:0;color:var(--cjph-white)}
.cjph-line{display:block;white-space:nowrap}
.cjph-btns{position:absolute;left:var(--edge);bottom:var(--bottom);display:flex;gap:calc(12 * var(--u));opacity:0}
.cjph-b{display:inline-flex;align-items:center;justify-content:center;height:var(--btn-h);border-radius:100px;transition:transform .2s var(--ease)}
.cjph-b:hover{transform:scale(1.03)}
.cjph-b1{padding:0 calc(18 * var(--u));background:var(--cjph-white);color:var(--cjph-ink-button)}
.cjph-b2{padding:0 calc(16 * var(--u));border:1px solid var(--cjph-white);color:var(--cjph-white)}
.cjph-lead{position:absolute;right:var(--edge);bottom:var(--bottom);width:calc(var(--cjph-lead-w-d) * var(--u));color:var(--cjph-white);opacity:0}

/* ---------- second screen ---------- */
.cjph-ready{z-index:4;background:var(--cjph-white);color:var(--cjph-ink);opacity:0;visibility:hidden}
.cjph-ready [data-ready]{opacity:0}
.cjph-wm{position:absolute;left:var(--edge);right:var(--edge);top:calc(var(--cjph-r-wm-cy-d) * var(--u));translate:0 -50%;pointer-events:none}
.cjph-wm-in{width:100%;aspect-ratio:var(--cjph-wm-w) / var(--cjph-wm-h);background:var(--cjph-steel);-webkit-mask:var(--cjph-wordmark) no-repeat center / contain;mask:var(--cjph-wordmark) no-repeat center / contain;opacity:var(--cjph-wm-op)}
.cjph-cardbox{position:absolute;left:50%;top:calc(var(--cjph-r-card-cy-d) * var(--u));translate:-50% -50%;width:calc(var(--cjph-r-card-w-d) * var(--u));aspect-ratio:16 / 9;perspective:1200px;z-index:1;pointer-events:none;right:auto;bottom:auto}
.cjph-float{width:100%;height:100%}
.cjph-float img{display:block;width:100%;height:100%;object-fit:contain}
.cjph-rh{position:absolute;display:block;white-space:nowrap;--lh:1em;line-height:1}
.cjph-rh1{left:var(--edge);top:calc(var(--cjph-r-h1-d) * var(--u) - var(--cap) * var(--display-size))}
.cjph-rh2{right:var(--edge);top:calc(var(--cjph-r-h2-d) * var(--u) - var(--cap) * var(--display-size));z-index:2}
.cjph-more{position:absolute;right:var(--edge);top:calc(var(--cjph-r-more-top-d) * var(--u));height:var(--pill-h);padding:0 calc(12 * var(--u)) 0 calc(8 * var(--u));display:inline-flex;align-items:center;gap:calc(8 * var(--u));background:var(--cjph-steel);color:var(--cjph-white);border-radius:100px;z-index:2;transition:transform .2s var(--ease);inset-inline-start:auto;bottom:auto;left:auto}
.cjph-more:hover{transform:scale(1.03)}
.cjph-ico{display:block;flex:none;width:calc(23 * var(--u));height:calc(23 * var(--u))}
.cjph-rtext{position:absolute;left:var(--edge);bottom:calc(var(--cjph-r-text-b-d) * var(--u));width:calc(var(--cjph-r-text-w-d) * var(--u));z-index:2;right:auto;top:auto}
.cjph-dark{position:absolute;left:var(--edge);bottom:var(--bottom);height:var(--btn-h);padding:0 calc(18 * var(--u));display:inline-flex;align-items:center;justify-content:center;background:var(--cjph-ink-button);color:var(--cjph-white);border-radius:100px;z-index:2;transition:transform .2s var(--ease);right:auto;top:auto}
.cjph-dark:hover{transform:scale(1.03)}
.cjph-hint{position:absolute;right:var(--edge);bottom:var(--bottom);--lh:1em;line-height:1;color:var(--cjph-grey);z-index:2;left:auto;top:auto;white-space:nowrap}

/* ---------- nav (moved to <body> by the script, so it never sits under a transformed parent) ---------- */
.cjph-nav{position:fixed;left:0;right:0;top:0;height:0;z-index:var(--cjph-z-nav);color:var(--cjph-white);opacity:0;transition:color .4s var(--ease)}
.cjph-nav[data-theme="dark"]{color:var(--cjph-ink)}
.cjph-nav>*{position:absolute}
.cjph-logo{left:var(--edge);top:var(--nav-logo-top);width:calc(var(--cjph-nav-logo-w) * var(--u));height:calc(var(--cjph-nav-logo-h) * var(--u));background-color:currentColor;-webkit-mask:var(--cjph-logo) no-repeat center / contain;mask:var(--cjph-logo) no-repeat center / contain;transition:background-color .4s var(--ease)}
.cjph-pill{left:50%;top:calc(var(--cjph-nav-pill-top) * var(--u));transform:translateX(-50%);display:flex;align-items:center;gap:calc(var(--cjph-nav-pill-gap) * var(--u));padding:calc(16 * var(--u)) calc(20 * var(--u));border-radius:100px;background:var(--cjph-glass);backdrop-filter:blur(20px);box-shadow:inset 0 2px 2px var(--cjph-glass-shine)}
.cjph-link{position:relative;display:block;transition:opacity .2s var(--ease)}
.cjph-link:hover{opacity:.6}
.cjph-link .cjph-t{font-size:var(--nav-size);--lh:1.2em;line-height:var(--lh);font-weight:var(--cjph-w-light);letter-spacing:-.02em;white-space:nowrap}
.cjph-link::after{content:"";position:absolute;left:1px;top:calc(100% + 4 * var(--u));width:calc(12 * var(--u));height:1px;border-radius:2px;background:currentColor;opacity:0;transition:opacity .4s var(--ease)}
.cjph-nav[data-theme="light"] .cjph-link.is-a-hero::after,.cjph-nav[data-theme="dark"] .cjph-link.is-a-ready::after{opacity:1}
.cjph-right{right:var(--edge);top:var(--nav-right-top);display:flex;align-items:center;gap:calc(8 * var(--u))}
.cjph-acct{display:inline-flex;align-items:center;height:var(--pill-h);padding:0 calc(12 * var(--u)) 0 calc(8 * var(--u));gap:var(--acct-gap);border-radius:100px;background:var(--cjph-glass);border:1px solid var(--cjph-glass-edge);backdrop-filter:blur(20px);box-shadow:inset 0 2px 2px var(--cjph-glass-shine);transition:opacity .2s var(--ease)}
.cjph-acct:hover{opacity:.8}
.cjph-cta{display:inline-flex;align-items:center;height:var(--cta-h);padding:0 calc(16 * var(--u));border-radius:100px;background:var(--cjph-white);color:var(--cjph-ink-header);transition:transform .2s var(--ease),background-color .4s var(--ease),color .4s var(--ease)}
.cjph-cta:hover{transform:scale(1.03)}
.cjph-nav[data-theme="dark"] .cjph-cta{background:var(--cjph-ink-button);color:var(--cjph-white)}

/* ---------- cursor ---------- */
.cjph-cursor{position:fixed;left:0;top:0;width:calc(32 * var(--u));height:calc(32 * var(--u));margin:calc(-16 * var(--u)) 0 0 calc(-16 * var(--u));border-radius:50%;border:1px solid var(--cjph-cursor-edge);background:var(--cjph-cursor-fill);backdrop-filter:blur(4px) brightness(.82);pointer-events:none;z-index:var(--cjph-z-cursor);opacity:0;transition:opacity .2s linear;will-change:transform}

/* ---------- mobile ---------- */
@media (max-width:1023px){
	.cjph-wm-in{aspect-ratio:var(--cjph-wm-w) / var(--cjph-wm-h)}
	.cjph-pre-mark{width:calc(100% - 2 * var(--edge))}
	.cjph-pill{display:none}
	.cjph-col{top:calc(var(--cjph-hero-top-m) * var(--u) - var(--cap) * var(--small-size));bottom:auto;right:var(--edge);max-width:calc(var(--cjph-hero-max-m) * var(--u));gap:calc(var(--cjph-hero-gap-m) * var(--u) - var(--cap) * var(--display-size))}
	.cjph-line{white-space:normal}
	.cjph-lead{left:var(--edge);width:auto;max-width:calc(var(--cjph-lead-w-m) * var(--u));bottom:calc(var(--cjph-lead-bottom-m) * var(--u))}
	.cjph-btns{right:var(--edge)}
	.cjph-b{flex:1}
	.cjph-wm{top:calc(var(--cjph-r-wm-cy-m) * var(--u))}
	.cjph-cardbox{top:calc(var(--cjph-r-card-cy-m) * var(--u));width:calc(var(--cjph-r-card-w-m) * var(--u))}
	.cjph-rh1{top:calc(var(--cjph-r-h1-m) * var(--u) - var(--cap) * var(--display-size))}
	.cjph-rh2{top:auto;bottom:calc(var(--cjph-r-text-b-m) * var(--u) + 2 * var(--body-leading) + var(--cap) * var(--body-size) + var(--cjph-r-h2-gap-m) * var(--u))}
	.cjph-more{top:calc(var(--cjph-r-more-top-m) * var(--u))}
	.cjph-rtext{right:var(--edge);width:auto;max-width:calc(var(--cjph-r-text-w-m) * var(--u));bottom:calc(var(--cjph-r-text-b-m) * var(--u))}
	.cjph-dark{right:var(--edge)}
	.cjph-hint{display:none}
}