/* Case-7-inspired front-of-house direction. Admin stays in a-refined.css. */
.direction-a {
  --studio-bg: #090a08;
  --studio-panel: #11120f;
  --studio-ink: #f7f7f4;
  --studio-muted: #9c9f96;
  --studio-line: rgba(244, 244, 239, .17);
  --studio-acid: #caff20;
}

.direction-a { --acid: var(--studio-acid); }

.footer-switcher { display: flex; align-items: center; gap: 4px; padding-left: 12px; border-left: 1px solid #41443d; }
.footer-switcher span { margin-right: 4px; color: #92958c; font-size: 10px; }
.footer-switcher button { width: 30px; min-height: 30px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #c9cbc3; font-size: 11px; font-weight: 700; }
.footer-switcher button:hover, .footer-switcher button.is-active { background: var(--acid); color: var(--ink); }

.studio-front { background: var(--studio-bg); color: var(--studio-ink); }
.studio-front .shell { width: min(1660px, calc(100% - 96px)); }
.studio-front .studio-header { position: sticky; z-index: 50; top: 54px; min-height: 76px; background: rgba(9, 10, 8, .84); color: var(--studio-ink); border-bottom: 1px solid var(--studio-line); backdrop-filter: saturate(140%) blur(18px); }
.studio-front .studio-header .wordmark { font-size: 28px; }
.brand-lockup { display: inline-flex; align-items: baseline; gap: .26em; font-family: "InkWhisper Display", sans-serif; font-weight: 800; letter-spacing: 0; }
.brand-name b, .hero-word b, .footer-ink-logo b { color: var(--studio-acid); font: inherit; }
.brand-descriptor { color: #92958c; font-family: "InkWhisper UI", sans-serif; font-size: .48em; font-weight: 400; }
.studio-front .studio-header .site-nav a { color: #c9cbc3; transition: color .2s ease; }
.studio-front .studio-header .site-nav a:hover { color: #fff; }
.studio-front .studio-header .site-nav .contact-link { background: var(--studio-ink); color: var(--studio-bg); }
.studio-front .studio-header .site-nav .contact-link:hover { background: var(--acid); color: var(--ink); }

.studio-hero { position: relative; height: clamp(570px, 72vh, 760px); overflow: hidden; border-radius: 0 0 8px 8px; isolation: isolate; }
.studio-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.06) 40%, rgba(0,0,0,.76) 100%); }
.hero-media { position: absolute; z-index: -2; inset: 0; overflow: hidden; background: #151714; }
.hero-media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 44%; filter: saturate(.78) contrast(1.04) brightness(.76); transform: scale(1.025); transition: filter .7s ease, transform 1.2s cubic-bezier(.16,1,.3,1); }
.studio-hero:hover .hero-media img { filter: saturate(1) contrast(1.02) brightness(.82); transform: scale(1); }
.hero-topline { position: absolute; inset: 28px 32px auto; display: flex; justify-content: space-between; color: rgba(255,255,255,.76); font-size: 11px; }
.hero-lockup { position: absolute; inset: auto 32px 32px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 60px; align-items: end; }
.hero-lockup h1 { margin: 0; font-family: "InkWhisper Display", sans-serif; font-size: clamp(64px, 5.2vw, 96px); line-height: .72; letter-spacing: 0; }
.hero-lockup h1 > span { display: grid; transform-origin: left bottom; }
.hero-word { gap: 0; padding-bottom: .1em; }
.hero-line { display: block; line-height: .78; white-space: nowrap; }
.hero-lockup p { position: absolute; top: 8px; right: 0; max-width: 34ch; margin: 0; font-size: clamp(15px, 1.25vw, 20px); line-height: 1.72; }
.hero-scroll { position: absolute; right: 32px; top: 78px; min-height: 42px; padding: 0 16px; display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,.46); border-radius: 999px; color: #fff; font-size: 11px; transition: background .2s ease, color .2s ease; }
.hero-scroll:hover { background: #fff; color: #090a08; }

.studio-work { padding: 112px 0 132px; }
.studio-section-head { margin-bottom: 34px; padding-bottom: 24px; display: flex; justify-content: space-between; align-items: end; gap: 36px; border-bottom: 1px solid var(--studio-line); }
.studio-section-head h2 { margin: 0; font-size: clamp(38px, 5vw, 68px); line-height: 1; }
.studio-section-head > div > span { display: block; margin-top: 10px; color: var(--studio-muted); font-size: 11px; }
.work-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.work-filters button { min-height: 40px; padding: 0 15px; border: 1px solid var(--studio-line); border-radius: 999px; background: transparent; color: var(--studio-muted); font-size: 12px; }
.work-filters button:hover, .work-filters button.is-active { border-color: var(--acid); background: var(--acid); color: var(--ink); }
.studio-project-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 52px 22px; }
.studio-project-card { grid-column: span 6; min-width: 0; color: var(--studio-ink); transition: opacity .32s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.studio-project-card.is-featured { grid-column: span 8; }
.studio-project-card.is-featured + .studio-project-card { grid-column: span 4; }
.studio-project-card.is-wide { grid-column: span 7; }
.studio-project-card.is-wide + .studio-project-card { grid-column: span 5; }
.studio-project-grid:not([data-active-filter="all"]):has(.studio-project-card:not(.is-filtered-out)) .studio-project-card:not(.is-filtered-out) { grid-column: span 6; }
.studio-project-card .cover { aspect-ratio: 1.35 / 1; overflow: hidden; border-radius: 8px; background: #171915; }
.studio-project-card .cover img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.64) brightness(.87); transform: scale(1.01); transition: filter .55s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.studio-project-card .project-caption { padding-top: 15px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 20px; border-top: 1px solid transparent; }
.project-caption span { color: var(--studio-muted); font-size: 11px; }
.project-caption h3 { margin: 5px 0 0; font-size: clamp(17px, 1.3vw, 22px); line-height: 1.35; }
.project-caption b { color: var(--acid); font-size: 11px; font-variant-numeric: tabular-nums; }
.studio-project-card:hover { transform: translateY(-3px); }
.studio-project-card:hover .cover img { filter: saturate(1) brightness(1); transform: scale(1.025); }
.studio-project-card.is-filtered-out { display: none; }
.filter-empty { margin: 36px 0 0; color: var(--studio-muted); }

.studio-statement { padding: 116px 0; background: var(--studio-ink); color: var(--studio-bg); }
.statement-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, .55fr); gap: clamp(60px, 10vw, 180px); align-items: end; }
.statement-layout h2 { max-width: 18ch; margin: 0; font-size: clamp(42px, 5.8vw, 82px); line-height: 1.08; }
.statement-layout p { max-width: 42ch; margin: 0; color: #585c54; font-size: 16px; line-height: 1.9; }
.statement-layout a { margin-top: 28px; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 1px solid #11120f; font-weight: 700; }

.studio-services { padding: 116px 0; }
.studio-services > header { margin-bottom: 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; }
.studio-services h2, .studio-people h2 { margin: 0; font-size: clamp(38px, 4.8vw, 68px); line-height: 1; }
.studio-services header p, .people-heading p { max-width: 36ch; margin: 0; color: var(--studio-muted); }
.service-rows { border-top: 1px solid var(--studio-line); }
.service-rows article { min-height: 112px; display: grid; grid-template-columns: .7fr 1.5fr auto; gap: 30px; align-items: center; border-bottom: 1px solid var(--studio-line); }
.service-rows article span { font-size: clamp(22px, 2.4vw, 36px); font-weight: 700; }
.service-rows article strong { color: #d7d8d2; font-size: 14px; font-weight: 400; }
.service-rows article b { color: var(--studio-muted); font-size: 10px; }

.studio-people { padding: 48px 0 124px; }
.people-heading { margin-bottom: 46px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; }
.people-list { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr; gap: 22px; }
.people-list article { min-height: 250px; padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--studio-line); border-radius: 8px; background: #0e0f0d; }
.people-list article span { margin-bottom: auto; color: var(--acid); font-size: 11px; }
.people-list article strong { font-size: 19px; }
.people-list article p { margin: 12px 0 0; color: var(--studio-muted); font-size: 12px; line-height: 1.75; }

.studio-footer { padding: 92px 0 30px; background: #10110f; color: var(--studio-ink); border-top: 1px solid var(--studio-line); }
.footer-a-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr); gap: clamp(50px, 8vw, 130px); }
.footer-capabilities { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--studio-line); border-left: 1px solid var(--studio-line); }
.footer-capabilities article { min-height: 190px; padding: 26px; border-right: 1px solid var(--studio-line); border-bottom: 1px solid var(--studio-line); }
.footer-capabilities h3, .footer-clients h3 { margin: 0; font-family: "InkWhisper Display", sans-serif; font-size: 26px; }
.footer-capabilities p { margin: 44px 0 0; color: #777b72; font-size: 12px; line-height: 1.8; }
.footer-clients { padding-top: 26px; border-top: 1px solid var(--studio-line); }
.footer-clients > div { margin-top: 50px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px 24px; align-items: center; }
.footer-clients span { color: #70736c; font-size: clamp(17px, 1.5vw, 24px); font-weight: 700; }
.footer-contact-strip { margin-top: 100px; padding-top: 42px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 60px; align-items: end; border-top: 1px solid var(--studio-line); }
.footer-contact-strip h2 { margin: 0; font-size: clamp(40px, 5vw, 72px); line-height: 1.05; }
.footer-contact-strip p { color: var(--studio-muted); }
.studio-footer .qr-pair { grid-template-columns: repeat(2, 132px); }
.studio-footer .qr-box img, .studio-footer .qr-placeholder { width: 132px; height: 132px; border-color: #34362f; border-radius: 6px; }
.studio-footer .qr-box figcaption { color: var(--studio-muted); }
.studio-footer-bottom { margin-top: 54px; padding-top: 18px; display: flex; justify-content: space-between; color: var(--studio-muted); font-size: 11px; border-top: 1px solid var(--studio-line); }
.footer-b { padding-top: 84px; background: #050604; }
.footer-b-grid { min-height: 410px; display: grid; grid-template-columns: 1fr 1fr; gap: 100px; }
.footer-wordmark { margin-bottom: 62px; font-size: 54px; }
.footer-ink-logo { width: max-content; display: grid; font-family: "InkWhisper Display", sans-serif; font-weight: 800; line-height: .78; }
.footer-b dl { margin: 0; display: grid; gap: 20px; }
.footer-b dl div { display: grid; grid-template-columns: 100px 1fr; gap: 24px; }
.footer-b dt { color: #777b72; }
.footer-b dd { margin: 0; color: #c7c9c2; }
.footer-b-grid > div > p { color: var(--studio-muted); }
.footer-b-grid h2 { margin: 0 0 50px; font-size: 34px; }
.footer-b-grid .qr-pair { margin-top: 34px; }

.studio-detail .detail-masthead { padding: 62px 0 44px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(430px, .6fr); gap: 80px; align-items: end; border-bottom: 1px solid var(--studio-line); }
.detail-masthead > div > span { color: var(--acid); font-size: 11px; }
.studio-detail .detail-masthead h1 { margin: 16px 0 0; font-size: clamp(44px, 6vw, 88px); line-height: 1.04; }
.studio-detail .detail-meta { margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; border: 0; }
.studio-detail .detail-meta div { padding: 13px 0; grid-template-columns: 120px 1fr; align-items: center; border-top: 1px solid var(--studio-line); }
.studio-detail .detail-meta div:last-child { border-bottom: 1px solid var(--studio-line); }
.studio-detail .detail-meta span { color: var(--studio-muted); }
.detail-lead { padding: 26px 0 70px; }
.detail-lead img { width: 100%; max-height: 820px; display: block; object-fit: cover; border-radius: 8px; }
.studio-detail .detail-copy { padding: 0 0 82px; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.studio-detail .detail-copy article { min-height: 180px; border-top-color: var(--studio-line); }
.studio-detail .detail-copy p { color: var(--studio-muted); font-size: 13px; }
.studio-detail .gallery-demo { gap: 18px; padding-bottom: 120px; }
.studio-detail .gallery-row { gap: 18px; }
.studio-detail .gallery-row img { border-radius: 8px; background: #151714; }
.related-studio { padding-bottom: 112px; }
.related-studio > header { margin-bottom: 30px; padding-bottom: 20px; display: flex; justify-content: space-between; align-items: end; border-bottom: 1px solid var(--studio-line); }
.related-studio h2 { margin: 0; font-size: clamp(34px, 4vw, 56px); }
.related-studio header a { color: var(--studio-muted); font-size: 12px; }
.studio-detail .related-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 0; }

@media (prefers-reduced-motion: no-preference) {
  .direction-a.a-studio-motion .studio-hero .hero-media { clip-path: inset(0 0 100% 0); animation: studio-image-reveal .9s .08s cubic-bezier(.16,1,.3,1) forwards; }
  .direction-a.a-studio-motion .hero-lockup h1 span { opacity: 0; transform: translateY(28%) scaleY(.82); animation: studio-type-reveal .75s .22s cubic-bezier(.16,1,.3,1) forwards; }
  .direction-a.a-studio-motion .hero-lockup p, .direction-a.a-studio-motion .hero-topline, .direction-a.a-studio-motion .hero-scroll { opacity: 0; animation: studio-fade .55s .62s ease forwards; }
  .studio-project-card.is-filter-entering { animation: studio-card-filter .42s cubic-bezier(.16,1,.3,1) both; }
}
@keyframes studio-image-reveal { to { clip-path: inset(0); } }
@keyframes studio-type-reveal { to { opacity: 1; transform: none; } }
@keyframes studio-fade { to { opacity: 1; } }
@keyframes studio-card-filter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
::view-transition-old(root) { animation: studio-view-old .18s ease both; }
::view-transition-new(root) { animation: studio-view-new .42s cubic-bezier(.16,1,.3,1) both; }
@keyframes studio-view-old { to { opacity: 0; filter: blur(5px); } }
@keyframes studio-view-new { from { opacity: 0; clip-path: inset(2% 0 0); } to { opacity: 1; clip-path: inset(0); } }

@media (max-width: 980px) {
  .studio-front .shell { width: min(100% - 40px, 1660px); }
  .hero-lockup, .statement-layout, .footer-a-grid, .studio-detail .detail-masthead { grid-template-columns: 1fr; }
  .hero-lockup { gap: 28px; }
  .hero-lockup h1 { font-size: clamp(54px, 9vw, 78px); }
  .hero-lockup p { position: static; }
  .studio-project-card, .studio-project-card.is-featured, .studio-project-card.is-featured + .studio-project-card, .studio-project-card.is-wide, .studio-project-card.is-wide + .studio-project-card { grid-column: span 6; }
  .people-list { grid-template-columns: 1fr 1fr; }
  .people-list article:last-child { grid-column: 1 / -1; }
  .studio-detail .detail-copy { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .footer-switcher { display: none; }
  .studio-front .shell { width: calc(100% - 28px); }
  .studio-front .studio-header { top: 54px; min-height: 62px; }
  .studio-front .studio-header .site-nav { gap: 12px; }
  .studio-front .studio-header .site-nav a:nth-child(2), .studio-front .studio-header .site-nav a:nth-child(3) { display: none; }
  .studio-hero { height: 620px; }
  .hero-topline { inset: 18px 18px auto; }
  .hero-lockup { inset: auto 18px 24px; }
  .hero-lockup h1 { font-size: clamp(28px, 7.5vw, 32px); }
  .hero-scroll { right: 18px; top: 60px; }
  .studio-work, .studio-services { padding: 78px 0; }
  .studio-section-head, .studio-services > header, .people-heading { align-items: start; grid-template-columns: 1fr; flex-direction: column; }
  .work-filters { justify-content: flex-start; }
  .studio-project-grid { gap: 38px 12px; }
  .studio-project-card, .studio-project-card.is-featured, .studio-project-card.is-featured + .studio-project-card, .studio-project-card.is-wide, .studio-project-card.is-wide + .studio-project-card { grid-column: 1 / -1; }
  .studio-project-card .cover { aspect-ratio: 1.12 / 1; }
  .studio-statement { padding: 78px 0; }
  .statement-layout h2 { font-size: 40px; }
  .service-rows article { min-height: 104px; grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .service-rows article b { display: none; }
  .people-list { grid-template-columns: 1fr; }
  .people-list article:last-child { grid-column: auto; }
  .studio-footer { padding-top: 64px; }
  .footer-capabilities { grid-template-columns: 1fr; }
  .footer-capabilities article { min-height: 145px; }
  .footer-clients > div { grid-template-columns: repeat(2, 1fr); }
  .footer-contact-strip, .footer-b-grid { grid-template-columns: 1fr; gap: 48px; }
  .footer-contact-strip { margin-top: 70px; }
  .footer-b-grid { min-height: 0; }
  .studio-footer .qr-pair { grid-template-columns: repeat(2, minmax(0, 132px)); }
  .studio-detail .detail-masthead { padding-top: 36px; gap: 34px; }
  .studio-detail .detail-meta div { grid-template-columns: 96px 1fr; }
  .detail-lead { padding-bottom: 46px; }
  .studio-detail .detail-copy { grid-template-columns: 1fr; }
  .studio-detail .gallery-row.cols-2, .studio-detail .gallery-row.cols-3 { grid-template-columns: 1fr; }
  .studio-detail .gallery-row.cols-2 img { height: auto; }
  .studio-detail .related-grid { display: grid; grid-template-columns: 1fr; }
}