@font-face {font-family:XiaoyanScript;src:url('assets/pacifico-regular.ttf') format('truetype');font-weight:400;font-display:swap}
/* Small, isolated homepage component. Motion controls live here. */
.folder-hero {
  --folder-open-duration: 520ms;
  --folder-emphasis-duration: 220ms;
  --folder-stagger: 32ms;
  --folder-lift: -22px;
  --folder-scale: 1.035;
  --folder-ease: cubic-bezier(.22,.8,.25,1);
  --card-width: clamp(176px, 16vw, 230px);
  --fan-step: clamp(85px, 9vw, 132px);
  position: relative; height:auto; min-height:870px; max-height:none;
  padding:142px var(--pad) 0; overflow:clip;
  background:radial-gradient(ellipse at 50% 62%,#fdd6b54d,transparent 55%),linear-gradient(140deg,#fcfaf6,#f4eee5);
  color:var(--ink);
}
.folder-hero-heading {display:flex;align-items:center;justify-content:space-between;gap:32px;position:relative;z-index:3}
.folder-eyebrow {display:flex;align-items:center;gap:10px;font:11px/1.5 Arial,sans-serif;letter-spacing:.15em;margin:0 0 20px;color:#80685c}
.folder-dot {width:6px;height:6px;border-radius:100%;background:var(--orange)}
.folder-eyebrow-divider {color:#bbab9b;margin:0 5px}
.folder-hero h1 {font-size:clamp(36px,4.25vw,68px);font-weight:500;line-height:1.18;letter-spacing:-.045em;margin:0}
.folder-hero h1>span {margin-left:.16em;color:var(--orange)}
.folder-description {font-size:14px;line-height:1.9;color:#7a665e;margin:18px 0 0}
.folder-explore {display:flex;align-items:center;gap:42px;border:1px solid #ffffffec;border-radius:99px;padding:17px 23px;font-size:13px;box-shadow:0 7px 25px #5c30230a;background:#ffffff85;backdrop-filter:blur(18px);transition:background .2s,box-shadow .2s}
.folder-explore>span {font-size:23px;line-height:1;color:var(--orange)}
.folder-explore:hover {background:#fff;box-shadow:0 10px 30px #5c302314}
.folder-stage {position:relative;isolation:isolate;width:100%;max-width:1400px;margin:2px auto 0;height:612px}
/* Self-hosted open-source script. Layered highlights create a frosted glass bevel. */
.folder-wordmark {position:absolute;top:202px;left:50%;transform:translateX(-50%) rotate(-5deg);font:400 clamp(100px,14vw,205px)/1.65 XiaoyanScript,"Brush Script MT",cursive;letter-spacing:-.055em;white-space:nowrap;z-index:-2;pointer-events:none;color:#e4e5e0;background:linear-gradient(170deg,#ffffff 5%,#c7c7c769 26%,#fffcfa 38%,#cacaca98 51%,#fdfcfb 59%,#bbbbbb7d 73%,#fff 93%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:1.35px #b7b7b787;filter:drop-shadow(0 3px 1px #fff) drop-shadow(0 9px 8px #6262621c)}
.folder-wordmark::after {content:attr(data-text);position:absolute;inset:0;transform:translate(-1px,-2px);-webkit-text-stroke:.6px #fff9;opacity:.7;pointer-events:none}
.folder-orbit {position:absolute;pointer-events:none;z-index:-1;border:1px solid #ffffffd6;background:linear-gradient(145deg,#fff9,#f7e4dc22);box-shadow:inset 1px 2px 6px #fff9,0 9px 24px #b8928c12;backdrop-filter:blur(3px);border-radius:50%}
.folder-orbit-one {width:47px;height:47px;left:10%;top:146px}
.folder-orbit-two {width:20px;height:20px;right:12%;top:470px}
.folder-shadow {position:absolute;left:50%;top:520px;transform:translateX(-50%);width:340px;height:32px;border-radius:50%;background:#87411830;filter:blur(20px);z-index:-1;pointer-events:none}
.folder-back {position:absolute;top:267px;left:50%;transform:translateX(-50%);width:350px;height:281px;border:1px solid #ffd19d;border-radius:0 25px 28px 28px;background:linear-gradient(145deg,#fdb767,#f97e30 60%,#f46d1f);box-shadow:inset 0 1px 2px #ffffffa1,0 20px 60px #bf591b24;z-index:0;pointer-events:none}
.folder-back::before {content:"";position:absolute;left:-1px;top:-26px;width:143px;height:35px;border-radius:21px 21px 0 0;background:linear-gradient(120deg,#fbbc7a,#fda65e);border:1px solid #ffd4a7;border-bottom:0;z-index:-1}
.folder-back>span {position:absolute;left:24px;top:14px;color:#99451f;font:9px/1.4 Arial,sans-serif;letter-spacing:.15em}
.folder-cards {position:absolute;inset:0;list-style:none;margin:0;padding:0;pointer-events:none}
/* Ten deliberate slots form three layers, not a repeated symmetrical fan. */
.folder-card {position:absolute;left:50%;top:205px;width:calc(var(--card-width) * var(--size,1));z-index:var(--depth,4);pointer-events:auto;
  --x:0px;--y:0px;--angle:0deg;--rest-x:0px;--rest-y:0px;--rest-angle:0deg;
  transform:translateX(-50%) translate(var(--rest-x),var(--rest-y)) rotate(var(--rest-angle));
  transform-origin:50% 90%;transition:transform var(--folder-open-duration) var(--folder-ease);transition-delay:calc(var(--beat,0) * var(--folder-stagger));
}
.folder-card:nth-child(1) {--x:calc(-.65 * var(--fan-step));--y:-131px;--angle:-6deg;--rest-x:-20px;--rest-y:4px;--rest-angle:-4deg;--size:1.05;--depth:12;--beat:0;--crop:1.16}
.folder-card:nth-child(2) {--x:calc(.92 * var(--fan-step));--y:-102px;--angle:8deg;--rest-x:24px;--rest-y:0px;--rest-angle:5deg;--size:1.12;--depth:13;--beat:1;--crop:1.35}
.folder-card:nth-child(3) {--x:calc(-2.04 * var(--fan-step));--y:-48px;--angle:-16deg;--rest-x:-50px;--rest-y:36px;--rest-angle:-9deg;--size:.93;--depth:11;--beat:2;--crop:1.1}
.folder-card:nth-child(4) {--x:calc(2.04 * var(--fan-step));--y:44px;--angle:13deg;--rest-x:49px;--rest-y:42px;--rest-angle:10deg;--size:1;--depth:14;--beat:3;--crop:1.48}
.folder-card:nth-child(5) {--x:calc(-2.25 * var(--fan-step));--y:-153px;--angle:-12deg;--rest-x:-38px;--rest-y:-11px;--rest-angle:-6deg;--size:.83;--depth:5;--beat:1;--crop:1.75}
.folder-card:nth-child(6) {--x:calc(2.79 * var(--fan-step));--y:-59px;--angle:17deg;--rest-x:58px;--rest-y:15px;--rest-angle:9deg;--size:.89;--depth:6;--beat:2;--crop:1.5}
.folder-card:nth-child(7) {--x:calc(-3.43 * var(--fan-step));--y:68px;--angle:-21deg;--rest-x:-81px;--rest-y:52px;--rest-angle:-13deg;--size:.83;--depth:7;--beat:4;--crop:1.72}
.folder-card:nth-child(8) {--x:calc(3.42 * var(--fan-step));--y:66px;--angle:20deg;--rest-x:81px;--rest-y:58px;--rest-angle:14deg;--size:.88;--depth:8;--beat:4;--crop:1.7}
.folder-card:nth-child(9) {--x:calc(-2.06 * var(--fan-step));--y:157px;--angle:-8deg;--rest-x:-62px;--rest-y:76px;--rest-angle:-10deg;--size:.82;--depth:15;--beat:5;--crop:1.65}
.folder-card:nth-child(10) {--x:calc(2.18 * var(--fan-step));--y:-156px;--angle:12deg;--rest-x:61px;--rest-y:81px;--rest-angle:10deg;--size:.83;--depth:4;--beat:5;--crop:1.67}
.folder-card-link {display:block;overflow:hidden;border:1px solid #fffffff2;border-radius:15px;background:linear-gradient(145deg,#fff,#fffaf3);box-shadow:0 7px 18px #723c2823,0 1px 3px #723c2814;padding:6px;transform:translateY(0) scale(1);transition:transform var(--folder-emphasis-duration) var(--folder-ease),box-shadow var(--folder-emphasis-duration);text-align:left;outline-offset:5px;color:#432b31}
.folder-card-image {position:relative;display:block;aspect-ratio:var(--crop,1.3);overflow:hidden;border-radius:10px;background:#e4d6c5}
.folder-card-image img {width:100%;height:100%;object-fit:cover;object-position:center}
.folder-card-tag {position:absolute;top:8px;left:8px;max-width:calc(100% - 16px);padding:5px 8px;border-radius:12px;background:#fff9efdf;border:1px solid #ffffff80;backdrop-filter:blur(12px);font-size:9px;color:#532d26;letter-spacing:.015em}
.folder-card-info {display:block;min-height:69px;padding:10px 7px 8px}
.folder-card-client {display:flex;justify-content:space-between;gap:4px;font-size:9px;line-height:1.3;letter-spacing:.03em;color:#88756b}
.folder-card-client>span {color:var(--orange);font-size:15px}
.folder-card-info strong {display:block;font-size:12px;line-height:1.5;font-weight:550;margin-top:4px;overflow-wrap:anywhere}
.folder-front {position:absolute;left:50%;top:340px;transform:translateX(-50%);width:362px;height:216px;z-index:20;pointer-events:none;border-radius:25px 25px 29px 29px;border:1px solid #ffdab9b3;background:linear-gradient(128deg,#ffa14bcf,#f5792ac4 40%,#f06922c2);backdrop-filter:blur(22px) saturate(1.45);-webkit-backdrop-filter:blur(22px) saturate(1.45);box-shadow:inset 0 1px 0 #fff6, inset 0 -2px 1px #e65c1433,0 15px 38px #bc5f231c;padding:22px 25px;color:#fff8ed;transition:transform var(--folder-open-duration) var(--folder-ease),background var(--folder-open-duration)}
.folder-front::after {content:"";position:absolute;inset:4px;border-radius:21px 21px 25px 25px;border:1px solid #ffffff28;pointer-events:none}
.folder-cover-top {display:flex;justify-content:space-between;align-items:flex-start}
.folder-edition {font:11px/1.35 Arial,sans-serif;letter-spacing:.13em}
.folder-cover-top svg {width:38px;height:38px;stroke:currentColor}
.folder-cover-bottom {display:flex;align-items:center;justify-content:space-between;margin-top:48px;font-size:18px;font-weight:500;letter-spacing:.02em}
.folder-cover-caption {display:block;font-size:10px;font-weight:400;margin-top:12px;letter-spacing:.04em;color:#fffaf2}
.folder-arrow {width:37px;height:37px;display:grid;place-items:center;border:1px solid #ffffff55;border-radius:50%;background:#ffffff22;font-size:24px}
.folder-stage-footer {position:absolute;left:0;right:0;bottom:12px;display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.05em;color:#887265;pointer-events:none}
.folder-caption {display:flex;gap:9px;align-items:center}
.folder-caption-mobile {display:none}
.folder-pagination {font:10px/1.5 Arial,sans-serif;letter-spacing:.14em}
.folder-hero-bottom {display:flex;justify-content:space-between;gap:20px;border-top:1px solid #d4bcab80;padding:20px 0 22px;font-size:11px;color:#816c5e;letter-spacing:.08em}
.folder-hero-bottom a {display:flex;gap:18px}
.folder-stage:focus-within .folder-card {transform:translateX(-50%) translate(var(--x),var(--y)) rotate(var(--angle))}
.folder-card:focus-within {z-index:50}
.folder-card-link:focus-visible {transform:translateY(var(--folder-lift)) scale(var(--folder-scale));outline:3px solid #8c354b;box-shadow:0 16px 35px #582c3633}
@media (hover:hover) and (pointer:fine) and (min-width:801px) {
  .folder-stage:hover .folder-card {transform:translateX(-50%) translate(var(--x),var(--y)) rotate(var(--angle))}
  .folder-stage:hover .folder-front,.folder-stage:focus-within .folder-front {transform:translateX(-50%) translateY(5px)}
  .folder-card:hover {z-index:40}
  .folder-card:focus-within:hover {z-index:50}
  .folder-card:hover .folder-card-link {transform:translateY(var(--folder-lift)) scale(var(--folder-scale));box-shadow:0 16px 35px #582c3633}
}
/* Compact portrait cover: ten cards in three depths, within a 9:20 phone cover.
   Full project names remain in the accessible link and in the work archive. */
.folder-toggle,.folder-mobile-title {display:none}
.folder-card[hidden] {display:none!important}
@media (max-width:800px),(hover:none),(pointer:coarse) {
  .folder-hero {min-height:0;height:min(1220px,calc(100vw * 20 / 9));max-height:none;padding-top:104px;padding-bottom:0;display:flex;flex-direction:column}
  .folder-hero-heading {display:block;flex:none}
  .folder-eyebrow {font-size:10px;margin-bottom:12px}
  .folder-hero h1 {font-size:clamp(30px,5.8vw,48px)}
  .folder-description {margin-top:10px;font-size:12px;line-height:1.6}
  .folder-explore {width:max-content;margin-top:15px;padding:11px 16px;font-size:11px;gap:24px}
  .folder-explore>span {font-size:19px}
  .folder-stage {flex:1;min-height:0;height:auto;max-width:550px;margin:12px auto 0;padding:0}
  .folder-wordmark {top:1%;left:50%;transform:translateX(-50%) rotate(-7deg);font-size:clamp(46px,11.5vw,76px);letter-spacing:-.055em;opacity:.8}
  .folder-orbit-one {display:block;top:40%;left:0;width:28px;height:28px}
  .folder-orbit-two {display:block;top:14%;right:5%;width:16px;height:16px}
  .folder-cards {position:absolute;inset:0;display:block;list-style:none;margin:0;padding:0;overflow:visible;pointer-events:none}
  .folder-card,.folder-stage:focus-within .folder-card {position:absolute;left:var(--mobile-x);top:var(--mobile-y);width:var(--mobile-width);transform:translateX(-50%) rotate(var(--mobile-angle));transform-origin:50% 55%;z-index:var(--mobile-depth);transition-delay:calc(var(--beat,0) * var(--folder-stagger))}
  /* Hero productions and awards form the foreground; six smaller cases peek around them. */
  .folder-card:nth-child(1) {--mobile-x:29%;--mobile-y:20%;--mobile-width:46%;--mobile-angle:-7deg;--mobile-depth:12;--mobile-crop:1.2}
  .folder-card:nth-child(2) {--mobile-x:73%;--mobile-y:23%;--mobile-width:46%;--mobile-angle:8deg;--mobile-depth:13;--mobile-crop:1.36}
  .folder-card:nth-child(3) {--mobile-x:25%;--mobile-y:49%;--mobile-width:40%;--mobile-angle:-11deg;--mobile-depth:14;--mobile-crop:1.05}
  .folder-card:nth-child(4) {--mobile-x:74%;--mobile-y:51%;--mobile-width:46%;--mobile-angle:9deg;--mobile-depth:15;--mobile-crop:1.4}
  .folder-card:nth-child(5) {--mobile-x:20%;--mobile-y:10%;--mobile-width:31%;--mobile-angle:-13deg;--mobile-depth:4;--mobile-crop:1.55}
  .folder-card:nth-child(6) {--mobile-x:51%;--mobile-y:5%;--mobile-width:29%;--mobile-angle:1deg;--mobile-depth:3;--mobile-crop:1.5}
  .folder-card:nth-child(7) {--mobile-x:16%;--mobile-y:74%;--mobile-width:29%;--mobile-angle:-14deg;--mobile-depth:16;--mobile-crop:1.6}
  .folder-card:nth-child(8) {--mobile-x:85%;--mobile-y:75%;--mobile-width:30%;--mobile-angle:13deg;--mobile-depth:17;--mobile-crop:1.6}
  .folder-card:nth-child(9) {--mobile-x:51%;--mobile-y:64%;--mobile-width:27%;--mobile-angle:-4deg;--mobile-depth:19;--mobile-crop:1.5}
  .folder-card:nth-child(10) {--mobile-x:81%;--mobile-y:11%;--mobile-width:29%;--mobile-angle:14deg;--mobile-depth:6;--mobile-crop:1.65}
  .folder-stage .folder-card:focus-within {z-index:50}
  .folder-card-link {padding:4px;border-radius:12px;box-shadow:0 6px 16px #723c2825}
  .folder-card-image {aspect-ratio:var(--mobile-crop);border-radius:9px}
  .folder-card-image img {object-position:center}
  .folder-card-info {min-height:0;padding:7px 3px 5px}
  .folder-card-info strong {font-size:clamp(10px,2.8vw,15px);line-height:1.45;letter-spacing:-.02em;margin:0;font-weight:600}
  .folder-card-client,.folder-card-tag,.folder-full-title {display:none}
  .folder-mobile-title {display:block}
  .folder-card:nth-child(n+5) .folder-card-info strong {font-size:clamp(8px,2.3vw,12px);font-weight:500;letter-spacing:-.03em}
  .folder-card:nth-child(n+5) .folder-card-info {padding:5px 1px 3px}
  .folder-card-link:focus-visible {transform:translateY(-5px) scale(1.04);outline-offset:3px}
  .folder-back {display:block;top:auto;bottom:11px;width:63%;height:26%;min-height:122px;border-radius:0 18px 20px 20px}
  .folder-back::before {height:24px;top:-18px;width:42%;border-radius:13px 13px 0 0}
  .folder-back>span {display:none}
  .folder-front {display:block;top:auto;bottom:8px;width:66%;height:22%;min-height:106px;padding:13px 16px;border-radius:18px 18px 22px 22px;display:flex;flex-direction:column;justify-content:space-between}
  .folder-front::after {inset:3px;border-radius:15px 15px 19px 19px}
  .folder-shadow {display:block;top:auto;bottom:12px;width:65%;height:18px;filter:blur(14px)}
  .folder-edition {font-size:8px;line-height:1.35}
  .folder-cover-top svg {width:26px;height:26px}
  .folder-cover-bottom {margin:6px 0 0;gap:4px}
  .folder-front .folder-company {font-size:clamp(25px,7.2vw,39px);letter-spacing:.04em}
  .folder-cover-caption {font-size:clamp(7px,1.85vw,10px);letter-spacing:0;margin-top:7px;white-space:nowrap}
  .folder-front .folder-arrow {width:25px;height:25px;font-size:17px;flex-shrink:0;transition:transform var(--folder-emphasis-duration)}
  .folder-stage.is-enhanced .folder-toggle {display:block;position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:inherit;background:transparent;color:inherit;cursor:pointer;pointer-events:auto;outline-offset:5px}
  .folder-toggle:focus-visible {outline:3px solid #8c354b}
  .folder-stage.is-folded .folder-card {transform:translateX(-50%) translate(var(--fold-x,0px),var(--fold-y,0px)) rotate(var(--rest-angle)) scale(.82);pointer-events:none}
  .folder-stage.is-folded .folder-arrow {transform:rotate(-90deg)}
  .folder-stage-footer {display:none}
  .folder-hero-bottom {flex:none;padding:12px 0 15px;font-size:10px;line-height:1.4}
}
@media (max-width:450px) {
  .folder-hero {padding-top:96px}
  .folder-eyebrow {font-size:8px;letter-spacing:.09em;gap:7px;margin-bottom:12px}
  .folder-eyebrow-divider {margin:0 3px}
  .folder-hero h1 {font-size:clamp(28px,7.7vw,35px);letter-spacing:-.05em}
  .folder-description {font-size:11px;max-width:300px;margin-top:10px}
  .folder-stage {margin-top:10px}
  .folder-hero-bottom {font-size:9px;padding:10px 0 13px}
}
@media (max-width:350px) {
  .folder-hero {padding-top:91px}
  .folder-explore {margin-top:10px;padding:9px 13px}
  .folder-front {padding:10px 12px}
  .folder-front .folder-company {font-size:25px}
  .folder-cover-caption {font-size:6.5px}
}
@media (prefers-reduced-motion:reduce) {
  .folder-hero *, .folder-hero *::before, .folder-hero *::after {transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
.reduced-motion .folder-hero * {transition:none!important;animation:none!important}
@media print {
  .folder-hero {height:auto;min-height:0;display:block;break-after:page}
  .folder-full-title {display:inline}.folder-mobile-title {display:none}
  .folder-stage {height:auto;max-width:none;padding:20px 0}
  .folder-cards {position:static;display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
  .folder-card,.folder-stage:focus-within .folder-card,.folder-stage.is-folded .folder-card {position:static;width:100%;transform:none!important;break-inside:avoid}
  .folder-back,.folder-front,.folder-shadow,.folder-wordmark,.folder-orbit,.folder-stage-footer {display:none}
}

/* Case links without a CMS video open their own existing case, below the sticky nav. */
.portfolio-card[id] {scroll-margin-top:110px}

.folder-company {display:block;font-size:38px;font-weight:600;line-height:1.2;letter-spacing:.085em;color:#fffdf6;text-shadow:0 2px 12px #a8432620}