/* EK61 local preview — a consistent editorial control system. */
:root{--button-ivory:#f2eee6;--button-ink:#191817;--button-accent:#762b3a;--button-line:rgba(242,238,230,.3);--button-ease:cubic-bezier(.22,.61,.36,1)}
.pill,.hero-cta,.text-link,.collage-link,.work .filters button,.menu-button,.close,.scroll-link,.back-top,.hero-control button,#gallery-controls button{transition:background-color .25s,color .25s,border-color .25s,box-shadow .25s,transform .3s var(--button-ease)}
.pill,.pill.dark,.hero-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:56px;padding:8px 9px 8px 24px;border:1px solid var(--button-ivory);border-radius:999px;background:var(--button-ivory);color:var(--button-ink);font-size:13px;font-weight:600;line-height:1.35;letter-spacing:.015em;box-shadow:0 3px 15px #00000012;text-decoration:none}
.pill>span,.hero-cta>span,.text-link>span{display:inline-grid;place-items:center;flex:0 0 36px;width:36px;height:36px;margin:0;border-radius:50%;background:var(--button-ink);color:var(--button-ivory);font-size:19px;font-weight:400;line-height:1;transition:background-color .25s,transform .3s var(--button-ease)}
.hero-cta{min-width:220px;margin-top:10px}
.pill:hover,.pill.dark:hover,.hero-cta:hover{background:#fffaf1;border-color:#fffaf1;color:var(--button-ink);transform:translateY(-2px);box-shadow:0 8px 28px #0003}
.pill:hover>span,.hero-cta:hover>span{background:var(--button-accent);transform:rotate(6deg)}
.text-link,.collage-link{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:52px;padding:12px 21px;border:1px solid var(--button-line);border-radius:999px;color:var(--button-ivory);background:#ffffff04;font-family:inherit;font-size:13px;font-weight:500;letter-spacing:.025em;line-height:1.5;text-transform:none}
.text-link>span{width:28px;height:28px;flex-basis:28px;background:#ffffff10;color:var(--button-ivory);font-size:17px}
.text-link:hover,.collage-link:hover{color:#fffaf1;background:#ffffff0e;border-color:#f2eee6a6;transform:translateY(-2px)}
.scroll-photo-title .text-link{color:var(--button-ivory)}
.package .text-link{margin-top:8px;min-width:190px}
.business .retainer .text-link{background:var(--button-ivory);border-color:var(--button-ivory);color:var(--button-ink)}
.business .retainer .text-link:hover{background:#fffaf1;color:var(--button-ink)}
.menu-button,.close,.scroll-link,.back-top,#gallery-controls button{display:grid;place-items:center;flex-shrink:0;width:50px;height:50px;border:1px solid var(--button-line);border-radius:50%;background:#151515b3;color:var(--button-ivory);backdrop-filter:blur(12px)}
.menu-button{display:flex;gap:6px}
.menu-button span{background:var(--button-ivory);width:18px}
.menu-button:hover,.close:hover,.scroll-link:hover,.back-top:hover,#gallery-controls button:hover{background:var(--button-ivory);border-color:var(--button-ivory);color:var(--button-ink);transform:translateY(-2px)}
.menu-button:hover span{background:var(--button-ink);width:20px}
.close{font-size:27px}
.hero-control button{min-height:46px;padding:10px 19px;border:1px solid var(--button-line);background:#14141480;color:var(--button-ivory);font-size:12px;letter-spacing:.025em;backdrop-filter:blur(12px)}
.hero-control button:hover{background:#242424;border-color:#f2eee6a6}
.work .filters{gap:8px;margin:26px 0 32px;padding:0 0 24px;border-color:#ffffff16}
.work .filters button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:10px 19px;border:1px solid transparent;border-radius:999px;background:transparent;color:#b7b4ad;font-size:12px;line-height:1.4;letter-spacing:.015em}
.work .filters button:hover{color:var(--button-ivory);background:#ffffff09;border-color:#ffffff30}
.work .filters button.active{background:var(--button-ivory);color:var(--button-ink);border-color:var(--button-ivory)}
.work .filters button.active:after{display:none}
.work .filters sup{font-size:9px;margin-left:0;opacity:.65}
.work-grid .view-project{left:16px;right:16px;bottom:20px;display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 12px;border:1px solid #ffffff50;border-radius:999px;background:#10101060;backdrop-filter:blur(12px);color:#fff;font-family:inherit;font-size:11px;font-weight:500;letter-spacing:.035em;text-transform:none;transition:background-color .25s,color .25s,border-color .25s}
.work-grid .project:hover .view-project,.work-grid .project:focus-visible .view-project{background:var(--button-ivory);border-color:var(--button-ivory);color:var(--button-ink)}
#play-reel{font-size:12px;font-weight:500;letter-spacing:.1em;gap:22px}
#play-reel span{width:84px;height:84px;border:1px solid #fff7;background:#f2eee61a;backdrop-filter:blur(14px);color:var(--button-ivory);font-size:29px;box-shadow:0 0 0 9px #ffffff08;transition:background-color .25s,color .25s,transform .3s}
#play-reel:hover span{background:var(--button-ivory);color:var(--button-ink);transform:scale(1.04)}
.pill:active,.hero-cta:active,.text-link:active,.collage-link:active,.menu-button:active,.close:active{transform:translateY(0) scale(.98)}
button:focus-visible,a:focus-visible{outline:2px solid var(--button-ivory);outline-offset:5px}
.pill:disabled{opacity:.5;transform:none;box-shadow:none;cursor:wait}
@media(max-width:700px){
 header .pill{max-width:none;min-height:44px;padding:5px 6px 5px 14px;gap:9px;font-size:11px}
 header .pill>span{width:29px;height:29px;flex-basis:29px;font-size:16px}
 .menu-button{width:44px;height:44px}
 .hero-cta{min-height:54px;min-width:215px;font-size:13px}
 .hero-control button{min-height:44px}
 .scroll-link,.back-top{width:44px;height:44px}
 .work .filters{gap:7px}
 .work .filters button{padding:10px 14px;font-size:12px}
 .work-grid .view-project{left:20px;right:20px;font-size:12px}
 .contact .pill{min-height:56px}
 .collage-link{margin-top:40px;font-size:12px;letter-spacing:.035em}
}
@media(prefers-reduced-motion:reduce){.pill,.hero-cta,.text-link,.collage-link,.menu-button,.close,.scroll-link,.back-top,.pill>span,.hero-cta>span,#play-reel span{transition:none;transform:none!important}}
@media(max-width:700px){header .logo-brand{position:relative;left:auto;transform:none;margin:0 auto;flex-shrink:0}header .pill{margin-left:0;flex-shrink:0}}

.direction-icon{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.18em;flex-shrink:0;pointer-events:none}.scroll-link .direction-icon,.back-top .direction-icon,#gallery-controls .direction-icon{width:22px;height:22px}
