/* Studio, services and work browsing — October 2026. */
.studio-about-intro{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px)}
.studio-about h1{font-size:clamp(56px,8vw,118px)}
.about-image-frame{border-radius:24px;width:100%;margin:0}
.studio-image-open{display:block;width:100%;border:0;padding:0;background:none;cursor:zoom-in;color:white;position:relative}
.about-image-frame img{aspect-ratio:.95;object-fit:cover}
.about-image-frame figcaption{pointer-events:none}
.studio-enlarge{position:absolute;top:20px;right:20px;width:44px;height:44px;display:grid;place-items:center;border:1px solid #ffffff70;border-radius:50%;background:#ffffff25;backdrop-filter:blur(16px);font-size:24px}
.studio-image-open:focus-visible{outline:3px solid #b3cf52;outline-offset:-6px}
.services-carousel{margin-top:48px;padding:18px;border-radius:28px;background:radial-gradient(ellipse at 12% 10%,#dfe5d4aa,transparent 55%),radial-gradient(ellipse at 92% 90%,#e2dfd7aa,transparent 55%),#eeeee980;border:1px solid #fff;box-shadow:0 20px 55px #252b2210}
.services-grid{display:flex;gap:18px;margin:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 4px 16px;cursor:grab;overscroll-behavior-x:contain}
.services-grid::-webkit-scrollbar{display:none}
.services-grid.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.services-grid .service-card{flex:0 0 calc((100% - 18px)/2);padding:28px;box-sizing:border-box;border:1px solid #ffffffd9;border-radius:20px;background:#ffffff8c;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 5px 20px #28311e06;scroll-snap-align:start}
.service-card h3{min-height:2.3em;margin-top:44px}
.service-card p{min-height:4.8em}
.services-controls{display:flex;align-items:center;gap:24px;padding:6px 6px 0;font-size:12px;letter-spacing:.03em}
.services-controls>span{white-space:nowrap;color:#5a6252}
.services-range{flex:1;min-width:40px;accent-color:#444d37;cursor:ew-resize}
.services-controls>div{display:flex;gap:8px}
.services-controls button{height:40px;width:40px;border-radius:50%;border:1px solid #fff;background:#ffffffa6;color:#252922;font-size:20px;cursor:pointer}
.services-controls button:disabled{opacity:.3;cursor:default}
.work-pagination{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:24px 0 36px;padding:16px 0;border-top:1px solid var(--line);font-size:13px}
.work-pagination>div{display:flex;gap:6px;flex-wrap:wrap}
.work-pagination a{display:grid;place-items:center;min-width:42px;height:42px;border-radius:50%;border:1px solid transparent}
.work-pagination a:hover{border-color:#aaa}.work-pagination a[aria-current]{background:#252820;color:#fff}
.page-status{color:var(--muted);white-space:nowrap}
.project .cover.she-cover img{object-fit:cover;object-position:center top;transform:scale(1.25);transform-origin:50% 22%;width:100%;height:100%}
.project:hover .cover.she-cover img{transform:scale(1.285)}
.project .cover.she-cover{background:#fff}
.studio-dialog{padding:0;border:1px solid #ffffff80;border-radius:24px;color:#20231d;background:#f9faf5f2;box-shadow:0 40px 100px #0004;max-width:min(92vw,620px);max-height:92dvh;overflow:auto;backdrop-filter:blur(24px)}
.studio-dialog::backdrop{background:#1820189e;backdrop-filter:blur(12px)}
.studio-dialog[open]{animation:studio-pop .25s ease-out}
.studio-dialog.image-dialog{max-width:92vw;background:#171a17}
.studio-dialog.image-dialog img{display:block;max-height:88dvh;max-width:90vw;width:auto;height:auto;object-fit:contain}
.dialog-close{position:absolute;right:14px;top:14px;width:42px;height:42px;border-radius:50%;background:#fafff1db;backdrop-filter:blur(12px);border:1px solid #fff;color:#222;font-size:24px;cursor:pointer;z-index:1}
.email-dialog-content{padding:56px 32px 32px}.email-dialog-content h2{font-size:32px;font-weight:400;letter-spacing:-.04em;margin:0 0 12px}.email-address{overflow-wrap:anywhere;color:#555}.email-actions{display:grid;gap:10px;margin-top:28px}.email-actions a,.email-actions button{font:inherit;text-align:left;border:1px solid #d4d9cc;border-radius:12px;padding:16px;background:#fff;color:#20231d;cursor:pointer}.email-actions a:first-child{background:#252820;color:#fff}
.studio-dialog :focus-visible,.services-carousel :focus-visible,.work-pagination :focus-visible{outline:2px solid #687d41;outline-offset:3px}
@keyframes studio-pop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:800px){.studio-about-intro{grid-template-columns:1fr}.about-image-frame{width:100%;max-width:none}.about-image-frame img{aspect-ratio:1.25}.services-grid .service-card{flex-basis:86%}.service-card h3{margin-top:30px}}
@media(max-width:600px){.services-carousel{padding:10px;border-radius:22px}.services-grid{gap:12px}.services-grid .service-card{padding:24px 20px}.services-controls{gap:12px}.services-controls>span{font-size:10px}.services-controls button{width:36px;height:36px}.work-pagination{flex-wrap:wrap;margin-top:18px}.work-pagination a{min-width:36px;height:36px}.email-dialog-content{padding:58px 22px 24px}}
@media(prefers-reduced-motion:reduce){.studio-dialog[open]{animation:none}}

/* About page: quieter editorial hierarchy and a more considered image balance. */
.studio-about{padding:clamp(72px,8vw,128px) 7vw 84px}
.studio-about-intro{width:100%;max-width:1600px;margin:0 auto;grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr);gap:clamp(48px,6vw,112px);align-items:center}
.studio-about-intro-copy{max-width:820px}
.studio-about .eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#77786f}
.studio-about h1{font-size:clamp(58px,7.2vw,112px);line-height:.88;letter-spacing:-.09em;margin:36px 0 36px;font-weight:400}
.studio-about-copy{max-width:660px}
.studio-about-copy p{font-size:clamp(19px,1.55vw,24px);line-height:1.55;letter-spacing:-.025em;margin:0 0 18px}
.studio-about-copy p:first-child{font-size:clamp(24px,2.1vw,32px);line-height:1.38;letter-spacing:-.04em}
.studio-about-copy p+ p{max-width:580px;color:#65655f}
.studio-about-link{margin-top:22px;padding-bottom:7px;font-size:13px;letter-spacing:.015em}
.about-image-frame{width:100%;max-width:650px;justify-self:end;border-radius:16px;box-shadow:0 14px 40px rgba(31,31,29,.07)}
.about-image-frame img{aspect-ratio:1.22;object-position:center;}
.about-image-frame figcaption{padding:40px 18px 15px;font-size:11px;letter-spacing:.025em}
.studio-enlarge{top:16px;right:16px;width:38px;height:38px;font-size:20px}
.studio-about-details{width:100%;max-width:1600px;margin:clamp(62px,7vw,100px) auto 0;grid-template-columns:1.2fr .8fr 1fr;gap:clamp(24px,4vw,64px);padding-top:18px}
.studio-about-details span{font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.studio-about-details p{font-size:14px;line-height:1.75;margin-top:13px}
@media(max-width:800px){.studio-about-intro{grid-template-columns:1fr;gap:38px}.studio-about-intro-copy{max-width:720px}.about-image-frame{width:min(100%,680px);max-width:680px;justify-self:start}.about-image-frame img{aspect-ratio:1.28}}
@media(max-width:600px){.studio-about{padding:56px 22px 58px}.studio-about h1{font-size:clamp(54px,13vw,72px);margin:28px 0 26px}.studio-about-copy p:first-child{font-size:24px}.studio-about-copy p+ p{font-size:17px}.studio-about-details{grid-template-columns:1fr;gap:20px;margin-top:48px}.studio-about-details p{margin-top:7px}.about-image-frame{width:100%}.about-image-frame img{aspect-ratio:1.12}}

/* Show three service projects at once on wide screens, keeping their artwork legible. */
@media(min-width:1001px){.studio-services-edit .service-card{flex-basis:30%}.service-art{aspect-ratio:1.12}}
@media(min-width:701px) and (max-width:1000px){.studio-services-edit .service-card{flex-basis:42%}}

/* Give the services carousel a four-up overview on wide screens. */
@media(min-width:1250px){.studio-services-edit .services-grid{gap:14px}.studio-services-edit .services-grid .service-card{flex:0 0 calc((100% - 42px)/4)}.studio-services-edit .services-grid .service-art{aspect-ratio:1.08}}
@media(min-width:1001px) and (max-width:1249px){.studio-services-edit .services-grid .service-card{flex-basis:31%}}


/* Editorial navigation: larger, quieter labels with a restrained hover cue. */
.header .studio-nav{gap:clamp(16px,2.25vw,34px);font-size:clamp(18px,2vw,27px);letter-spacing:-.055em}
.header .studio-nav a{padding:10px 0 9px;color:#aaa99f;line-height:1.05;transition:color .24s ease,transform .32s cubic-bezier(.2,.7,.2,1)}
.header .studio-nav a::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.header .studio-nav a:hover,.header .studio-nav a:focus-visible{color:#292a25;transform:translateY(-2px)}
.header .studio-nav a:hover::after,.header .studio-nav a:focus-visible::after,.header .studio-nav a[aria-current="page"]::after{transform:scaleX(1)}
.header .studio-nav a[aria-current="page"]{color:#596143;opacity:1}
@media(max-width:600px){.header .studio-nav{gap:clamp(8px,2.2vw,13px);font-size:clamp(12px,3.5vw,15px)}.header .studio-nav a{padding:9px 0 8px}}
@media(prefers-reduced-motion:reduce){.header .studio-nav a,.header .studio-nav a::after{transition:none}.header .studio-nav a:hover,.header .studio-nav a:focus-visible{transform:none}}
