/* Before / concept gallery: isolated from the existing portfolio lightbox. */
.tf-hero{padding-block:76px 58px}.tf-intro{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:end}.tf-intro h1{font-size:clamp(3.2rem,6.1vw,6.2rem);line-height:.98;font-weight:400;margin:10px 0 0;letter-spacing:-.035em}.tf-intro h1 em{color:var(--accent-dark);font-weight:400}.tf-intro>div{padding-bottom:5px;max-width:440px}.tf-intro>div>p:first-child{font-size:1.2rem;margin-top:0}.tf-lead{color:var(--soft-ink)}.tf-jump{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:16px 0 12px;margin-top:26px;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em}.tf-jump span{font-size:1.7rem}.tf-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:54px 30px;scroll-margin-top:100px}.tf-card:first-child{grid-column:1/-1}.tf-cover{position:relative;overflow:hidden;background:var(--paper-deep);aspect-ratio:4/3}.tf-card:first-child .tf-cover{aspect-ratio:2/1}.tf-cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.tf-open:hover img{transform:scale(1.025)}.tf-open{display:block}.tf-open:focus-visible{outline:3px solid var(--accent-dark);outline-offset:5px}.tf-badge,.tf-peek{position:absolute;padding:8px 13px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}.tf-badge{top:18px;left:18px;background:var(--paper);color:var(--ink)}.tf-peek{right:18px;bottom:18px;background:#fffdf8f0;color:#171717;display:flex;align-items:center;gap:18px}.tf-peek span{font-size:1.4rem;line-height:1}.tf-card-heading{position:relative;padding-top:22px;padding-right:30px}.tf-card-heading .overline{margin:0 0 8px}.tf-card-heading h2{font-size:clamp(1.65rem,2.8vw,2.7rem);font-weight:400;line-height:1.12;margin:0 0 12px}.tf-card-heading>p:last-child{color:var(--soft-ink);margin:0}.tf-arrow{position:absolute;right:0;top:30px;font-size:1.6rem}.tf-details{margin-top:20px;border-block:1px solid var(--line)}.tf-details summary{cursor:pointer;padding:14px 0;font-size:.82rem}.tf-process{padding:8px 0 22px}.tf-process h3{font-family:var(--font-body);font-size:.88rem;margin:20px 0 6px}.tf-process p{font-size:.9rem;color:var(--soft-ink);margin:0 0 10px}.tf-process .tf-credit{font-size:.74rem;margin-top:24px}.tf-credit a{text-decoration:underline;text-underline-offset:3px}.tf-end{padding-block:94px;text-align:center}.tf-end h2{font-weight:400;font-size:clamp(2.4rem,5vw,4.5rem);line-height:1.05;margin:18px 0}.tf-end>p:not(.overline){color:var(--soft-ink);margin-bottom:28px}.tf-dialog{width:min(1200px,calc(100vw - 32px));max-width:none;max-height:94dvh;padding:0;border:0;background:var(--paper);color:var(--ink);overscroll-behavior:contain}.tf-dialog::backdrop{background:#14120fe6;backdrop-filter:blur(5px)}.tf-toolbar{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:4;padding:12px 26px;background:var(--paper);border-bottom:1px solid var(--line)}.tf-toolbar p{margin:0}.tf-close{font:inherit;border:0;background:transparent;color:var(--ink);cursor:pointer;min-height:44px;display:flex;gap:18px;align-items:center;font-size:.82rem}.tf-close span{font-size:1.8rem}.tf-dialog-body{padding:24px 34px 32px}.tf-dialog h2{font-size:clamp(1.7rem,3vw,2.8rem);font-weight:400;line-height:1.1;margin:0 0 10px}#tf-hint{color:var(--soft-ink);font-size:.84rem;margin:0 0 18px}.tf-stage-wrap{display:flex;justify-content:center;background:#e5e0d8}.tf-stage{--split:50%;position:relative;width:100%;max-width:calc(62dvh * var(--ratio,1.5));aspect-ratio:var(--ratio,1.5);overflow:hidden;touch-action:none;user-select:none;cursor:ew-resize}.tf-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;max-width:none;pointer-events:none}.tf-before{clip-path:inset(0 calc(100% - var(--split)) 0 0)}.tf-stage-label{position:absolute;top:14px;background:#fffdf8ed;color:#171717;padding:7px 11px;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;pointer-events:none}.tf-label-before{left:14px}.tf-label-after{right:14px}.tf-divider{position:absolute;left:var(--split);top:0;bottom:0;width:2px;background:white;transform:translateX(-50%);pointer-events:none;box-shadow:0 0 5px #0005}.tf-divider>span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--ink);box-shadow:0 2px 12px #0004;font-size:1.6rem}.tf-range-label{display:block;text-align:center;font-size:.74rem;margin-top:14px}.tf-range{display:block;width:min(480px,100%);margin:0 auto;min-height:40px;accent-color:var(--accent-dark);cursor:ew-resize}.tf-controls{display:flex;justify-content:space-between;gap:8px;margin:10px 0 24px}.tf-controls .btn{font-size:.78rem;min-height:44px;padding:10px 16px}.tf-modal-process{border-top:1px solid var(--line)}.tf-modal-process .tf-process{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.tf-modal-process .tf-credit{grid-column:1/-1;margin:0}.tf-load-status{text-align:center;font-size:.85rem}.tf-dialog button:focus-visible,.tf-range:focus-visible,.tf-details summary:focus-visible{outline:3px solid var(--accent-dark);outline-offset:3px}body.tf-modal-open{overflow:hidden}
@media(max-width:700px){.tf-hero{padding-block:44px 36px}.tf-intro{grid-template-columns:1fr;gap:28px}.tf-intro h1{font-size:clamp(2.8rem,9.7vw,4.8rem)}.tf-intro>div{max-width:none}.tf-gallery{grid-template-columns:1fr;gap:32px}.tf-card:first-child .tf-cover{aspect-ratio:4/3}.tf-end{padding-block:64px}.tf-dialog{width:100%;max-height:100dvh;height:100dvh;margin:0}.tf-toolbar{padding:10px 18px}.tf-dialog-body{padding:22px 18px}.tf-modal-process .tf-process{display:block}.tf-stage{max-width:calc(58dvh * var(--ratio,1.5))}.tf-controls .btn{padding:10px;font-size:.72rem}.tf-stage-label{top:8px;padding:5px 8px}.tf-label-before{left:8px}.tf-label-after{right:8px}}
@media(prefers-reduced-motion:reduce){.tf-cover img{transition:none}}