/* Motion direction: slow light, deliberate typography, tactile portfolio. */
body { overflow-x: hidden; }
section[id] { scroll-margin-top: 6rem; }
button { font: inherit; }
[hidden] { display: none !important; }
.hero h1 { line-height: .98; letter-spacing: -.055em; }
.hero-frame img { height: auto; aspect-ratio: 3 / 4; object-fit: contain; filter: none; }
.hero-frame { clip-path: none; border-radius: .85rem; }
.hero-frame-label { bottom: -.1rem; padding: .6rem; background: #07110ce8; left: 0; right: 0; }
.hero-frame::after { display: none; }
.scroll-cue { display: none; }
.reveal { opacity: 1; transform: none; }
.reveal.reveal-pending { opacity: 0; transform: translateY(24px); }
.reveal.is-visible { animation: surface-enter .9s var(--ease) both; animation-delay: var(--reveal-delay, 0ms); }
@keyframes surface-enter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.type-mask { display: inline-block; overflow: hidden; overflow: clip; vertical-align: bottom; padding: .12em .08em; margin: -.12em -.08em; }
.type-word { display: inline-block; }
.type-ready .type-word { animation: word-enter 1s var(--ease) both; animation-delay: var(--word-delay, 0ms); }
@keyframes word-enter {
  from { opacity: .2; transform: translateY(115%) rotate(2deg); }
  to { opacity: 1; transform: none; filter: none; }
}
.hero h1 em, .final-cta h2 em { text-shadow: 0 0 50px #7dff4f20; }
.hero::after { animation: light-drift 12s ease-in-out infinite alternate; animation-play-state: paused; }
.hero.fx-visible::after { animation-play-state: running; }
@keyframes light-drift { from { transform: translate(-4%, -3%) scale(.93); opacity: .7; } to { transform: translate(3%, 4%) scale(1.08); opacity: 1; } }
.button, .nav-cta { position: relative; overflow: hidden; }
.button::after, .nav-cta::after {
  content: ""; position: absolute; inset: -80% -60%; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, #ffffff65 50%, transparent 58%);
  transform: translateX(-80%); transition: transform .85s var(--ease);
}
.button:hover::after, .nav-cta:hover::after { transform: translateX(80%); }
.benefit-card, .format-card { position: relative; isolation: isolate; }
.benefit-card::after, .format-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none;
  background: radial-gradient(350px circle at var(--light-x, 50%) var(--light-y, 50%), #7dff4f16, transparent 70%);
  transition: opacity .35s;
}
.benefit-card:hover::after, .format-card:hover::after { opacity: 1; }
.cursor-halo {
  position: fixed; left: 0; top: 0; z-index: 999; width: 34px; height: 34px; border: 1px solid #a6ff8570;
  border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .2s, width .2s, height .2s, background .2s;
  margin: -17px; will-change: transform;
}
.cursor-halo.is-on { opacity: 1; }
.cursor-halo.is-link { width: 54px; height: 54px; margin: -27px; background: #7dff4f0c; border-color: #baff9fb0; }
.creative-vault { position: relative; padding: 1rem 0 2rem; border: 1px solid #b5ff8f20; border-radius: 1.5rem; background: radial-gradient(ellipse at 50% 42%, #224d133b, transparent 60%), #08100c; }
.vault-stage { position: relative; width: min(100%, 900px); aspect-ratio: 1.4; margin: auto; perspective: 1400px; isolation: isolate; }
.vault-label { position: absolute; top: 4%; left: 5%; color: #a8b4aa; letter-spacing: .17em; font-size: .75rem; }
.vault-aura { position: absolute; inset: 9% 6%; border-radius: 50%; background: radial-gradient(ellipse, #80e62b29, transparent 68%); pointer-events: none; }
.folder-back { position: absolute; z-index: 1; width: 66%; height: 46%; bottom: 6%; left: 17%; background: linear-gradient(150deg,#62792a,#153a17); border: 1px solid #baff8370; border-radius: 1.7rem; transform: rotate(-3deg); box-shadow: 0 30px 75px #0009; }
.folder-back::before { content: ""; position: absolute; width: 40%; height: 18%; left: -1px; top: -14%; background: #61772b; border: 1px solid #baff8370; border-bottom: 0; border-radius: 1.2rem 2rem 0 0; }
.folder-front { position: absolute; z-index: 12; left: 13%; bottom: 4%; width: 74%; height: 31%; pointer-events: none; transform: rotate(-3deg); }
.folder-glass { position: absolute; inset: 0; border: 1px solid #dbffc4a0; border-top-color: #efffdeca; border-radius: 0 1.6rem 1.6rem 1.6rem; background: linear-gradient(135deg,#ddff9745,#7aaf154d 35%,#173315c9); backdrop-filter: blur(16px) saturate(1.35); box-shadow: inset 0 1px 5px #ffffcc70, inset 0 -15px 28px #06160070, 0 22px 55px #0008; }
.folder-glass::before { content: ""; position: absolute; top: -20%; left: -1px; width: 41%; height: 21%; border: 1px solid #dbffc4a0; border-bottom: none; border-radius: 1rem 2.2rem 0 0; background: #88ab4570; backdrop-filter: blur(16px); }
.folder-glass::after { content: ""; position: absolute; inset: 1rem; border-bottom: 1px solid #d8ff972e; border-right: 1px solid #d8ff972e; border-radius: 1rem; }
.folder-brand { position: absolute; left: 7%; right: 7%; bottom: 19%; display: flex; align-items: center; gap: .8rem; color: #f3ffe6; font-size: clamp(.8rem,2vw,1.4rem); letter-spacing: -.04em; }
.folder-brand small { display: block; font-size: .62rem; letter-spacing: .16em; opacity: .7; margin-top: .25rem; }
.folder-symbol { display: grid; place-items: center; width: 1.7em; aspect-ratio: 1; border: 1px solid #d5ffafa0; border-radius: 50%; }
.folder-count { margin-left: auto; padding: .3rem .85rem; border-radius: 99px; color: #baff69; background: #102006; font-size: .85rem; letter-spacing: .04em; }
.folder-deck { display: block; position: absolute; inset: 0; }
.folder-deck .project { position: absolute; width: 35%; top: 12%; left: 32.5%; opacity: 0; pointer-events: none; transform: translateY(40%) scale(.8); transition: transform 850ms var(--ease), opacity 600ms, filter 600ms; z-index: 2; }
.folder-deck .project figure { position: relative; }
.folder-deck .project img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; background: #061009; border-radius: .7rem; clip-path: none; filter: none; box-shadow: 0 15px 36px #0008; border: 1px solid #ffffff3a; transform: none; }
.folder-deck .project figcaption { display: none; }
.creative-vault:not(.vault-ready) .project:nth-child(1), .folder-deck .project[data-slot="active"] { opacity: 1; transform: translateY(-7%) rotate(2deg); z-index: 8; pointer-events: auto; }
.creative-vault:not(.vault-ready) .project:nth-child(2), .folder-deck .project[data-slot="next"] { opacity: .85; transform: translate(67%, 9%) rotate(16deg) scale(.87); z-index: 5; }
.creative-vault:not(.vault-ready) .project:nth-child(3), .folder-deck .project[data-slot="prev"] { opacity: .85; transform: translate(-67%, 9%) rotate(-17deg) scale(.87); z-index: 4; }
.vault-ready .project[data-slot="off"] { opacity: 0; transform: translateY(50%) scale(.7); z-index: 0; pointer-events: none; }
.vault-ready .project[data-slot="next"], .vault-ready .project[data-slot="prev"] { pointer-events: none; }
.folder-deck button { display: block; width: 100%; padding: 0; border: 0; border-radius: .7rem; background: none; cursor: zoom-in; }
.folder-deck button:focus-visible { outline-offset: 7px; }
.vault-caption { text-align: center; padding: 1.25rem 1rem .5rem; min-height: 9rem; }
.vault-category { color: var(--green); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; }
.vault-title { margin: .3rem 0; font-size: clamp(1.5rem,3vw,2.2rem); letter-spacing: -.045em; line-height: 1.15; }
.vault-type { margin: .25rem 0; color: var(--muted); font-size: .875rem; }
.vault-caption.is-changing { animation: caption-enter .6s var(--ease); }
@keyframes caption-enter { from { opacity: .3; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.vault-controls { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .7rem; }
.vault-controls button { min-width: 44px; min-height: 44px; padding: .55rem .8rem; background: #132018; color: var(--ink); border: 1px solid #c3ff942e; border-radius: .5rem; cursor: pointer; transition: background .2s, border-color .2s; }
.vault-controls button:hover { background: #244126; border-color: var(--green); }
.vault-toggle { min-width: 7.7rem !important; font-size: .875rem; }
.vault-position { width: 4.6rem; text-align: center; color: var(--muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
.vault-progress { height: 2px; max-width: 17rem; margin: .5rem auto 1.8rem; background: #e2ffca16; overflow: hidden; }
.vault-progress span { display: block; width: 100%; height: 100%; background: var(--green); transform: scaleX(0); transform-origin: left; }
.vault-thumbnails { display: flex; gap: .65rem; max-width: calc(100% - 2rem); width: 43rem; margin: auto; overflow-x: auto; scrollbar-width: thin; padding: .6rem .3rem 1rem; overscroll-behavior-x: contain; }
.vault-thumb { flex: 0 0 4rem; height: 5.2rem; border: 1px solid #ffffff20; border-radius: .45rem; padding: .15rem; background: #101c13; opacity: .6; cursor: pointer; transition: opacity .25s, border-color .25s, transform .3s; }
.vault-thumb img { width: 100%; height: 100%; object-fit: contain; border-radius: .25rem; }
.vault-thumb[aria-pressed="true"] { opacity: 1; border-color: var(--green); transform: translateY(-4px); }
.vault-thumb:hover { opacity: 1; }
.portfolio-note { margin: 1.25rem auto 0; text-align: center; font-size: .875rem; }
.art-dialog { position: fixed; color: var(--ink); background: #09110ef5; border: 1px solid #7dff4f55; border-radius: 1rem; width: min(94vw, 1000px); max-height: 94dvh; padding: 1rem; overflow: auto; }
.art-dialog::backdrop { background: #010804e8; backdrop-filter: blur(10px); }
.art-dialog header { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 0 0 1rem; }
.art-dialog h2 { font-size: 1.1rem; margin: 0; }
.art-dialog button { background: #1c3122; border: 1px solid #b5ff8f50; color: white; padding: .6rem 1rem; min-height: 44px; border-radius: .5rem; cursor: pointer; flex-shrink: 0; }
.art-dialog img { max-height: 77dvh; max-width: 100%; width: auto; height: auto; margin: auto; object-fit: contain; }
@media (min-width: 1100px) { .hero-visual { width: min(100%,27rem); } }
@media (max-width: 840px) { .hero-frame img { max-height: 35rem; } .hero h1 { font-size: clamp(3.2rem,12vw,6rem); } }
@media (max-width: 600px) {
  .creative-vault { padding-top: .6rem; border-radius: 1rem; }
  .vault-stage { aspect-ratio: 1.02; }
  .vault-label { font-size: .65rem; top: 2%; }
  .folder-deck .project { width: 44%; left: 28%; top: 17%; }
  .folder-deck .project[data-slot="next"], .creative-vault:not(.vault-ready) .project:nth-child(2) { transform: translate(48%,11%) rotate(15deg) scale(.85); }
  .folder-deck .project[data-slot="prev"], .creative-vault:not(.vault-ready) .project:nth-child(3) { transform: translate(-48%,11%) rotate(-15deg) scale(.85); }
  .folder-deck .project[data-slot="active"] { transform: translateY(-7%) rotate(2deg); }
  .vault-ready .project[data-slot="off"] { transform: translateY(45%) scale(.7); opacity: 0; }
  .folder-front { width: 84%; left: 8%; height: 29%; bottom: 2%; }
  .folder-back { width: 77%; left: 11.5%; bottom: 3%; }
  .folder-brand { gap: .4rem; bottom: 17%; }
  .folder-brand small { font-size: .52rem; }
  .folder-count { font-size: .75rem; padding: .2rem .5rem; }
  .vault-caption { min-height: 8rem; padding-top: 1.3rem; }
  .vault-controls { gap: .4rem; }
  .vault-toggle { min-width: 6.5rem !important; }
  .vault-thumbnails { gap: .5rem; }
  .folder-glass { backdrop-filter: blur(9px); }
}
@media (hover: none), (pointer: coarse) { .cursor-halo { display: none; } }
.hero-frame, .hero-orbit, .cta-orb { translate: 0 var(--parallax-y, 0px); }
.folder-deck { translate: 0 var(--parallax-y, 0px); }
.folder-deck .project img { scale: var(--scroll-scale, 1); }
.magnetic { translate: var(--magnet-x, 0px) var(--magnet-y, 0px); transition: translate .3s var(--ease), scale .3s var(--ease), box-shadow .3s; }
.magnetic span[aria-hidden] { display: inline-block; transition: transform .35s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .magnetic:hover { scale: 1.025; box-shadow: 0 10px 35px #7dff4f25; }
  .magnetic:hover span[aria-hidden] { transform: translate(3px,-3px) rotate(6deg); }
}
.final-cta { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem,5vw,5rem); align-items: center; }
.closing-portrait { position: relative; margin: 0; overflow: hidden; border-radius: 1rem; border: 1px solid #a8ff7f35; }
.closing-portrait img { width: 100%; height: auto; display: block; translate: 0 var(--parallax-y,0px); scale: 1.03; }
.closing-portrait figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem 1.5rem 1.5rem; background: linear-gradient(transparent,#041007); font-size: 1.2rem; }
.closing-portrait figcaption span { display: block; font-size: .75rem; color: var(--green); margin-top: .4rem; }
.final-cta .cta-content { text-align: left; }
.final-cta h2 { font-size: clamp(2.8rem,5vw,5rem); }
.instagram-link { display: block; margin-top: 1.4rem; color: var(--green); font-size: .85rem; }
@media(max-width: 760px) { .final-cta { grid-template-columns: 1fr; } .closing-portrait { max-width: 340px; width: 100%; margin: auto; } }
@media (prefers-reduced-motion: reduce) {
  .reveal.reveal-pending { opacity: 1; transform: none; }
  .magnetic, .hero-frame, .hero-orbit, .cta-orb, .folder-deck, .closing-portrait img { translate: none !important; scale: 1 !important; }
  .folder-deck .project img { scale: 1; }
  .magnetic:hover span[aria-hidden] { transform: none; }
  .type-ready .type-word, .reveal.is-visible, .hero::after, .vault-caption.is-changing { animation: none !important; }
  .folder-deck .project { transition: none; }
  .cursor-halo { display: none; }
  .button::after, .nav-cta::after { display: none; }
}
/* Studio portraits: transparent silhouettes with light belonging to the page. */
.hero-visual { isolation: isolate; }
.hero-frame { overflow: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.hero-frame img { display: block; mask-image: linear-gradient(#000 72%,transparent 100%); }
.hero-frame:hover img { transform: none; }
.hero-visual::before,.closing-portrait::before { content:""; position:absolute; z-index:0; inset:6% -8% 5%; pointer-events:none; background:radial-gradient(ellipse at 48% 40%,#81ffae50 0%,#26bc6530 25%,#0d6c3820 43%,transparent 66%); filter:blur(23px); }
.hero-visual::after,.closing-portrait::after { content:""; position:absolute; z-index:0; inset:-4% -12% -2%; pointer-events:none; background-image:linear-gradient(#9affe51a 1px,transparent 1px),linear-gradient(90deg,#9affe51a 1px,transparent 1px); background-size:38px 38px; mask-image:radial-gradient(ellipse at 50% 46%,#000 16%,#0009 45%,transparent 72%); }
.hero-frame-label { background:none; bottom:0; padding:1rem .5rem; }
.hero-orbit { display:none; }
.closing-portrait { isolation:isolate; overflow:visible; border:0; border-radius:0; background:transparent; }
.closing-portrait img { position:relative; z-index:1; scale:1; mask-image:linear-gradient(#000 65%,transparent 100%); }
.closing-portrait figcaption { z-index:2; background:none; padding:1.2rem; }
.hero-frame,.closing-portrait img { transition:translate .7s cubic-bezier(.22,1,.36,1); }
.button,.nav-cta,.text-link { transition:background-color .35s,color .35s,box-shadow .4s,translate .35s cubic-bezier(.22,1,.36,1),scale .35s; }
@media(prefers-reduced-motion:reduce){.hero-frame,.closing-portrait img{transition:none}}
.hero-frame img,.closing-portrait img {
  /* Feather only the outer silhouette; keep the face sharp and fully visible. */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 62%,#000d 74%,transparent 98%),linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 62%,#000d 74%,transparent 98%),linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%);
  mask-composite:intersect;
  mask-repeat:no-repeat;
}
.hero-visual::before,.closing-portrait::before { inset:0 -15% -3%; background:radial-gradient(ellipse at 48% 43%,#81ffae55 0%,#26bc6533 27%,#0d6c381a 48%,transparent 70%); }
@media(max-width:760px){.hero-visual::after,.closing-portrait::after{inset:0 -5%;background-size:30px 30px}}
.expertise-inner{padding-block:clamp(4rem,7vw,6rem)}
.expertise-grid{align-items:center;gap:clamp(2rem,5vw,5rem)}
.gospel-preview{position:relative;display:grid;grid-template-columns:1.3fr .7fr;gap:12px;margin-top:30px;padding:15px;border:1px solid #9bff952b;border-radius:18px;background:radial-gradient(ellipse at 25% 5%,#7dff4f15,transparent 70%)}
.gospel-preview img{width:100%;height:190px;object-fit:cover;border-radius:10px;display:block}
.gospel-preview a{grid-column:1/-1;display:flex;justify-content:space-between;color:#cfdbd0;font-size:12px;padding:4px}
.gospel-preview a:hover{color:var(--green)}
.benefits-grid{gap:clamp(2rem,5vw,5rem);align-items:start}
.direction-panel{margin-top:32px;padding:26px;border:1px solid #a0ff8526;border-radius:18px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 80% 30%,#6aff7020,transparent 65%),linear-gradient(#9aff8b07 1px,transparent 1px),linear-gradient(90deg,#9aff8b07 1px,transparent 1px);background-size:auto,28px 28px,28px 28px}
.direction-label{font-size:11px;color:#adbeaf;letter-spacing:.06em;text-transform:uppercase}
.direction-core{display:flex;justify-content:space-between;align-items:center;font-size:66px;font-weight:800;color:var(--green);letter-spacing:-.08em;margin:12px 0}.direction-core span{font-size:45px;font-weight:400;letter-spacing:0}
.direction-panel p{color:#aebdaf;line-height:1.7;margin:8px 0 24px;font-size:15px}.direction-panel strong{color:#e4ede4;font-weight:500}.direction-panel .text-link{font-size:13px}
.instagram-link{display:inline-flex;align-items:center;gap:10px}.instagram-link svg{flex-shrink:0}
.cursor-halo::after{content:"";position:absolute;inset:-95px;border-radius:50%;background:radial-gradient(circle,#a4ff7b13,transparent 65%);pointer-events:none}.cursor-halo{transition:opacity .3s,width .3s,height .3s,background .3s,transform .12s ease-out}
@media(max-width:760px){.gospel-preview img{height:160px}.direction-panel{padding:22px}.direction-core{font-size:48px}.instagram-link{font-size:.75rem;gap:7px}}
@media(prefers-reduced-motion:reduce){.cursor-halo{display:none}.direction-panel{animation:none}}